yxk-electronic-archives/src/views/archivesManage/managementLibrary/index.vue

<template>
  <div class="app-container archives-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="arc-left-tree">
            <h3 class="arc-title arc-title-top">档案门类</h3>
            <div class="tree-scroll">
              <el-tree ref="categroyTree" v-loading="crud.loading" class="arc-tree arc-tree-01" :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="iconArch">
                    {{ data.cnName }}
                  </span>
                  <span v-if="data.isType === 3" class="iconFile">
                    {{ data.cnName }}
                  </span>
                </span>
              </el-tree>
            </div>
            <h3 class="arc-title arc-title-bottom">快速筛选</h3>
            <el-tree
              ref="classifyTree"
              v-loading="classifyLoading"
              class="arc-tree arc-tree-02"
              :data="classifyTree"
              :props="defaultClassifyProps"
              node-key="id"
              :expand-on-click-node="false"
              highlight-current
              @node-click="handleNodeFilter"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span v-if="data.childDictionarys || data.fondsName" class="iconClassify">
                  {{ data.dictionaryName || data.fondsName }}
                </span>
                <span v-else class="iconClassify-child">
                  {{ data.dictionaryName }}
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
      <!--用户数据-->
      <div v-if="selectedCategory.isType !== 1" class="elect-cont-right">
        <div class="container-right tab-content">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <Project v-if="selectedCategory.arrangeType === 3" ref="projectEle" :selected-category="selectedCategory" :data="sharedData" :is-recycle="isRecycle" @openAnjuan="handleOpenAnjuan" />
          <Anjuan v-if="selectedCategory.arrangeType === 1 || selectedCategory.arrangeType === 2 || selectedCategory.arrangeType === 3" ref="anjuanEle" :selected-category="selectedCategory" :data="sharedData" :is-recycle="isRecycle" @openJuannei="handleOpenJuannei" />
          <Juannei v-if="selectedCategory.arrangeType === 2 || selectedCategory.arrangeType === 3" ref="juanneiEle" :data="sharedData" :selected-category="selectedCategory" :is-recycle="isRecycle" @openFile="handleOpenFile" />
          <File v-if="selectedCategory.arrangeType === 1 || selectedCategory.arrangeType === 2 || selectedCategory.arrangeType === 3" ref="fileEle" :is-recycle="isRecycle" :selected-category="selectedCategory" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crudCategory from '@/api/category/category'
import { manageLibraryCrud } from './mixins/index'
import { FetchDictionaryTreeByCategoryId } from '@/api/system/dict'
import CRUD, { presenter, header } from '@crud/crud'
import Project from './project/index'
import Anjuan from './anjuan/index'
import Juannei from './juannei/index'
import File from './file/index'
export default {
  name: 'CollectionLibrary',
  components: { Project, Anjuan, Juannei, File },
  cruds() {
    return [
      CRUD({
        title: '收集库', url: 'api/category/menu',
        crudMethod: { ...crudCategory },
        optShow: {
          add: false,
          edit: false,
          del: false,
          download: false,
          group: false
        }
      })
    ]
  },
  mixins: [presenter(), header(), manageLibraryCrud],
  props: {
    isRecycle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'cnName'
      },
      defaultClassifyProps: {
        children: 'childDictionarys',
        label: 'dictionaryName'
      },
      sharedData: '',
      selectedCategory: {},
      classifyTree: [],
      classifyLoading: false
    }
  },
  watch: {
    isRecycle: function(newValue, oldValue) {
    }
  },
  created() {
  },
  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)
      }
    },
    [CRUD.HOOK.afterRefresh]() {
      this.crud.data = this.filterData(this.crud.data)
      this.$nextTick(() => {
        let currentKey
        if (localStorage.getItem('currentArchivesKey')) {
          currentKey = JSON.parse(localStorage.getItem('currentArchivesKey'))
          // 删除门类节点后
          if (this.$refs.categroyTree.getCurrentKey(currentKey.id) == null) {
            localStorage.removeItem('currentArchivesKey')
          }
          // 缓存的门类节点判断
          if (currentKey.isType === 1) {
            if (currentKey.children.length !== 0) {
              currentKey = this.findNode(currentKey.children, (node) => {
                return node.isType !== 1
              })
            }
          }
        } 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]
          }
        }
        if (currentKey.id) {
        // 设置某个节点的当前选中状态
          this.$refs.categroyTree.setCurrentKey(currentKey.id)
          this.$nextTick(() => {
          // 设置某个节点的父级展开
            const selectedKey = this.$refs.categroyTree.getCurrentNode()
            if (this.$refs.categroyTree.getNode(selectedKey) && this.$refs.categroyTree.getNode(selectedKey).parent) {
              this.expandParents(this.$refs.categroyTree.getNode(selectedKey).parent)
            }
            // 选中节点的门类详情
            this.handleNodeClick(selectedKey)
          })
        }
      })
    },
    handleNodeClick(val) {
      // 缓存当前的选中的
      localStorage.setItem('currentArchivesKey', JSON.stringify(val))
      this.selectedCategory = val

      if (this.selectedCategory.isType !== 1) {
        this.getDictionaryTreeByCategoryId(val.id)
      } else {
        this.classifyTree = []
      }

      this.$nextTick(() => {
        if (this.selectedCategory.arrangeType === 3) {
          // this.$refs.projectEle.getCommonData(1)
        } else if (this.selectedCategory.arrangeType === 2) {
          // this.$refs.anjuanEle.$refs.ajContent.$refs.tableList.getCommonData(2)
        } else if (this.selectedCategory.arrangeType === 1) {
          // this.$refs.anjuanEle.$refs.ajContent.$refs.tableList.getCommonData(3)
        }
        if (this.$refs.anjuanEle) {
          this.$refs.anjuanEle.anjuanDrawer = false
          // if (this.$refs.anjuanEle.$refs.ajContent) {
          //   this.$refs.anjuanEle.$refs.ajContent.activeIndex = 0
          // }
        }
        if (this.$refs.juanneiEle) {
          this.$refs.juanneiEle.juanneiDrawer = false
        }
        if (this.$refs.fileEle) {
          this.$refs.fileEle.fileDrawer = false
        }
      })
    },
    getDictionaryTreeByCategoryId(categoryId) {
      this.classifyLoading = true
      const params = {
        'categoryId': categoryId
      }
      FetchDictionaryTreeByCategoryId(params).then((res) => {
        let fonds
        if (res.fonds.length <= 1) {
          fonds = []
        } else {
          fonds = res.fonds
        }
        this.classifyTree = res.dictionarys.concat(fonds)
        this.classifyLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleNodeFilter(val) {
      console.log('val', val)
    },
    handleOpenAnjuan(data) {
      this.$refs.anjuanEle.anjuanDrawer = true
      // this.$refs.anjuanEle.$refs.ajContent.activeIndex = 0
      this.$nextTick(() => {
        this.$refs.anjuanEle.$refs.ajContent.test = data
      })
    },
    handleOpenJuannei(data) {
      if (this.selectedCategory.arrangeType === 1) {
        // && this.$refs.anjuanEle.$refs.ajContent.activeIndex === 1
        this.$refs.fileEle.fileDrawer = true
        this.$nextTick(() => {
          this.$refs.fileEle.test = data
          this.$refs.fileEle.isAjNo = 1
        })
      } else {
        this.$refs.juanneiEle.juanneiDrawer = true
        this.$nextTick(() => {
          this.$refs.juanneiEle.test = data
          this.$refs.fileEle.isAjNo = 0
        })
      }
    },
    handleOpenFile(data) {
      this.$refs.fileEle.fileDrawer = true
      this.$nextTick(() => {
        this.$refs.fileEle.test = data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.elect-cont-left{
  width: 276px;
  padding: 0 !important;
}
.hideSidebar .elect-cont-left {
  width: 265px !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 - 180px) !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;
  background-color: red;
}
.arc-tree-01{
  height: 400px;
  overflow: hidden;
  overflow-y: scroll;
}
[data-theme=dark] .arc-tree-01{
  height: 370px;
}

.arc-tree-02{
  height: calc(100vh - 720px);
  overflow: hidden;
  overflow-y: scroll;
}
::v-deep .el-tree-node__children .custom-tree-node{
  font-size: 14px;
}

[data-theme=light] .elect-cont-right {
    padding: 0 20px !important;
}
[data-theme=dark] .elect-cont-right {
    margin-top: 0 !important;
}
</style>