语音广播，情报板。新增全选

ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

@@ -63,6 +63,15 @@
               <el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key">
                 <div v-if="item.list.length > 0">
                   <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
+
+                    <!-- 全选按钮 -->
+                    <el-checkbox
+                      :indeterminate="isIndeterminate"
+                      v-model="checkAll"
+                      @change="handleCheckAllChange"
+                    >
+                      全选
+                    </el-checkbox>
                     <el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index"
                       :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
                       <el-tooltip content="设备未接入" placement="top"
@@ -331,6 +340,7 @@ export default {
         this.editDialog.tpl = null;
       }
     },
+
     // boardSizeDic: function (newVal, oldVal) {
     //   console.log(newVal, 'selectedSize')
     //   if (newVal.length == 0) {
@@ -398,6 +408,25 @@ export default {
     },
   },
   methods: {
+    handleCheckAllChange(val) {
+      this.checkedDeviceIds = val ? this.getAllDeviceIds() : [];
+
+      this.isIndeterminate = false;
+    },
+    getAllDeviceIds() {
+      // 使用 Object.values 遍历对象
+      return Object.values(this.boardSizeDic).reduce((acc, item) => {
+        acc.push(...item.list.filter(itm => itm.iotDeviceId && !itm.iotDeviceId.includes('null') && !(itm.deviceState === 0 || itm.deviceState === null)).map(itm => itm.iotDeviceId));
+        return acc;
+      }, []);
+    },
+    updateCheckAllStatus() {
+      const allDeviceIds = this.getAllDeviceIds();
+      const checkedCount = this.checkedDeviceIds.length;
+      this.checkAll = checkedCount === allDeviceIds.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < allDeviceIds.length;
+    },
+
     ____boardTxtStyle() {
       return {
         color: "#F00",

ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue

@@ -60,7 +60,16 @@
         <div style="flex:1; height: 0; padding:0 10px 10px">
           <vuescroll :ops="scrollOptions">
             <template v-if="deviceList.length> 0">
+
               <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
+                <!-- 全选按钮 -->
+                <el-checkbox
+                  :indeterminate="isIndeterminate"
+                  v-model="checkAll"
+                  @change="handleCheckAllChange"
+                >
+                  全选
+                </el-checkbox>
                 <el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index"
                   :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null">
                   <el-tooltip content="设备未接入" placement="top"
@@ -261,6 +270,18 @@ export default {
         this.editDialog.tpl = null;
       }
     },
+    checkedDeviceIds: {
+      handler(val) {
+        const allDeviceIds = this.deviceList
+          .filter(itm => !(!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null))
+          .map(itm => itm.iotDeviceId);
+
+        const checkedCount = val.length;
+        this.checkAll = checkedCount === allDeviceIds.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < allDeviceIds.length;
+      },
+      deep: true
+    },
     // boardSizeDic: function (newVal, oldVal) {
     //   console.log(newVal, 'selectedSize')
     //   if (newVal.length == 0) {
@@ -290,6 +311,14 @@ export default {
     ...mapState(["menu"]),
   },
   methods: {
+    handleCheckAllChange(val) {
+      const allDeviceIds = this.deviceList
+        .filter(itm => !(!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null))
+        .map(itm => itm.iotDeviceId);
+
+      this.checkedDeviceIds = val ? allDeviceIds : [];
+      this.isIndeterminate = false;
+    },
     ____boardTxtStyle() {
       return {
         color: "#F00",
@@ -635,6 +664,7 @@ export default {
 
     // 多选
     ____onSelectDevices(arr) {
+      this.updateCheckAllStatus();
 
       this.selectedDevices = [];
       if (this.checkedDeviceIds.length == 0) {