tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 优化PageSearch组件

Browse Source
This commit is contained in:
cshaptx4869
2024-05-13 10:22:50 +08:00
parent 6403a73078
commit fbe760b7fc
1 changed files with 73 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/components/PageSearch/index.vue
View File

@@ -1,171 +1,71 @@
<template> <template>
<div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]"> <div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]">
<el-form ref="queryFormRef" :model="queryParams"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-row :gutter="20"> <template
<template v-for="(item, index) in searchConfig.formItems"
v-if="isExpand || searchConfig.formItems.length <= showNumber" :key="item.prop"
>
<el-form-item
v-show="isExpand ? true : index < showNumber"
:label="item.label"
:prop="item.prop"
> >
<el-col <!-- Input 输入框 -->
v-bind="colSpans" <template v-if="item.type === 'input' || item.type === undefined">
v-for="item in searchConfig.formItems" <el-input
:key="item.prop" v-model="queryParams[item.prop]"
> v-bind="item.attrs"
<el-form-item :label="item.label" :prop="item.prop"> @keyup.enter="handleQuery"
<!-- Input 输入框 --> />
<template v-if="item.type === 'input'"> </template>
<template v-if="item.attrs?.type === 'number'"> <!-- Select 选择器 -->
<el-input <template v-else-if="item.type === 'select'">
v-model.number="queryParams[item.prop]" <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
v-bind="item.attrs" <template v-for="option in item.options" :key="option.value">
@keyup.enter="handleQuery" <el-option :label="option.label" :value="option.value" />
/>
</template>
<template v-else>
<el-input
v-model="queryParams[item.prop]"
v-bind="item.attrs"
@keyup.enter="handleQuery"
/>
</template>
</template> </template>
<!-- Select 选择器 --> </el-select>
<template v-else-if="item.type === 'select'"> </template>
<el-select v-model="queryParams[item.prop]" v-bind="item.attrs"> <!-- TreeSelect 树形选择 -->
<template v-for="option in item.options" :key="option.value"> <template v-else-if="item.type === 'tree-select'">
<el-option :label="option.label" :value="option.value" /> <el-tree-select
</template> v-model="queryParams[item.prop]"
</el-select> v-bind="item.attrs"
</template> />
<!-- TreeSelect 树形选择 --> </template>
<template v-else-if="item.type === 'tree-select'"> <!-- DatePicker 日期选择器 -->
<el-tree-select <template v-else-if="item.type === 'date-picker'">
v-model="queryParams[item.prop]" <el-date-picker
v-bind="item.attrs" v-model="queryParams[item.prop]"
/> v-bind="item.attrs"
</template> />
<!-- DatePicker 日期选择器 --> </template>
<template v-else-if="item.type === 'date-picker'"> </el-form-item>
<el-date-picker </template>
v-model="queryParams[item.prop]" <el-form-item>
v-bind="item.attrs" <el-button type="primary" icon="search" @click="handleQuery">
/> 搜索
</template> </el-button>
<!-- Input 输入框 --> <el-button icon="refresh" @click="handleReset">重置</el-button>
<template v-else> <!-- 展开/收起 -->
<template v-if="item.attrs?.type === 'number'"> <el-link
<el-input v-if="isExpandable && searchConfig.formItems.length > showNumber"
v-model.number="queryParams[item.prop]" class="ml-2"
v-bind="item.attrs" type="primary"
@keyup.enter="handleQuery" :underline="false"
/> @click="isExpand = !isExpand"
</template> >
<template v-else> <template v-if="isExpand"> 收起<i-ep-arrow-up /> </template>
<el-input <template v-else> 展开<i-ep-arrow-down /> </template>
v-model="queryParams[item.prop]" </el-link>
v-bind="item.attrs" </el-form-item>
@keyup.enter="handleQuery"
/>
</template>
</template>
</el-form-item>
</el-col>
</template>
<template v-else>
<el-col
v-bind="colSpans"
v-for="item in searchConfig.formItems.slice(0, showNumber)"
:key="item.prop"
>
<el-form-item :label="item.label" :prop="item.prop">
<!-- Input 输入框 -->
<template v-if="item.type === 'input'">
<template v-if="item.attrs?.type === 'number'">
<el-input
v-model.number="queryParams[item.prop]"
v-bind="item.attrs"
@keyup.enter="handleQuery"
/>
</template>
<template v-else>
<el-input
v-model="queryParams[item.prop]"
v-bind="item.attrs"
@keyup.enter="handleQuery"
/>
</template>
</template>
<!-- Select 选择器 -->
<template v-else-if="item.type === 'select'">
<el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
<template v-for="option in item.options" :key="option.value">
<el-option :label="option.label" :value="option.value" />
</template>
</el-select>
</template>
<!-- TreeSelect 树形选择 -->
<template v-else-if="item.type === 'tree-select'">
<el-tree-select
v-model="queryParams[item.prop]"
v-bind="item.attrs"
/>
</template>
<!-- DatePicker 日期选择器 -->
<template v-else-if="item.type === 'date-picker'">
<el-date-picker
v-model="queryParams[item.prop]"
v-bind="item.attrs"
/>
</template>
<!-- Input 输入框 -->
<template v-else>
<template v-if="item.attrs?.type === 'number'">
<el-input
v-model.number="queryParams[item.prop]"
v-bind="item.attrs"
@keyup.enter="handleQuery"
/>
</template>
<template v-else>
<el-input
v-model="queryParams[item.prop]"
v-bind="item.attrs"
@keyup.enter="handleQuery"
/>
</template>
</template>
</el-form-item>
</el-col>
</template>
<div class="flex flex-auto items-start justify-end pr-5">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">
搜索
</el-button>
<el-button icon="refresh" @click="handleReset">重置</el-button>
<el-link
v-if="isExpandable && searchConfig.formItems.length > showNumber"
@click="isExpand = !isExpand"
class="ml-2"
type="primary"
:underline="false"
>
{{ isExpand ? "收起" : "展开" }}
<i-ep-arrow-up v-if="isExpand" />
<i-ep-arrow-down v-else />
</el-link>
</el-form-item>
</div>
</el-row>
</el-form> </el-form>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from "vue"; import type { FormInstance } from "element-plus";
import type { ElForm } from "element-plus"; import { reactive, ref } from "vue";
// 对象类型 // 对象类型
type IObject = Record<string, any>; type IObject = Record<string, any>;
@@ -197,29 +97,6 @@ interface IProps {
searchConfig: ISearchConfig; searchConfig: ISearchConfig;
} }
const props = defineProps<IProps>(); const props = defineProps<IProps>();
// 是否可展开/收缩
const isExpandable = ref(props.searchConfig.isExpandable);
// 是否展开
const isExpand = ref(false);
// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
const showNumber = computed(() => {
if (isExpandable.value === true) {
return props.searchConfig.showNumber ?? 3;
} else {
return props.searchConfig.formItems.length;
}
});
// 表单项栅格列数配置
const colSpans = {
xs: 24,
sm: 12,
md: 8,
lg: 6,
xl: 4,
};
// 自定义事件 // 自定义事件
const emit = defineEmits<{ const emit = defineEmits<{
queryClick: [queryParams: IObject]; queryClick: [queryParams: IObject];
@@ -228,7 +105,20 @@ const emit = defineEmits<{
// 暴露的属性和方法 // 暴露的属性和方法
defineExpose({ getQueryParams }); defineExpose({ getQueryParams });
const queryFormRef = ref<InstanceType<typeof ElForm>>(); // 是否可展开/收缩
const isExpandable = ref(props.searchConfig.isExpandable ?? true);
// 是否已展开
const isExpand = ref(false);
// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
const showNumber = computed(() => {
if (isExpandable.value === true) {
return props.searchConfig.showNumber ?? 3;
} else {
return props.searchConfig.formItems.length;
}
});
const queryFormRef = ref<FormInstance>();
// 搜索表单数据 // 搜索表单数据
const queryParams = reactive<IObject>({}); const queryParams = reactive<IObject>({});
for (const item of props.searchConfig.formItems) { for (const item of props.searchConfig.formItems) {