yxk-electronic-archives/src/views/system/archivesClassify/index.vue

<template>
  <div class="app-container">
    <div class="container-main" style="justify-content: flex-start;">
      <!--侧边部门数据-->
      <div class="elect-cont-left">
        <div class="container-left">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <div class="tree-scroll">
            <el-tree
              ref="tree"
              v-loading="crud.loading"
              :data="crud.data"
              node-key="id"
              :props="defaultProps"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            />
          </div>
        </div>
      </div>
      <!--用户数据-->
      <TableList ref="tableList" :selected-category="selectedCategory" />
    </div>
  </div></template>

<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
import TableList from './module/tableList'
import Vue from 'vue'

export default {
  name: 'Classify',
  components: { TableList },
  cruds() {
    return CRUD({ title: '分类', url: 'api/category/menu', crudMethod: {}, sort: [] })
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      selectedCategory: {},
      defaultProps: { children: 'children', label: 'cnName' }
    }
  },
  created() {
  },
  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)
      }
    },
    [CRUD.HOOK.afterRefresh]() {
      this.crud.data = this.filterData(this.crud.data)
      this.$nextTick(() => {
        let currentKey
        if (localStorage.getItem('classifyCategoryKey')) {
          currentKey = JSON.parse(localStorage.getItem('classifyCategoryKey'))
        } else {
          if (this.crud.data[0].isType === 1) {
            currentKey = this.findNode(this.crud.data[0].children, (node) => {
              return node.isType !== 1
            })
          } else {
            currentKey = this.crud.data[0]
          }
        }
        // 设置某个节点的当前选中状态
        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)
        })
      })
    },
    // 选中门类后，设置门类详情数据
    handleNodeClick(val) {
      if (val) {
        this.selectedCategory = val
        if (val.pid !== '0') {
          Vue.set(this.selectedCategory, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName)
        }
        // 缓存当前的选中的
        localStorage.setItem('classifyCategoryKey', JSON.stringify(val))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
[data-theme=dark] .elect-cont-left .container-left{
  min-height: calc(100vh - 160px);
}
[data-theme=dark] .elect-cont-right .container-right{
  min-height: calc(100vh - 212px);
}
[data-theme=light] .elect-cont-right .container-right{
  min-height: calc(100vh - 232px);
}
.tree-scroll{
  font-size: 14px;
}
</style>