全选功能增加

src/components/ruleConditionContainer/index.vue

@@ -19,13 +19,13 @@
           </el-select>
         </el-col>
         <el-col :span="13">
-          <template v-if="item.attrType == 'radio'" >
+          <template v-if="item.attrType == 'radio'">
             <el-select v-model="item.min" placeholder="选择值" clearable filterable :disabled="disabled">
               <el-option v-for="dictLabalitem in item.dictLabal" :key="dictLabalitem.id" :label="dictLabalitem.name"
                 :value="dictLabalitem.code" />
             </el-select>
           </template>
-          <template v-if="item.attrType == 'checkbox'" >
+          <template v-if="item.attrType == 'checkbox'">
             <el-select v-model="item.minArray" placeholder="选择值" clearable filterable multiple :disabled="disabled"
               @change="change($event, index)">
               <el-option v-for="dictLabalitem in item.dictLabal" :key="dictLabalitem.id" :label="dictLabalitem.name"
@@ -69,7 +69,13 @@
           </template>
           <template v-if="item.attrType == 'select'">
             <el-select v-model="item.minArray" placeholder="选择值" clearable filterable multiple :disabled="disabled"
-              @change="change($event, index)">
+              @change="change($event, index, item)">
+              <template #header>
+                <el-checkbox v-model="item.checkAll" :indeterminate="item.indeterminate"
+                  @change="(val) => handleCheckAll(item, index, val)">
+                  全选
+                </el-checkbox>
+              </template>
               <el-option v-for="dictLabalitem in item.dictLabal" :key="dictLabalitem.id" :label="dictLabalitem.name"
                 :value="item.attrName == '车辆类型' ? dictLabalitem.code : dictLabalitem.name" />
             </el-select>
@@ -103,18 +109,21 @@
                 </el-col>
               </template>
               <template v-if="item.operator == '3'">
-                <el-col :span="24"> <el-date-picker v-model="item.min" :disabled="disabled" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-                    value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
+                <el-col :span="24"> <el-date-picker v-model="item.min" :disabled="disabled" type="datetime"
+                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
+                    placeholder="选择日期时间" style="width: 100%;">
                   </el-date-picker></el-col>
               </template>
               <template v-if="item.operator == '4'">
-                <el-col :span="24"><el-date-picker v-model="item.max" :disabled="disabled" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-                    value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
+                <el-col :span="24"><el-date-picker v-model="item.max" :disabled="disabled" type="datetime"
+                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
+                    placeholder="选择日期时间" style="width: 100%;">
                   </el-date-picker></el-col>
               </template>
               <template v-if="item.operator == '5'">
-                <el-col :span="24"> <el-date-picker v-model="item.max" :disabled="disabled" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-                    value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
+                <el-col :span="24"> <el-date-picker v-model="item.max" :disabled="disabled" type="datetime"
+                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
+                    placeholder="选择日期时间" style="width: 100%;">
                   </el-date-picker></el-col>
 
               </template>
@@ -127,9 +136,9 @@
             <Delete />
           </el-icon>
         </el-col>
-          <el-col :span="2">
-              <el-checkbox v-if="item.attrName === '车牌号'" @change="licenseNoSelect($event, item)">全选</el-checkbox>
-          </el-col>
+        <el-col :span="2">
+          <el-checkbox v-if="item.attrName === '车牌号'" @change="licenseNoSelect($event, item)">全选</el-checkbox>
+        </el-col>
       </el-row>
     </div>
   </div>
@@ -137,6 +146,7 @@
 
 <!-- 行为区域 -->
 <script lang='ts' setup>
+import type { CheckboxValueType } from 'element-plus'
 const props = defineProps<{
   rulesAttrList: any[],//list集合
   disabled?: boolean,
@@ -147,20 +157,54 @@ const attrDel = (index: number) => {
   emits('Del', index)
 }
 
-const change = (e: string[] | undefined, index: number) => {
+const change = (e: string[] | undefined, index: number, item: any) => {
+  if (item?.attrType == 'select') {
+    if (item.minArray.length === 0) {
+      item.checkAll = false
+      item.indeterminate = false
+    } else if (item.minArray.length === item.dictLabal.length) {
+      item.checkAll = true
+      item.indeterminate = false
+    } else {
+      item.indeterminate = true
+    }
+  }
   emits('selectChange', { e, index })
 }
 
 const licenseNoSelect = (e, item) => {
-    if(e) {
-        item.minArray = item.dictLabal.map(a => {
-            return a.name
-        })
-    } else {
-        item.minArray = []
-    }
+  if (e) {
+    item.minArray = item.dictLabal.map(a => {
+      return a.name
+    })
+  } else {
+    item.minArray = []
+  }
 }
 
+const checkAll = ref(false)
+const indeterminate = ref(false)
+watch(() => props.rulesAttrList, (val) => {
+  if (val.length === 0) {
+    checkAll.value = false
+    indeterminate.value = false
+  } else if (val.length === cities.value.length) {
+    checkAll.value = true
+    indeterminate.value = false
+  } else {
+    indeterminate.value = true
+  }
+})
+
+const handleCheckAll = (item, index: number, val: boolean) => {
+
+  item.indeterminate = false
+  if (val) {
+    item.minArray = item.dictLabal.map((_) => _.attrName == '车辆类型' ? _.code : _.name)
+  } else {
+    item.minArray = []
+  }
+}
 onMounted(() => {
   console.log('规则数据', props.rulesAttrList)
 })