行为权限勾选项及样式调整

src/components/auth/authAction.vue

@@ -19,30 +19,231 @@ export default {
           type: "group",
         },
       ],
+      // 系统数据
       systemListData: [
         {
           id: publicFunc.buildGuid("system"),
           label: "智慧餐厅",
           type: "system",
+          data: [
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "1F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11102)",
+                  floor: "1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "1F",
+                  location: "2层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "B1F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11101)",
+                  location: "1层-101 房间",
+                  floor: "B1F",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "B1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11103)",
+                  floor: "B1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+          ],
         },
         {
           id: publicFunc.buildGuid("system"),
           label: "停车系统",
           type: "system",
+          data: [
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "1F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11102)",
+                  floor: "1F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "2F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11101)",
+                  floor: "2F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "2F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11103)",
+                  floor: "2F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+          ],
         },
         {
           id: publicFunc.buildGuid("system"),
           label: "车辆系统",
           type: "system",
+          data: [
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "3F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11101)",
+                  floor: "3F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "3F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11103)",
+                  floor: "3F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+          ],
         },
         {
           id: publicFunc.buildGuid("system"),
           label: "会议预约系统",
           type: "system",
+          data: [
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "3F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11101)",
+                  floor: "3F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "3F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11103)",
+                  floor: "3F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+            {
+              id: publicFunc.buildGuid("floor"),
+              floor: "4F",
+              deviceList: [
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "结算设备(11101)",
+                  floor: "4F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "门禁设备(11102)",
+                  floor: "4F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+                {
+                  id: publicFunc.buildGuid("device"),
+                  name: "摄像头(11103)",
+                  floor: "4F",
+                  location: "1层-101 房间",
+                  position: "右上角",
+                },
+              ],
+            },
+          ],
         },
       ],
+      // 系统设备对象组
+      systemDeviceCollection: {},
+      deviceData: [],
       // 选中后添加的系统权限组
-      addedSytemMap: new Map(),
+      addedSystemMap: new Map(),
       addedSystemArr: [],
       // 树选择 -- 选择人员
       treeData: [
@@ -108,9 +309,130 @@ export default {
         },
       ],
       value: undefined,
+      checkAll: false,
+      checkedDeviceList: [],
+      plainOptions: [],
+      indeterminate: false,
     };
   },
+  created() {
+    this.initData();
+  },
   mounted() {},
+  watch: {
+    checkedObj: {
+      handler(value) {
+        if (value.groupChecked != "" && value.systemChecked) {
+          this.deviceData = [];
+          this.systemListData.forEach((v) => {
+            if (v.label === value.systemChecked) {
+              v.data.forEach((ele) => {
+                if (ele.deviceList.length > 0) {
+                  let device = ele.deviceList.map((n) => {
+                    return {
+                      content: n.name,
+                      value: n.id,
+                      id: n.id,
+                      location: n.location,
+                      position: n.position,
+                    };
+                  });
+                  this.deviceData.push({
+                    id: ele.id,
+                    floor: ele.floor || "--",
+                    deviceList: device,
+                  });
+                }
+              });
+            }
+          });
+
+          // 记忆当前应该勾选的设备
+          if (
+            this.addedSystemMap.has(
+              `${value.groupChecked}-${value.systemChecked}`
+            )
+          ) {
+            let obj = this.addedSystemMap.get(
+              `${value.groupChecked}-${value.systemChecked}`
+            );
+
+            if (JSON.stringify(obj) == "{}") {
+              this.checkedDeviceList = [];
+            } else {
+              let deviceArr = [];
+              for (let item in obj) {
+                deviceArr = deviceArr.concat(obj[item]);
+              }
+              // 当前系统下选中的设备
+              this.checkedDeviceList = deviceArr.map((v) => {
+                return v.id;
+              });
+            }
+          } else {
+            this.checkedDeviceList = [];
+          }
+        }
+      },
+      deep: true,
+    },
+    checkedDeviceList(data) {
+      if (
+        this.checkedObj.groupChecked != "" &&
+        this.checkedObj.systemChecked != ""
+      ) {
+        let currentKey = `${this.checkedObj.groupChecked}-${this.checkedObj.systemChecked}`;
+        if (data.length > 0) {
+          // 先将当前选中系统数据按照楼层区分
+          let currentSystemObj = {};
+          data.forEach((v) => {
+            let key = this.systemDeviceCollection[v].floor;
+            if (!currentSystemObj.hasOwnProperty(key)) {
+              currentSystemObj[key] = [
+                { id: v, name: this.systemDeviceCollection[v].name },
+              ];
+            } else {
+              currentSystemObj[key].push({
+                id: v,
+                name: this.systemDeviceCollection[v].name,
+              });
+            }
+          });
+          // console.log(currentSystemObj, "当前选中的系统数据按楼层区分");
+
+          this.addedSystemMap.set(currentKey, currentSystemObj);
+        }
+
+        if (data.length == 0) {
+          this.addedSystemMap.set(currentKey, {});
+        }
+
+        // 最终需要的数组
+        this.addedSystemArr = [];
+
+        this.addedSystemMap.forEach((list, i) => {
+          if (JSON.stringify(list) !== "{}") {
+            for (let key in list) {
+              let deviceArr = list[key].map((m) => {
+                return `[${m.name}]`;
+              });
+              let deviceId = list[key].map((m) => {
+                return m.id;
+              });
+              this.addedSystemArr.push({
+                id: publicFunc.buildGuid("checked"),
+                group: i.split("-")[0],
+                system: i.split("-")[1],
+                floor: key,
+                deviceName: deviceArr.join(" "),
+                deviceId: deviceId,
+              });
+            }
+          }
+        });
+      }
+    },
+  },
   methods: {
     requireImg,
     groupClick(data) {
@@ -119,7 +441,35 @@ export default {
     systemClick(data) {
       this.checkedObj.systemChecked = data;
     },
-    deleteEvent(data) {},
+    deleteEvent(data) {
+      let targetObj = this.addedSystemMap.get(`${data.group}-${data.system}`);
+      delete targetObj[data.floor];
+      // 改系统无选中楼层
+      this.addedSystemMap.set(`${data.group}-${data.system}`, targetObj);
+
+      // 若删除图层恰好为当前选中系统，改变当前设备选中状态
+      if (
+        this.checkedObj.groupChecked === data.group &&
+        this.checkedObj.systemChecked == data.system
+      ) {
+        if (JSON.stringify(targetObj) == "{}") {
+          this.checkedDeviceList = [];
+        } else {
+          let deviceArr = [];
+          for (let item in targetObj) {
+            deviceArr = deviceArr.concat(targetObj[item]);
+          }
+          this.checkedDeviceList = deviceArr.map((v) => {
+            return v.id;
+          });
+        }
+      }
+
+      // 移除当前选中项
+      this.addedSystemArr = this.addedSystemArr.filter((v) => {
+        return v.id !== data.id;
+      });
+    },
     // 打开新建权限行为组对话框
     createActionDialog() {
       this.visible.actionGroup = true;
@@ -137,6 +487,39 @@ export default {
     addUserEvent() {
       this.visible.user = false;
     },
+    initData() {
+      this.systemListData.forEach((v) => {
+        v.data.forEach((w) => {
+          w.deviceList.forEach((k) => {
+            this.systemDeviceCollection[k.id] = {
+              system: v.label,
+              name: k.name,
+              floor: w.floor || k.floor,
+            };
+          });
+        });
+      });
+    },
+
+    onCheckAllChange(e) {
+      console.log(e);
+      let currentDevice = [];
+      if (this.deviceData.length > 0) {
+        this.deviceData.forEach((v) => {
+          v.deviceList.forEach((w) => {
+            currentDevice.push(w.id);
+          });
+        });
+      }
+
+      if (e.target.checked) {
+        this.checkedDeviceList = currentDevice;
+        this.checkAll = true;
+      } else {
+        this.checkedDeviceList = [];
+        this.checkAll = false;
+      }
+    },
     cancelEvent() {},
     confirmEvent() {},
   },
@@ -206,7 +589,59 @@ export default {
             </div>
           </div>
         </div>
-        <div class="right-box"></div>
+        <div class="right-box">
+          <div class="right-box-inner">
+            <div class="right-box-inner-top">
+              <a-checkbox
+                :indeterminate="indeterminate"
+                :checked="checkAll"
+                @change="onCheckAllChange"
+                >全选</a-checkbox
+              >
+            </div>
+            <div class="right-box-inner-bottom">
+              <a-checkbox-group v-model="checkedDeviceList">
+                <div class="section" v-for="n in deviceData" :key="n.id">
+                  <div class="section-top">
+                    <div class="section-top-title">{{ n.floor }}</div>
+                    <div class="section-top-line"></div>
+                  </div>
+                  <div class="section-bottom">
+                    <div class="section-bottom-empty"></div>
+                    <div class="section-bottom-box">
+                      <a-checkbox
+                        v-for="item in n.deviceList"
+                        :key="item.id"
+                        :value="item.id"
+                        :class="{ click: checkedDeviceList.includes(item.id) }"
+                      >
+                        <template :label="item">
+                          <div class="inner-box">
+                            <img
+                              :src="requireImg('auth/menjin_blue.png')"
+                              class="icon-img"
+                              v-if="checkedDeviceList.includes(item.id)"
+                            />
+                            <img
+                              :src="requireImg('auth/menjin_gray.png')"
+                              class="icon-img"
+                              v-else
+                            />
+                            <span class="title-style">{{ item.content }}</span>
+                            <span class="info-style"
+                              >地点: {{ item.location }}
+                              {{ item.position }}</span
+                            >
+                          </div>
+                        </template>
+                      </a-checkbox>
+                    </div>
+                  </div>
+                </div>
+              </a-checkbox-group>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="auth-action-infolist">
@@ -232,10 +667,15 @@ export default {
                 />
                 <span class="selected-item">{{ item.system }}</span>
               </a-breadcrumb-item>
-              <!-- <a-breadcrumb-item>
+              <a-breadcrumb-item>
                 <img :src="requireImg('auth/role_blue.png')" class="icon-img" />
-                <span class="selected-item">{{ item.role }}</span>
-              </a-breadcrumb-item> -->
+                <span class="selected-item">{{ item.floor }}</span>
+              </a-breadcrumb-item>
+              <a-breadcrumb-item>
+                <span class="selected-item" style="color: #7f7f7f">{{
+                  item.deviceName
+                }}</span>
+              </a-breadcrumb-item>
             </a-breadcrumb>
           </div>
           <div class="close-btn" @click="deleteEvent(item)"></div>
@@ -310,7 +750,6 @@ export default {
   &-content {
     width: 100%;
     height: 50%;
-    // background: peachpuff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -397,6 +836,110 @@ export default {
       .right-box {
         height: 100%;
         width: 60%;
+        &-inner {
+          width: calc(100% - 10px);
+          height: calc(100% - 10px);
+          &-top {
+            width: 100%;
+            height: 30px;
+          }
+          &-bottom {
+            width: 100%;
+            height: calc(100% - 30px);
+            overflow: auto;
+            .ant-checkbox-group {
+              width: 100%;
+              .section {
+                width: 100%;
+                height: 250px;
+                margin-bottom: 10px;
+                &-top {
+                  width: 100%;
+                  height: 15%;
+                  // background: rebeccapurple;
+                  display: flex;
+                  align-items: center;
+                  &-title {
+                    width: 5%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    font-size: 16px;
+                    font-weight: 400;
+                  }
+                  &-line {
+                    width: 95%;
+                    height: 1px;
+                    border: 1px dashed #cccccc;
+                    display: flex;
+                    align-items: center;
+                  }
+                }
+                &-bottom {
+                  width: 100%;
+                  height: 85%;
+                  display: flex;
+                  &-empty {
+                    width: 5%;
+                    height: 100%;
+                  }
+                  &-box {
+                    width: 95%;
+                    height: 100%;
+                    // background: rgb(255, 165, 0, 0.1);
+                    overflow: auto;
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-content: space-between;
+                    /deep/.ant-checkbox-wrapper {
+                      width: 230px;
+                      height: 90px;
+                      background: #f2f2f2;
+                      border-radius: 4px;
+                      margin-right: 20px;
+                      margin-left: 0px;
+                      padding-top: 1px;
+                      display: inline-block;
+                      &.click {
+                        background: #edf5fa;
+                        color: @fontColor;
+                      }
+
+                      .inner-box {
+                        width: 100%;
+                        height: 100%;
+                        position: relative;
+                        .icon-img {
+                          width: 14px;
+                          height: 14px;
+                          margin-left: 10px;
+                          margin-right: 10px;
+                          position: absolute;
+                          left: 18px;
+                          top: 0px;
+                        }
+
+                        .title-style {
+                          position: absolute;
+                          left: 63px;
+                          top: -8px;
+                          line-height: 30px;
+                        }
+                        .info-style {
+                          position: absolute;
+                          left: 28px;
+                          top: 22px;
+                          line-height: 30px;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
@@ -419,7 +962,7 @@ export default {
         font-size: 16px;
         position: relative;
         .left-content {
-          width: 60%;
+          width: 80%;
           height: 40px;
           display: flex;
           align-items: center;

src/components/auth/authRole.vue

@@ -275,7 +275,6 @@ export default {
         }
       },
       deep: true,
-      // immediate: true,
     },
     checkedUsers(data) {
       if (