433 lines
18 KiB
Vue
433 lines
18 KiB
Vue
<template>
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row :gutter="24">
|
||
<a-col :md="(24 / (minLength + 1))"
|
||
:sm="(24 / minLength)"
|
||
v-for="(item) in searchList.slice(0, minLength)"
|
||
:key="item.id"
|
||
style="line-height: 48px">
|
||
<!-- 树形选择器 -->
|
||
<template v-if="item.fieldShowType === FieldType.TREE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
tree-checkable
|
||
show-search
|
||
allowClear
|
||
:filterTreeNode="filterTreeOption"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 树形选择器（单选） -->
|
||
<template v-if="item.fieldShowType === FieldType.TREE_SINGLE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
show-search
|
||
allowClear
|
||
:filterTreeNode="filterTreeOption"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 输入框 -->
|
||
<template
|
||
v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
|
||
FieldType.STANDARD_MORE.value,FieldType.TREE_MODAL_SELECT.value]
|
||
.includes(item.fieldShowType)">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||
v-model="queryParam[item.dbFieldName]"></a-input>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 数字输入框 -->
|
||
<!-- <template v-else-if="item.fieldShowType === FieldType.TEXT_NUMBER.value">-->
|
||
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||
<!-- <a-input-number :placeholder="$t('pleaseEnter')+item.dbFieldTxt"-->
|
||
<!-- v-model="queryParam[item.dbFieldName]" :min="1" :max="99999999"/>-->
|
||
<!-- </a-form-item>-->
|
||
<!-- </template>-->
|
||
<!-- 日期区间 -->
|
||
<template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.fieldShowType)">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-range-picker v-model="queryParam[item.dbFieldName]"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||
@change="onChange(item.dbFieldName)"></a-range-picker>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 字典单选框 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-dict-select-tag v-model="queryParam[item.dbFieldName]"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false" :dictCode="item.dictField" />
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 字典多选框 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-multi-select-tag v-model="queryParam[item.dbFieldName]"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'" :maxTagCount="1"
|
||
:triggerChange="false" :dictCode="item.dictField" />
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 组织机构选择 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
allowClear
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
class="box-input"
|
||
style="width: 100%"
|
||
:tree-data="categoryTreeList"
|
||
show-search
|
||
:filterTreeNode="filterTreeOption"
|
||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 组织机构多选 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
allowClear
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
class="box-input"
|
||
style="width: 100%"
|
||
:tree-data="categoryTreeList"
|
||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||
treeCheckable
|
||
treeCheckStrictly
|
||
show-search
|
||
:filterTreeNode="filterTreeOption"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 年份选择 -->
|
||
<template
|
||
v-if="item.fieldShowType === FieldType.YEAR_PICKER.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-date show-type="year"
|
||
:allowClear="false"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
date-format="YYYY"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
</a-form-item>
|
||
</template>
|
||
</a-col>
|
||
<template v-if="searchList.length > minLength && toggleSearchStatus">
|
||
<a-col :md="(24 / (minLength + 1))"
|
||
:sm="(24 / minLength)"
|
||
v-for="(item) in searchList.slice(minLength)"
|
||
:key="item.id"
|
||
style="line-height: 48px">
|
||
<!-- 树形选择器 -->
|
||
<template v-if="item.fieldShowType === FieldType.TREE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
tree-checkable
|
||
treeCheckStrictly
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
show-search
|
||
allowClear
|
||
:filterTreeNode="filterTreeOption"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 树形选择器（单选） -->
|
||
<template v-if="item.fieldShowType === FieldType.TREE_SINGLE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
show-search
|
||
allowClear
|
||
:filterTreeNode="filterTreeOption"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 输入框 -->
|
||
<template v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
|
||
FieldType.STANDARD_MORE.value,FieldType.TREE_MODAL_SELECT.value]
|
||
.includes(item.fieldShowType)">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||
v-model="queryParam[item.dbFieldName]"></a-input>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 组织机构单选 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
class="box-input"
|
||
style="width: 100%"
|
||
:tree-data="categoryTreeList"
|
||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||
show-search
|
||
allowClear
|
||
:filterTreeNode="filterTreeOption"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 组织机构多选 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-tree-select
|
||
tree-node-filter-prop="title"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
:maxTagCount="1"
|
||
:show-search="true"
|
||
allowClear
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
class="box-input"
|
||
style="width: 100%"
|
||
:tree-data="categoryTreeList"
|
||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||
treeCheckable
|
||
treeCheckStrictly
|
||
:filterTreeNode="filterTreeOption"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 日期区间选择器 -->
|
||
<template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.fieldShowType)">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-range-picker v-model="queryParam[item.dbFieldName]"
|
||
format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||
@change="onChange(item.dbFieldName)"></a-range-picker>
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 字典单选 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-dict-select-tag v-model="queryParam[item.dbFieldName]"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false" :dictCode="item.dictField" />
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 字典多选框 -->
|
||
<template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-multi-select-tag v-model="queryParam[item.dbFieldName]"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'" :maxTagCount="1"
|
||
:triggerChange="false" :dictCode="item.dictField" />
|
||
</a-form-item>
|
||
</template>
|
||
<!-- 年份选择 -->
|
||
<template
|
||
v-if="item.fieldShowType === FieldType.YEAR_PICKER.value">
|
||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-date show-type="year"
|
||
:allowClear="false"
|
||
v-model="queryParam[item.dbFieldName]"
|
||
date-format="YYYY"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
</a-form-item>
|
||
</template>
|
||
</a-col>
|
||
</template>
|
||
<div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
||
<a @click="handleToggleSearch" v-if="searchList.length > minLength">
|
||
{{ !toggleSearchStatus ? $t('open') : $t('putAway') }}
|
||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
|
||
</a>
|
||
<a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{
|
||
$t('query')
|
||
}}
|
||
</a-button>
|
||
<a-button icon="reload" type="primary" ghost style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
|
||
</div>
|
||
</a-row>
|
||
</a-form>
|
||
</template>
|
||
|
||
<script>
|
||
import JDictSelectTag from '../dict/JDictSelectTag'
|
||
import { FieldType } from '../../enums/commonEnums'
|
||
import eventBus from '@/common/event'
|
||
import { getFormDictTreeList, queryDepartTreeList } from '../../api/api'
|
||
import { getAction } from '../../api/manage'
|
||
|
||
export default {
|
||
name: 'Search',
|
||
components: { JDictSelectTag },
|
||
props: {
|
||
// 获取查询条件的方法
|
||
getQueryConditionFunc: {
|
||
type: Function,
|
||
required: false,
|
||
default: () => {
|
||
return function () {
|
||
}
|
||
}
|
||
},
|
||
flag: { // 暂时不清楚flag的用处，是要查searchList的时候传给后端的
|
||
type: String,
|
||
default: ''
|
||
},
|
||
minLength: {
|
||
type: Number,
|
||
default: 2
|
||
},
|
||
// 查询权限
|
||
searchHas: {
|
||
type: String,
|
||
required: false,
|
||
default: null
|
||
}
|
||
// searchQueryList: {
|
||
// type: Array,
|
||
// default: () => {
|
||
// return []
|
||
// }
|
||
// }
|
||
},
|
||
data () {
|
||
return {
|
||
FieldType,
|
||
categoryTreeList: [], // 组织机构下拉框数据
|
||
queryParam: {},
|
||
toggleSearchStatus: false,
|
||
searchList: [],
|
||
labelCol: {
|
||
span: 6
|
||
},
|
||
wrapperCol: {
|
||
span: 14
|
||
},
|
||
optionsData: {} // 用接口获取到的下拉数据
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getSysCategoryTree()
|
||
this.getSearch()
|
||
},
|
||
methods: {
|
||
searchQuery () {
|
||
const formInline = JSON.parse(JSON.stringify(this.queryParam))
|
||
Object.keys(formInline).forEach(res => {
|
||
if (formInline[res] instanceof Array) {
|
||
if (formInline[res][0] instanceof Object) {
|
||
// 说明是树选择
|
||
formInline[res] = formInline[res].map(item => item.value).join(',')
|
||
} else {
|
||
formInline[res] = formInline[res].join(',')
|
||
}
|
||
}
|
||
})
|
||
this.$emit('search', JSON.parse(JSON.stringify(formInline)))
|
||
eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
|
||
},
|
||
searchReset () {
|
||
this.queryParam = {}
|
||
this.$emit('reset', JSON.parse(JSON.stringify(this.queryParam)))
|
||
eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
|
||
},
|
||
// 获取组织机构树
|
||
getSysCategoryTree () {
|
||
queryDepartTreeList().then((res) => {
|
||
if (res.success) {
|
||
this.categoryTreeList = res.result
|
||
} else {
|
||
this.categoryTreeList = []
|
||
}
|
||
})
|
||
},
|
||
// 获取查询条件列表
|
||
getSearch () {
|
||
console.log(this.getQueryConditionFunc)
|
||
if (!this.getQueryConditionFunc || typeof this.getQueryConditionFunc !== 'function') {
|
||
return
|
||
}
|
||
const params = {
|
||
module: this.flag
|
||
}
|
||
this.getQueryConditionFunc(params).then((res) => {
|
||
if (res.success) {
|
||
this.searchList = res.result
|
||
this.getOptionsData() // 获取下拉数据
|
||
console.log(this.searchList)
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 处理需要通过接口获取的下拉数据
|
||
*/
|
||
getOptionsData () {
|
||
const formList = Object.values(this.searchList).reduce((acc, cur) => acc.concat(cur), [])
|
||
formList.forEach(item => {
|
||
if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
|
||
// 展示类型是树选择，且有接口的
|
||
if (item.fieldHref) {
|
||
getAction(item.fieldHref).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
} else if (item.dictId) {
|
||
getFormDictTreeList({ dictId: item.dictId }).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onChange (item) {
|
||
if (this.queryParam[item] && this.queryParam[item].length > 0) {
|
||
const startDate = item + '_start'
|
||
const endDate = item + '_end'
|
||
this.queryParam[startDate] = this.queryParam[item][0]
|
||
this.queryParam[endDate] = this.queryParam[item][1]
|
||
} else {
|
||
this.queryParam[item] = []
|
||
}
|
||
},
|
||
handleToggleSearch () {
|
||
this.toggleSearchStatus = !this.toggleSearchStatus
|
||
},
|
||
filterTreeOption (input, option) {
|
||
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
|
||
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
</style>
|