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

<template>
  <div class="app-container">
    <!-- 门类列表 -->
    <div class="container-main">
      <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="treeList" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @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>
      </div>
      <div class="elect-cont-right">
        <!--工具栏-->
        <div class="head-container">
          <div class="head-search">
            <!-- 搜索 -->
            <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
            <rrOperation />
          </div>
          <crudOperation :permission="permission">
            <template v-slot:right>
              <el-button size="mini">批量成件</el-button>
              <el-button size="mini">合并成件</el-button>
              <el-button size="mini">移动</el-button>
            </template>
          </crudOperation>
        </div>
        <!--表格渲染-->
        <div class="container-right">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <el-table
            ref="table"
            v-loading="crud.loading"
            lazy
            :data="crud.data"
            row-key="id"
            @select="crud.selectChange"
            @select-all="crud.selectAllChange"
            @selection-change="crud.selectionChangeHandler"
          >
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column type="index" label="份号" align="center" width="55" />
            <el-table-column label="标题" prop="name" :show-overflow-tooltip="true" width="200" />
            <el-table-column label="发文字号" prop="number" />
            <el-table-column label="成文日期" prop="date" />
            <el-table-column label="机构或问题" prop="problem" />
            <el-table-column label="公文标识" prop="officialIdent" />
            <el-table-column label="文种" prop="recordType" />
            <el-table-column label="密级" prop="seClassification" />
            <el-table-column label="保管期限" prop="period" />
          </el-table>
          <!--分页组件-->
          <pagination v-if="crud.data.length!==0" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crudCategory from '@/api/category/category'
import CRUD, { presenter, header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import dataJson from './data.json'

export default {
  name: 'PrearchiveLibrary',
  components: { rrOperation, crudOperation },
  cruds() {
    return [
      CRUD({
        title: '预归档库', url: 'api/archives-type/menu',
        crudMethod: { ...crudCategory },
        optShow: {
          add: true,
          edit: true,
          del: true,
          download: true,
          group: false,
          reset: true
        }
      })
    ]
  },
  mixins: [presenter(), header()],
  data() {
    return {
      permission: {
        add: ['admin', 'prearchiveLibrary:add'],
        edit: ['admin', 'prearchiveLibrary:edit'],
        del: ['admin', 'prearchiveLibrary:del'],
        sort: ['admin', 'prearchiveLibrary:sort']
      },
      treeList: []
    }
  },
  computed: {
  },
  created() {
    this.treeList = dataJson
  },
  methods: {
    // 展开选中的父级
    expandParents(node) {
      node.expanded = true
      if (node.parent) {
        this.expandParents(node.parent)
      }
    },
    [CRUD.HOOK.beforeToAdd](crud, form, btn) {
    },
    [CRUD.HOOK.afterRefresh]() {
      let currentKey
      if (localStorage.getItem('currentMetaDataKey')) {
        currentKey = JSON.parse(localStorage.getItem('currentMetaDataKey'))
      } else {
        currentKey = this.treeList[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) {
    }
  }
}
</script>

<style lang='scss' scoped>
</style>