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