Source/plt-web/plt-web-ui/src/views/authority/function/functionView/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,244 @@
<template>
  <el-container>
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
          <!-- å·¦ä¾§æ ‘         -->
          <div style="height:  calc(100vh - 195px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
              <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span style="font-size: 15px">
                  <i class="el-icon-user-solid"></i>
                    {{ (node || {}).label }}
                </span>
              </span>
            </avue-tree>
          </div>
        </div>
      </basic-container>
    </el-aside>

    <el-main>
      <basic-container v-loading="treeLoading">
        <h3 style="margin: 0 0 10px 0">功能权限配置</h3>
        <div>
          <el-button icon="el-icon-place" plain size="small" type="primary" @click="saveHandler">授权</el-button>
          <el-button icon="el-icon-close" plain size="small" style="margin-right: 40px;" type="primary"
                     @click="clearValue">重置
          </el-button>
        </div>
        <div style="height:  calc(100vh - 232px);margin-top: 10px;">
          <avue-tree ref="uiTree" :data="uiTreeData" :node-key="id" :option="uiTreeOption">
            <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span style="font-size: 15px">
                  <i :class="data.icon"></i>
                    {{ (node || {}).label }}
                </span>
            </span>
          </avue-tree>
        </div>
      </basic-container>
    </el-main>

  </el-container>
</template>

<script>
import {gridRoles} from "@/api/system/role/api";
import {getSysModelAuthTreeMenuByPID, getSysModelAuth, saveRoleRight} from "@/api/authority/functionView/api"

export default {
  name: "index",
  data() {
    return {
      treeLoading: false,
      type: '',//业务类型
      context: '',//UI上下文code
      treeOption: {
        menu: false,
        addBtn: false,
        props: {
          label: 'name',
          value: 'oid',
          children: 'children'
        }
      },
      nodeRow: {},
      treeData: [],
      defaultExpandKeys: [],
      uiTreeOption: {
        defaultExpandedKeys: this.defaultExpandKeys,
        multiple: true,
        menu: false,
        addBtn: false,
        filter: false,
        props: {
          label: 'name',
          value: 'id',
          children: 'children'
        }
      },
      uiTreeData: [],
      typeData: [],
      contextData: []
    }
  },
  created() {
    this.getTreeList();
    this.getUITree();
  },
  methods: {
    getTreeList() {
      const loading = this.$loading({});
      gridRoles().then(res => {
        this.treeData = res.data.data;
        loading.close();
      }).catch(error => {
        loading.close();
      })
    },
    // è§’色点击
    nodeClick(row) {
      this.nodeRow = row;
      this.treeLoading = true;
      getSysModelAuth({roleId: row.oid}).then(res => {
        const data = res.data.data;
        this.$refs.uiTree.setCheckedKeys(data);
        this.treeLoading = false;
      })
    },
    getUITree() {
      this.treeLoading = true;
      const params = {
        // 'conditionMap[roleId]': this.nodeRow.oid,
        'conditionMap[type]': this.type,
        'conditionMap[context]': this.context,
        'conditionMap[showCheckbox]': true
      }
      this.defaultExpandKeys = ['root'];
      getSysModelAuthTreeMenuByPID(params).then(res => {
        console.log(res);
        let data= [{
          attributes: {},
          checked: false,
          expanded: true,
          data: "root",
          childType: 1,
          icon: 'el-icon-s-home',
          id: 'root',
          name:'功能模块',
          children: res.data.data
        }];
        this.processChildren(data[0]); // å¤„理每个节点
        this.uiTreeOption.defaultExpandedKeys = this.defaultExpandKeys;
        this.uiTreeData = data;
        this.treeLoading = false;
      }).catch(error => {
        this.treeLoading = false;
      })
    },
    //处理树
    processChildren(item) {
      if (item.children && item.children.length > 0) {
        item.children = item.children.map(child => {
          if (!child.childType) {
            // é»˜è®¤æ ‘节点展开,最子级不展开
            this.defaultExpandKeys.push(child.id)
          }
          child.icon = 'el-icon-s-promotion';
          if (child.childType == 1) {
            child.icon = 'el-icon-document';
          } else if (child.childType == 2) {
            child.icon = 'el-icon-s-tools';
          }
          this.processChildren(child); // é€’归处理每个子节点
          return child; // åªè¿”回子节点的 attributes
        });
      }
    },
    saveHandler() {
      const selectTreeList = this.$refs.uiTree.getCheckedNodes();
      const selectParentList = this.$refs.uiTree.getHalfCheckedNodes();

      if (selectTreeList.length == 0) {
        this.$message.error("请选择功能模块");
        return;
      }
      const formData = selectTreeList.map(item => {
        return {
          parentId: item.childType === 2 ? item.funcId : item.parentId,
          id: item.id,
          type: (!item.childType || item.childType === 1) ? 1 : 2,
          number: item.childType === 2 ? item.sort : ''
        }
      })
      const parentData = selectParentList.map(item => {
        return {
          parentId: item.parentId,
          id: item.id,
          type: (!item.childType || item.childType === 1) ? 1 : 2,
          number: ''
        }
      })
      const data = [...parentData,...formData];
      data.shift();
      const params = {
        roleId: this.nodeRow.oid,
        roleData: data
      }
      saveRoleRight(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success("授权成功");
        }
      });
    },
    clearValue() {
      this.$refs.uiTree.setCheckedNodes([]);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-scrollbar__wrap {
    overflow: auto !important;
  }

  .headerCon {
    .el-button {
      width: 82px;
    }
  }
}

.headerCon {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;

  .el-button + .el-button {
    margin-left: 5px;
  }

  .el-button {
    margin-top: 5px;
  }
}

.headerCon > .el-button:nth-child(4) {
  margin-left: 0;
}

.headerCon > .el-button:nth-child(7) {
  margin-left: 0;
}


.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}

</style>