iot-front-ui/src/components/auth/authRole.vue

<script>
import publicFunc from "@/utils/publicFunc";
import { requireImg } from "@/utils/requireImg";
import authAction from "./authAction.vue";
export default {
  components: { authAction },
  data() {
    const columns = [
      {
        title: "终端类型",
        dataIndex: "deviceType",
      },
      {
        title: "模块名称",
        dataIndex: "modelName",
      },
      {
        title: "功能权限",
        dataIndex: "functionAuth",
      },
    ];
    return {
      visible: {
        roleGroup: false,
        user: false,
      },
      inputName:"",
      columns,
      checkedObj: {
        groupChecked: "",
        systemChecked: "",
      },
      checkedUsers: [],
      userListGroup: [],
      keyDictObj: {},
      roleListData: [
        {
          id: publicFunc.buildGuid("group"),
          label: "普通员工角色组",
          type: "group",
        },
      ],
      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: "全部功能",
            },
          ],
        },
      ],
      userListData: [
        {
          id: publicFunc.buildGuid("user"),
          label: "超级管理员",
          type: "user",
        },
        {
          id: publicFunc.buildGuid("user"),
          label: "普通管理员",
          type: "user",
        },
        {
          id: publicFunc.buildGuid("user"),
          label: "决策组",
          type: "user",
        },
        {
          id: publicFunc.buildGuid("user"),
          label: "普通用户",
          type: "user",
        },
      ],
      tableData: [],
      // 选中后添加的角色权限组
      addedRoleMap: new Map(),
      addedRoleArr: [],
      // 树选择
      treeData: [],
      value: undefined,
    };
  },
  created() {
    this.initData();
  },
  mounted() {
    // this.initRoleData();
  },
  watch: {
    checkedObj: {
      handler(value) {
        if (value.groupChecked != "" && value.systemChecked != "") {
          // 显示右侧的权限列表数据
          this.tableData = [];
          this.systemListData.forEach((v) => {
            if (v.label === value.systemChecked) {
              v.modelList.forEach((ele) => {
                this.tableData.push({
                  key: ele.id,
                  deviceType: ele.deviceType || "--",
                  modelName: ele.modelName || "--",
                  functionAuth: ele.functionAuth || "--",
                });
              });
            }
          });
          if (
            this.addedRoleMap.has(
              `${value.groupChecked}-${value.systemChecked}`
            )
          ) {
            this.checkedUsers = this.addedRoleMap.get(
              `${value.groupChecked}-${value.systemChecked}`
            );
          } else {
            this.checkedUsers = [];
          }
        }
      },
      deep: true,
      // immediate: true,
    },
    checkedUsers(data) {
      if (
        this.checkedObj.groupChecked != "" &&
        this.checkedObj.systemChecked != ""
      ) {
        // group-system，作为key单独存
        this.addedRoleMap.set(
          `${this.checkedObj.groupChecked}-${this.checkedObj.systemChecked}`,
          data
        );
        this.addedRoleArr = [];
        if (data.length > 0) {
          this.addedRoleMap.forEach((v, i) => {
            v.forEach((ele, index) => {
              this.addedRoleArr.push({
                id: publicFunc.buildGuid("checked"),
                group: i.split("-")[0],
                system: i.split("-")[1],
                role: ele,
              });
            });
          });
        }
      }
    },
  },
  methods: {
    requireImg,
    groupClick(data) {
      this.checkedObj.groupChecked = data;
    },
    systemClick(data) {
      this.checkedObj.systemChecked = data;
    },
    // 删除添加的角色权限组列
    deleteEvent(data) {
      let targetArr = this.addedRoleMap
        .get(`${data.group}-${data.system}`)
        .filter((v) => {
          return v !== data.role;
        });

      // 删除后该系统还有别的角色
      if (targetArr.length > 0) {
        this.addedRoleMap.set(`${data.group}-${data.system}`, targetArr);
        // 同步配置权限列表
        this.checkedUsers = this.addedRoleMap.get(
          `${this.checkedObj.groupChecked}-${this.checkedObj.systemChecked}`
        );
      } else {
        // 删除全部角色
        this.addedRoleMap.delete(`${data.group}-${data.system}`);
        this.checkedObj.groupChecked = "";
        this.checkedObj.systemChecked = "";
        this.checkedUsers = [];
      }

      this.addedRoleArr = this.addedRoleArr.filter((v) => {
        return v.id !== data.id;
      });
    },
    initData() {
      // 获取key及其对应的数据
      this.userListGroup = this.userListData.map((v) => {
        this.keyDictObj[v.label] = v.id;
        return {
          content: v.label,
          value: v.label,
        };
      });
      this.roleListData.forEach((v, i) => {
        this.keyDictObj[v.label] = v.id;
      });
      this.systemListData.forEach((v, i) => {
        this.keyDictObj[v.label] = v.id;
      });
    },
    onChange(checkedValues) {
      console.log(checkedValues);
    },
    // 打开新建角色权限组对话框
    createRoleDialog() {
      this.visible.roleGroup = true;
      console.log("添加角色权限组");
    },
    // 打开添加用户对话框
    createUserDialog() {
      this.visible.user = true;
      console.log("添加用户事件");
    },
    addRoleGroupEvent() {
      console.log("保存新建的角色权限组");
    },
    onTreeSelectChange() {},
    onTreeSearch() {},
    cancelEvent() {},
    confirmEvent() {},
  },
};
</script>
<template>
  <div class="auth-role">
    <div class="auth-role-title">配置权限</div>
    <div class="auth-role-content">
      <div class="left-box">
        <div class="left-box-inner">
          <div class="left-box-inner-list">
            <div class="add-role-group-box">
              <div class="add-role-group-btn" @click="createRoleDialog">
                新建角色权限组
              </div>
              <a-modal
                v-model="visible.roleGroup"
                title="新建角色权限组"
                @ok="addRoleGroupEvent"
              >
                组名：<a-input placeholder="请输入名称" v-model="inputName"></a-input>
              </a-modal>
            </div>
            <div
              class="left-box-inner-list-item"
              v-for="item in roleListData"
              :key="item.id"
              :class="{ active: checkedObj.groupChecked === item.label }"
              @click="groupClick(item.label)"
            >
              <img
                v-if="checkedObj.groupChecked === item.label"
                :src="requireImg('auth/group_blue.png')"
                class="icon-img"
              />

              <img
                v-else
                :src="requireImg('auth/group_gray.png')"
                class="icon-img"
              />
              <div class="text">{{ item.label }}</div>
            </div>
          </div>
          <div class="left-box-inner-list">
            <div
              class="left-box-inner-list-item"
              v-for="item in systemListData"
              :key="item.id"
              :class="{ active: checkedObj.systemChecked === item.label }"
              @click="systemClick(item.label)"
            >
              <img
                class="icon-img"
                v-if="checkedObj.systemChecked === item.label"
                :src="requireImg('auth/system_blue.png')"
              />
              <img
                class="icon-img"
                v-else
                :src="requireImg('auth/system_gray.png')"
              />

              <div class="text">{{ item.label }}</div>
            </div>
          </div>
          <div class="left-box-inner-list">
            <a-checkbox-group
              :options="userListGroup"
              v-model="checkedUsers"
              @change="onChange"
            >
              <template #label="value">
                <img
                  v-if="checkedUsers.includes(value.content)"
                  :src="requireImg('auth/role_blue.png')"
                  class="icon-img"
                />
                <img
                  v-else
                  :src="requireImg('auth/role_gray.png')"
                  class="icon-img"
                />
                <span
                  :style="{
                    color: checkedUsers.includes(value.content)
                      ? '#66beff'
                      : '#7f7f7f',
                  }"
                  >{{ value.content }}</span
                >
              </template>
            </a-checkbox-group>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="title">权限列表</div>
        <a-table
          :data-source="tableData"
          :columns="columns"
          :scroll="{ y: 230 }"
          bordered
        ></a-table>
      </div>
    </div>
    <div class="auth-role-infolist">
      <div class="auth-role-infolist-inner">
        <div
          class="auth-role-infolist-inner-item"
          v-for="item in addedRoleArr"
          :key="item.id"
        >
          <div class="left-content">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item>
                <img
                  :src="requireImg('auth/group_blue.png')"
                  class="icon-img"
                />
                <span class="selected-item">{{ item.group }}</span>
              </a-breadcrumb-item>
              <a-breadcrumb-item>
                <img
                  :src="requireImg('auth/system_blue.png')"
                  class="icon-img"
                />
                <span class="selected-item">{{ item.system }}</span>
              </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>
            </a-breadcrumb>
          </div>
          <div class="close-btn" @click="deleteEvent(item)"></div>
        </div>
      </div>
    </div>
    <div class="auth-role-select">
      <div class="auth-role-select-inner">
        <div class="top-section">
          <div class="top-section-inner">
            <div class="top-section-inner-title">选择人员</div>
            <div class="top-section-inner-select">
              <a-tree-select
                show-search
                v-model="value"
                multiple
                :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                placeholder="请选择查询内容"
                style="width: 100%"
                tree-checkable
                allow-clear
                :tree-data="treeData"
                tree-default-expand-all
              ></a-tree-select>
            </div>
            <div class="top-section-inner-button">
              <div class="add-user-btn" @click="createUserDialog">
                <div class="add-user-btn-icon"><div class="img"></div></div>
                <div class="add-user-btn-text">添加用户</div>
              </div>
              <a-modal v-model="visible.user" title="添加用户"></a-modal>
            </div>
          </div>
        </div>
        <div class="bottom-section">
          <div class="bottom-section-extra-box"></div>
        </div>
      </div>
    </div>
    <div class="auth-role-footer">
      <div class="auth-role-footer-inner">
        <div class="cancel-btn" @click="cancelEvent">取消</div>
        <div class="confirm-btn" @click="confirmEvent">确认</div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@fontDefaultColor: #7f7f7f;
@fontColor: #66beff;
.auth-role {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  &-title {
    width: 100%;
    height: 5%;
    // background: rgba(200, 200, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: bold;
    text-indent: 30px;
  }
  &-content {
    width: 100%;
    height: 50%;
    // background: peachpuff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .left-box {
      height: 100%;
      width: 48%;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: center;
      &-inner {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        display: flex;
        align-items: center;
        justify-content: space-around;
        &-list {
          height: 100%;
          width: 32%;
          border: 1px solid rgb(240, 241, 242);
          overflow: auto;
          position: relative;

          .ant-checkbox-group {
            display: flex;
            flex-direction: column;
            /deep/ .ant-checkbox-group-item {
              width: 100%;
              height: 40px;
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              // background: rgba(100, 100, 150, 0.2);
              color: @fontDefaultColor;
              padding-left: 30px;
              .icon-img {
                width: 19.5px;
                height: 19.5px;
                margin-left: 10px;
                margin-right: 10px;
              }
            }
          }

          .add-role-group-box {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            .add-role-group-btn {
              position: absolute;
              bottom: 5px;
              width: 150px;
              height: 25px;
              background: #2ea8e6;
              color: #fff;
              border-radius: 5px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
            }
          }

          &-item {
            width: 100%;
            height: 40px;
            padding-left: 10px;
            color: @fontDefaultColor;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
            .icon-img {
              width: 22px;
              height: 22px;
              margin-left: 10px;
              margin-right: 10px;
            }
            &.active {
              background: rgb(224, 239, 250, 0.8);
              color: @fontColor;
            }

            .text {
              width: calc(100% - 35px);
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: flex-start;
            }
          }
        }
      }
    }
    .right-box {
      height: 100%;
      width: 45%;
      // background: rgb(255, 165, 0, 0.1);
      .title {
        width: 100%;
        height: 12%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: 400;
        font-size: 16px;
      }
      .table {
        width: 100%;
        height: 88%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  &-infolist {
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    &-inner {
      background: #fafafa;
      width: calc(96% - 5px);
      height: calc(100% - 5px);
      border: 1px solid rgba(240, 241, 242, 0.3);
      overflow: auto;
      &-item {
        width: 100%;
        height: 40px;
        font-size: 16px;
        position: relative;
        .left-content {
          width: 60%;
          height: 40px;
          display: flex;
          align-items: center;
          position: absolute;
          left: 0;
          .selected-item {
            color: @fontColor;
          }
          .icon-img {
            width: 19.5px;
            height: 19.5px;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
        .close-btn {
          position: absolute;
          top: 9px;
          right: 30px;
          width: 25px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          background: url("@/assets/images/auth/close.png") no-repeat center;
        }
      }
    }
  }
  &-select {
    width: 100%;
    height: 19%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    &-inner {
      width: calc(96% - 5px);
      height: calc(100% - 10px);
      background: #fafafa;
      border: 1px solid rgba(240, 241, 242, 0.3);
      overflow: auto;
      .top-section {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-inner {
          height: 100%;
          width: 98%;
          display: flex;
          align-items: center;
          justify-content: center;
          &-title {
            width: 8%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &-select {
            width: 82%;
            height: 100%;
            display: flex;
            align-items: center;
          }
          &-button {
            width: 10%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .add-user-btn {
              width: 70%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              &-icon {
                width: 30%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .img {
                  width: 22px;
                  height: 22px;
                  background: url("@/assets/images/auth/plus-square.png")
                    no-repeat center;
                }
              }
              &-text {
                width: 70%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #2ea8e6;
              }
            }
          }
        }
      }
      .bottom-section {
        width: 100%;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-extra-box {
          background: #fff;
          width: calc(90% - 10px);
          height: calc(90% - 10px);
          border: 1px solid rgba(240, 241, 242, 0.3);
        }
      }
    }
  }
  &-footer {
    margin-top: 10px;
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    &-inner {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .cancel-btn,
      .confirm-btn {
        width: 80px;
        height: 25px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fff;
      }
      .cancel-btn {
        background: #b3b3b3;
      }
      .confirm-btn {
        background: #2ea8e6;
      }
    }
  }
}
</style>