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

@@ -1,33 +1,17 @@
<template>
  <el-container>

    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
            </el-button>
            <el-button class="smallBtn" plain size="small" type="primary"
                       @click="checkViewClickHandler">查看使用范围
            </el-button>
          </div>
        <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
          <!-- 左侧树         -->
          <div style="height:  calc(100vh - 280px);">
          <div style="height:  calc(100vh - 200px);">
            <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-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
              <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>
@@ -43,8 +27,83 @@
</template>

<script>
import {gridRoles} from "@/api/system/role/api";
import {getUIAuthor,authorizedUI} from "@/api/authority/ui/uiAuthor";

export default {
  name: "index"
  name: "index",
  data() {
    return {
      type:'',//业务类型
      treeOption: {
        height: '500px',
        menu: false,
        addBtn: false,
        props: {
          label: 'name',
          value: 'oid',
          children: 'children'
        }
      },
      nodeRow: {},
      treeData: [],
      uiTreeOption: {
        height: '500px',
        menu: false,
        addBtn: false,
        filter:false,
        props: {
          label: 'name',
          value: 'oid',
          children: 'children'
        }
      },
      uiTreeData: [],
    }
  },
  created() {
    this.getTreeList()
  },
  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;
      const loading = this.$loading({});
      getUIAuthor().then(res => {
        this.uiTreeData = res.data.data;
        loading.close();
      }).catch(error=>{
        loading.close();
      })
    },
    saveHandler() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData={}
          authorizedUI(formData).then(res => {
            if (res.data.success) {
              this.$message.success("保存成功");
              this.cancelDialog();
            }
          });
        } else {
          return false;
        }
      });
    },
    clearValue(){
      this.$refs.uiTree.setCheckedNodes([])
    }
  }
}
</script>