feat: 连选功能

src/components/CheckCoiumns/checkInput.vue

@@ -4,7 +4,12 @@
       <el-checkbox
         :disabled="status"
         :model="i.check"
-        @change="input"
+        @change="
+          e => {
+            checkOne(i, e)
+            input()
+          }
+        "
         label=""
       >
       </el-checkbox>
@@ -34,12 +39,15 @@ export default {
       type: String,
       default: ''
     },
+    merge: {
+      type: Boolean,
+      default: false
+    },
     status: {
       type: Boolean,
       default: false
     },
     defaultValue: {
-      
       default: ''
     }
   },
@@ -67,13 +75,44 @@ export default {
   mounted() {
     if (this.defaultValue) {
       this.model = this.defaultValue
-  this.$emit('changeVal', { name: this.prop, val: this.model})
+      this.$emit('changeVal', { name: this.prop, val: this.model })
       this.$emit('makeRecord', { name: this.prop, record: this.result })
     } else {
       this.reset()
     }
   },
   methods: {
+    mergeSource({ name, flag }) {
+      if (this.status) {
+        return
+      }
+      let old = this.model.value || []
+      this.model.list.map(i => {
+        if (name) {
+          if (Array.isArray(old) && flag.includes(String(i.id))) {
+            i.check = true
+            old.push(i.id)
+          }
+        } else {
+          if (flag.includes(String(i.id))) {
+            i.check = false
+            old = this.removeItem(old, i.id) || []
+          }
+        }
+      })
+      console.log(this.model.list)
+
+      this.model.value = old
+    },
+
+    checkOne(i, e) {
+      if (this.merge) {
+        this.$emit('mergeVal', {
+          name: e,
+          flag: i.flag ? i.flag.split(',') : []
+        })
+      }
+    },
     input(val) {
       let arr = []
       this.mdoel.list.map(i => {
@@ -89,9 +128,11 @@ export default {
       this.items.options.map(i => {
         this.model.list.push({
           value: '',
+          id: i.id,
           check: false,
           useCaseNo: i.useCaseNo,
-          key: i.value
+          key: i.value,
+          flag: i.flag
         })
       })
     }

src/components/CheckCoiumns/checkInputUpload.vue

@@ -5,7 +5,12 @@
         <el-checkbox
           :disabled="status"
           v-model="model.list[k].check"
-          @change="input"
+          @change="
+            e => {
+              checkOne(i, e)
+              input()
+            }
+          "
           label=""
         >
         </el-checkbox>
@@ -62,6 +67,10 @@ export default {
       type: String,
       default: ''
     },
+    merge: {
+      type: Boolean,
+      default: false
+    },
     status: {
       type: Boolean,
       default: false
@@ -109,6 +118,37 @@ export default {
     }
   },
   methods: {
+    mergeSource({ name, flag }) {
+      if (this.status) {
+        return
+      }
+      let old = this.model.value || []
+      this.model.list.map(i => {
+        if (name) {
+          if (Array.isArray(old) && flag.includes(String(i.id))) {
+            i.check = true
+            old.push(i.id)
+          }
+        } else {
+          if (flag.includes(String(i.id))) {
+            i.check = false
+            old = this.removeItem(old, i.id) || []
+          }
+        }
+      })
+      console.log(this.model.list)
+
+      this.model.value = old
+    },
+
+    checkOne(i, e) {
+      if (this.merge) {
+        this.$emit('mergeVal', {
+          name: e,
+          flag: i.flag ? i.flag.split(',') : []
+        })
+      }
+    },
     input(val) {
       let arr = []
       this.model.list.map(i => {
@@ -126,7 +166,9 @@ export default {
           value: '',
           check: false,
           useCaseNo: i.useCaseNo,
-          key: i.value
+          key: i.value,
+          id: i.id,
+          flag: i.flag
         })
       })
     },

src/components/CheckCoiumns/checkbox.vue

 <template>
   <el-checkbox-group v-model="value" :disabled="status" @change="input">
-    <el-checkbox v-for="(i, k) in items.options" :label="i.id" :key="k">
+    <el-checkbox
+      v-for="(i, k) in items.options"
+      :label="i.id"
+      @change="
+        e => {
+          checkOne(i, e)
+        }
+      "
+      :key="k"
+    >
       {{ i.object }}
     </el-checkbox>
   </el-checkbox-group>
@@ -23,6 +32,10 @@ export default {
     defaultValue: {
       default: ''
     },
+    merge: {
+      type: Boolean,
+      default: false
+    },
     result: {
       default: ''
     }
@@ -40,26 +53,62 @@ export default {
       this.value = []
       this.$emit('changeVal', { name: this.prop, val: [] })
       this.$emit('makeRecord', { name: this.prop, record: [] })
-
     }
   },
   mounted() {
     if (this.defaultValue) {
       this.value = this.defaultValue
-      this.$emit('changeVal', { name: this.prop, val: this.result})
+      this.$emit('changeVal', { name: this.prop, val: this.result })
       this.$emit('makeRecord', { name: this.prop, record: this.result })
     } else {
       this.reset()
     }
   },
   methods: {
+    mergeSource({ name, flag }) {
+      if (this.status) {
+        return
+      }
+      let old = this.value || []
+      this.items.options.map(i => {
+        if (name) {
+          if (Array.isArray(old) && flag.includes(String(i.id))) {
+            old.push(i.id)
+          }
+        } else {
+          if (flag.includes(String(i.id))) {
+            old = this.removeItem(old, i.id) || []
+          }
+        }
+      })
+      this.value = old
+    },
+
+    removeItem(array, item) {
+      const index = array.indexOf(item)
+      if (index !== -1) {
+        array.splice(index, 1)
+      }
+    },
+
+    checkOne(i, e) {
+
+      if (this.merge) {
+        this.$emit('mergeVal', {
+          name: e,
+          flag: i.flag ? i.flag.split(',') : []
+        })
+      }
+    },
     input(val) {
       let arr = []
+      let datas = []
       this.items.options.map(i => {
         if (this.value.includes(i.id)) {
           arr.push(i.useCaseNo)
         }
       })
+
       this.$emit('changeVal', { name: this.prop, val: arr.join(',') })
       this.$emit('makeRecord', { name: this.prop, record: this.value })
     },

src/components/CheckCoiumns/checkboxUpload.vue

 <template>
   <div class="checkbox-upload">
     <el-checkbox-group :disabled="status" v-model="model.value" @change="input">
-      <el-checkbox v-for="(i, k) in items.options" :label="i.id" :key="k">
+      <el-checkbox
+        v-for="(i, k) in items.options"
+        :label="i.id"
+        @change="
+          e => {
+            checkOne(i, e)
+          }
+        "
+        :key="k"
+      >
         {{ i.object }}
       </el-checkbox>
     </el-checkbox-group>
@@ -42,6 +51,10 @@ export default {
       type: String,
       default: ''
     },
+    merge: {
+      type: Boolean,
+      default: false
+    },
     status: {
       type: Boolean,
       default: false
@@ -84,6 +97,40 @@ export default {
     }
   },
   methods: {
+    mergeSource({ name, flag }) {
+      if (this.status) {
+        return
+      }
+      let old = this.model.value || []
+      this.items.options.map(i => {
+        if (name) {
+          if (Array.isArray(old) && flag.includes(String(i.id))) {
+            old.push(i.id)
+          }
+        } else {
+          if (flag.includes(String(i.id))) {
+            old = this.removeItem(old, i.id) || []
+          }
+        }
+      })
+      this.model.value = old
+    },
+
+    removeItem(array, item) {
+      const index = array.indexOf(item)
+      if (index !== -1) {
+        array.splice(index, 1)
+      }
+    },
+
+    checkOne(i, e) {
+      if (this.merge) {
+        this.$emit('mergeVal', {
+          name: e,
+          flag: i.flag ? i.flag.split(',') : []
+        })
+      }
+    },
     input() {
       let arr = []
       this.items.options.map(i => {

src/components/checkBuilder.vue

 <template>
   <el-form ref="queryForm" :model="form" class="formClass">
+    <div class="btn-group">
+      <el-radio-group v-model="merge">
+        <el-radio-button :label="true">强关联选择对象 </el-radio-button>
+        <el-radio-button :label="false">自主选择对象</el-radio-button>
+      </el-radio-group>
+    </div>
     <el-row :gutter="30">
       <el-col v-for="(item, index) in schemas" :key="index" :span="12">
         <div class="check-card">
@@ -34,10 +40,13 @@
                 :is="item.type"
                 :status="item.status"
                 :prop="item.key"
+                :mergeSource="mergeSource"
                 :items="item.componentProps"
                 :defaultValue="item.record ? item.record.defaultValue : ''"
                 :result="item.result"
+                :merge="merge"
                 @changeVal="changeVal"
+                @mergeVal="mergeVal"
                 @makeRecord="makeRecord"
                 ref="formItem"
               ></component>
@@ -66,7 +75,10 @@ export default {
   data() {
     return {
       form: {},
-      record: []
+      record: [],
+      merge: true,
+      mergeArr: [],
+      mergeSource: []
     }
   },
   computed: {
@@ -112,6 +124,13 @@ export default {
         this.$refs.queryForm.clearValidate(name)
       })
     },
+    mergeVal(e) {
+      this.$refs.formItem.map(i => {
+        if (typeof i.mergeSource == 'function') {
+          i.mergeSource(e)
+        }
+      })
+    },
     makeRecord(data) {
       const { name, record } = data
       if (!this.record[name]) {
@@ -124,7 +143,6 @@ export default {
       this.$nextTick(() => {
         this.$refs.queryForm.clearValidate(name)
       })
-
     },
     checkItem(prop, value, cb) {
       if (!prop.status) {
@@ -207,4 +225,9 @@ export default {
     margin-bottom: 0;
   }
 }
+.btn-group {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>