web-live/src/views/techolchat/list/detail-model/parts-models/thr.vue

<template>
  <div id="thr">
    <el-row>
      <el-col :span="24" class="main">
        <el-form :model="form" :rules="rules" ref="form" label-width="90px">
          <el-col :span="24" class="thrList" v-for="(i, index) in question" :key="`thr${index}`">
            <el-col :span="2" class="label">
              {{ i.label }}
            </el-col>
            <el-col :span="21" class="select">
              <el-col :span="4" class="chiList" v-for="(f, index) in i.children" :key="`children${index}`">
                <el-col :span="24" class="chi_label">
                  {{ f.label }}
                </el-col>
                <el-col :span="24" class="chi_select">
                  <el-select v-model="form[f.model]" :disabled="disabled[f.model]" @change="toChange">
                    <el-option v-for="(item, index) in getList(f.list)" :key="index" :value="item" :label="item"></el-option>
                  </el-select>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { three } from '../fields.js';
import * as select from '../select.js';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'thr',
  props: {
    form: { type: Object },
    rules: { type: Object },
  },
  model: {
    prop: 'form',
    event: 'change',
  },
  components: {},
  data: function() {
    return {
      disabled: {},
      question: three,
    };
  },
  created() {},
  methods: {
    // 获取列表
    getList(type) {
      return select[type];
    },
    // 修改disabled
    toChange() {
      const d1 = _.get(this.form, 'charge');
      const d2 = _.get(this.form, 'gnum');
      let obj = {};
      if (d1 === '无技术团队') {
        const r = three.find(f => f.model === 'group');
        if (r) {
          const { children } = r;
          const keys = _.drop(children, 1).map(i => i.model);
          for (const key of keys) {
            obj[key] = true;
          }
        }
      }
      if (d2 === '无顾问团队') {
        const r = three.find(f => f.model === 'gw_group');
        if (r) {
          const { children } = r;
          const keys = _.drop(children, 1).map(i => i.model);
          for (const key of keys) {
            obj[key] = true;
          }
        }
      }
      this.$set(this, `disabled`, obj);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .thrList {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .label {
      font-size: 14px;
      color: #606266;
      margin: 0 7px 0 0;
      padding: 5px 0;
    }
    .select {
      width: 90.8%;
      .chiList {
        width: 15.6%;
        margin: 0 10px 0 0;
        .chi_label {
          text-align: center;
          font-size: 14px;
          color: #606266;
          padding: 5px 0;
        }
      }
      .chiList:last-child {
        margin: 0;
      }
    }
  }
  .thrList:last-child {
    border-bottom: none;
  }
}
</style>