Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue

@@ -6,57 +6,63 @@
      <basic-container>
        <div style="height: calc(100vh - 142px);!important;">
          <div class="headerCon" style="display: flex; flex-wrap: wrap;margin-bottom: 5px">
            <el-button plain size="small" type="primary" @click="TreeAdd">添加
            <el-button v-if="permissionList.TreeAddStatus" plain size="small" type="primary" @click="TreeAdd">添加
            </el-button>
            <el-button v-if="permissionList.TreeEditStatus" plain size="small" type="primary" @click="TreeEdit">修改
            <el-button v-if="permissionList.TreeEditStatus" v-show="allButtons" plain size="small" type="primary"
                       @click="TreeEdit">修改
            </el-button>
            <el-button v-if="permissionList.TreeDelStatus" plain size="small" type="primary" @click="TreeDel">删除
            <el-button v-if="permissionList.TreeDelStatus" v-show="allButtons" plain size="small" type="primary"
                       @click="TreeDel">删除
            </el-button>
            <el-button v-if="permissionList.flushedStatus" plain size="small" type="primary" @click="flushed">刷新
            <el-button v-if="permissionList.flushedStatus" v-show="allButtons" plain size="small" type="primary"
                       @click="flushed">刷新
            </el-button>
            <el-button v-if="permissionList.EnableStatus" plain size="small" type="primary" @click="Enable">启用
            <el-button v-if="permissionList.EnableStatus" v-show="allButtons" plain size="small" type="primary"
                       @click="Enable">启用
            </el-button>
            <el-button v-if="permissionList.DeactivateStatus" plain size="small" type="primary" @click="Deactivate">停用
            <el-button v-if="permissionList.DeactivateStatus" v-show="allButtons" plain size="small" type="primary"
                       @click="Deactivate">停用
            </el-button>
            <el-button v-if="permissionList.ImportExcelStatus" plain size="small" type="primary"
            <el-button v-if="permissionList.ImportExcelStatus" v-show="allButtons" plain size="small" type="primary"
                       @click.native="ImportExcel">导入
            </el-button>
            <el-button v-if="permissionList.ExportExcelStatus" plain size="small" type="primary" @click="ExportExcel">
            <el-button v-if="permissionList.ExportExcelStatus" v-show="allButtons" plain size="small" type="primary"
                       @click="ExportExcel">
              导出
            </el-button>
            <el-button v-if="permissionList.flowingBtnStuatus" plain
            <el-button v-if="permissionList.flowingBtnStuatus" v-show="allButtons" plain
                       size="small" style="width: 56px;text-align: center;padding-left: 3px" type="primary"
                       @click="flowingDependHandler">流水处理
            </el-button>
            <el-button v-if="permissionList.classifyAuth" plain size="small"
            <el-button v-if="permissionList.classifyAuth" v-show="allButtons" plain size="small"
                       style="width: 56px;text-align: center;padding-left: 3px" type="primary"
                       @click="classifyAuthHandler">分类授权
            </el-button>
            <el-button v-if="permissionList.classifyAuth" plain size="small"
            <el-button v-if="permissionList.classifyAuth" v-show="allButtons" plain size="small"
                       style="width: 56px;text-align: center;padding-left: 3px" type="primary"
                       @click="dataAuthHandler">数据授权
            </el-button>
          </div>
          <!-- 左侧树-->

          <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata"
                     :defaultExpandAll="false"
                     :option="Treeoption"
                     class="classifyTree"
                     style="height: 690px"
                     @node-click="nodeClick"
          >
            <template slot-scope="{ node, data }" class="el-tree-node__label">
              <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item"
                          effect="dark"
                          open-delay="500"
                          placement="right-start">
          <div style="height:  calc(100vh - 242px);overflow: auto">
            <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata"
                       :defaultExpandAll="false"
                       :option="Treeoption"
                       class="classifyTree"
                       @node-click="nodeClick"
            >
              <template slot-scope="{ node, data }" class="el-tree-node__label">
                <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item"
                            effect="dark"
                            open-delay="500"
                            placement="right-start">
                <span style="font-size: 14px;">
                {{ (node || {}).label }}
              </span>
              </el-tooltip>
            </template>
          </avue-tree>
                </el-tooltip>
              </template>
            </avue-tree>
          </div>

        </div>
        <!-- 树节点添加对话框-->
@@ -117,11 +123,13 @@
        </el-dialog>
        <!-- 分类授权对话框-->
        <classify-auth-dialog
          :TreeNode="TreeEditObj"
          :classifyData="classifyData"
          :visible.sync="classifyAuthVisible"
        ></classify-auth-dialog>
        <!-- 数据授权对话框 -->
        <data-auth-dialog
          :TreeNode="TreeEditObj"
          :classifyData="classifyData"
          :visible.sync="dataAuthVisible"
        ></data-auth-dialog>
@@ -371,6 +379,7 @@
  name: "classifyTrees.vue",
  data() {
    return {
      allButtons: Boolean,
      btnAuthList: [],
      activeName: 'first',
      masterRow: null,
@@ -504,6 +513,7 @@
      Treedata: [],
      CloneTreedata: [],
      Treeoption: {
        height:'auto',
        addBtn: false,
        editBtn: false,
        delBtn: false,
@@ -672,6 +682,7 @@
        this.$refs.tree.setCurrentKey(null);
        this.nodeClickList = {};
        this.TreeFlagCode = true;
        this.allButtons = false;
        // this.$nextTick(()=>{
        //   this.btnAuthList = [];
        // })
@@ -682,7 +693,7 @@
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        TreeAddStatus: this.vaildData(this.btnAuthList.tree_add, false),
        TreeAddStatus: this.vaildData(this.permission.classifyTree.tree_add, false),
        TreeEditStatus: this.vaildData(this.btnAuthList.tree_edit, false),
        TreeDelStatus: this.vaildData(this.btnAuthList.tree_delete, false),
        flushedStatus: this.vaildData(this.btnAuthList.tree_break, false),
@@ -699,7 +710,7 @@
    },
    treeStyle() {
      return {
        height: this.btnAuthList.length > 0 ? '620px' : '785px',
        height: this.allButtons ? '610px' : '690px',
      };
    },
    crudTreeOption() {
@@ -707,7 +718,8 @@
        index: true,
        border: true,
        columnBtn: false,
        height: 180,
        height: 150,
        refreshBtn: false,
        addBtn: this.Formlist.length <= 0 && this.nodeClickList != "",
        editBtn: false,
        delBtn: false,
@@ -768,7 +780,7 @@
        this.$message.warning('请至少选择一条数据！')
        return;
      }
      this.classifyData = this.nodeClickList;
      // this.classifyData = this.nodeClickList;
      this.classifyAuthVisible = true;
    },
    // 数据授权对话框打开
@@ -777,7 +789,7 @@
        this.$message.warning('请至少选择一条数据！')
        return;
      }
      this.classifyData = this.nodeClickList;
      // this.classifyData = this.nodeClickList;
      this.dataAuthVisible = true;
    },
    flowingDependHandler() {
@@ -876,7 +888,12 @@
    getAttr() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        getAtrrList()
        let conditionMaps = {};
        conditionMaps["conditionMap[authType]"] = "classify_auth";
        conditionMaps["conditionMap[buttonCode]"] = "classifyTree";
        // 分类授权中是否具备查看权限
        conditionMaps["conditionMap[menuCode]"] = "classify_view";
        getAtrrList(conditionMaps)
          .then(res => {
            this.Treedata = res.data;
            this.CloneTreedata = res.data;
@@ -1136,7 +1153,12 @@
    },
    //树点击事件
    async nodeClick(data) {
      getAuthButtonList({classifyId: data.oid,code: "classifyTree",authType: "classify_auth"}).then(res => {
      const response = this.findTheTopLevelNode(data,this.Treedata)
      this.classifyData = response;
      // console.log(response)
      // console.log('response',response.attributes.id)
      this.allButtons = true;
      getAuthButtonList({classifyId: data.oid, code: "classifyTree", authType: "classify_auth"}).then(res => {
        this.btnAuthList = res.data.data;
      }).catch(error => {
        console.log(error)
@@ -1180,6 +1202,32 @@
      }
    },

    // 递归查找顶层节点Id
    findTheTopLevelNode(data,TreeData){
      if(data.parentId === ""){
        return data;
      }
      const parentNode = this.findParentNode(data.parentId, TreeData);
      if (parentNode) {
        return this.findTheTopLevelNode(parentNode, TreeData); // 继续查找父节点
      }
    },
    // 递归查找出来多层节点的父节点
    findParentNode(parentId, TreeData){
      for (const node of TreeData) {
        if (node.oid === parentId) {
          return node;
        }
        // 如果当前节点还有子节点，继续去查子节点的父节点
        if (node.children) {
          const parentNode = this.findParentNode(parentId, node.children);
          if (parentNode) {
            return parentNode;
          }
        }
      }
      return null;
    },
    async gridCode() {
      try {
        const res = await gridCodeClassifyTemplateAttr({
@@ -1455,9 +1503,9 @@
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
}
//.el-container {
//  height: 100%;
//}

.el-aside {
  //height: calc(100% - 30px);
@@ -1502,4 +1550,8 @@
.headerCon > .el-button:nth-child(9) {
  margin-left: 0;
}
///deep/.el-scrollbar__bar.is-vertical{
//  width: 8px;
//}

</style>