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

<script>
import publicFunc from "@/utils/publicFunc";
import { requireImg } from "@/utils/requireImg";
export default {
  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: [],
      systemModelCollection: {},
      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: [
        {
          title: "中讯邮电咨询设计院",
          value: "中讯邮电咨询设计院",
          key: publicFunc.buildGuid("unit"),
          children: [
            {
              title: "智网研究院",
              value: "智网研究院",
              key: publicFunc.buildGuid("department"),
              children: [
                {
                  title: "Alice [普通VIP组]",
                  value: "Alice [普通VIP组]",
                  key: publicFunc.buildGuid("name"),
                  children: [],
                },
              ],
            },
          ],
        },
        {
          title: "北京电信规划设计院",
          value: "北京电信规划设计院",
          key: publicFunc.buildGuid("unit"),
          children: [
            {
              title: "销售部",
              value: "销售部",
              key: publicFunc.buildGuid("department"),
              children: [
                {
                  title: "Linda [超级VIP组]",
                  value: "Linda [超级VIP组]",
                  key: publicFunc.buildGuid("name"),
                  children: [],
                },
              ],
            },
          ],
        },
        {
          title: "创新产品研发中心",
          value: "创新产品研发中心",
          key: publicFunc.buildGuid("unit"),
          children: [
            {
              title: "市场部",
              value: "市场部",
              key: publicFunc.buildGuid("department"),
              children: [
                {
                  title: "Jacob [超级VIP组]",
                  value: "Jacob [超级VIP组]",
                  key: publicFunc.buildGuid("name"),
                  children: [],
                },
              ],
            },
          ],
        },
      ],
      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,
                modelName: this.systemModelCollection[i.split("-")[1]],
              });
            });
          });
        }
      }
    },
  },
  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.systemDictObj[v.label] = v.id;
        return {
          content: v.label,
          value: v.label,
        };
      });

      this.systemListData.forEach((v) => {
        let data = v.modelList.map((ele) => {
          return `[${ele.modelName}]`;
        });
        this.systemModelCollection[v.label] = data.join(" ");
      });
    },
    onChange(checkedValues) {
      console.log(checkedValues);
    },
    // 打开新建角色权限组对话框
    createRoleDialog() {
      this.visible.roleGroup = true;
      console.log("添加角色权限组");
    },
    // 打开添加用户对话框
    createUserDialog() {
      this.visible.user = true;
      console.log("添加用户事件");
    },
    addRoleGroupEvent() {
      console.log("保存新建的角色权限组");
      this.visible.roleGroup = false;
    },
    addUserEvent() {
      this.visible.user = false;
    },
    onTreeSelectChange() {},
    onTreeSearch() {},
    cancelEvent() {},
    confirmEvent() {},
  },
};
</script>
<template>
  <div class="auth-role">
    <div class="auth-role-title">配置权限</div>
    <div class="auth-role-content">
      <div class="auth-role-content-innerbox">
        <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"
                >
                  <div class="dialog-content">
                    <div class="dialog-content-title">组名:</div>
                    <div class="dialog-content-input">
                      <a-input
                        placeholder="请输入名称"
                        v-model="inputName"
                      ></a-input>
                    </div>
                  </div>
                  <!-- 组名：<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>
    <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-item>
                <span class="selected-item" style="color: #7f7f7f">{{
                  item.modelName
                }}</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="添加用户"
                @ok="addUserEvent"
              ></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;
.ant-modal-body {
  .dialog-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    &-title {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    &-input {
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.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: 16px;
    font-weight: bold;
    text-indent: 30px;
  }
  &-content {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    &-innerbox {
      background: #fafafa;
      width: calc(96% - 5px);
      height: calc(100% - 5px);
      border: 1px solid rgba(240, 241, 242, 0.3);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .left-box {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-inner {
          width: calc(100% - 2px);
          height: calc(100% - 10px);
          display: flex;
          align-items: center;
          justify-content: space-around;
          &-list {
            height: 100%;
            width: 32%;
            border: 1px solid #f0f1f2;
            background: #fff;
            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>