AIoT前端公共UI

Search.vue 4.0KB

    <!-- 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>