11 changed files with 632 additions and 192 deletions
-
4src/assets/styles/collect-reorganizi.scss
-
3src/assets/styles/prearchive-library.scss
-
349src/views/archivesManage/managementLibrary/index.vue
-
3src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue
-
3src/views/collectReorganizi/collectionLibrary/file/index.vue
-
4src/views/collectReorganizi/collectionLibrary/juannei/index.vue
-
3src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
-
3src/views/collectReorganizi/collectionLibrary/project/index.vue
-
6src/views/components/category/PreviewForm.vue
-
1src/views/prearchiveLibrary/index.vue
-
67src/views/prearchiveLibrary/module/moveFile.vue
@ -0,0 +1,349 @@ |
|||
<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 |
|||
> |
|||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|||
<span v-if="data.pid === null " class="iconClassify"> |
|||
{{ data.name }} |
|||
</span> |
|||
<span v-if="data.pid" class="iconClassify-child"> |
|||
{{ data.name }} |
|||
</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 { collectionLibraryCrud } from './mixins/index' |
|||
import { FetchArchivesClassTree } from '@/api/system/archivesClass' |
|||
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()], |
|||
props: { |
|||
isRecycle: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'cnName' |
|||
}, |
|||
defaultClassifyProps: { |
|||
children: 'childArchivesClass', |
|||
label: 'name' |
|||
}, |
|||
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.getInitArchivesClass(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 |
|||
} |
|||
}) |
|||
}, |
|||
getInitArchivesClass(categoryId) { |
|||
this.classifyLoading = true |
|||
const params = { |
|||
'categoryId': categoryId |
|||
} |
|||
FetchArchivesClassTree(params).then((res) => { |
|||
this.classifyTree = res |
|||
this.classifyLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
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.selectedCategory.arrangeType === 3) || (this.selectedCategory.arrangeType === 2)) { |
|||
// && 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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue