审批用户列表改为树形

yangys

2025-09-04 2781142ab67deba83925da706ca26b7f8ea1a759

 src/views/wel/gongkong.vue

@@ -8,8 +8,23 @@
-->
<template>
  <div class="gongkongMain">
    <div>
      <el-tree :data="treeData" :props="defaultProps" node-key="id" :default-expand-all="false" :default-expanded-keys="defaultKeys" @node-click="handleNodeClick" />
    <div class="organization-tree">
      <el-input v-model="keyword" placeholder="输入搜索关键字" @input="handleInput" clearable="true"/>
      <el-tree ref="tree" :filter-node-method="filterNodeMethod" :current-node-key="currentNodeKey" :data="treeData" :highlight-current="true" :props="defaultProps" node-key="id" :default-expand-all="false" :default-expanded-keys="defaultKeys" @node-click="handleNodeClick" >
        <template #default="scope">
            <div
              :class="
                keyword === ''
                  ? ''
                  : scope.data.name.indexOf(keyword) !== -1
                    ? 'has-key-word-style'
                    : ''
              "
            >
              {{ scope.data.name}}
            </div>
          </template>
        </el-tree>
    </div>
    <div>
      <el-row>
@@ -21,11 +36,11 @@
        </el-col>
      </el-row>
      <el-table :data="treecFileData" style="width: 100%">
        <el-table-column prop="name" label="名称" />
          <el-table-column prop="fileModifyTime" label="创建日期" />
        <el-table-column prop="fileModifyTime" label="修改日期" />
        <el-table-column prop="fileSizeDisplay" label="大小" />
        <el-table-column fixed="right" label="操作" min-width="120">
        <el-table-column prop="name" label="名称"/>
          <el-table-column prop="fileModifyTime" label="创建日期"  width="160"/>
        <el-table-column prop="fileModifyTime" label="修改日期"   width="160"/>
        <el-table-column prop="fileSizeDisplay" label="大小" width="80"/>
        <el-table-column fixed="right" label="操作" min-width="110">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="fileView(scope.row)">查看</el-button>
            <el-button link type="primary" size="small" @click="fileEdit(scope.row)">编辑</el-button>
@@ -72,9 +87,15 @@
} from '@/api/wel/changehis';
import { pageHeaderEmits } from 'element-plus';
export default {
  name: 'OrganizationTree',
  components: {},
  data() {
    return {
      keyword: '',//树查询关键字
      currentNodeKey: null,
      filterData: [], // 过滤后的数据
      activeNode: null,

      defaultKeys: [],
      fileOptionTitle: "",
      fileContent: "",
@@ -151,6 +172,27 @@
    
  },
  methods: {
    async handleInput (v) {
      this.$refs.tree.filter(v)
    },

    filterNodeMethod (value, data, node) {
      if (!value) {
        return true
      }
      return this.getHasKeyword(value, node)
    },
    getHasKeyword (value, node) {

      if (node.data instanceof Array) {
        node.data = node.data.length > 0 ? node.data[0] : {}
      }
      if (node.data.name && node.data.name.indexOf(value) !== -1) {
        return true
      } else {
        return node.parent && this.getHasKeyword(value, node.parent)
      }
    },
    fileDialogComit() {
      this.loading = true;
      axios({
@@ -246,25 +288,28 @@
    },
    sizeChange(size) {
      this.size = size;
      this.treeLoad(this.TreeNode);
      this.searchTable(this.TreeNode);
    },
    currentChange(current) {
      //console.log('curr',current)
      this.current = current;
      this.treeLoad();
      this.searchTable();
    },
    handleNodeClick(TreeNode,b,c,d) {
    handleNodeClick(data,node) {
      this.fileName = "";
      this.searchTable(TreeNode);
      this.searchTable(data);

      this.activeNode = data.value
      this.$emit('node-click', data, node)
    },
    searchTable(TreeNode) {
      this.TreeNode = {...TreeNode};
      
      var obj = {
        name: this.fileName,
        dirType: TreeNode.dirType,
        nodeType: TreeNode.nodeType, 
        nodeId: TreeNode.nodeType!='dir'?TreeNode.id:undefined,
        machineCode: TreeNode.machineCode,
        dirType: this.TreeNode.dirType,
        nodeType: this.TreeNode.nodeType, 
        nodeId: this.TreeNode.nodeType!='dir'?this.TreeNode.id:undefined,
        machineCode: this.TreeNode.machineCode,
        current: this.current,
        size: this.size
      }
@@ -315,7 +360,7 @@
        this.dataHis = [];
        this.loadingHis = false;
      }).catch(err => {
        console.log(err)
        //console.log(err)
        this.dataHis = [];
        this.loadingHis = false;
      });
@@ -323,6 +368,9 @@
  },
  mounted() {
    this.treeLoad();
  },
  created(){
    this.searchTable({});
  }
};
</script>
@@ -350,4 +398,10 @@
  display: flex;
  justify-content: flex-end;
}


.has-key-word-style {
      background-color: #d5ebfc;
    }
//https://juejin.cn/post/6997669587495944223
</style>