You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
12 KiB
359 lines
12 KiB
<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>
|