<template>
|
<div class="dialog-search">
|
<el-form
|
:inline="true"
|
ref="ruleForm"
|
:model="formInline"
|
class="demo-form-inline"
|
v-show="showSearch"
|
>
|
<el-form-item
|
v-for="(item, index) in formItemListData"
|
:key="index"
|
:label="item.label"
|
>
|
<!-- 下拉选择框 -->
|
<template v-if="item.component == 'Select'">
|
<template v-if="item.slot">
|
<slot :name="item.slot" :form="formInline" :field="item.field">
|
</slot>
|
</template>
|
<template v-else>
|
<el-select
|
v-model="formInline[item.field]"
|
:multiple="item.multiple"
|
:placeholder="item.componentProps.placeholder"
|
size="mini"
|
clearable
|
>
|
<el-option
|
v-for="(item2, index2) in item.selectOptions"
|
size="mini"
|
:key="index2"
|
:label="item2.label"
|
:value="item2.value"
|
></el-option>
|
</el-select>
|
</template>
|
</template>
|
|
<!-- 下拉选择框end -->
|
<!-- 输入框 -->
|
<el-input
|
v-if="item.component == 'Input' && item.show !== false"
|
v-model.trim="formInline[item.field]"
|
:placeholder="item.componentProps.placeholder"
|
clearable
|
size="mini"
|
></el-input>
|
<!-- 输入框 -->
|
<!-- 日期范围选择框 -->
|
<el-date-picker
|
v-if="
|
item.component == 'daterange' ||
|
item.component == 'datetimerange' ||
|
item.component == 'date' ||
|
item.component == 'datetime'
|
"
|
size="mini"
|
v-model="formInline[item.field]"
|
:value-format="item.valueFormat || 'yyyy/MM/dd'"
|
:format="item.format || 'yyyy/MM/dd'"
|
clearable
|
:type="item.component || ''"
|
:range-separator="item.rangeSeparator || '至'"
|
:start-placeholder="item.componentProps.startPlaceholder"
|
:end-placeholder="item.componentProps.endPlaceholder"
|
:placeholder="item.componentProps.placeholder"
|
>
|
</el-date-picker>
|
<!-- 日期范围选择框end -->
|
<!-- 级联选择器 -->
|
<el-cascader
|
v-if="item.component == 'cascader'"
|
v-model="formInline[item.field]"
|
:options="item.options"
|
:props="item.props"
|
size="mini"
|
clearable
|
></el-cascader>
|
<!-- 级联选择器end -->
|
</el-form-item>
|
|
<slot name="formItem"></slot>
|
<el-form-item style="width: 10rem">
|
<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
|
<el-button type="" size="mini" @click="resetForm('ruleForm')"
|
>重置</el-button
|
>
|
</el-form-item>
|
<!-- 可用于显示其他按钮 -->
|
<slot name="formButton"></slot>
|
</el-form>
|
<el-row :gutter="10" class="mb8">
|
<div class="bottonBox">
|
<slot name="actionButton"></slot>
|
<right-toolbar
|
:showSearch.sync="showSearch"
|
@queryTable="getList"
|
class="rightbotton"
|
></right-toolbar>
|
</div>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import request from "@/utils/request";
|
import { time } from "echarts";
|
|
export default {
|
name: "BaseSearch",
|
props: {
|
emitSearch: {
|
// 是否立即执行搜索
|
type: Boolean,
|
default: false,
|
},
|
formItemList: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
data() {
|
let formInline = {};
|
for (const obj of this.formItemList) {
|
formInline[obj.field] = obj.defaultValue || "";
|
}
|
return {
|
formInline,
|
showSearch: true,
|
// formItemListData: [],
|
};
|
},
|
computed: {
|
formItemListData() {
|
return JSON.parse(JSON.stringify(this.formItemList)).map((item) => {
|
if (item.component == "Select" && !item.slot) {
|
if (item.componentProps.options) {
|
item.selectOptions = item.componentProps.options;
|
}
|
}
|
|
return item;
|
});
|
},
|
},
|
mounted() {},
|
watch: {
|
emitSearch(newVal, oldVal) {
|
// 是否立即触发搜索 用在弹窗中异步请求下拉框后 或者给下拉框赋值默认值后 需要用到这个方法
|
if (newVal) {
|
console.log("此时触发--立即执行搜索");
|
this.$emit("search", this.formInline);
|
}
|
},
|
formItemList: {
|
handler(newVal, oldVal) {
|
for (const obj of this.formItemList) {
|
console.log(obj);
|
if (obj.defaultValue) {
|
formInline[obj.field] = obj.defaultValue;
|
}
|
}
|
},
|
deep: true,
|
},
|
showSearch() {
|
this.$emit("showSearchChange");
|
},
|
},
|
methods: {
|
onSubmit() {
|
this.$emit("search", this.formInline);
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
let formInline = {};
|
for (const obj of this.formItemList) {
|
formInline[obj.field] = ""; // 所有筛选条件清空
|
}
|
this.formInline = formInline;
|
|
this.$emit("search", this.formInline);
|
},
|
getList() {
|
this.$emit("getList");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.dialog-search {
|
// margin: 0 1rem;
|
margin-bottom: 20px;
|
text-align: left;
|
::v-deep .el-form-item__content {
|
// width: 16rem;
|
.el-input {
|
width: 16rem;
|
}
|
.el-select {
|
.el-input__inner {
|
// height: 3.2rem;
|
width: 16rem;
|
}
|
}
|
}
|
::v-deep .el-form-item {
|
margin-bottom: 5px;
|
}
|
}
|
.bottonclas {
|
display: flex;
|
justify-content: flex-start;
|
}
|
.bottonBox {
|
display: flex;
|
justify-content: flex-start;
|
}
|
.rightbotton {
|
margin-left: 20px;
|
}
|
</style>
|
