8 changed files with 745 additions and 43 deletions
-
8src/views/archivesManage/managementLibrary/anjuan/tableList.vue
-
2src/views/archivesManage/managementLibrary/mixins/index.js
-
75src/views/archivesManage/managementLibrary/module/collectHeader.vue
-
30src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
-
101src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/embedUpload.vue
-
35src/views/components/category/PreviewForm.vue
-
461src/views/prearchiveLibrary/advancedSearchModal.vue
-
76src/views/prearchiveLibrary/index.vue
@ -0,0 +1,461 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="visible" |
||||
|
title="高级检索" |
||||
|
width="1000px" |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
append-to-body |
||||
|
:before-close="handleClose" |
||||
|
> |
||||
|
<div class="advanced-search-modal"> |
||||
|
<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" style="width: 200px;"> |
||||
|
<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="请选择" style="width: 200px;"> |
||||
|
<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" :type="inputType" style="width: 200px;" /> |
||||
|
</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" @click="resetQuery">重置</el-button> |
||||
|
</div> |
||||
|
<div class="search-condition"> |
||||
|
<h4> 检索条件</h4> |
||||
|
<div class="condition-main"> |
||||
|
<div class="condition-left"> |
||||
|
<el-button size="mini" :disabled="currentIndex===null" @click="deltCurrent(currentIndex)"><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 id="condition-container-modal" class="condition-content"> |
||||
|
<li v-for="(item, index) in conditionData" :id="'modal-element-id-' + index" :key="index" :class="currentIndex===index ? 'active': ''" @click="selectCurrent(index)"> |
||||
|
<span style="color:#0348F3">{{ item.field }}</span> |
||||
|
<span style="color:#ED4A41; margin:0 4px">{{ item.symbol }}</span> |
||||
|
<span v-if="item.symbol && (item.symbol === '包含'|| item.symbol === '不包含')" class="keyword-style"><i>'%</i>{{ item.keyWord }}<i>%'</i></span> |
||||
|
<span v-else-if="item.keyWord && isNaN(parseInt(item.keyWord))" class="keyword-style"><i>'</i>{{ item.keyWord }}<i>'</i></span> |
||||
|
<span v-else class="keyword-style">{{ item.keyWord }}</span> |
||||
|
<span>{{ item.connector }}</span> |
||||
|
<span>{{ item.bracket }}</span> |
||||
|
</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 slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="handleSearch">检索</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchDoeditDocument } from '@/api/prearchiveLibrary/prearchiveLibrary' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AdvancedSearchModal', |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
selectedDocument: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
initialConditions: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
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() { |
||||
|
if ((this.form.symbol && this.form.symbol.label === '为空') || (this.form.symbol && this.form.symbol.label === '不为空')) { |
||||
|
return [] |
||||
|
} else { |
||||
|
return [{ required: true, message: '请输入检索值', trigger: 'blur' }] |
||||
|
} |
||||
|
}, |
||||
|
inputType() { |
||||
|
if ( |
||||
|
this.form.symbol && |
||||
|
(this.form.symbol.label === '大于' || |
||||
|
this.form.symbol.label === '大于等于' || |
||||
|
this.form.symbol.label === '小于' || |
||||
|
this.form.symbol.label === '小于等于') |
||||
|
) { |
||||
|
return 'number' |
||||
|
} else { |
||||
|
return 'text' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
visible(newVal) { |
||||
|
if (!newVal) { |
||||
|
this.resetQuery() |
||||
|
this.conditionData = [] |
||||
|
this.currentIndex = null |
||||
|
} else { |
||||
|
this.getFieldCommon() |
||||
|
if (this.initialConditions && this.initialConditions.length > 0) { |
||||
|
this.conditionData = JSON.parse(JSON.stringify(this.initialConditions)) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getFieldCommon() |
||||
|
}, |
||||
|
methods: { |
||||
|
resetQuery() { |
||||
|
if (this.$refs.form) { |
||||
|
this.$refs.form.resetFields() |
||||
|
} |
||||
|
}, |
||||
|
addConditionData() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
if (valid) { |
||||
|
const newConditionData = {} |
||||
|
newConditionData.field = this.form.field.label |
||||
|
newConditionData.fieldName = this.form.field.value |
||||
|
newConditionData.symbol = this.form.symbol.label |
||||
|
newConditionData.symbolCode = this.form.symbol.value |
||||
|
newConditionData.keyWord = this.form.keyWord |
||||
|
this.conditionData.push(newConditionData) |
||||
|
this.$nextTick(() => { |
||||
|
const container = document.getElementById('condition-container-modal') |
||||
|
container.scrollTop = container.scrollHeight |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
moveUp(index) { |
||||
|
if (index > 0) { |
||||
|
const temp = this.conditionData[index] |
||||
|
this.conditionData[index] = this.conditionData[index - 1] |
||||
|
this.conditionData[index - 1] = temp |
||||
|
this.currentIndex = index - 1 |
||||
|
} |
||||
|
const targetElement = document.getElementById('modal-element-id-' + this.currentIndex) |
||||
|
if (targetElement) { |
||||
|
targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) |
||||
|
} |
||||
|
}, |
||||
|
moveDown(index) { |
||||
|
if (index < this.conditionData.length - 1) { |
||||
|
const temp = this.conditionData[index] |
||||
|
this.conditionData[index] = this.conditionData[index + 1] |
||||
|
this.conditionData[index + 1] = temp |
||||
|
this.currentIndex = index + 1 |
||||
|
} |
||||
|
const targetElement = document.getElementById('modal-element-id-' + this.currentIndex) |
||||
|
if (targetElement) { |
||||
|
targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) |
||||
|
} |
||||
|
}, |
||||
|
deltCurrent(index) { |
||||
|
this.conditionData.splice(index, 1) |
||||
|
this.currentIndex = null |
||||
|
}, |
||||
|
selectCurrent(index) { |
||||
|
if (this.currentIndex === index) { |
||||
|
this.currentIndex = null |
||||
|
} else { |
||||
|
this.currentIndex = index |
||||
|
} |
||||
|
}, |
||||
|
addConnector(item) { |
||||
|
const newConditionData = {} |
||||
|
if (item === '并且' || item === '或者') { |
||||
|
newConditionData.connector = item |
||||
|
} else { |
||||
|
newConditionData.bracket = item |
||||
|
} |
||||
|
this.conditionData.push(newConditionData) |
||||
|
this.$nextTick(() => { |
||||
|
const container = document.getElementById('condition-container-modal') |
||||
|
container.scrollTop = container.scrollHeight |
||||
|
}) |
||||
|
}, |
||||
|
getFieldCommon() { |
||||
|
console.log('selectedDocument', this.selectedDocument) |
||||
|
const params = { |
||||
|
documentId: this.selectedDocument.id, |
||||
|
archivesId: null |
||||
|
} |
||||
|
console.log('params', params) |
||||
|
FetchDoeditDocument(params).then((data) => { |
||||
|
const showFiledAll = data.showFiled.filter(item => item.isSequence).sort((a, b) => a.isSequence - b.isSequence) |
||||
|
this.fieldOptions = showFiledAll |
||||
|
.filter(item => item.fieldName !== 'fonds_no' && item.fieldName !== 'fonds_name') |
||||
|
.map(item => { |
||||
|
return { |
||||
|
id: item.id, |
||||
|
label: item.fieldCnName, |
||||
|
value: item.fieldName |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
checkConditions(conditionData) { |
||||
|
let brackets = 0 |
||||
|
let fields = 0 |
||||
|
let connectors = 0 |
||||
|
let previousTokenType = null |
||||
|
let hasValidConditionBetweenBrackets = false |
||||
|
|
||||
|
for (var i = 0; i < conditionData.length; i++) { |
||||
|
const condition = conditionData[i] |
||||
|
let currentTokenType = '' |
||||
|
|
||||
|
if (condition.hasOwnProperty('bracket')) { |
||||
|
currentTokenType = 'bracket' |
||||
|
brackets++ |
||||
|
} else if (condition.hasOwnProperty('field')) { |
||||
|
currentTokenType = 'field' |
||||
|
fields++ |
||||
|
if (brackets > 0) { |
||||
|
hasValidConditionBetweenBrackets = true |
||||
|
} |
||||
|
} else if (condition.hasOwnProperty('connector')) { |
||||
|
currentTokenType = 'connector' |
||||
|
connectors++ |
||||
|
} |
||||
|
|
||||
|
if (previousTokenType && currentTokenType) { |
||||
|
if ((previousTokenType === 'field' && currentTokenType === 'field') || |
||||
|
(previousTokenType === 'connector' && currentTokenType === 'connector')) { |
||||
|
this.$message({ message: '条件之间缺少或且连接符', type: 'error', offset: 8 }) |
||||
|
return null |
||||
|
} |
||||
|
} |
||||
|
previousTokenType = currentTokenType |
||||
|
} |
||||
|
|
||||
|
if (brackets > 0 && !hasValidConditionBetweenBrackets) { |
||||
|
this.$message({ message: '请输入有效条件', type: 'error', offset: 8 }) |
||||
|
return null |
||||
|
} else if (brackets > 0 && brackets % 2 !== 0) { |
||||
|
this.$message({ message: '括号不对称', type: 'error', offset: 8 }) |
||||
|
return null |
||||
|
} else if (fields === 0) { |
||||
|
this.$message({ message: '请输入有效条件', type: 'error', offset: 8 }) |
||||
|
return null |
||||
|
} else if (fields === 1 || connectors === fields - 1) { |
||||
|
const wheresql = this.conditionData.map(obj => { |
||||
|
if (obj.field) { |
||||
|
if (obj.symbol === '包含' || obj.symbol === '不包含') { |
||||
|
return obj.fieldName + ' ' + obj.symbolCode + " '%" + obj.keyWord + "%'" |
||||
|
} else if (obj.keyWord && isNaN(parseInt(obj.keyWord))) { |
||||
|
return obj.fieldName + ' ' + obj.symbolCode + " '" + obj.keyWord + "'" |
||||
|
} else { |
||||
|
return obj.fieldName + ' ' + obj.symbolCode + ' ' + obj.keyWord |
||||
|
} |
||||
|
} else if (obj.connector === '并且') { |
||||
|
return 'and' |
||||
|
} else if (obj.connector === '或者') { |
||||
|
return 'or' |
||||
|
} else { |
||||
|
return obj.bracket |
||||
|
} |
||||
|
}).join(' ') |
||||
|
return wheresql |
||||
|
} else { |
||||
|
this.$message({ message: '条件之间缺少或且连接符', type: 'error', offset: 8 }) |
||||
|
return null |
||||
|
} |
||||
|
}, |
||||
|
handleSearch() { |
||||
|
const wheresql = this.checkConditions(this.conditionData) |
||||
|
console.log('wheresql', wheresql) |
||||
|
if (wheresql) { |
||||
|
const conditions = JSON.parse(JSON.stringify(this.conditionData)) |
||||
|
// 保存到 localStorage |
||||
|
localStorage.setItem('advancedSearchConditions', JSON.stringify(conditions)) |
||||
|
localStorage.setItem('advancedSearchSql', wheresql) |
||||
|
// 发送 SQL 条件和原始条件数据（用于显示文案） |
||||
|
this.$emit('search', { |
||||
|
sql: wheresql, |
||||
|
conditions: conditions |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.$emit('update:visible', false) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.advanced-search-modal { |
||||
|
.el-form--inline .el-form-item { |
||||
|
margin-right: 20px !important; |
||||
|
} |
||||
|
.advanced-btn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 15px; |
||||
|
.el-button { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
.search-condition { |
||||
|
padding: 18px; |
||||
|
margin-top: 20px; |
||||
|
background: #F6F9FF; |
||||
|
border-radius: 3px; |
||||
|
border: 1px dashed #DCDFE6; |
||||
|
h4 { |
||||
|
margin: 0 0 17px 0; |
||||
|
padding-left: 25px; |
||||
|
color: #0C0E1E; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
.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: 500px; |
||||
|
height: 160px; |
||||
|
margin: 0 10px; |
||||
|
padding: 0; |
||||
|
background: #E6E8ED; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
li { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-wrap: nowrap; |
||||
|
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; |
||||
|
} |
||||
|
.keyword-style { |
||||
|
color: #2ECAAC; |
||||
|
i { |
||||
|
font-style: normal; |
||||
|
color: #545B65; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.condition-right { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
.el-button { |
||||
|
width: 64px; |
||||
|
margin: 5px 0; |
||||
|
background-color: #0348F3; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue