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.
516 lines
15 KiB
516 lines
15 KiB
<template>
|
|
<div class="archive-search-main">
|
|
<div class="search-main">
|
|
<span class="bg_icon1" />
|
|
<span class="bg_icon2" />
|
|
<span class="bg_icon3" />
|
|
<span class="bg_icon4" />
|
|
|
|
<div class="search-content">
|
|
<h2>{{ isCommon ? '档案检索': '高级检索' }}</h2>
|
|
<div v-if="isCommon" class="common-search">
|
|
<div class="search-input">
|
|
<!-- @keyup.enter.native="dimSearch" -->
|
|
<el-input v-model="keywords" placeholder="请输入检索关键字" class="input-with-select">
|
|
<!-- <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-input>
|
|
<el-button slot="append" @click="handleSearch"><i class="iconfont icon-sousuo" />搜索</el-button>
|
|
<div class="advanced-search-btn" @click="isCommon=!isCommon">高级检索</div>
|
|
</div>
|
|
<div class="search-tab">
|
|
<span class="active">全部</span>
|
|
<span>项目</span>
|
|
<span>案卷</span>
|
|
<span>文件</span>
|
|
<span>原文</span>
|
|
</div>
|
|
<div class="history-keyword">
|
|
<h4>历史检索</h4>
|
|
<div class="history-tag">
|
|
<span>合同</span>
|
|
<span>科技</span>
|
|
<span>教育</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="advanced-search">
|
|
<div class="advanced-search-main">
|
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="70px">
|
|
<el-form-item label="字段名" prop="field">
|
|
<el-select v-model="form.field" value-key="id">
|
|
<el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="运算符" prop="symbol">
|
|
<el-select v-model="form.symbol" value-key="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in symbolOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="检索值" prop="keyWord" :rules="getKeywordRules">
|
|
<el-input v-model="form.keyWord" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="advanced-btn">
|
|
<el-button size="mini" @click="addConditionData"><i class="iconfont icon-xinzeng" />新增</el-button>
|
|
<el-button class="filter-refresh" size="mini" icon="el-icon-refresh-left">重置</el-button>
|
|
</div>
|
|
<div class="search-condition">
|
|
<h4> 检索条件</h4>
|
|
<div class="condition-main">
|
|
<div class="condition-left">
|
|
<el-button size="mini" :disabled="currentIndex===null"><i class="iconfont icon-shanchu" />删除</el-button>
|
|
<el-button size="mini" icon="el-icon-top" :disabled="currentIndex === 0" @click="moveUp(currentIndex)">上移</el-button>
|
|
<el-button size="mini" icon="el-icon-bottom" :disabled="currentIndex === conditionData.length - 1" @click="moveDown(currentIndex)">下移</el-button>
|
|
</div>
|
|
<ul class="condition-content">
|
|
<li v-for="(item, index) in conditionData" :key="index" :class="currentIndex===index ? 'active': ''" @click="selectCurrent(index)">
|
|
{{ item }}
|
|
</li>
|
|
</ul>
|
|
<div class="condition-right">
|
|
<el-button v-for="(item,index) in connectorList" :key="index" type="primary" size="mini" @click="addConnector(item)">{{ item }}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="adv-bottom">
|
|
<el-button slot="append" @click="handleAdvancedSearch"><i class="iconfont icon-sousuo" />搜索</el-button>
|
|
<div class="advanced-search-btn" @click="isCommon=!isCommon">普通检索</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script >
|
|
import { FetchFindGroupType } from '@/api/system/field'
|
|
export default {
|
|
name: 'ArchiveSearch',
|
|
data() {
|
|
return {
|
|
isCommon: true,
|
|
keywords: '',
|
|
form: {
|
|
field: null,
|
|
symbol: null,
|
|
keyWord: null
|
|
},
|
|
fieldOptions: [],
|
|
symbolOptions: [
|
|
{
|
|
label: '包含',
|
|
value: 'like'
|
|
},
|
|
{
|
|
label: '不包含',
|
|
value: 'not like'
|
|
},
|
|
{
|
|
label: '等于',
|
|
value: '='
|
|
},
|
|
{
|
|
label: '不等于',
|
|
value: '!='
|
|
},
|
|
{
|
|
label: '为空',
|
|
value: 'is null'
|
|
},
|
|
{
|
|
label: '不为空',
|
|
value: 'is not null'
|
|
},
|
|
{
|
|
label: '大于',
|
|
value: '>'
|
|
},
|
|
{
|
|
label: '大于等于',
|
|
value: '>='
|
|
},
|
|
{
|
|
label: '小于',
|
|
value: '<'
|
|
},
|
|
{
|
|
label: '小于等于',
|
|
value: '<='
|
|
}
|
|
],
|
|
rules: {
|
|
field: [
|
|
{ required: true, message: '请选择字段名', trigger: 'change' }
|
|
],
|
|
symbol: [
|
|
{ required: true, message: '请选择运算符', trigger: 'change' }
|
|
]
|
|
},
|
|
conditionData: [],
|
|
currentIndex: null,
|
|
connectorList: ['并且', '或者', '(', ')']
|
|
}
|
|
},
|
|
computed: {
|
|
getKeywordRules() {
|
|
console.log(this.form.symbol)
|
|
if ((this.form.symbol && this.form.symbol.label === '为空') || (this.form.symbol && this.form.symbol.label === '不为空')) {
|
|
console.log('2222')
|
|
return []
|
|
} else {
|
|
return [{ required: true, message: '请输入检索值', trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getFieldCommon()
|
|
},
|
|
methods: {
|
|
addConditionData() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
let str = ''
|
|
if ((this.form.symbol && this.form.symbol.label === '包含') || (this.form.symbol && this.form.symbol.label === '不包含')) {
|
|
str = `<span style="color:blue">${this.form.field.label}</span> <span style="color:green">${this.form.symbol.label}</span> "%" + <span style="color:red">${this.form.keyWord}</span> + "%"`
|
|
// str = this.form.field.label + ' ' + this.form.symbol.label + " '%" + this.form.keyWord + "%'"
|
|
} else {
|
|
str = `<span style="color:blue">${this.form.field.label}</span> <span style="color:green">${this.form.symbol.label}</span> <span style="color:red">${this.form.keyWord}</span>`
|
|
// str = this.form.field.label + ' ' + this.form.symbol.label + ' ' + this.form.keyWord
|
|
}
|
|
this.conditionData.push(str)
|
|
}
|
|
})
|
|
},
|
|
moveUp(index) {
|
|
if (index > 0) {
|
|
// [this.conditionData[index], this.conditionData[index - 1]] = [this.conditionData[index - 1], this.conditionData[index]]
|
|
const temp = this.conditionData[index]
|
|
this.conditionData[index] = this.conditionData[index - 1]
|
|
this.conditionData[index - 1] = temp
|
|
this.currentIndex = index - 1
|
|
}
|
|
},
|
|
moveDown(index) {
|
|
if (index < this.conditionData.length - 1) {
|
|
// [this.conditionData[index], this.conditionData[index + 1]] = [this.conditionData[index + 1], this.conditionData[index]]
|
|
const temp = this.conditionData[index]
|
|
this.conditionData[index] = this.conditionData[index + 1]
|
|
this.conditionData[index + 1] = temp
|
|
this.currentIndex = index + 1
|
|
}
|
|
},
|
|
selectCurrent(index) {
|
|
if (this.currentIndex === index) {
|
|
this.currentIndex = null
|
|
} else {
|
|
this.currentIndex = index
|
|
}
|
|
},
|
|
addConnector(item) {
|
|
this.conditionData.push(item)
|
|
},
|
|
getFieldCommon() {
|
|
FetchFindGroupType({ isType: 2 }).then((res) => {
|
|
if (res.length !== 0) {
|
|
this.fieldOptions = res.map((item, index) => {
|
|
const json = {}
|
|
json.id = item.id
|
|
json.label = item.fieldCnName
|
|
json.value = item.fieldName
|
|
return json
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleAdvancedSearch() {
|
|
|
|
},
|
|
dimSearch() {
|
|
},
|
|
handleSearch() {
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.archive-search-main{
|
|
padding: 0 20px 20px 20px;
|
|
.search-main{
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100vh - 140px);
|
|
background: url('~@/assets/images/archives/bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
& span{
|
|
display: block;
|
|
}
|
|
.bg_icon1{
|
|
position: absolute;
|
|
left: 110px;
|
|
top: 400px;
|
|
width: 236px;
|
|
height: 116px;
|
|
background: url('~@/assets/images/archives/ys1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.bg_icon2{
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 60px;
|
|
width: 472px;
|
|
height: 377px;
|
|
margin-left: -236px;
|
|
background: url('~@/assets/images/archives/ys2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.bg_icon3{
|
|
position: absolute;
|
|
right: 240px;
|
|
bottom: 40px;
|
|
width: 136px;
|
|
height: 152px;
|
|
background: url('~@/assets/images/archives/ys3.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.bg_icon4{
|
|
position: absolute;
|
|
right: 110px;
|
|
top: 50%;
|
|
width: 170px;
|
|
height: 136px;
|
|
margin-top: -58px;
|
|
background: url('~@/assets/images/archives/ys4.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.search-content{
|
|
padding-top: 120px;
|
|
h2{
|
|
font-size: 40px;
|
|
text-align: center;
|
|
color: #1C1C1C;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
.common-search{
|
|
width: 800px;
|
|
margin: 0 auto;
|
|
.search-input{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 800px;
|
|
height: 54px;
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
.input-with-select{
|
|
::v-deep .el-input__inner{
|
|
width: 664px;
|
|
height: 54px !important;
|
|
font-size: 14px;
|
|
padding: 0 20px;
|
|
border: none;
|
|
}
|
|
}
|
|
.el-button{
|
|
width: 136px;
|
|
background-color: #0348F3;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
.advanced-search-btn{
|
|
position: absolute;
|
|
right: -80px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 16px;
|
|
color: #0348F3;
|
|
cursor:default;
|
|
}
|
|
}
|
|
.search-tab{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 240px;
|
|
padding: 15px 0 30px 0;
|
|
margin: 0 auto;
|
|
color: #545B65;
|
|
span{
|
|
font-size: 14px;
|
|
// padding: 0 12px;
|
|
}
|
|
span.active{
|
|
color: #0348F3;
|
|
}
|
|
}
|
|
|
|
.history-keyword{
|
|
width: 800px;
|
|
height: 280px;
|
|
padding: 10px 18px;
|
|
background: #F6F9FD;
|
|
box-shadow: 0px 4px 19px 0px rgba(0,0,0,0.06);
|
|
border-radius: 3px;
|
|
opacity: 0.8;
|
|
border: 2px solid #FFFFFF;
|
|
h4{
|
|
font-size: 16px;
|
|
height: 40px;
|
|
margin-bottom: 10px;
|
|
line-height: 33px;
|
|
padding-left: 35px;
|
|
color: #0C0E1E;
|
|
background: url('~@/assets/images/archives/icon-ls.png') no-repeat left center;
|
|
background-size: 32px 33px;
|
|
}
|
|
.history-tag{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
span{
|
|
display: block;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
padding: 0 12px;
|
|
margin: 0 0 10px 10px;
|
|
color: #545B65;
|
|
background: #E6E8ED;
|
|
border-radius: 3px;
|
|
cursor:default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advanced-search-main{
|
|
position: relative;
|
|
width: 1010px;
|
|
// height: 350px;
|
|
margin: 0 auto;
|
|
padding: 30px 40px;
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
z-index: 9999;
|
|
::v-deep .el-form--inline .el-form-item{
|
|
margin-right: 40px !important;
|
|
}
|
|
.advanced-btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
.el-button{
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
.search-condition{
|
|
padding: 18px 0 24px 0;
|
|
margin-top: 20px;
|
|
background: #F6F9FF;
|
|
border-radius: 3px;
|
|
opacity: 1;
|
|
border: 1px dashed #DCDFE6;
|
|
h4{
|
|
width: 480px;
|
|
margin: 0 auto 17px auto;
|
|
padding-left: 33px;
|
|
color: #0C0E1E;
|
|
background: url('~@/assets/images/archives/icon-js.png') no-repeat left center;
|
|
background-size: 33px 28px;
|
|
}
|
|
}
|
|
.condition-main{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
.condition-left{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.el-button{
|
|
width: 76px;
|
|
margin: 5px 0;
|
|
::v-deep i.el-icon-top,
|
|
::v-deep i.el-icon-bottom{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.condition-content{
|
|
width: 480px;
|
|
height: 160px;
|
|
margin: 0 10px;
|
|
background: #E6E8ED;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
li{
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #E6E8ED;
|
|
cursor: default;
|
|
&:hover,
|
|
&:focus,
|
|
&.active{
|
|
background-color: #E8F2FF;
|
|
}
|
|
}
|
|
}
|
|
.condition-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.el-button{
|
|
width: 64px;
|
|
margin: 5px 0;
|
|
background-color: #0348F3;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.adv-bottom{
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 31px auto 0 auto;
|
|
width: 96px;
|
|
z-index: 999999;
|
|
.el-button{
|
|
font-size: 16px;
|
|
background-color: #0348F3;
|
|
color: #fff;
|
|
}
|
|
.advanced-search-btn{
|
|
padding-top: 7px;
|
|
font-size: 14px;
|
|
color: #0348F3;
|
|
cursor: default;
|
|
}
|
|
}
|
|
</style>
|