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="keyId" :expand-on-click-node="false" highlight-current default-expand-all @node-click="handleNodeClick">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span v-if="data.isType === 1 " class="iconFolder">
            {{ data.label }}
          </span>
          <span v-if="data.isType === 2" class="iconFile">
            {{ data.label }}
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

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

export default {
  name: 'PrearchiveTree',
  components: { },
  cruds() {
    return [
      CRUD({
        title: '预归档库', url: 'api/document/menu_perpare',
        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: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      this.crud.query.page = null
      this.crud.query.size = null
      this.crud.query.fondsId = this.user.fonds.id
      const ids = this.user.roles.map(item => { return item.id })
      this.crud.query.roleIds = ids.join(',')
    },
    [CRUD.HOOK.afterRefresh]() {
      this.crud.data = this.crud.data.map((item, index) => {
        const newItem = {
          ...item.fonds,
          keyId: item.fonds.fonds_id,
          isType: 1,
          label: item.fonds.fonds_name,
          children: item.document.map((doc, childIndex) => {
            // 生成唯一的子节点 id
            const uniqueChildId = `${item.fonds.fonds_id}_${doc.id}_${childIndex}`
            return {
              ...doc,
              keyId: uniqueChildId,
              fondsId: item.fonds.fonds_id,
              fondsNo: item.fonds.fonds_no,
              label: doc.cnName
            }
          })
        }
        return newItem
      })
      this.$nextTick(() => {
        if (this.crud.data.length > 0 && this.crud.data[0].children && this.crud.data[0].children.length > 0) {
          const targetNode = this.crud.data[0].children[0]
          const node = this.$refs.tree.getNode(targetNode.keyId)
          if (node) {
            this.$refs.tree.setCurrentKey(targetNode.keyId)
            this.handleNodeClick(node.data)
          }
        }
      })
    },
    // 选中门类后
    handleNodeClick(val) {
      console.log('val', 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>