yxk-electronic-archives/src/views/components/categoryTree.vue

<template>
  <div class="elect-cont-left">
    <div class="container-left">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <div class="arc-left-tree">
        <h3 class="arc-title arc-title-top">档案门类</h3>
        <div class="tree-scroll">
          <el-tree ref="tree" v-loading="loading" class="arc-tree" :data="categroyTree" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="data.isType === 1 " class="iconFolder">
                {{ data.cnName }}
              </span>
              <span v-if="data.isType === 2" class="iconArch">
                {{ data.cnName }}
              </span>
              <span v-if="data.isType === 3" class="iconFile">
                {{ data.cnName }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FetchCategoryMenu } from '@/api/system/category/category'
export default {
  name: 'CategoryTree',
  data() {
    return {
      categroyTree: [],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'cnName'
      },
      selectedCategory: {}
    }
  },
  watch: {
  },
  created() {
    this.getCateTree()
  },
  mounted() {
  },
  methods: {
    filterData(data) {
      return data.filter(node => {
        if (node.children && node.children.length > 0) {
          node.children = this.filterData(node.children) // 递归处理子节点
        }
        return node.isType !== 3 // 过滤掉isType为3的节点
      })
    },
    // 逆归实现 获取指定元素
    findNode(tree, func) {
      for (const node of tree) {
        if (func(node)) return node
        if (node.children) {
          const res = this.findNode(node.children, func)
          if (res) return res
        }
      }
      return null
    },
    // 展开选中的父级
    expandParents(node) {
      node.expanded = true
      if (node.parent) {
        this.expandParents(node.parent)
      }
    },
    getCateTree() {
      this.loading = true
      FetchCategoryMenu().then(res => {
        this.categroyTree = this.filterData(res)
        this.$nextTick(() => {
          let currentKey
          if (this.categroyTree[0].isType === 1) {
            currentKey = this.findNode(this.categroyTree[0].children, (node) => {
              return node.isType !== 1
            })
          } else {
            currentKey = this.categroyTree[0]
          }
          if (currentKey.id) {
            // 设置某个节点的当前选中状态
            this.$refs.tree.setCurrentKey(currentKey.id)
            this.$nextTick(() => {
              // 设置某个节点的父级展开
              const selectedKey = this.$refs.tree.getCurrentNode()
              if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) {
                this.expandParents(this.$refs.tree.getNode(selectedKey).parent)
              }
              // 选中节点的门类详情
              this.handleNodeClick(selectedKey)
            })
          }
        })
        this.loading = false
      })
    },
    handleNodeClick(val) {
      this.selectedCategory = val
      if (val.cnName) {
        this.$emit('nodeClick', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.elect-cont-left{
  width: 296px;
  padding: 0 !important;
}
[data-theme=light] .elect-cont-left .container-left {
  min-height: calc(100vh - 140px);
}
[data-theme=dark] .elect-cont-left .container-left {
  min-height: calc(100vh - 160px);
}
.openSidebar .elect-cont-right {
  width: calc(100vw - 592px);
}
// [data-theme=light] .elect-cont-right .container-right.tab-content {
//   min-height: calc(100vh - 200px) !important;
// }

[data-theme=light] .elect-cont-right {
    padding: 20px 0 !important;
}
[data-theme=dark] .elect-cont-right {
    margin-top: 0 !important;
}
.arc-title{
  position: relative;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #0C0E1E;
  background-color: #F3F5F8;
  &::after{
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
  }
}
.arc-title-top{
  &::after{
    width: 44px;
    height: 35px;
    background: url("~@/assets/images/collect/daml.png") no-repeat;
    background-size: 100% 100%;
  }
}
.arc-title-bottom{
  &::after{
    width: 41px;
    height: 40px;
    background: url("~@/assets/images/collect/kssx.png") no-repeat;
    background-size: 100% 100%;
  }
}
.arc-tree{
  padding: 0 20px;
  overflow: hidden;
  overflow-y: scroll;
}

::v-deep .el-tree-node__children .custom-tree-node{
  font-size: 14px;
  font-weight: normal;
}
</style>