1.角色，行为模块保存取消事件；2. 权限查看界面及信息表格

src/components/auth/authAction.vue

@@ -308,7 +308,8 @@ export default {
           ],
         },
       ],
-      value: undefined,
+      treeValue: [],
+      treeLabelArr: [],
       checkAll: false,
       checkedDeviceList: [],
       plainOptions: [],
@@ -432,6 +433,17 @@ export default {
         });
       }
     },
+    treeValue(data) {
+      this.treeLabelArr = [];
+      if (data.length > 0) {
+        data.forEach((v) => {
+          this.treeLabelArr.push({
+            id: publicFunc.buildGuid("label"),
+            label: v,
+          });
+        });
+      }
+    },
   },
   methods: {
     requireImg,
@@ -520,8 +532,22 @@ export default {
         this.checkAll = false;
       }
     },
-    cancelEvent() {},
-    confirmEvent() {},
+    cancelEvent() {
+      this.checkedObj.groupChecked = "";
+      this.checkedObj.systemChecked = "";
+      this.checkedDeviceList = []
+      this.addedSystemMap.clear()
+      this.addedSystemArr=[]
+    },
+    confirmEvent() {
+      this.$message.success("信息保存成功!");
+      this.cancelEvent()
+    },
+    deleteLabel(data) {
+      this.treeValue = this.treeValue.filter((v) => {
+        return data.label !== v;
+      });
+    },
   },
 };
 </script>
@@ -690,7 +716,7 @@ export default {
             <div class="top-section-inner-select">
               <a-tree-select
                 show-search
-                v-model="value"
+                v-model="treeValue"
                 multiple
                 :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                 placeholder="请选择查询内容"
@@ -716,7 +742,18 @@ export default {
           </div>
         </div>
         <div class="bottom-section">
-          <div class="bottom-section-extra-box"></div>
+          <div class="bottom-section-extra-box">
+            <div
+              class="single-label"
+              v-for="item in treeLabelArr"
+              :key="item.id"
+            >
+              <div class="single-label-text">{{ item.label }}</div>
+              <div class="single-label-close-btn" @click="deleteLabel(item)">
+                <a-icon type="close"></a-icon>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -739,7 +776,6 @@ export default {
   &-title {
     width: 100%;
     height: 5%;
-    // background: rgba(200, 200, 255, 0.5);
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -1080,6 +1116,39 @@ export default {
           width: calc(90% - 10px);
           height: calc(90% - 10px);
           border: 1px solid rgba(240, 241, 242, 0.3);
+          display: flex;
+          align-content: center;
+          .single-label {
+            width: 150px;
+            min-width: 150px;
+            max-width: 200px;
+            height: 30px;
+            color: rgba(0, 0, 0, 0.65);
+            padding: 0 20px 0 10px;
+            border: 1px solid #e8e8e8;
+            background-color: #fafafa;
+            border-radius: 2px;
+            margin-right: 10px;
+            position: relative;
+            &-text {
+              position: absolute;
+              left: 3px;
+              top: 4px;
+            }
+            &-close-btn {
+              cursor: pointer;
+              right: 3px;
+              top: 7px;
+              position: absolute;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: rgb(127, 127, 127, 0.2);
+              &:hover {
+                color: rgba(0, 0, 0, 0.65);
+              }
+            }
+          }
         }
       }
     }

src/components/auth/authRole.vue

@@ -234,7 +234,8 @@ export default {
           ],
         },
       ],
-      value: undefined,
+      treeValue: [],
+      treeLabelArr: [],
     };
   },
   created() {
@@ -302,6 +303,17 @@ export default {
         }
       }
     },
+    treeValue(data) {
+      this.treeLabelArr = [];
+      if (data.length > 0) {
+        data.forEach((v) => {
+          this.treeLabelArr.push({
+            id: publicFunc.buildGuid("label"),
+            label: v,
+          });
+        });
+      }
+    },
   },
   methods: {
     requireImg,
@@ -374,8 +386,23 @@ export default {
     },
     onTreeSelectChange() {},
     onTreeSearch() {},
-    cancelEvent() {},
-    confirmEvent() {},
+    cancelEvent() {
+      this.checkedObj.groupChecked = "";
+      this.checkedObj.systemChecked = "";
+      this.checkedUsers = [];
+      this.tableData = [];
+      this.addedRoleMap.clear();
+      this.addedRoleArr = [];
+    },
+    confirmEvent() {
+      this.$message.success("信息保存成功!");
+      this.cancelEvent()
+    },
+    deleteLabel(data) {
+      this.treeValue = this.treeValue.filter((v) => {
+        return data.label !== v;
+      });
+    },
   },
 };
 </script>
@@ -405,10 +432,6 @@ export default {
                       ></a-input>
                     </div>
                   </div>
-                  <!-- 组名：<a-input
-                    placeholder="请输入名称"
-                    v-model="inputName"
-                  ></a-input> -->
                 </a-modal>
               </div>
               <div
@@ -537,7 +560,7 @@ export default {
             <div class="top-section-inner-select">
               <a-tree-select
                 show-search
-                v-model="value"
+                v-model="treeValue"
                 multiple
                 :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                 placeholder="请选择查询内容"
@@ -562,7 +585,18 @@ export default {
           </div>
         </div>
         <div class="bottom-section">
-          <div class="bottom-section-extra-box"></div>
+          <div class="bottom-section-extra-box">
+            <div
+              class="single-label"
+              v-for="item in treeLabelArr"
+              :key="item.id"
+            >
+              <div class="single-label-text">{{ item.label }}</div>
+              <div class="single-label-close-btn" @click="deleteLabel(item)">
+                <a-icon type="close"></a-icon>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -885,6 +919,39 @@ export default {
           width: calc(90% - 10px);
           height: calc(90% - 10px);
           border: 1px solid rgba(240, 241, 242, 0.3);
+          display: flex;
+          align-content: center;
+          .single-label {
+            width: 150px;
+            min-width: 150px;
+            max-width: 200px;
+            height: 30px;
+            color: rgba(0, 0, 0, 0.65);
+            padding: 0 20px 0 10px;
+            border: 1px solid #e8e8e8;
+            background-color: #fafafa;
+            border-radius: 2px;
+            margin-right: 10px;
+            position: relative;
+            &-text {
+              position: absolute;
+              left: 3px;
+              top: 4px;
+            }
+            &-close-btn {
+              cursor: pointer;
+              right: 3px;
+              top: 7px;
+              position: absolute;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: rgb(127, 127, 127, 0.2);
+              &:hover {
+                color: rgba(0, 0, 0, 0.65);
+              }
+            }
+          }
         }
       }
     }

src/components/auth/authView.vue

@@ -1,26 +1,566 @@
 <script>
+import publicFunc from "@/utils/publicFunc";
+import { requireImg } from "@/utils/requireImg";
 export default {
   data() {
-    return{
+    const systemColumns = [
+      {
+        title: "终端类型",
+        dataIndex: "deviceType",
+      },
+      {
+        title: "模块名称",
+        dataIndex: "modelName",
+      },
+      {
+        title: "功能权限",
+        dataIndex: "functionAuth",
+      },
+    ];
 
-    }
+    const peopleColumns = [
+      {
+        title: "用户名",
+        dataIndex: "username",
+      },
+      {
+        title: "手机号",
+        dataIndex: "phone",
+      },
+      {
+        title: "邮箱",
+        dataIndex: "email",
+      },
+      {
+        title: "单位",
+        dataIndex: "unit",
+      },
+      {
+        title: "注册时间",
+        dataIndex: "registerTime",
+      },
+      {
+        title: "状态",
+        dataIndex: "status",
+      },
+      {
+        title: "操作",
+        dataIndex: "operation",
+      },
+    ];
+    return {
+      systemColumns,
+      peopleColumns,
+      systemTableData: [],
+      peopleTableData: [],
+      visible: {
+        viewPeopleInfo: false,
+        viewSystemInfo: false,
+      },
+      searchInput: "",
+      // toggleArr: ["角色列表", "成员列表"],
+      // btnChecked: "角色列表",
+      roleListData: [
+        {
+          id: publicFunc.buildGuid("group"),
+          label: "普通员工角色组",
+          type: "group",
+          total: 10,
+          data: [
+            {
+              id: publicFunc.buildGuid("people"),
+              username: "张三",
+              phone: "1345677898777",
+              email: "1345677898777@qq.com",
+              unit: "北京电信规划设计院",
+              registerTime: "2023/03/21",
+              status: "pass",
+            },
+            {
+              id: publicFunc.buildGuid("people"),
+              username: "李四",
+              phone: "1345677898777",
+              email: "1345677898777@qq.com",
+              unit: "北京电信规划设计院",
+              registerTime: "2023/03/21",
+              status: "pass",
+            },
+            {
+              id: publicFunc.buildGuid("people"),
+              username: "王五",
+              phone: "1345677898777",
+              email: "1345677898777@qq.com",
+              unit: "北京电信规划设计院",
+              registerTime: "2023/03/21",
+              status: "pass",
+            },
+            {
+              id: publicFunc.buildGuid("people"),
+              username: "赵六",
+              phone: "1345677898777",
+              email: "1345677898777@qq.com",
+              unit: "北京电信规划设计院",
+              registerTime: "2023/03/21",
+              status: "pass",
+            },
+          ],
+        },
+        {
+          id: publicFunc.buildGuid("group"),
+          label: "超级VIP组",
+          type: "group",
+          total: 5,
+          data: [],
+        },
+      ],
+      systemListData: [
+        {
+          id: publicFunc.buildGuid("system"),
+          label: "空间管理系统",
+          type: "system",
+          modelList: [
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智能看板",
+              functionAuth: "信息查看，组织添加，人员更新，人员删除",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智享生活",
+              functionAuth: "全部功能",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "数智双探",
+              functionAuth: "全部功能",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "移动端",
+              modelName: "智慧安防",
+              functionAuth: "信息查看，组织添加，人员更新，人员删除",
+            },
+          ],
+        },
+        {
+          id: publicFunc.buildGuid("system"),
+          type: "system",
+          label: "停车管理系统",
+          modelList: [
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智能看板",
+              functionAuth: "信息查看，组织添加，人员更新，人员删除",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智享生活",
+              functionAuth: "信息查看，组织添加，人员更新，人员删除",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "移动端",
+              modelName: "智慧安防",
+              functionAuth: "全部功能",
+            },
+          ],
+        },
+        {
+          id: publicFunc.buildGuid("system"),
+          type: "system",
+          label: "能源管理系统",
+          modelList: [
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智能看板",
+              functionAuth: "全部功能",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智享生活",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "移动端",
+              modelName: "智慧安防",
+              functionAuth: "全部功能",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "移动端",
+              modelName: "智慧安防",
+              functionAuth: "全部功能",
+            },
+          ],
+        },
+        {
+          id: publicFunc.buildGuid("system"),
+          type: "system",
+          label: "中枢",
+          modelList: [
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "PC",
+              modelName: "智享生活",
+              functionAuth: "全部功能",
+            },
+            {
+              id: publicFunc.buildGuid("system"),
+              deviceType: "移动端",
+              modelName: "智慧安防",
+              functionAuth: "全部功能",
+            },
+          ],
+        },
+      ],
+    };
   },
-  mounted(){
-
+  mounted() {},
+  methods: {
+    requireImg,
+    viewPeopleEvent(data) {
+      console.log(data, "查看成员的数据");
+      this.peopleTableData = [];
+      if (data.length > 0) {
+        this.visible.viewPeopleInfo = true;
+        data.forEach((v) => {
+          this.peopleTableData.push({
+            key: v.id,
+            username: v.username,
+            phone: v.phone,
+            email: v.email,
+            unit: v.unit,
+            registerTime: v.registerTime,
+            status: v.status,
+            operation: "移除",
+          });
+        });
+      } else {
+        this.$message.info("暂无数据!");
+      }
+    },
+    displaySystemInfo(data) {
+      console.log(data, "需要显示的数据");
+      this.systemTableData = [];
+      if (data.length > 0) {
+        this.visible.viewSystemInfo = true;
+        data.forEach((ele) => {
+          this.systemTableData.push({
+            key: ele.id,
+            deviceType: ele.deviceType || "--",
+            modelName: ele.modelName || "--",
+            functionAuth: ele.functionAuth || "--",
+          });
+        });
+      } else {
+        this.$message.info("暂无数据!");
+      }
+    },
   },
-  methods:{
-
-  }
-}
+};
 </script>
 <template>
-  <div class="auth-view">权限查看</div>
+  <div class="auth-view">
+    <div class="auth-view-inner">
+      <div class="section" v-for="role in roleListData" :key="role.id">
+        <div class="section-top">
+          <div class="section-top-left">
+            {{ role.label }} {{ role.total }} 人
+          </div>
+          <div class="section-top-line"></div>
+          <div class="section-top-right">
+            <div class="view-people-btn" @click="viewPeopleEvent(role.data)">
+              查看成员
+            </div>
+            <a-modal
+              v-model="visible.viewPeopleInfo"
+              title="成员列表"
+              :width="1000"
+            >
+              <div class="dialog-people-content">
+                <div class="dialog-people-content-search">
+                  <div class="dialog-people-content-search-input">
+                    <a-input></a-input>
+                  </div>
+                  <div class="dialog-people-content-search-button">
+                    <div class="search-btn">查询</div>
+                  </div>
+                </div>
+                <div class="dialog-people-content-table">
+                  <a-table
+                    :data-source="peopleTableData"
+                    :columns="peopleColumns"
+                    :scroll="{ y: 200 }"
+                  ></a-table>
+                </div>
+              </div>
+            </a-modal>
+          </div>
+        </div>
+        <div class="section-bottom">
+          <div
+            class="section-bottom-box"
+            v-for="system in systemListData"
+            :key="system.id"
+            @click="displaySystemInfo(system.modelList)"
+          >
+            <div class="top-content">
+              <img :src="requireImg('auth/system_gray.png')" />
+              <div class="top-content-name">{{ system.label }}</div>
+            </div>
+            <div class="bottom-content">权限详情</div>
+          </div>
+          <a-modal v-model="visible.viewSystemInfo" title="权限列表">
+            <div class="dialog-content">
+              <a-table
+                :data-source="systemTableData"
+                :columns="systemColumns"
+                :scroll="{ y: 200 }"
+              ></a-table>
+            </div>
+          </a-modal>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <style lang="less" scoped>
-.auth-view{
+.ant-modal-body {
+  .dialog-people-content {
+    width: 100%;
+    height: 100%;
+    &-search {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-input {
+        width: 89%;
+        height: 50%;
+        display: flex;
+        align-items: center;
+      }
+      &-button {
+        width: 8%;
+        height: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .search-btn {
+          width: 70px;
+          height: 30px;
+          background: #2ea8e6;
+          border-radius: 5px;
+          font-size: 14px;
+          color: #fff;
+          text-align: center;
+          line-height: 30px;
+          cursor: pointer;
+        }
+      }
+    }
+    &-table {
+      width: 100%;
+      height: calc(100% - 50px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .dialog-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.auth-view {
   width: 100%;
   height: 100%;
   background: #fff;
   border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-inner {
+    width: calc(98% - 13px);
+    height: calc(98% - 15px);
+    overflow: auto;
+    .section {
+      width: 100%;
+      height: 300px;
+      // background: burlywood;
+      margin-bottom: 10px;
+      &-top {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-left {
+          width: 200px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 16px;
+          color: #333333;
+          font-weight: 400;
+        }
+        &-line {
+          width: calc(100% - 350px);
+          height: 2px;
+          border: 1px dashed #cccccc;
+        }
+        &-right {
+          width: 150px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .view-people-btn {
+            width: 90px;
+            height: 24px;
+            background: #2ea8e6;
+            border-radius: 5px;
+            color: #fff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+          }
+        }
+      }
+      &-bottom {
+        width: 100%;
+        height: calc(100% - 60px);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        &-box {
+          width: 180px;
+          height: 180px;
+          background: #f9f9f9;
+          border: 1px solid #bebebe;
+          border-radius: 4px;
+          cursor: pointer;
+          .top-content {
+            width: 100%;
+            height: 85%;
+            background: #f9f9f9;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            .icon-img {
+              width: 30px;
+              height: 30px;
+              // margin-left: 10px;
+              // margin-right: 10px;
+            }
+            &-name {
+              width: 60%;
+              height: 30px;
+              text-align: center;
+              line-height: 30px;
+            }
+          }
+          .bottom-content {
+            width: 100%;
+            height: 15%;
+            background: #bebebe;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 400;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+  // &-input-outer {
+  //   width: 100%;
+  //   height: 100px;
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   .input-box {
+  //     width: 89%;
+  //     height: 50%;
+  //     display: flex;
+  //     align-items: center;
+  //   }
+  //   .search-box {
+  //     width: 8%;
+  //     height: 50%;
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: center;
+  //     .search-btn {
+  //       width: 70px;
+  //       height: 30px;
+  //       background: #2ea8e6;
+  //       border-radius: 5px;
+  //       font-size: 14px;
+  //       color: #fff;
+  //       text-align: center;
+  //       line-height: 30px;
+  //     }
+  //   }
+  // }
+  // &-toggle {
+  //   width: 100%;
+  //   height: 60px;
+  //   display: flex;
+  //   align-items: center;
+  //   .toggle-box {
+  //     width: 140px;
+  //     height: 35px;
+  //     display: flex;
+  //     align-items: top;
+  //     justify-content: center;
+  //     &-btn {
+  //       width: 100px;
+  //       height: 27px;
+  //       background: #fff;
+  //       border: 1px solid #f0f1f2;
+  //       color: #b3b3b3;
+  //       font-size: 14px;
+  //       border-radius: 15px;
+  //       display: flex;
+  //       align-items: center;
+  //       justify-content: center;
+  //       cursor: pointer;
+  //       &.active {
+  //         background: #2ea8e6;
+  //         color: #fff;
+  //       }
+  //     }
+  //   }
+  // }
+  // &-bottom {
+  //   width: 100%;
+  //   height: calc(100% - 160px);
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   &-inner {
+  //     width: calc(99% - 13px);
+  //     height: calc(99% - 15px);
+  //     background: burlywood;
+  //   }
+  // }
 }
-</style>
+</style>