3 changed files with 441 additions and 4 deletions
-
13src/views/archiveUtilize/archiveSearch/index.vue
-
425src/views/archiveUtilize/archiveSearch/module/resultList.vue
-
7src/views/system/archivesClassify/module/tableList.vue
@ -0,0 +1,425 @@ |
|||||
|
<template> |
||||
|
<div class="result-main"> |
||||
|
<div class="result-left"> |
||||
|
<el-collapse v-model="activeNames" @change="handleChange"> |
||||
|
<el-collapse-item title="全宗" name="1"> |
||||
|
<el-input |
||||
|
v-model="filterFondsText" |
||||
|
class="quick-search" |
||||
|
placeholder="快速检索" |
||||
|
suffix-icon="el-icon-search" |
||||
|
/> |
||||
|
<el-tree |
||||
|
ref="tree" |
||||
|
:data="fondsOptions" |
||||
|
show-checkbox |
||||
|
default-expand-all |
||||
|
node-key="id" |
||||
|
:props="{children: 'children', label: 'fondsName'}" |
||||
|
:filter-node-method="filterFondsNode" |
||||
|
@check-change="getFondsCheckedKeys" |
||||
|
/> |
||||
|
</el-collapse-item> |
||||
|
<el-collapse-item title="档案门类" name="2"> |
||||
|
<el-input |
||||
|
v-model="filterCategoryText" |
||||
|
class="quick-search" |
||||
|
placeholder="快速检索" |
||||
|
suffix-icon="el-icon-search" |
||||
|
/> |
||||
|
<el-tree |
||||
|
ref="treeCategory" |
||||
|
:data="categoryOptions" |
||||
|
show-checkbox |
||||
|
default-expand-all |
||||
|
node-key="id" |
||||
|
:props="{children: 'children', label: 'cnName'}" |
||||
|
:filter-node-method="filterCategoryNode" |
||||
|
@check-change="getCategoryCheckedKeys" |
||||
|
/> |
||||
|
</el-collapse-item> |
||||
|
<el-collapse-item title="档案分类" name="3"> |
||||
|
<el-input |
||||
|
v-model="filterClassifyText" |
||||
|
class="quick-search" |
||||
|
placeholder="快速检索" |
||||
|
suffix-icon="el-icon-search" |
||||
|
/> |
||||
|
<el-tree |
||||
|
ref="treeClassify" |
||||
|
:data="classifyOptions" |
||||
|
show-checkbox |
||||
|
default-expand-all |
||||
|
node-key="id" |
||||
|
:props="{children: 'children', label: 'name'}" |
||||
|
:filter-node-method="filterClassifyNode" |
||||
|
@check-change="getClassifyCheckedKeys" |
||||
|
/> |
||||
|
</el-collapse-item> |
||||
|
<el-collapse-item title="档案层级" name="4"> |
||||
|
<el-input |
||||
|
v-model="filterLevelText" |
||||
|
class="quick-search" |
||||
|
placeholder="快速检索" |
||||
|
suffix-icon="el-icon-search" |
||||
|
/> |
||||
|
<el-tree |
||||
|
ref="treeLevel" |
||||
|
:data="levelOptions" |
||||
|
show-checkbox |
||||
|
default-expand-all |
||||
|
node-key="id" |
||||
|
:props="{children: 'children', label: 'label'}" |
||||
|
:filter-node-method="filterLevelNode" |
||||
|
@check-change="getLevelCheckedKeys" |
||||
|
/> |
||||
|
</el-collapse-item> |
||||
|
</el-collapse> |
||||
|
</div> |
||||
|
<div class="result-right"> |
||||
|
<div class="right-header"> |
||||
|
<div class="head-search"> |
||||
|
<el-select |
||||
|
v-model="status" |
||||
|
multiple |
||||
|
collapse-tags |
||||
|
placeholder="状态(支持多选)" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in statusOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<div class="search-input"> |
||||
|
<el-input v-model="keyword" placeholder="请输入检索关键字" class="input-with-select"> |
||||
|
<el-button slot="append" icon="el-icon-search">搜索</el-button> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<span class="change-search">高级搜索</span> |
||||
|
</div> |
||||
|
<div class="search-tip"> |
||||
|
检索 “<span>合同</span>” 成功获得<i>30</i>条结果 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="result-list"> |
||||
|
<div class="result-item">1</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script > |
||||
|
import { FetchFondsAll } from '@/api/system/fonds' |
||||
|
import { FetchCategoryMenu } from '@/api/system/category/category' |
||||
|
export default { |
||||
|
name: 'ResultList', |
||||
|
data() { |
||||
|
return { |
||||
|
activeNames: ['1'], |
||||
|
filterFondsText: '', |
||||
|
fondsOptions: [], |
||||
|
filterCategoryText: '', |
||||
|
categoryOptions: [], |
||||
|
filterLevelText: '', |
||||
|
levelOptions: [ |
||||
|
{ |
||||
|
label: '原文', |
||||
|
value: '4' |
||||
|
}, |
||||
|
{ |
||||
|
label: '文件', |
||||
|
value: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '案卷', |
||||
|
value: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '项目', |
||||
|
value: '1' |
||||
|
} |
||||
|
], |
||||
|
filterClassifyText: '', |
||||
|
classifyOptions: [], |
||||
|
statusOptions: [], |
||||
|
status: null, |
||||
|
keyword: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
filterFondsText(val) { |
||||
|
this.$refs.tree.filter(val) |
||||
|
}, |
||||
|
filterCategoryText(val) { |
||||
|
this.$refs.treeCategory.filter(val) |
||||
|
}, |
||||
|
filterLevelText(val) { |
||||
|
this.$refs.treeLevel.filter(val) |
||||
|
}, |
||||
|
filterClassifyText(val) { |
||||
|
this.$refs.treeClassify.filter(val) |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 延迟模拟请求数据 |
||||
|
setTimeout(() => { |
||||
|
this.getFondsDatas() |
||||
|
this.getCategoryDataTree() |
||||
|
}, 300) |
||||
|
}, |
||||
|
methods: { |
||||
|
getFondsDatas() { |
||||
|
FetchFondsAll().then(res => { |
||||
|
this.fondsOptions = res |
||||
|
}) |
||||
|
}, |
||||
|
filterData(data) { |
||||
|
const result = [] |
||||
|
for (const node of data) { |
||||
|
if (node.isType === 2) { |
||||
|
const filteredChildren = node.children.filter(child => child.isType !== 3) |
||||
|
node.children = filteredChildren |
||||
|
result.push(node) |
||||
|
} else if (node.children && node.children.length > 0) { |
||||
|
const filteredChildren = this.filterData(node.children) |
||||
|
result.push(...filteredChildren) |
||||
|
} |
||||
|
} |
||||
|
return result |
||||
|
}, |
||||
|
filterArchivesClasses(data, result = []) { |
||||
|
if (data && data.length > 0) { |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
const archivesClasses = data[i].archivesClasses |
||||
|
if (archivesClasses && archivesClasses.length > 0) { |
||||
|
result.push(...archivesClasses) |
||||
|
} |
||||
|
this.filterArchivesClasses(data[i].children, result) |
||||
|
} |
||||
|
} |
||||
|
return result |
||||
|
}, |
||||
|
getCategoryDataTree() { |
||||
|
FetchCategoryMenu().then(res => { |
||||
|
this.categoryOptions = this.filterData(res) |
||||
|
this.classifyOptions = this.filterArchivesClasses(res) |
||||
|
}) |
||||
|
}, |
||||
|
handleChange(val) { |
||||
|
console.log(val) |
||||
|
}, |
||||
|
filterFondsNode(value, data) { |
||||
|
if (!value) return true |
||||
|
return data.fondsName.indexOf(value) !== -1 |
||||
|
}, |
||||
|
filterCategoryNode(value, data) { |
||||
|
if (!value) return true |
||||
|
return data.cnName.indexOf(value) !== -1 |
||||
|
}, |
||||
|
filterLevelNode(value, data) { |
||||
|
if (!value) return true |
||||
|
return data.label.indexOf(value) !== -1 |
||||
|
}, |
||||
|
filterClassifyNode(value, data) { |
||||
|
if (!value) return true |
||||
|
return data.name.indexOf(value) !== -1 |
||||
|
}, |
||||
|
getFondsCheckedKeys() { |
||||
|
const checkedKeys = this.$refs.tree.getCheckedNodes() |
||||
|
console.log('fondsKeys', checkedKeys) |
||||
|
}, |
||||
|
getCategoryCheckedKeys() { |
||||
|
const checkedKeys = this.$refs.treeCategory.getCheckedNodes() |
||||
|
console.log('categoryKeys', checkedKeys) |
||||
|
}, |
||||
|
getClassifyCheckedKeys() { |
||||
|
const checkedKeys = this.$refs.treeClassify.getCheckedNodes() |
||||
|
console.log('classifysKeys', checkedKeys) |
||||
|
}, |
||||
|
getLevelCheckedKeys() { |
||||
|
const checkedKeys = this.$refs.treeLevel.getCheckedNodes() |
||||
|
console.log('levelsKeys', checkedKeys) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.result-main{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: calc(100vh - 140px); |
||||
|
.result-left{ |
||||
|
position: relative; |
||||
|
width: 265px; |
||||
|
height: calc(100%); |
||||
|
padding: 20px; |
||||
|
background-color: #fff; |
||||
|
box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04); |
||||
|
z-index: 9999; |
||||
|
::v-deep .el-collapse{ |
||||
|
border: none; |
||||
|
height: calc(100%); |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
.el-collapse-item__header{ |
||||
|
padding-left: 13px; |
||||
|
height: 32px; |
||||
|
background-color: #F3F6FA; |
||||
|
border-radius: 3px 3px 3px 3px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid #CBD1DC; |
||||
|
.el-collapse-item__arrow{ |
||||
|
// margin: 0; |
||||
|
// text-align: right; |
||||
|
} |
||||
|
.el-icon-arrow-right:before{ |
||||
|
font-family: "iconfont" !important; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
content: "\e629"; |
||||
|
font-size: 6px; |
||||
|
color: #545B65; |
||||
|
} |
||||
|
.el-collapse-item__arrow.is-active{ |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
} |
||||
|
.el-collapse-item{ |
||||
|
margin-bottom: 16px; |
||||
|
.el-collapse-item__wrap{ |
||||
|
padding: 12px; |
||||
|
margin-top: -1px; |
||||
|
border: 1px solid #CBD1DC; |
||||
|
// border-top: none; |
||||
|
border-radius: 0 0 3px 3px; |
||||
|
|
||||
|
} |
||||
|
.el-collapse-item__content{ |
||||
|
padding-bottom: 0; |
||||
|
.quick-search{ |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
.el-tree{ |
||||
|
max-height: calc(100vh/4 - 25px); |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
.el-tree-node__content { |
||||
|
height: 30px; |
||||
|
} |
||||
|
.el-tree-node__expand-icon{ |
||||
|
font-size: 12px; |
||||
|
display: none; |
||||
|
} |
||||
|
.el-tree-node__label{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.result-right{ |
||||
|
flex: 1; |
||||
|
// background-color: #fff; |
||||
|
.right-header{ |
||||
|
padding: 20px 20px 14px 20px; |
||||
|
background-color: #fff; |
||||
|
.head-search{ |
||||
|
margin-bottom: 10px; |
||||
|
.search-input{ |
||||
|
margin-left: 10px; |
||||
|
.input-with-select{ |
||||
|
::v-deep .el-input__inner{ |
||||
|
width: 320px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-input-group__append{ |
||||
|
width: auto; |
||||
|
padding: 0 20px 0 0 !important; |
||||
|
border-color: #0348F3; |
||||
|
|
||||
|
.el-button{ |
||||
|
background-color: #0348F3 !important; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.change-search{ |
||||
|
margin-left: 12px; |
||||
|
font-size: 14px; |
||||
|
color: #0348F3; |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
.search-tip{ |
||||
|
font-size: 14px; |
||||
|
color: #545B65; |
||||
|
span{ |
||||
|
color: #ED4A41; |
||||
|
} |
||||
|
i{ |
||||
|
font-style: normal; |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.result-list{ |
||||
|
padding: 20px; |
||||
|
.result-item{ |
||||
|
padding: 16px 16px 10px 16px; |
||||
|
margin-bottom: 16px; |
||||
|
background-color: #fff; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
::v-deep .el-tree .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label{ |
||||
|
background-color: transparent !important; |
||||
|
color: #0C0E1E !important; |
||||
|
} |
||||
|
::v-deep .el-tree .is-current>.el-tree-node__content{ |
||||
|
background-color: transparent !important; |
||||
|
color: #0C0E1E !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-collapse::-webkit-scrollbar, |
||||
|
::v-deep .el-collapse-item__content::-webkit-scrollbar, |
||||
|
::v-deep .el-tree::-webkit-scrollbar { |
||||
|
width: 5px !important; |
||||
|
height: 5px !important; |
||||
|
background-color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-collapse::-webkit-scrollbar-thumb{ |
||||
|
border-radius: 3px; |
||||
|
background-color: #fff !important; |
||||
|
} |
||||
|
::v-deep .el-collapse-item__content::-webkit-scrollbar-thumb, |
||||
|
::v-deep .el-tree::-webkit-scrollbar-thumb { |
||||
|
border-radius: 3px; |
||||
|
background-color: #4578F6 !important; |
||||
|
// background-color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-collapse::-webkit-scrollbar-thumb:hover, |
||||
|
::v-deep .el-collapse-item__content::-webkit-scrollbar-thumb:hover, |
||||
|
::v-deep .el-tree::-webkit-scrollbar-thumb:hover { |
||||
|
// background-color: #4578F6 !important; |
||||
|
background-color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-collapse::-webkit-scrollbar-corner, |
||||
|
::v-deep .el-collapse-item__content::-webkit-scrollbar-corner, |
||||
|
::v-deep .el-tree::-webkit-scrollbar-corner { |
||||
|
background-color: #DDE8FB !important; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue