update 数据字典多选框增加全选功能

src/components/dict/JMultiSelectTag.vue

@@ -1,5 +1,6 @@
 <template>
   <a-checkbox-group v-if="tagType==='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
+    <a-checkbox :key="-1" :value="selectedAllValue" v-if="openSelectedAll && dictOptions.length > 0">{{ $t('checkedAll') }}</a-checkbox>
     <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
   </a-checkbox-group>
 
@@ -7,6 +8,8 @@
     v-else-if="tagType==='select'"
     :value="arrayValue"
     @change="onChange"
+    @select="onSelect"
+    @deselect="onDeselect"
     :disabled="disabled"
     mode="multiple"
     :placeholder="placeholder"
@@ -14,14 +17,19 @@
     optionFilterProp="children"
     :filterOption="filterOption"
     allowClear
-    v-bind="$attrs"
+    v-bind="$attrs">
-    :options="dictOptions">
+    <a-select-option :key="-1" :value="selectedAllValue" v-if="openSelectedAll && dictOptions.length > 0">{{ $t('checkedAll') }}</a-select-option>
+    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-select-option>
   </a-select>
 
 </template>
 
 <script>
 import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+
+// 全选的value
+const selectedAllValue = '__all'
+
 export default {
   name: 'JMultiSelectTag',
   props: {
@@ -29,8 +37,16 @@ export default {
     placeholder: String,
     disabled: Boolean,
     value: String,
-    type: String,
+    type: {
+      type: String,
+      default: 'select'
+    },
     options: Array,
+    // 是否需要全选
+    openSelectedAll: {
+      type: Boolean,
+      default: false
+    },
     spliter: {
       type: String,
       required: false,
@@ -44,6 +60,8 @@ export default {
   },
   data () {
     return {
+      // 全选的value
+      selectedAllValue,
       dictOptions: [],
       tagType: '',
       arrayValue: !this.value ? [] : this.value.split(this.spliter)
@@ -70,11 +88,19 @@ export default {
         this.initDictData()
       }
     },
-    value (val) {
+    value: {
-      if (!val) {
+      immediate: true,
-        this.arrayValue = []
+      handler (val) {
-      } else {
+        if (!val) {
-        this.arrayValue = this.value.split(this.spliter)
+          this.arrayValue = []
+        } else {
+          const list = this.value.split(this.spliter)
+          // 开启全选后如果所有项都被勾选要回显全选
+          if (this.openSelectedAll && (list.length === this.dictOptions.length)) {
+            list.unshift(selectedAllValue)
+          }
+          this.arrayValue = list
+        }
       }
     }
   },
@@ -98,8 +124,59 @@ export default {
       }
     },
     onChange (selectedValue) {
+      // 如果开启全选，并且是复选框时，判断是全选还是取消勾选
+      if (this.openSelectedAll && this.tagType === 'checkbox') {
+        const findAllBefore = this.arrayValue.includes(selectedAllValue)
+        const findAllAfter = selectedValue.includes(selectedAllValue)
+        // 之前选了，之后没选就是取消所有勾选
+        if (findAllBefore && !findAllAfter) {
+          selectedValue = []
+        } else if (!findAllBefore && findAllAfter) {
+          // 之前没选，之后选了就是全部勾选
+          selectedValue = this.dictOptions.map(item => item.value)
+        }
+      }
+
       this.arrayValue = selectedValue
-      this.$emit('change', selectedValue.join(this.spliter))
+      // 开启全选时，不把全选的value进行返回
+      if (this.openSelectedAll) {
+        this.$emit('change', selectedValue.filter(item => item !== selectedAllValue).join(this.spliter))
+      } else {
+        this.$emit('change', selectedValue.join(this.spliter))
+      }
+    },
+    // 选中的回调
+    onSelect (value) {
+      // 没有开启全选就直接退出
+      if (!this.openSelectedAll) {
+        return
+      }
+      this.$nextTick(() => {
+        // 勾选全选就把所有项选中
+        if (value === selectedAllValue) {
+          this.onChange([selectedAllValue, ...this.dictOptions.map(item => item.value)])
+        } else if (this.arrayValue.length === this.dictOptions.length) {
+          // 勾选其他就判断是否全部勾选，如果已经全部勾选，把全选勾上
+          this.arrayValue.unshift(selectedAllValue)
+          this.onChange(this.arrayValue)
+        }
+      })
+    },
+    // 取消选中的回调
+    onDeselect (value) {
+      // 没有开启全选就直接退出
+      if (!this.openSelectedAll) {
+        return
+      }
+      this.$nextTick(() => {
+        // 如果取消全选就把所有项取消勾选
+        if (value === selectedAllValue) {
+          this.onChange([])
+        } else {
+          // 如果取消了任意一个，就把全选给取消勾选
+          this.onChange(this.arrayValue.filter(item => item !== selectedAllValue))
+        }
+      })
     },
     getParentContainer (node) {
       if (!this.popContainer) {