AutoDict组件增强：checkbox增加全选按钮

www/src/components/AutoDict.vue

@@ -12,6 +12,7 @@
   </template>
 
   <template v-else-if="type === 'checkbox'">
+    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
     <el-checkbox-group v-model="modelValue" @change="handleUpdate">
       <el-row :gutter="20">
         <el-col v-for="item in itemArray" :key="item.value" :span="colSpan">
@@ -54,15 +55,41 @@
   const {type, code, col, modelValue} = toRefs(props)
   const itemArray = ref(null)
   const colSpan = 24 / col.value
+  const checkAll = ref(false)
+  const isIndeterminate = ref(true)
+
+  let allItems = []
 
   function handleUpdate(currentValue) {
+    if (type.value === 'checkbox') {
+      const checkedCount = currentValue.length
+      checkAll.value = checkedCount === allItems.length
+      isIndeterminate.value = checkedCount > 0 && checkedCount < allItems.length
+    }
     emit('update:modelValue', currentValue)
   }
 
+  function handleCheckAllChange(val) {
+    if (val) {
+      emit('update:modelValue', allItems)
+    } else {
+      emit('update:modelValue', [])
+    }
+    isIndeterminate.value = false
+  }
+
+  GetDictItems(code.value).then(response => {
+    itemArray.value = response
+    if (type.value === 'checkbox') {
+      itemArray.value.forEach((item) => {
+        console.log('add to items:' + item['value'])
+        allItems.push(item['value'])
+      })
+    }
+  })
+
   onMounted(() => {
-    GetDictItems(code.value).then(response => {
-      itemArray.value = response
-    })
+
   })
 </script>