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.
425 lines
12 KiB
425 lines
12 KiB
<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>
|