|
<template>
|
<el-form :inline="true" size="mini">
|
<el-form-item
|
v-for="(filterInfo, key) in filter"
|
:key="key"
|
:label="filterInfo.text"
|
>
|
<!--单选框-->
|
<el-radio-group
|
v-model="returnValue[key]"
|
v-if="filterInfo.type == 'radioGroup'"
|
:style="`width:${filterInfo.width};`"
|
>
|
<el-radio-button
|
:label="option.id"
|
v-for="(option, index) in filterInfo.options"
|
:key="index"
|
>{{ option.name }}</el-radio-button
|
>
|
</el-radio-group>
|
|
<!--搜索类型为输入框-->
|
<el-input
|
v-else-if="filterInfo.type == 'input'"
|
v-model="returnValue[key]"
|
:placeholder="filterInfo.placeholder"
|
:style="`width:${filterInfo.width};`"
|
>
|
</el-input>
|
|
<!--搜索类型输入框远程搜索服务端数据-->
|
<el-autocomplete
|
v-else-if="filterInfo.type == 'autocomplete'"
|
v-model="returnValue[key]"
|
:placeholder="filterInfo.placeholder"
|
:fetch-suggestions="querySearchAsync"
|
:trigger-on-focus="true"
|
:style="`width:${filterInfo.width};`"
|
>
|
</el-autocomplete>
|
<!--搜索类型为日期或日期时间-->
|
<el-date-picker
|
v-else-if="
|
filterInfo.type == 'date' ||
|
filterInfo.type == 'datetime' ||
|
filterInfo.type == 'month' ||
|
filterInfo.type == 'year'
|
"
|
:format="
|
filterInfo.type == 'date'
|
? 'yyyy-MM-dd'
|
: filterInfo.type == 'datetime'
|
? 'yyyy-MM-dd HH:mm:ss'
|
: filterInfo.type == 'month'
|
? 'yyyy-MM'
|
: 'yyyy'
|
"
|
v-model="returnValue[key]"
|
:type="filterInfo.type"
|
:style="`width:${filterInfo.width};`"
|
@change="pickerChange(filterInfo, key, returnValue[key])"
|
:placeholder="filterInfo.placeholder"
|
>
|
</el-date-picker>
|
|
<!--搜索类型为日期范围或日期时间范围-->
|
<el-date-picker
|
v-else-if="
|
filterInfo.type == 'daterange' || filterInfo.type == 'datetimerange'
|
"
|
v-model="returnValue[key]"
|
:type="filterInfo.type"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="pickerRangeChange(filterInfo, key, returnValue[key])"
|
:style="`width:${filterInfo.width};`"
|
:placeholder="filterInfo.placeholder"
|
>
|
</el-date-picker>
|
|
<!--搜索类型为选择器-->
|
<el-select
|
v-else-if="filterInfo.type == 'select'"
|
v-model="returnValue[key]"
|
clearable
|
:multiple="filterInfo.multiple"
|
:collapse-tags="filterInfo.multiple"
|
:placeholder="filterInfo.placeholder"
|
:style="`width:${filterInfo.width};`"
|
>
|
<el-option
|
v-for="(option, index) in filterInfo.options"
|
:key="index"
|
:label="option.name"
|
:value="option.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch"
|
>查询</el-button
|
>
|
<el-button type="info" icon="el-icon-delete" @click="handleClear"
|
>清空查询</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
returnValue: {},
|
};
|
},
|
watch: {},
|
props: ["filter"],
|
created() {
|
this.handleSearch();
|
},
|
methods: {
|
pickerChange(info, key, value) {
|
switch (info.type) {
|
case "date":
|
this.returnValue[key] = this.format(value, "yyyy-MM-dd");
|
break;
|
case "month":
|
this.returnValue[key] = this.format(value, "yyyy-MM");
|
break;
|
case "year":
|
this.returnValue[key] = this.format(value, "yyyy");
|
break;
|
case "datetime":
|
this.returnValue[key] = this.format(value, "yyyy-MM-dd hh:mm:ss");
|
break;
|
}
|
},
|
pickerRangeChange(info, key, value) {
|
switch (info.type) {
|
case "daterange":
|
for (let i in value) {
|
this.returnValue[key][i] = this.format(value[i], "yyyy-MM-dd");
|
}
|
break;
|
case "datetimerange":
|
for (let i in value) {
|
this.returnValue[key][i] = this.format(
|
value[i],
|
"yyyy-MM-dd hh:mm:ss"
|
);
|
}
|
break;
|
}
|
},
|
handleSearch() {
|
let options = [];
|
for (let key in this.returnValue) {
|
if (typeof this.filter[key] != "undefined") {
|
let value = this.returnValue[key];
|
if (value != "" && value != []) {
|
options.push({
|
type: this.filter[key].sql_type,
|
name: key,
|
value: this.returnValue[key],
|
});
|
}
|
}
|
}
|
this.$emit("handleSearch", options);
|
},
|
handleClear() {
|
let options = [];
|
for (let key in this.returnValue) {
|
if (typeof this.filter[key] != "undefined") {
|
if (typeof this.returnValue[key] == "object") {
|
this.returnValue[key] = [];
|
} else if (typeof this.filter[key].default != "undefined") {
|
this.returnValue[key] = this.filter[key].default;
|
options.push({
|
type: this.filter[key].sql_type,
|
name: key,
|
value: this.returnValue[key],
|
});
|
} else {
|
this.returnValue[key] = "";
|
}
|
} else {
|
continue;
|
}
|
}
|
this.$emit("handleSearch", options);
|
},
|
},
|
};
|
</script>
|
