yxk-electronic-archives/src/views/prearchiveLibrary/treeList.vue

<template>

  <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" :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="iconFile">
            {{ data.cnName }}
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import CRUD, { presenter, header } from '@crud/crud'
import { preLibraryCrud } from './mixins/index'

export default {
  name: 'PrearchiveTree',
  components: { },
  cruds() {
    return [
      CRUD({
        title: '预归档库', url: 'api/document/menu',
        crudMethod: { },
        optShow: {
          add: false,
          edit: false,
          del: false,
          download: true,
          group: false,
          reset: true
        }
      })
    ]
  },
  mixins: [presenter(), header(), preLibraryCrud],
  data() {
    return {
      permission: {
        add: ['admin', 'prearchiveLibrary:add'],
        edit: ['admin', 'prearchiveLibrary:edit'],
        del: ['admin', 'prearchiveLibrary:del'],
        sort: ['admin', 'prearchiveLibrary:sort']
      },
      defaultProps: {
        children: 'children',
        label: 'cnName'
      }
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeToAdd](crud, form, btn) {
    },
    [CRUD.HOOK.afterRefresh]() {
      this.crud.data = this.filterData(this.crud.data)
      this.$nextTick(() => {
        let currentKey
        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.$emit('nodeClick', val)
      }
    }
  }
}
</script>

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