|
|
<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"> <el-tooltip :content="node.label" placement="left" :enterable="false" effect="dark"> <span v-if="data.isType === 0"> {{ data.label }} </span> <span v-if="data.isType === 1" class="iconFolder tree-text"> {{ data.label }} </span> <span v-if="data.isType === 2" class="iconArch tree-text"> {{ data.label }} </span> <span v-if="data.isType === 3" class="iconFile tree-text"> {{ data.label }} </span> </el-tooltip> </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 show-checkbox @check="handleCheckChange" > <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" :smart-query="smartQuery" @openAnjuan="handleOpenAnjuan" @myYearEvent="handleYearData" /> <Anjuan v-if="selectedCategory.arrangeType === 1 || selectedCategory.arrangeType === 2 || selectedCategory.arrangeType === 3" ref="anjuanEle" :selected-category="selectedCategory" :data="sharedData" :is-recycle="isRecycle" :smart-query="smartQuery" @openJuannei="handleOpenJuannei" @myYearEvent="handleYearData" @changeActiveIndex="handleActive" /> <Juannei v-if="selectedCategory.arrangeType === 2 || selectedCategory.arrangeType === 3" ref="juanneiEle" :data="sharedData" :selected-category="selectedCategory" :is-recycle="isRecycle" :smart-query="smartQuery" @openFile="handleOpenFile" /> <File v-if="selectedCategory.arrangeType === 1 || selectedCategory.arrangeType === 2 || selectedCategory.arrangeType === 3" ref="fileEle" :is-recycle="isRecycle" :selected-category="selectedCategory" :smart-query="smartQuery" /> </div> </div> </div> </div> </template>
<script> import crudCategory from '@/api/category/category' import crudRoles from '@/api/system/role' import { FetchInitSearchFonds } from '@/api/archiveUtilize/archiveUtilize' import { collectionLibraryCrud } from './mixins/index.js' 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' import { mapGetters } from 'vuex'
export default { name: 'CollectionLibrary', components: { Project, Anjuan, Juannei, File }, cruds() { return [ CRUD({ title: '收集库', url: 'api/category/fondMenu', crudMethod: { ...crudCategory }, query: { page: null, size: null }, optShow: { add: false, edit: false, del: false, download: false, group: false } }) ] }, mixins: [presenter(), header(), collectionLibraryCrud], props: { isRecycle: { type: Boolean, default: false }, isdel: { type: Boolean, default: false } }, provide() { return { parentsData: this } }, data() { return { defaultProps: { children: 'children', label: 'label' }, defaultClassifyProps: { children: 'childDictionarys' || null, label: 'dictionaryName' || 'fondsName' }, defaultFondsProps: { children: 'children', label: 'fondsName' }, sharedData: '', selectedCategory: {}, yearChildData: '', parentsAnjuanRow: null, parentsProjectRow: null, parentsProjectId: null, parentsAnjuanId: null, parentsJuanneiId: null, smartQuery: { 'retention': null, // 保管期限
'security_class': null, // 密级
'doc_type': null, // 文种
'medium_type': null, // 载体类型
'archive_year': null, // 年度
'organ_or_function': null, // 机构与类型
'fonds_no': null // 全宗
}, isTabFile: false, fixedStatusBar: false, topLevelNode: null, listCategory: null } }, computed: { ...mapGetters([ 'user' ]) }, watch: { isdel: function(newValue, oldValue) { }, isRecycle: function(newValue, oldValue) { } }, created() { }, mounted() { }, methods: { handleYearData(data) { this.yearChildData = data this.classifyLoading = true setTimeout(() => { if (this.classifyTree.length !== 0 && this.classifyTree[0].dictionaryName === '年度') { this.classifyTree = this.classifyTree.slice(1) } if (this.yearChildData.length !== 0) { const newYearArr = this.yearChildData.map((item, index) => { const json = {} json.id = item json.dictionaryName = item json.dictionaryParents = '-1' json.childDictionarys = [] return json }) this.classifyTree.unshift({ id: -1, dictionaryName: '年度', dictionaryCode: 'archive_year', childDictionarys: newYearArr }) } this.classifyLoading = false }, 500) }, 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 }, // 根据父级展开全部子级
expandAllChildren(node, targetElement) { node.expanded = true // 递归展开当前节点的每个子节点
if (node.childNodes && node.childNodes.length > 0) { for (let i = 0; i < node.childNodes.length; i++) { if (node.childNodes[i].data.id === targetElement.id) { this.$refs.categroyTree.setCurrentKey(node.childNodes[i]) } this.expandAllChildren(node.childNodes[i], targetElement) } } }, // 转换函数,将原始数据转换为el-tree所需格式
transformData(rawData) { return rawData.map(item => { return { label: item.fondName, isType: 0, id: item.fondsId, fondsNo: item.fondsNo, children: item.categoryList.map(category => { return { label: category.cnName, cnName: category.cnName, code: category.code, id: category.id, arrangeType: category.arrangeType, isType: category.isType, fondsId: item.fondsId, fondName: item.fondName, fondsNo: item.fondsNo, children: this.transformChildren(category.children, category.code, item.fondsId, item.fondName, item.fondsNo) } }) } }) }, // 递归函数,用于处理数据的子节点
transformChildren(children, code, fondsId, fondName, fondsNo) { return children.map(child => { return { label: child.cnName, cnName: child.cnName, id: child.id, isType: child.isType, pid: child.pid, code: child.code || code, arrangeType: child.arrangeType, fondsId: fondsId, fondName: fondName, fondsNo: fondsNo, children: child.children.length ? this.transformChildren(child.children, fondsId, fondName, fondsNo) : [] } }) }, // 找顶级节点
findTopLevelNode(data, fondsId) { for (let i = 0; i < data.length; i++) { if (data[i].id === fondsId) { return data[i] } } return null }, [CRUD.HOOK.afterRefresh]() { this.crud.data = this.filterData(this.transformData(this.crud.data)) this.$nextTick(() => { let currentKey if (localStorage.getItem('currentArchivesKey') !== null) { currentKey = JSON.parse(localStorage.getItem('currentArchivesKey')) // 删除门类节点后
if (this.$refs.categroyTree.getCurrentKey(currentKey.id) == null) { localStorage.removeItem('currentArchivesKey') } this.topLevelNode = this.findTopLevelNode(this.crud.data, currentKey.fondsId) // 如果找到了顶级节点,则从该节点开始递归查找指定元素
if (this.topLevelNode) { if (currentKey) { // 展开顶级节点的子节点
if (currentKey.isType === 1) { currentKey = this.findNode(this.crud.data[0].children, (node) => { return node.isType !== 1 }) } this.expandAllChildren(this.$refs.categroyTree.getNode(this.topLevelNode), currentKey) } else { this.defaultSetting(currentKey) } } else { this.defaultSetting(currentKey) } } else { this.defaultSetting(currentKey) } if (currentKey && currentKey.id) { this.$nextTick(() => { // 选中节点的门类详情
console.log('444') this.handleNodeClick(currentKey) }) } }) }, defaultSetting(currentKey) { if (this.crud.data[0].isType === 0) { currentKey = this.findNode(this.crud.data[0].children, (node) => { return node.isType !== 1 }) this.expandAllChildren(this.$refs.categroyTree.getNode(this.crud.data[0]), currentKey) console.log('currentKey', currentKey) } else { currentKey = this.crud.data[0] this.expandAllChildren(this.$refs.categroyTree.getNode(this.crud.data[0]), currentKey) }
if (currentKey && currentKey.id) { this.$nextTick(() => { this.handleNodeClick(currentKey) }) } }, handleNodeClick(val) { localStorage.removeItem('savePrevFromData') localStorage.removeItem('currentPageSize') localStorage.removeItem('currentPage') this.smartQuery = { // 'retention': null, // 保管期限
// 'security_class': null, // 密级
// 'doc_type': null, // 文种
// 'medium_type': null, // 载体类型
'archive_year': null // 年度
// 'organ_or_function': null, // 机构与类型
// 'fonds_no': null // 全宗
} this.parentsProjectId = null this.parentsAnjuanId = null this.parentsJuanneiId = null this.parentsAnjuanRow = null this.parentsProjectRow = null // 缓存当前的选中的
localStorage.setItem('currentArchivesKey', JSON.stringify(val)) this.selectedCategory = val
if (this.selectedCategory.isType !== 1) { this.getDictionaryTreeByCategoryId(val.id) } else { this.classifyTree = [] }
this.$nextTick(() => { this.smartQuery.fonds_no = this.selectedCategory.fondsId this.getDictsList() // this.getFonds()
this.handlePageList() // Promise.all(this.user.roles.map(item => this.getRole(item.id)))
// .then(roles => {
// const allFondsIds = []
// const fondsObj = {}
// console.log(roles)
// roles.forEach(role => {
// role.fonds.forEach(fond => {
// if (!fondsObj[fond.id]) {
// fondsObj[fond.id] = fond
// allFondsIds.push(fond.id)
// }
// })
// })
// console.log(allFondsIds)
// this.$refs.classifyTree.setCheckedKeys(allFondsIds)
// if (allFondsIds.length !== 0) {
// const defaultChecked = this.$refs.classifyTree.getCheckedNodes()
// const fondsGroup = defaultChecked.filter(item => item.fondsId).map(item => item.fondsNo)
// this.smartQuery.fonds_no = fondsGroup.join(',')
// } else {
// // this.smartQuery.fonds_no = null
// FetchInitSearchFonds().then(res => {
// this.smartQuery.fonds_no = res.map(item => item.fondsNo).join(',')
// })
// }
// this.handlePageList()
// })
// .catch(error => {
// console.error(error)
// })
}) }, getFonds() { FetchInitSearchFonds().then(res => { const allFondsIds = res.map(item => item.fondsId) // this.$refs.classifyTree.setCheckedKeys(allFondsIds)
this.smartQuery.fonds_no = allFondsIds.join(',') }) }, handlePageList(isQuickFilter) { if (this.selectedCategory.arrangeType === 3) { const tablistEle = this.$refs.projectEle tablistEle.page.page = 0 tablistEle.currentPage = 1 // 项目下
if (isQuickFilter) { tablistEle.$refs.collectHeaderRef.getInitArchivesClass() tablistEle.getTableDisplayFieldsLoading = true tablistEle.getViewTableList(1, null, isQuickFilter) } else { tablistEle.getCommonData(1) } } else if (this.selectedCategory.arrangeType === 2) { const getActiveIndex = this.$refs.anjuanEle.$refs.ajContent.activeIndex const tablistEle = this.$refs.anjuanEle.$refs.ajContent.$refs.tableList tablistEle.page.page = 0 tablistEle.currentPage = 0 // 案卷下
if (isQuickFilter) { tablistEle.$refs.collectHeaderRef.getInitArchivesClass() tablistEle.getTableDisplayFieldsLoading = true if (getActiveIndex === 0) { tablistEle.getViewTableList(2, null, isQuickFilter) } else { tablistEle.getViewTableList(3, null, isQuickFilter) } } else { tablistEle.getCommonData(2) if (this.$refs.anjuanEle) { this.$refs.anjuanEle.anjuanDrawer = false if (this.$refs.anjuanEle.$refs.ajContent) { this.$refs.anjuanEle.$refs.ajContent.activeIndex = 0 } } } } else if (this.selectedCategory.arrangeType === 1) { const tablistEle = this.$refs.anjuanEle.$refs.ajContent.$refs.tableList tablistEle.page.page = 0 tablistEle.currentPage = 1 // 文件下
if (isQuickFilter) { tablistEle.$refs.collectHeaderRef.getInitArchivesClass() tablistEle.getTableDisplayFieldsLoading = true tablistEle.getViewTableList(3, null, isQuickFilter) } else { tablistEle.getCommonData(3) } } if (this.$refs.anjuanEle) { this.$refs.anjuanEle.anjuanDrawer = false } if (this.$refs.juanneiEle) { this.$refs.juanneiEle.juanneiDrawer = false } if (this.$refs.fileEle) { this.$refs.fileEle.fileDrawer = false } }, getRole(id) { return crudRoles.get(id) }, getDictionaryTreeByCategoryId(categoryId) { this.classifyLoading = true const params = { 'categoryId': categoryId } FetchDictionaryTreeByCategoryId(params).then((res) => { this.classifyTree = res.dictionarys // let fonds
// if (res.fonds.length <= 1) {
// fonds = []
// } else {
// const parent = {}
// parent.id = 0
// parent.fondsName = '全宗'
// parent.childDictionarys = res.fonds.map(item => {
// return {
// ...item,
// id: item.fondsId
// }
// })
// fonds = parent
// }
// if (res.dictionarys.length === 0) {
// this.classifyTree = []
// if (fonds.length !== 0) {
// this.classifyTree.push(fonds)
// }
// } else {
// this.classifyTree = res.dictionarys.concat(fonds)
// }
this.classifyLoading = false }).catch(err => { console.log(err) }) }, getIdByCode(dictionaryCode) { for (const dictionary of this.classifyTree) { if (dictionary.dictionaryCode === dictionaryCode) { return dictionary.id } } return null }, handleCheckChange(data, checked, indeterminate) { // 获取所有选中的节点
const res = this.$refs.classifyTree.getCheckedNodes() this.smartQuery.fonds_no = this.selectedCategory.fondsId // const fondsGroup = res.filter(item => item.fondsId).map(item => item.fondsId)
// console.log('fondsGroup', fondsGroup)
// if (fondsGroup.length === 0) {
// this.smartQuery.fonds_no = this.selectedCategory.fondsId
// // FetchInitSearchFonds().then(res => {
// // this.smartQuery.fonds_no = res.map(item => item.fondsId).join(',')
// // this.$nextTick(() => {
// // this.handlePageList('quickFilter')
// // })
// // })
// } else {
// this.smartQuery.fonds_no = fondsGroup.join(',')
// }
const groupedData = {} const securityId = this.getIdByCode('security_class') const retentionId = this.getIdByCode('retention') const docTypeId = this.getIdByCode('doc_type') const mediumTypeId = this.getIdByCode('medium_type') const organOrFunctionId = this.getIdByCode('organ_or_function')
res.forEach(function(item) { if (item.dictionaryParents === '-1') { groupedData.archive_year = groupedData.archive_year || [] groupedData.archive_year.push(item.dictionaryName) } else if (item.dictionaryParents === securityId) { groupedData.security_class = groupedData.security_class || [] groupedData.security_class.push(item.dictionaryName) } else if (item.dictionaryParents === retentionId) { groupedData.retention = groupedData.retention || [] groupedData.retention.push(item.dictionaryName) } else if (item.dictionaryParents === docTypeId) { groupedData.doc_type = groupedData.doc_type || [] groupedData.doc_type.push(item.dictionaryName) } else if (item.dictionaryParents === mediumTypeId) { groupedData.medium_type = groupedData.medium_type || [] groupedData.medium_type.push(item.dictionaryName) } else if (item.dictionaryParents === organOrFunctionId) { groupedData.organ_or_function = groupedData.organ_or_function || [] groupedData.organ_or_function.push(item.dictionaryName) } })
if (data.id) { const selectedParentVal = this.$refs.classifyTree.getNode(data.id).parent.data.dictionaryCode switch (selectedParentVal) { case 'security_class': if (res.find(obj => obj.dictionaryCode === 'security_class')) { this.smartQuery.security_class = null } else { if (groupedData.security_class) { this.smartQuery.security_class = groupedData.security_class.join(',') } else { this.smartQuery.security_class = null } } break case 'retention': if (res.find(obj => obj.dictionaryCode === 'retention')) { this.smartQuery.retention = null } else { if (groupedData.retention) { this.smartQuery.retention = groupedData.retention.join(',') } else { this.smartQuery.retention = null } } break case 'doc_type': if (res.find(obj => obj.dictionaryCode === 'doc_type')) { this.smartQuery.doc_type = null } else { if (groupedData.doc_type) { this.smartQuery.doc_type = groupedData.doc_type.join(',') } else { this.smartQuery.doc_type = null } } break case 'medium_type': if (res.find(obj => obj.dictionaryCode === 'medium_type')) { this.smartQuery.medium_type = null } else { if (groupedData.medium_type) { this.smartQuery.medium_type = groupedData.medium_type.join(',') } else { this.smartQuery.medium_type = null } } break case 'organ_or_function': if (res.find(obj => obj.dictionaryCode === 'organ_or_function')) { this.smartQuery.organ_or_function = null } else { if (groupedData.organ_or_function) { this.smartQuery.organ_or_function = groupedData.organ_or_function.join(',') } else { this.smartQuery.organ_or_function = null } } break default: if (groupedData.archive_year) { this.smartQuery.archive_year = groupedData.archive_year.join(',') } else { this.smartQuery.archive_year = null } } } this.$nextTick(() => { this.handlePageList('quickFilter') }) }, handleOpenAnjuan(data, parentId, parentsRow) { localStorage.removeItem('savePrevFromData') this.parentsProjectId = parentId this.parentsProjectRow = parentsRow this.$refs.anjuanEle.anjuanDrawer = true
this.activeIndex = 0 if (this.$refs.anjuanEle.$refs.ajContent) { this.$refs.anjuanEle.$refs.ajContent.activeIndex = 0 } this.$nextTick(() => { this.$refs.anjuanEle.$refs.ajContent.$refs.tableList.currentPage = 1 this.$refs.anjuanEle.$refs.ajContent.$refs.tableList.page.page = 0 this.$refs.anjuanEle.$refs.ajContent.$refs.tableList.getCommonData(2, this.parentsProjectId) this.$refs.anjuanEle.$refs.ajContent.test = data }) }, handleOpenJuannei(data, parentId, parentsRow) { localStorage.removeItem('savePrevFromData') this.parentsAnjuanId = parentId this.parentsAnjuanRow = parentsRow if (this.selectedCategory.arrangeType === 1 || (this.selectedCategory.arrangeType === 3 && this.$refs.anjuanEle.$refs.ajContent.activeIndex === 1) || (this.selectedCategory.arrangeType === 2 && this.$refs.anjuanEle.$refs.ajContent.activeIndex === 1)) { this.$refs.fileEle.fileDrawer = true this.$nextTick(() => { this.$refs.fileEle.currentPage = 1 this.$refs.fileEle.page.page = 0 this.$refs.fileEle.getCommonData(4, this.parentsAnjuanId) this.$refs.fileEle.test = data this.$refs.fileEle.isAjNo = 1 }) } else { this.$refs.juanneiEle.juanneiDrawer = true this.$nextTick(() => { this.$refs.juanneiEle.currentPage = 1 this.$refs.juanneiEle.page.page = 0 this.$refs.juanneiEle.getCommonData(3, this.parentsAnjuanId) this.$refs.juanneiEle.test = data this.$refs.fileEle.isAjNo = 0 }) } }, handleOpenFile(data, parentId) { localStorage.removeItem('savePrevFromData') this.parentsJuanneiId = parentId this.$refs.fileEle.fileDrawer = true this.$nextTick(() => { this.$refs.fileEle.currentPage = 1 this.$refs.fileEle.page.page = 0 this.$refs.fileEle.getCommonData(4, this.parentsJuanneiId) this.$refs.fileEle.test = data }) }, handleActive(data) { localStorage.removeItem('savePrevFromData') this.smartQuery = { 'retention': null, // 保管期限
'security_class': null, // 密级
'doc_type': null, // 文种
'medium_type': null, // 载体类型
'archive_year': null, // 年度
'organ_or_function': null, // 机构与类型
'fonds_no': null // 全宗
} this.smartQuery.fonds_no = this.selectedCategory.fondsId this.$refs.classifyTree.setCheckedKeys([]) var treeNodeList = this.$refs.classifyTree.store._getAllNodes() for (var i = 0; i < treeNodeList.length; i++) { treeNodeList[i].expanded = false } } } } </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 - 200px) !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; } .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; .el-tree{ margin: 0; } } ::v-deep .el-tree-node__children .custom-tree-node{ font-size: 14px; }
::v-deep .custom-tree-node{ font-size: 14px; font-weight: normal; }
[data-theme=light] .elect-cont-right { padding: 15px 0 !important; } [data-theme=dark] .elect-cont-right { margin-top: 0 !important; }
.el-tree{ .el-tree-node__children{ .tree-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 160px; } } } </style>
|