push

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

@@ -0,0 +1,177 @@
+<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>