<template>
|
<div class="table-page-search-wrapper">
|
<el-form :model="form" inline ref="formData" label-width="100px" size="small">
|
<!-- <el-row :gutter="10">-->
|
<!-- <el-col :sm="24" :md="24" :lg="24">-->
|
<el-form-item :label="item.label" :prop="item.dataIndex" v-for="(item, i) in myItems1" :key="i">
|
<search-item :item="item" @change="formChange($event,i)" :value="item.value"/>
|
</el-form-item>
|
<div v-show="advanced" style="display: inline;">
|
<el-form-item :label="item.label" :prop="item.dataIndex" v-for="(item, i) in myItems2" :key="i">
|
<search-item :item="item" @change="formChange($event,i+3)" :value="item.value"/>
|
</el-form-item>
|
</div>
|
<div class="table-page-search-submitButtons">
|
<a
|
@click="toggleAdvanced"
|
style="margin-left: 8px"
|
v-if="items.length > 4">
|
{{ advanced ? "收起" : "展开" }}
|
<i :class="advanced?'el-icon-top':'el-icon-bottom'"/>
|
</a>
|
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
|
<el-button style="margin-left: 8px" icon="el-icon-refresh" @click="reset">重置</el-button>
|
</div>
|
<!-- </el-col>-->
|
<!-- <el-col :sm="24" :md="7" :lg="5">-->
|
<!-- -->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import SearchItem from './SearchItem'
|
|
export default {
|
components: { SearchItem },
|
name: 'mySearch',
|
props: ['items'],
|
data () {
|
return {
|
myItems1: [],
|
myItems2: [],
|
// 高级搜索 展开/关闭
|
advanced: false,
|
form:{}
|
}
|
},
|
beforeCreate () {
|
this.form = {}
|
},
|
created () {
|
this.items.map((x,i)=>{
|
this.form[x.dataIndex] = x.defaultValue ? x.defaultValue:null
|
})
|
if (this.items.length > 4) {
|
this.myItems1 = this.items.slice(0, 4)
|
this.myItems2 = this.items.slice(4)
|
} else {
|
this.myItems1 = this.items
|
}
|
},
|
computed: {
|
actionMd: function () {
|
if (!this.advanced) {
|
return 4
|
} else {
|
const _b = this.items.length % 3
|
if (_b === 0) {
|
return 24
|
} else {
|
return 4
|
}
|
}
|
}
|
},
|
methods: {
|
toggleAdvanced () {
|
this.advanced = !this.advanced
|
this.$emit('openChange')
|
},
|
search (e) {
|
e.preventDefault()
|
this.$refs.formData.validate((valid) => {
|
if (valid) {
|
this.form.pageNum = 1
|
this.$emit('search', this.form)
|
} else {
|
this.$message.warning('校验未通过,请检查!')
|
return false;
|
}
|
});
|
},
|
reset () {
|
this.$refs['formData'].resetFields();
|
this.items.map((x,i)=>{
|
x.value = x.defaultValue ? x.defaultValue:null
|
})
|
if (this.items.length > 3) {
|
this.myItems1 = this.items.slice(0, 3)
|
this.myItems2 = this.items.slice(3)
|
} else {
|
this.myItems1 = this.items
|
}
|
this.$forceUpdate()
|
this.$nextTick(()=>{
|
this.form.pageNum = 1
|
this.$emit('reset')
|
this.$emit('search', this.form)
|
})
|
},
|
formChange(e,i){
|
this.form[this.items[i].dataIndex] = e
|
this.items[i].value = e
|
this.$forceUpdate()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/.el-form--inline .el-form-item__label{
|
font-weight: normal;
|
color: #1D2129;
|
}
|
.table-page-search-submitButtons{
|
min-width: 160px;
|
float: right;
|
}
|
/deep/.el-button--medium{
|
padding:10px 12px;
|
}
|
</style>
|
