Initial commit
This commit is contained in:
danshihao
@@ -0,0 +1,447 @@
|
||||
<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
|
||||
},
|
||||
// 默认的查询条件
|
||||
defaultSearchParams: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
// searchQueryList: {
|
||||
// type: Array,
|
||||
// default: () => {
|
||||
// return []
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
FieldType,
|
||||
categoryTreeList: [], // 组织机构下拉框数据
|
||||
queryParam: {},
|
||||
toggleSearchStatus: false,
|
||||
searchList: [],
|
||||
labelCol: {
|
||||
span: 6
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 14
|
||||
},
|
||||
optionsData: {} // 用接口获取到的下拉数据
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.queryParam = Object.assign({}, this.defaultSearchParams)
|
||||
},
|
||||
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 = Object.assign({}, this.defaultSearchParams)
|
||||
console.log(this.defaultSearchParams, 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
|
||||
// 标准状态特殊处理成多选
|
||||
const standardStateIndex = this.searchList.findIndex(item => item.dbFieldName === 'standard_state')
|
||||
this.searchList[standardStateIndex].fieldShowType = FieldType.OPTION_MORE.value
|
||||
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>
|
||||
Reference in New Issue
Block a user