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

@@ -4,7 +4,7 @@
    <!--    左侧菜单-->
    <el-aside>
      <basic-container>
        <div style="height: calc(100vh - 142px);!important;">
        <div style="height: calc(100vh - 144px);!important;">
          <div class="headerCon" style="display: flex; flex-wrap: wrap;margin-bottom: 5px">
            <el-button v-if="permissionList.TreeAddStatus" plain size="small" type="primary" @click="TreeAdd">添加
            </el-button>
@@ -44,25 +44,26 @@
            </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 style="height: 25px"></div>
          </div>

        </div>
        <!-- 树节点添加对话框-->
@@ -123,6 +124,7 @@
        </el-dialog>
        <!-- 分类授权对话框-->
        <classify-auth-dialog
          :TreeNode="TreeEditObj"
          :classifyData="classifyData"
          :visible.sync="classifyAuthVisible"
        ></classify-auth-dialog>
@@ -135,7 +137,7 @@
      </basic-container>
    </el-aside>
    <el-main>
      <basic-container style="height: calc(100vh - 150px);">
      <basic-container>
        <!--        右侧表格-->
        <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
        <span v-if="type.prop==='tab1'">
@@ -163,31 +165,19 @@
                         @click="TemRefresh">刷新</el-button>
              <el-button v-if="permissionList.CloneBtnStuatus" plain size="small" type="primary" @click="CloneBtn">从其它模板克隆</el-button>
              <!--              查询对话框-->
           <el-dialog :visible.sync="FindFormVisible" append-to-body title="高级查询">
              <div>
                <el-button size="small" type="primary" @click="AdvQueries">查询</el-button>
                <el-button size="small" type="primary">重置</el-button>
              </div>
             <div style="padding-left: 80px;margin-top: 15px;">
               <template v-for="(value, key) in FindSelect">
                <div style="display: flex; justify-content: space-around; width: 85%; margin-bottom: 15px">
                <el-select v-model="FindSelect[key]" placeholder="请选择" style="width: 28%"
                           @change="handleSelectChange(key)">
                  <el-option label="模板编号" value="0"></el-option>
                  <el-option label="模板名称" value="1"></el-option>
                  <el-option label="模板描述" value="2"></el-option>
                  <el-option label="版本号" value="3"></el-option>
                  <el-option label="状态" value="4"></el-option>
                 </el-select>
                <el-select v-model="condition[0]" placeholder="请选择" style="width: 15%">
                  <el-option label="包含" value="0"></el-option>
                  <el-option label="等于" value="1"></el-option>
                </el-select>
              <el-input v-model="QueryArray[key]" style="width: 49%"></el-input>
          <span> <i class="el-icon-delete" style="font-size: 22px;margin-top:8px;margin-left: 10px"/></span>
           <el-dialog :visible.sync="FindFormVisible" append-to-body title="高级查询" width="30%" @close="searchReset">
             <div style="text-align: center; margin-top: 5px;">
              <el-select v-model="searchSelect" style="width: 35%">
                <el-option v-for="item in crudFindTreeArray" :key="item.field" :label="item.title"
                           :value="item.queryField"></el-option>
              </el-select>
                <el-input v-model="SearchValue"
                          placeholder="请输入关键字进行查询" style="width: 45%; margin-left: 5px;"></el-input>
             </div>
          </template>
        </div>
                  <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="advQueries">查询</el-button>
                <el-button type="danger" @click="searchReset">重置</el-button>
                  </span>
           </el-dialog>
              <!--            模板克隆  -->
                <el-dialog :before-close="cloneClose" :visible.sync="CloneVisible" append-to-body title="克隆模板">
@@ -349,7 +339,6 @@
  TreeSave,
  TreeDel,
  TreeCheckDel,
  TreeObjcet,
  TreeEnable,
  TreeDeactivate,
  gridCodeClassifyTemplate,
@@ -378,6 +367,40 @@
  name: "classifyTrees.vue",
  data() {
    return {
      crudFindTreeArray: [
        {
          title: '模板编号',
          field: 'id',
          fieldType: 'text',
          queryField: 'id'
        },
        {
          title: '模板名称',
          field: 'name',
          fieldType: 'text',
          queryField: 'name'
        },
        {
          title: '模板描述',
          field: 'description',
          fieldType: 'text',
          queryField: 'description'
        },
        {
          title: '版本号',
          field: 'revisionSeq',
          fieldType: 'text',
          queryField: 'revisionSeq'
        },
        {
          title: '状态',
          field: 'lcStatusText',
          fieldType: 'text',
          queryField: 'lcStatusText'
        },
      ],
      searchSelect: 'id',
      SearchValue: '',
      allButtons: Boolean,
      btnAuthList: [],
      activeName: 'first',
@@ -512,6 +535,7 @@
      Treedata: [],
      CloneTreedata: [],
      Treeoption: {
        height: 'auto',
        addBtn: false,
        editBtn: false,
        delBtn: false,
@@ -668,24 +692,17 @@
      showEditBtn: false,
      //传递给分类授权子组件对话框的当前选中的分类节点信息
      classifyData: "",

    }
  },
  watch: {},
  mounted() {
    this.type = this.tabOption.column[0];
    this.type = this.tabOption.column[0] || {label: '基本信息', prop: 'tab1'};
    this.getAttr();
    const treeEle = this.$refs.tree.$el
    treeEle.addEventListener('click', (e) => {
      if (e.target.nodeName !== 'SPAN') {
        this.$refs.tree.setCurrentKey(null);
        this.nodeClickList = {};
        this.TreeFlagCode = true;
        this.allButtons = false;
        // this.$nextTick(()=>{
        //   this.btnAuthList = [];
        // })
      }
    }, true)
    document.addEventListener('click', this.handleGlobalClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleGlobalClick);
  },
  computed: {
    ...mapGetters(["permission"]),
@@ -708,7 +725,7 @@
    },
    treeStyle() {
      return {
        height: this.btnAuthList.length > 0 ? '620px' : '785px',
        height: this.allButtons ? '610px' : '690px',
      };
    },
    crudTreeOption() {
@@ -767,30 +784,50 @@
          codeClassifyOid: ''
        }
      }
    }
    },
  },
  created() {
  },
  methods: {
    handleGlobalClick(event) {
      // 判断是否存在树节点引用以及引用的元素是否存在
      if (this.$refs.tree && this.$refs.tree.$el) {
        // 判断点击事件是否发生在树节点以外的区域
        const isOutsideTree = !this.$refs.tree.$el.contains(event.target);
        if (isOutsideTree) {
          this.clearNode();
        }
      }
    },
    clearNode(){
      // this.getAttr()
      this.$refs.tree.setCurrentKey(null);
      this.nodeClickList = {};
      this.TreeFlagCode = true;
      this.allButtons = false;
    },
    // 分类授权对话框打开
    classifyAuthHandler() {
    classifyAuthHandler(event) {
      event.stopPropagation();
      if (this.nodeClickList.oid === '' || this.nodeClickList.oid === undefined) {
        this.$message.warning('请至少选择一条数据！')
        return;
      }
      this.classifyData = this.nodeClickList;
      // this.classifyData = this.nodeClickList;
      this.classifyAuthVisible = true;
    },
    // 数据授权对话框打开
    dataAuthHandler() {
    dataAuthHandler(event) {
      event.stopPropagation();
      if (this.nodeClickList.oid === '' || this.nodeClickList.oid === undefined) {
        this.$message.warning('请至少选择一条数据！')
        return;
      }
      this.classifyData = this.nodeClickList;
      // this.classifyData = this.nodeClickList;
      this.dataAuthVisible = true;
    },
    flowingDependHandler() {
    flowingDependHandler(event) {
      event.stopPropagation();
      if (this.nodeClickList.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return;
@@ -807,11 +844,13 @@
    },
    // 关闭弹窗
    /** 导入 */
    ImportExcel() {
    ImportExcel(event) {
      event.stopPropagation();
      this.ThemeImportVisible = true;
    },
    /** 导出 */
    ExportExcel() {
    ExportExcel(event) {
      event.stopPropagation();
      if (this.nodeClickList) {
        exportClassify({oid: this.nodeClickList.oid}).then(res => {
          func.downloadFileByBlobHandler(res);
@@ -930,7 +969,8 @@
      }
    },
    //树节点添加按钮
    async TreeAdd() {
    async TreeAdd(event) {
      event.stopPropagation();
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
@@ -990,7 +1030,8 @@
      }
    },
    //树节点删除按钮
    TreeDel() {
    TreeDel(event) {
      event.stopPropagation();
      this.$confirm('是否删除当前选择的分类，将会把子分类一并删除，如果存在编码数据将不能被删除，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
@@ -1046,7 +1087,8 @@
      });
    },
    //修改回填
    TreeEdit() {
    TreeEdit(event) {
      event.stopPropagation();
      if (Object.keys(this.nodeClickList).length < 1) {
        this.$message({
          type: 'warning',
@@ -1057,7 +1099,8 @@
      }
    },
    //树刷新
    async flushed() {
    async flushed(event) {
      event.stopPropagation();
      await this.getAttr()
      this.$refs.tree.setCurrentKey(null);
      this.nodeClickList = {};
@@ -1066,7 +1109,8 @@
    },
    //启用和停用都先判断状态
    //启用
    async Enable() {
    async Enable(event) {
      event.stopPropagation();
      if (Object.keys(this.nodeClickList).length < 1) {
        this.$message.warning('请先从树上选择一条数据');
        return;
@@ -1106,8 +1150,8 @@
        this.loading = false;
      }
    },

    async Deactivate() {
    async Deactivate(event) {
      event.stopPropagation();
      if (Object.keys(this.nodeClickList).length < 1) {
        this.$message.warning('请先从树上选择一条数据');
        return;
@@ -1151,6 +1195,10 @@
    },
    //树点击事件
    async nodeClick(data) {
      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;
@@ -1165,10 +1213,9 @@
      this.crudArray = []
      try {
        this.requestCount += 1;
        const [res1, res2, res3] = await Promise.all([
          TreeObjcet(data.oid),
        const [res1, res2] = await Promise.all([
          getObjectByOid(data.oid),
          gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}),
          getObjectByOid(data.oid)
        ]);
        this.FlagObj = res1.data.data;
        this.Formlist = res2.data.data.filter(item => {
@@ -1186,7 +1233,7 @@
          this.ProData = [];
          this.crudOid = ''
        }
        this.TreeEditObj = res3.data.data;
        this.TreeEditObj = res1.data.data;
        if (this.TreeEditObj.isParticipateCheck === null || this.TreeEditObj.isParticipateCheck === undefined || this.TreeEditObj.isParticipateCheck === "") {
          this.$set(this.TreeEditObj, "isParticipateCheck", 1)
          return
@@ -1195,7 +1242,32 @@
        this.$message.error(error);
      }
    },

    // 递归查找顶层节点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({
@@ -1246,34 +1318,28 @@
    handleChange(column) {
      this.type = column;
    },
    AdvQueries() {
      this.FindFormVisible = false
      //如果全部为空 allEmpty为true
      const allEmpty = Object.values(this.QueryArray).every(value => !value);
      //如果全部为空，点击查询出现所有数据
      if (allEmpty) {
        gridCodeClassifyTemplate().then(res => {
          this.Formlist = res.data.data
        })
    advQueries() {
      if (this.SearchValue === "") {
        this.$message.warning('请输入要查询的内容！');
      } else {
        //默认是等于
        gridCodeClassifyFindTemplate({'conditionMap[id]': this.QueryArray.id},
          {'conditionMap[name]': this.QueryArray.name},
          {'conditionMap[description]': this.QueryArray.description},
          {'conditionMap[revisionValue]': this.QueryArray.revisionValue},
          {'conditionMap[lcStatus]': this.QueryArray.lcStatus}
        ).then(res => {
          this.Formlist = res.data.data
        })
        const condition = {
          'conditionMap[codeclassifyoid]': this.nodeClickList.oid,
          [`conditionMap[${this.searchSelect}]`]: this.SearchValue
        };
        gridCodeClassifyFindTemplate(condition).then(res => {
          if (res.data.data.length > 0) {
            this.Formlist = res.data.data;
          } else {
            this.$message.error('暂未查询到相关模板！')
          }
          this.FindFormVisible = false;
        });
      }
    },
    //模板管理渲染
    CrudRend() {
      gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': this.nodeClickList.oid}).then(res => {
        this.Formlist = res.data.data
      })
    searchReset() {
      this.SearchValue = "";
      this.searchSelect = 'id'
    },

    //模板管理表格添加
    CrudRowSave(row, done) {
      if (this.nodeClickList.length <= 0) {
@@ -1471,9 +1537,9 @@
</script>

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

.el-aside {
  //height: calc(100% - 30px);
@@ -1518,4 +1584,9 @@
.headerCon > .el-button:nth-child(9) {
  margin-left: 0;
}

///deep/.el-scrollbar__bar.is-vertical{
//  width: 8px;
//}

</style>