|
<!-- eslint-disable vue/no-mutating-props -->
<template>
<div class="__common-search-params">
<slot></slot>
<common-form
:model="formValues"
:forms="searchParams"
:form-type="'search'"
@change-event="changeEvent"
@blur-event="blurEvent"
>
<template #btns>
<div class="__common-search-btns">
<el-button type="primary" @click.stop="doSearch">查询</el-button>
<el-button @click.stop="clearSearch">重置</el-button>
</div>
</template>
</common-form>
</div>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
const emits = defineEmits([
'doSearch',
'clearSearch',
'changeEvent',
'blurEvent'
]);
const props = defineProps({
searchParams: {
type: Array,
default: () => []
},
formValues: {
type: Object,
default: () => {}
}
});
const resetFormvalues = (forms: any) => {
forms.forEach((item: any) => {
// eslint-disable-next-line vue/no-mutating-props
props.formValues[item.name] = item.value;
});
};
watch(
props?.searchParams,
(forms) => {
resetFormvalues(forms);
},
{ deep: true }
);
// 处理 input
const parseInput = (param: any) => {
if (param?.type === 'input') {
return { [param?.name]: param.value };
}
};
// 处理 select
const parseSelect = (param: any) => {
if (param?.type === 'select') {
return { [param?.name]: param.value };
}
};
// 处理 radio
const parseRadio = (param: any) => {
if (param?.type === 'radio') {
return { [param?.name]: param.value };
}
};
// 处理 cascader
const parseCascader = (param: any) => {
if (param?.type === 'cascader') {
return { [param?.name]: param.value };
}
};
// 处理 switch
const parseSwitch = (param: any) => {
if (param?.type === 'switch') {
return { [param?.name]: param.value };
}
};
// 处理 checkbox
const parseCheckbox = (param: any) => {
if (param?.type === 'switch') {
return { [param?.name]: param.value };
}
};
// 处理date-picker
const parseDate = (param: any) => {
if (param?.type === 'date-picker') {
return { [param?.name]: param.value };
}
};
const parseParam = (param: any) => {
// console.log(parseInput(param));
return (
parseInput(param) ||
parseSelect(param) ||
parseRadio(param) ||
parseCascader(param) ||
parseSwitch(param) ||
parseCheckbox(param) ||
parseDate(param)
);
};
// 搜搜项处理
const parseSearch = () => {
const params = JSON.parse(JSON.stringify(props?.searchParams));
let obj = {};
if (params?.length) {
params.forEach((param: any) => {
obj = { ...obj, ...parseParam(param) };
});
}
return obj;
};
// 清除搜索
const clearSearch = () => {
props?.searchParams.map((param: any) => {
const dataType = Object.prototype.toString.call(param.value);
switch (dataType) {
case '[object String]':
param.value = '';
break;
case '[object Array]':
param.value = [];
break;
case '[object Object]':
param.value = {};
break;
default:
param.value = undefined;
break;
}
return param;
});
resetFormvalues(props.searchParams);
emits('clearSearch', parseSearch());
};
// 搜索
const doSearch = () => {
emits('doSearch', parseSearch());
};
// 触发change事件
const changeEvent = (form: any) => {
emits('changeEvent', form);
};
// 触发blur事件
const blurEvent = (form: any) => {
emits('blurEvent', form);
};
doSearch();
</script>
<script lang="ts">
export default {
name: 'CommonSearch'
};
</script>
<style lang="scss">
.__common-search-params {
background: #fff;
// padding: 20px 0px 0 26px;
border-radius: 5px;
position: relative;
overflow: hidden;
padding-bottom: 18px;
padding: 0 16px 18px;
.el-form-item {
width: calc(100% - 24px);
margin-bottom: 0 !important;
margin-top: 18px !important;
}
.__common-search-btns {
width: 100%;
text-align: right;
// margin-top: 18px;
padding-right: 20px;
box-sizing: border-box;
}
}
</style>
|