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

feat: ✨ 搜索添加展开和收缩

Browse Source
This commit is contained in:
hxr
2024-05-12 19:04:27 +08:00
parent 315a22a579
commit 6403a73078
2 changed files with 190 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,72 +1,164 @@
<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" :inline="true"> <el-form ref="queryFormRef" :model="queryParams">
<template v-for="item in searchConfig.formItems" :key="item.prop"> <el-row :gutter="20">
<el-form-item :label="item.label" :prop="item.prop"> <template
<!-- Input 输入框 --> v-if="isExpand || searchConfig.formItems.length <= showNumber"
<template v-if="item.type === 'input'"> >
<template v-if="item.attrs?.type === 'number'"> <el-col
<el-input v-bind="colSpans"
v-model.number="queryParams[item.prop]" v-for="item in searchConfig.formItems"
v-bind="item.attrs" :key="item.prop"
@keyup.enter="handleQuery" >
/> <el-form-item :label="item.label" :prop="item.prop">
</template> <!-- Input 输入框 -->
<template v-else> <template v-if="item.type === 'input'">
<el-input <template v-if="item.attrs?.type === 'number'">
v-model="queryParams[item.prop]" <el-input
v-bind="item.attrs" v-model.number="queryParams[item.prop]"
@keyup.enter="handleQuery" v-bind="item.attrs"
/> @keyup.enter="handleQuery"
</template> />
</template> </template>
<!-- Select 选择器 --> <template v-else>
<template v-else-if="item.type === 'select'"> <el-input
<el-select v-model="queryParams[item.prop]" v-bind="item.attrs"> v-model="queryParams[item.prop]"
<template v-for="option in item.options" :key="option.value"> v-bind="item.attrs"
<el-option :label="option.label" :value="option.value" /> @keyup.enter="handleQuery"
/>
</template>
</template> </template>
</el-select> <!-- Select 选择器 -->
</template> <template v-else-if="item.type === 'select'">
<!-- TreeSelect 树形选择 --> <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
<template v-else-if="item.type === 'tree-select'"> <template v-for="option in item.options" :key="option.value">
<el-tree-select <el-option :label="option.label" :value="option.value" />
v-model="queryParams[item.prop]" </template>
v-bind="item.attrs" </el-select>
/> </template>
</template> <!-- TreeSelect 树形选择 -->
<!-- DatePicker 日期选择器 --> <template v-else-if="item.type === 'tree-select'">
<template v-else-if="item.type === 'date-picker'"> <el-tree-select
<el-date-picker v-model="queryParams[item.prop]"
v-model="queryParams[item.prop]" v-bind="item.attrs"
v-bind="item.attrs" />
/> </template>
</template> <!-- DatePicker 日期选择器 -->
<!-- Input 输入框 --> <template v-else-if="item.type === 'date-picker'">
<template v-else> <el-date-picker
<template v-if="item.attrs?.type === 'number'"> v-model="queryParams[item.prop]"
<el-input v-bind="item.attrs"
v-model.number="queryParams[item.prop]" />
v-bind="item.attrs" </template>
@keyup.enter="handleQuery" <!-- Input 输入框 -->
/> <template v-else>
</template> <template v-if="item.attrs?.type === 'number'">
<template v-else> <el-input
<el-input v-model.number="queryParams[item.prop]"
v-model="queryParams[item.prop]" v-bind="item.attrs"
v-bind="item.attrs" @keyup.enter="handleQuery"
@keyup.enter="handleQuery" />
/> </template>
</template> <template v-else>
</template> <el-input
</el-form-item> v-model="queryParams[item.prop]"
</template> v-bind="item.attrs"
<el-form-item> @keyup.enter="handleQuery"
<el-button type="primary" icon="search" @click="handleQuery"> />
搜索 </template>
</el-button> </template>
<el-button icon="refresh" @click="handleReset">重置</el-button> </el-form-item>
</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>
@@ -96,11 +188,38 @@ export interface ISearchConfig {
// 可选项(适用于select组件) // 可选项(适用于select组件)
options?: { label: string; value: any }[]; options?: { label: string; value: any }[];
}>; }>;
// 是否开启展开和收缩
isExpandable?: boolean;
// 默认展示的表单项数量
showNumber?: number;
} }
interface IProps { 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];

9
src/views/demo/curd/config/search.ts
View File

@@ -11,7 +11,7 @@ const searchConfig: ISearchConfig = {
placeholder: "用户名/昵称/手机号", placeholder: "用户名/昵称/手机号",
clearable: true, clearable: true,
style: { style: {
width: "200px", width: "80%",
}, },
}, },
}, },
@@ -42,7 +42,7 @@ const searchConfig: ISearchConfig = {
"render-after-expand": false, "render-after-expand": false,
clearable: true, clearable: true,
style: { style: {
width: "150px", width: "80%",
}, },
}, },
}, },
@@ -54,7 +54,7 @@ const searchConfig: ISearchConfig = {
placeholder: "全部", placeholder: "全部",
clearable: true, clearable: true,
style: { style: {
width: "100px", width: "60%",
}, },
}, },
options: [ options: [
@@ -73,11 +73,12 @@ const searchConfig: ISearchConfig = {
"end-placeholder": "截止时间", "end-placeholder": "截止时间",
"value-format": "YYYY-MM-DD", "value-format": "YYYY-MM-DD",
style: { style: {
width: "240px", width: "60%",
}, },
}, },
}, },
], ],
isExpandable: true,
}; };
export default searchConfig; export default searchConfig;