289 lines
11 KiB
Java
289 lines
11 KiB
Java
<template>
|
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
<a-row :gutter="24">
|
|
<a-col :md="6" :sm="8" v-for="(item,index) in searchList" :key="index" style="line-height: 48px">
|
|
<template v-if="index < 3">
|
|
<div class="box-title-text" v-if="item.field_show_type == '0'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-tree-select
|
|
class="box-input"
|
|
v-model="queryParam[item.db_field_name]"
|
|
:maxTagCount="1"
|
|
:tree-data="item.tree"
|
|
tree-checkable
|
|
:placeholder="$t('PleaseSelect')+item.db_field_txt"
|
|
/>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '1' || item.field_show_type == '8' ||
|
|
item.field_show_type == '9' || item.field_show_type == '10' || item.field_show_type == '11'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-input class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
|
|
v-model="queryParam[item.db_field_name]"></a-input>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '2'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-input-number class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
|
|
v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '4'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
|
|
:placeholder="$t('PleaseSelect')+item.db_field_txt" :type="'select'"
|
|
:triggerChange="false" :dictCode="item.dict_field"/>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '6' || item.field_show_type == '5'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"
|
|
|
|
@change="onChange(item.db_field_name)"></a-range-picker>
|
|
</div>
|
|
<!-- <div class="box-title-text" v-else-if="item.field_show_type == '5'">-->
|
|
<!-- <div class="title-text" :title="item.db_field_txt">-->
|
|
<!-- <span>{{item.db_field_txt}}</span>-->
|
|
<!-- </div>-->
|
|
<!-- <a-date-picker class="box-input"-->
|
|
<!-- :placeholder="$t('PleaseSelect')+item.db_field_txt"-->
|
|
<!-- @change="dateChange(item.db_field_name)"-->
|
|
<!-- v-model="queryParam[item.db_field_name]"/>-->
|
|
<!-- </div>-->
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '3'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
|
|
:placeholder="$t('PleaseSelect')+item.db_field_txt"
|
|
:type="'select'"
|
|
:triggerChange="false" :dictCode="item.dict_field"/>
|
|
</div>
|
|
</template >
|
|
|
|
<template v-if="index >= 3 && toggleSearchStatus">
|
|
<div class="box-title-text" v-if="item.field_show_type == '0'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-tree-select
|
|
class="box-input"
|
|
v-model="queryParam[item.db_field_name]"
|
|
:maxTagCount="1"
|
|
:tree-data="item.tree"
|
|
tree-checkable
|
|
:placeholder="$t('PleaseSelect')+item.db_field_txt"
|
|
/>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '1' || item.field_show_type == '8' ||
|
|
item.field_show_type == '9' || item.field_show_type == '10' || item.field_show_type == '11'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-input class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
|
|
v-model="queryParam[item.db_field_name]"></a-input>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '2'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<a-input-number class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
|
|
v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
|
|
</div>
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '4'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
|
|
:placeholder="$t('PleaseSelect')+item.db_field_txt" :type="'select'"
|
|
:triggerChange="false" :dictCode="item.dict_field"/>
|
|
</div>
|
|
<!-- <div class="box-title-text" v-else-if="item.field_show_type == '6' || item.field_show_type == '5'">-->
|
|
<!-- <div class="title-text" :title="item.db_field_txt">-->
|
|
<!-- <span>{{item.db_field_txt}}</span>-->
|
|
<!-- </div>-->
|
|
<!-- <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"-->
|
|
<!-- @change="onChange(item.db_field_name)"></a-range-picker>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box-title-text" v-else-if="item.field_show_type == '5'">-->
|
|
<!-- <div class="title-text" :title="item.db_field_txt">-->
|
|
<!-- <span>{{item.db_field_txt}}</span>-->
|
|
<!-- </div>-->
|
|
<!-- <a-date-picker class="box-input"-->
|
|
<!-- :placeholder="$t('PleaseSelect')+item.db_field_txt"-->
|
|
<!-- @change="dateChange(item.db_field_name)"-->
|
|
<!-- v-model="queryParam[item.db_field_name]"/>-->
|
|
<!-- </div>-->
|
|
<div class="box-title-text" v-else-if="item.field_show_type == '3'">
|
|
<div class="title-text" :title="item.db_field_txt">
|
|
<span>{{item.db_field_txt}}</span>
|
|
</div>
|
|
<j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
|
|
:placeholder="$t('PleaseSelect')+item.db_field_txt"
|
|
:type="'select'"
|
|
:triggerChange="false" :dictCode="item.dict_field"/>
|
|
</div>
|
|
</template>
|
|
|
|
</a-col>
|
|
<span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
|
<a-col :md="6" :sm="24">
|
|
<a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
|
|
<a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
|
|
<a @click="handleToggleSearch" style="margin-left: 8px" v-if="searchList.length > 3">
|
|
<span class="icon-open">{{ !toggleSearchStatus ? $t('open') : $t('away') }}</span>
|
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
|
</a>
|
|
</a-col>
|
|
</span>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction } from '@/api/manage'
|
|
import eventBUs from '../../common/event.js'
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'SplitSearch',
|
|
props: {
|
|
url: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
flag: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
infoId:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
menuId:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
queryParam: {},
|
|
toggleSearchStatus: false,
|
|
searchList: [],
|
|
menu_id:''
|
|
}
|
|
},
|
|
watch:{
|
|
menuId:{
|
|
immediate:true,
|
|
handler(val){
|
|
this.menu_id=val
|
|
// console.log('menuId',this.menu_id)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getSeach()
|
|
},
|
|
methods: {
|
|
searchQuery() {
|
|
let queryParam = {
|
|
...this.queryParam,
|
|
menu_id:this.menu_id,
|
|
info_id:this.infoId
|
|
}
|
|
// console.log('11111',queryParam)
|
|
eventBUs.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
|
|
},
|
|
searchReset() {
|
|
this.queryParam = {
|
|
menu_id:'',
|
|
info_id:this.infoId
|
|
}
|
|
// console.log('queryparamssss',this.queryParam)
|
|
this.$emit('resetSearch')
|
|
eventBUs.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
|
|
},
|
|
getSeach() {
|
|
let params = {
|
|
flag: this.flag
|
|
}
|
|
getAction(this.url.seachList, params).then((res) => {
|
|
if (res.success) {
|
|
this.searchList = res.result
|
|
}
|
|
})
|
|
},
|
|
// handleToggleSearch() {
|
|
// this.toggleSearchStatus = !this.toggleSearchStatus
|
|
// },
|
|
dateChange(item) {
|
|
this.queryParam[item] = moment(this.queryParam[item]).format('YYYY-MM-DD')
|
|
},
|
|
onChange(item) {
|
|
let dateOne = moment(this.queryParam[item][0]).format('YYYY-MM-DD')
|
|
let dateTwo = moment(this.queryParam[item][1]).format('YYYY-MM-DD')
|
|
this.queryParam[item] = [dateOne, dateTwo]
|
|
},
|
|
handleToggleSearch(){
|
|
this.toggleSearchStatus = !this.toggleSearchStatus
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.box-title-text {
|
|
line-height: 1.4;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.title-text {
|
|
width: 20%;
|
|
min-width: 110px;
|
|
color: #000F16;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
margin-right: 16px;
|
|
margin-top: 3px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.box-input {
|
|
display: inline-block;
|
|
width: 70%;
|
|
height: 38px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.box-button {
|
|
height: 38px;
|
|
/*margin-top: 2px;*/
|
|
}
|
|
.table-page-search-submitButtons{
|
|
a{
|
|
display: flex;
|
|
justify-content: start;
|
|
line-height: 38px;
|
|
}
|
|
.icon-open{
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
}
|
|
i{
|
|
line-height: 38px;
|
|
}
|
|
}
|
|
</style> |