SaaS-lib/nervui-smart-community-op/src/components/drawer/drawerComponents/formComponents/overDot.vue

<template>
  <a-form-item-rest>
    <div class="overDot">
      <a-radio-group v-model:value="radioData" @change="handleChange">
        <a-radio :style="radioStyle" :value="6"> 不超过发起人向上的 </a-radio>
        <a-radio :style="radioStyle" :value="7"> 组织架构中的 </a-radio>
      </a-radio-group>
      <div class="options">
        <ns-select
          style="width: 200px; display: block; margin-bottom: 10px"
          :disabled="radioData !== 6"
          :options="opt1"
          v-model:value="levelData[6]" />
        <ns-select
          style="width: 200px; display: block"
          :disabled="radioData !== 7"
          :options="opt2"
          v-model:value="levelData[7]" />
      </div>
    </div>
  </a-form-item-rest>
</template>
<script>
  import { ref, defineComponent, watch, reactive, nextTick } from 'vue';
  export default defineComponent({
    components: {},
    props: {
      value: {
        type: Array,
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      let data = ref([]);
      let radioData = ref();
      let levelData = ref([]);
      if (props.value) {
        nextTick(() => {
          data.value = props.value;
          radioData.value = props.value[0];
          levelData.value[props.value[0]] = props.value[1];
          emit('change', data.value);
        });
      }
      let options = [
        {
          label: '不超过发起人向上的',
          value: 6,
        },
        {
          label: '组织架构中的',
          value: 7,
        },
      ];
      let opt1 = [
        {
          label: '1级主部门负责人',
          value: 1,
        },
        {
          label: '2级主部门负责人',
          value: 2,
        },
        {
          label: '3级主部门负责人',
          value: 3,
        },
        {
          label: '4级主部门负责人',
          value: 4,
        },
        {
          label: '5级主部门负责人',
          value: 5,
        },
        {
          label: '6级主部门负责人',
          value: 6,
        },
        {
          label: '7级主部门负责人',
          value: 7,
        },
        {
          label: '8级主部门负责人',
          value: 8,
        },
        {
          label: '9级主部门负责人',
          value: 9,
        },
        {
          label: '10级主部门负责人',
          value: 10,
        },
      ];
      let opt2 = [
        {
          label: '最高级主部门负责人',
          value: 1,
        },
        {
          label: '第2级主部门负责人',
          value: 2,
        },
        {
          label: '第3级主部门负责人',
          value: 3,
        },
        {
          label: '第4级主部门负责人',
          value: 4,
        },
        {
          label: '第5级主部门负责人',
          value: 5,
        },
        {
          label: '第6级主部门负责人',
          value: 6,
        },
        {
          label: '第7级主部门负责人',
          value: 7,
        },
        {
          label: '第8级主部门负责人',
          value: 8,
        },
        {
          label: '第9级主部门负责人',
          value: 9,
        },
        {
          label: '10级主部门负责人',
          value: 10,
        },
      ];
      const radioStyle = reactive({
        display: 'flex',
        lineHeight: '40px',
      });
      const handleChange = () => {
        levelData.value = [];
      };
      watch(
        () => levelData.value,
        (value) => {
          data.value = [radioData.value, value[radioData.value]];
          emit('change', data.value);
        },
        {
          deep: true,
        },
      );
      return {
        data,
        options,
        radioStyle,
        opt1,
        opt2,
        radioData,
        levelData,
        handleChange,
      };
    },
  });
</script>
<style lang="less" scoped>
  .overDot {
    display: flex;
    align-items: center;
    .options {
      line-height: 40px;
    }
  }
</style>