<template>
|
<div class="table-page-search-wrapper" style="padding: 0 10px 10px 10px">
|
<el-form :model="form" inline ref="formData" size="small">
|
<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>
|
<el-form-item>
|
<div class="table-page-search-submitButtons">
|
<el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
|
<el-button size="small" style="margin-left: 8px" icon="el-icon-refresh" @click="reset">重置</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import SearchItem from './SearchItem';
|
|
export default {
|
components: { SearchItem },
|
name: 'mySearch',
|
props: ['items'],
|
data() {
|
return {
|
myItems1: [],
|
// 高级搜索 展开/关闭
|
advanced: false,
|
form: {},
|
};
|
},
|
beforeCreate() {
|
this.form = {};
|
},
|
created() {
|
this.items.map((x, i) => {
|
this.form[x.dataIndex] = x.defaultValue ? x.defaultValue : null;
|
});
|
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;
|
});
|
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;
|
}
|
/deep/.el-button--medium {
|
padding: 10px 12px;
|
}
|
>>>.el-form-item{
|
margin: 6px 10px 6px 0;
|
}
|
</style>
|
