【前端】智能库房综合管理系统前端项目
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.
 
 
 
 
 

277 lines
8.8 KiB

<template>
<div class="search-main">
<div class="head-container">
<h2 v-if="this.$route.path.indexOf('dashboard') === -1">模糊检索</h2>
<div class="search-input">
<el-input v-model="keywords" placeholder="请输入内容" class="input-with-select" style="width:50%;" @keyup.enter.native="dimSearch">
<el-select slot="prepend" v-model="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button slot="append" icon="el-icon-search" @click="handleSearch" />
</el-input>
</div>
</div>
<div v-if="this.$route.path.indexOf('dashboard') === -1" class="search-result">
<div v-show="isShow" class="search-title">
<p>检索结果</p>
<p>本次检索结果共计{{ resNum }}条数据</p>
</div>
<div v-show="resNum > 0">
<el-table
ref="table"
v-loading="loading"
:data="tableData"
style="width: 100%;"
height="calc(100vh - 493px)"
@row-dblclick="handleDbClick"
>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column type="index" label="序号" width="90" align="center" />
<el-table-column prop="child" label="子条数目" align="center" min-width="150" />
<el-table-column prop="category_type" label="门类级别" align="center" min-width="100">
<template slot-scope="scope">
<!-- 门类级别 -->
<span v-if="scope.row.category_type === 5" style="width:56px">文件级</span>
<span v-if="scope.row.category_type === 4" style="width:56px">卷内级</span>
<span v-if="scope.row.category_type === 3" style="width:56px">案卷级</span>
</template>
</el-table-column>
<el-table-column prop="case_name" label="门类名称" align="center" min-width="150" />
<el-table-column prop="fonds_no" label="全宗号" align="center" min-width="180" />
<el-table-column prop="archive_no" label="档号" align="center" min-width="180" />
<el-table-column prop="archive_year" label="归档年度" align="center" min-width="100" />
<el-table-column prop="maintitle" label="题名" align="center" min-width="180" />
<el-table-column prop="security_class" label="保密程度" align="center" min-width="100" />
<el-table-column prop="department" label="部门" align="center" min-width="100" />
<el-table-column prop="case_name" label="盒名称" align="center" min-width="180" />
<el-table-column prop="folder_location_details" label="所在位置" align="center" min-width="180" />
<el-table-column prop="create_time" label="创建时间" align="center" min-width="180">
<template slot-scope="scope">
<div>{{ scope.row.create_time | parseTime }}</div>
</template>
</el-table-column>
</el-table>
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" />
</div>
<!-- 详情 -->
<detailDialog ref="detailDom" />
</div>
</div>
</template>
<script>
import detailDialog from './module/detailDialog.vue'
import { queryVagueArchives, FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList'
export default {
name: 'ArchivesSearch',
components: { detailDialog },
data() {
return {
loading: false,
tableData: [],
keywords: '',
select: 'maintitle',
options: [
{ value: 'maintitle', label: '题名' },
{ value: 'archive_no', label: '档号' },
{ value: 'archive_year', label: '年度' },
{ value: 'security_class', label: '密级' },
{ value: 'case_name', label: '盒名称' },
{ value: 'retention', label: '保管期限' },
{ value: 'department', label: '部门名称' }
],
page: {
total: 0,
size: 10,
page: 1
},
resNum: 0,
isShow: false,
params: {
criteria: null,
query: null,
page: null,
size: null
},
homeSearchWords: '',
homeSearchSelect: ''
}
},
mounted() {
if (localStorage.getItem('homeSearchWords') !== null) {
this.keywords = localStorage.getItem('homeSearchWords')
this.select = localStorage.getItem('homeSearchSelect')
this.dimSearch()
}
},
methods: {
// 双击详情
handleDbClick(row) {
const params = {
'categoryId': row.category_id,
'archivesId': row.archives_id
}
FetchArchivesDetails(params).then(res => {
if (res) {
const rowData = {}
res.forEach(item => {
rowData[item.fieldName] = item.context
})
this.$refs.detailDom.rowData = rowData
// 元数据
FetchArchivesMetadata(params).then(res => {
this.$refs.detailDom.xmlStr = res
})
this.$refs.detailDom.detailVisible = true
}
})
},
// 首页 / 搜索页切换操作
handleSearch() {
if (this.$route.path.indexOf('dashboard') !== -1) {
this.$router.push('/archivesManage/archivesSearch')
localStorage.setItem('homeSearchWords', this.keywords)
localStorage.setItem('homeSearchSelect', this.select)
} else {
this.dimSearch()
}
},
// 搜索
dimSearch() {
this.loading = true
const arr = this.keywords.trim() // 去空格
if (arr.length === 0) { // 无关键词时无数据
this.tableData = []
this.resNum = 0
this.isShow = false
this.page.total = 0
this.page.size = 10
this.page.page = 1
localStorage.removeItem('homeSearchWords')
localStorage.removeItem('homeSearchSelect')
} else {
this.params.criteria = this.select
this.params.query = this.keywords.replace(/\s+/ig, ' ')
this.params.page = this.page.page - 1
this.params.size = this.page.size
this.doQuery(this.params)
}
this.loading = false
},
// 调用搜索接口
doQuery(params) {
queryVagueArchives(params).then(res => {
this.tableData = res.content
this.page.total = res.totalElements
this.resNum = res.totalElements
this.isShow = true
localStorage.removeItem('homeSearchWords')
localStorage.removeItem('homeSearchSelect')
})
},
// 每页条数改变
sizeChangeHandler(e) {
this.loading = true
this.page.size = e
this.page.page = 1
this.params.size = e
this.params.page = 0
this.doQuery(this.params)
this.loading = false
},
// 当前页改变
pageChangeHandler(e) {
this.loading = true
this.page.page = e
this.params.page = e - 1
this.doQuery(this.params)
this.loading = false
}
}
}
</script>
<style lang="scss" scoped>
.search-main{
width: 100%;
}
.head-container{
padding: 100px 0 30px 0;
text-align: center;
h2{
color: #fff;
margin-bottom: 30px;
}
}
.search-area {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
& .search-input {
& .el-select .el-input {
width: 130px;
}
}
}
// 补充不生效
::v-deep .el-input-group {
height: 42px;
& > input {
height: 42px;
border: 1px solid #339cff;
background-color: #021941;
&::placeholder {
color: #fff;
}
}
}
::v-deep .el-input-group__prepend {
width: 125px;
background-color: #339cff;
border: 1px solid #339cff;
border-radius: 34px 0 0 34px;
border-right: 0;
}
::v-deep .el-input__inner {
color: #fff;
}
::v-deep .el-input-group__prepend div.el-select .el-input__inner{
color: #fff;
text-align: center;
}
::v-deep .el-input-group__append {
width: 72px;
left: -20px;
text-align: center;
background-color: #339cff;
border: 1px solid #339cff;
border-radius: 34px;
& i {
font-size: 25px;
color: #fff;
}
}
//检索结果
.search-result{
padding: 0 20px;
color: #fff;
.search-title{
padding:0 30px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
}
::v-deep ::-webkit-scrollbar-corner{
background: transparent;
}
</style>