perf: 🚀PageSearch组件优化，扩展表单控件，支持事件监听
This commit is contained in:
超凡
@@ -3,7 +3,7 @@
|
||||
v-show="visible"
|
||||
v-hasPerm="[`${searchConfig.pageName}:query`]"
|
||||
shadow="never"
|
||||
class="mb-[10px]"
|
||||
class="mb-2.5"
|
||||
>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<template v-for="(item, index) in formItems" :key="item.prop">
|
||||
@@ -14,101 +14,46 @@
|
||||
>
|
||||
<!-- Label -->
|
||||
<template v-if="item.tips" #label>
|
||||
<span>
|
||||
<span class="flex-y-center">
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
<el-tooltip v-bind="getTooltipProps(item.tips)">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
{{ searchConfig.colon === false ? "" : ":" }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input
|
||||
v-model="queryParams[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<template v-else #label>
|
||||
{{ item.label }} {{ searchConfig.colon === false ? "" : ":" }}
|
||||
</template>
|
||||
<!-- InputTag 标签输入框 -->
|
||||
<template v-if="item.type === 'input-tag'">
|
||||
<div class="flex-center">
|
||||
<el-tag
|
||||
v-for="tag in inputTagMap[item.prop].data"
|
||||
:key="tag"
|
||||
class="mr-2"
|
||||
:closable="true"
|
||||
v-bind="inputTagMap[item.prop].tagAttrs"
|
||||
@close="handleCloseTag(item.prop, tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<template v-if="inputTagMap[item.prop].inputVisible">
|
||||
<el-input
|
||||
:ref="(el: HTMLElement) => (inputTagMap[item.prop].inputRef = el)"
|
||||
v-model="inputTagMap[item.prop].inputValue"
|
||||
v-bind="inputTagMap[item.prop].inputAttrs"
|
||||
@keyup.enter="handleInputConfirm(item.prop)"
|
||||
@blur="handleInputConfirm(item.prop)"
|
||||
/>
|
||||
|
||||
<component
|
||||
:is="componentMap[item?.type ? item?.type : 'input']"
|
||||
v-model.trim="queryParams[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
:config="item.attrs"
|
||||
v-on="item.events || {}"
|
||||
>
|
||||
<template v-if="item.type === 'select'">
|
||||
<template v-for="opt in item.options">
|
||||
<el-option :label="opt.label" :value="opt.value" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button
|
||||
v-bind="inputTagMap[item.prop].buttonAttrs"
|
||||
@click="handleShowInput(item.prop)"
|
||||
>
|
||||
{{ inputTagMap[item.prop].buttonAttrs.btnText }}
|
||||
</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
</component>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="handleReset">重置</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<el-link
|
||||
v-if="isExpandable && formItems.length > showNumber"
|
||||
class="ml-2"
|
||||
class="ml-3"
|
||||
type="primary"
|
||||
:underline="false"
|
||||
@click="isExpand = !isExpand"
|
||||
>
|
||||
<template v-if="isExpand">
|
||||
收起
|
||||
<el-icon>
|
||||
<ArrowUp />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template v-else>
|
||||
展开
|
||||
<el-icon>
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</template>
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<component :is="isExpand ? ArrowUp : ArrowDown" class="w-4 h-4 ml-2" />
|
||||
</el-link>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -116,19 +61,33 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { reactive, ref } from "vue";
|
||||
import type { IObject, ISearchConfig } from "./types";
|
||||
import type { IObject, ISearchConfig, ComponentType } from "./types";
|
||||
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
|
||||
import { ElInput, ElInputNumber, ElInputTag, ElSelect, ElCascader } from "element-plus";
|
||||
import { ElTimePicker, ElTimeSelect, ElOption, ElDatePicker, ElTreeSelect } from "element-plus";
|
||||
import { type FormInstance } from "element-plus";
|
||||
import InputTag from "@/components/InputTag/index.vue";
|
||||
|
||||
// 定义接收的属性
|
||||
const props = defineProps<{
|
||||
searchConfig: ISearchConfig;
|
||||
}>();
|
||||
const props = defineProps<{ searchConfig: ISearchConfig }>();
|
||||
// 自定义事件
|
||||
const emit = defineEmits<{
|
||||
queryClick: [queryParams: IObject];
|
||||
resetClick: [queryParams: IObject];
|
||||
}>();
|
||||
// 组件映射表
|
||||
const componentMap: Record<ComponentType, Component> = {
|
||||
input: markRaw(ElInput),
|
||||
select: markRaw(ElSelect),
|
||||
cascader: markRaw(ElCascader),
|
||||
"input-number": markRaw(ElInputNumber),
|
||||
"date-picker": markRaw(ElDatePicker),
|
||||
"time-picker": markRaw(ElTimePicker),
|
||||
"time-select": markRaw(ElTimeSelect),
|
||||
"tree-select": markRaw(ElTreeSelect),
|
||||
"input-tag": markRaw(ElInputTag),
|
||||
"custom-tag": markRaw(InputTag),
|
||||
};
|
||||
|
||||
const queryFormRef = ref<FormInstance>();
|
||||
// 是否显示
|
||||
@@ -140,100 +99,57 @@ 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 formItems.length;
|
||||
}
|
||||
});
|
||||
const showNumber = computed(() =>
|
||||
isExpandable.value ? (props.searchConfig.showNumber ?? 3) : formItems.length
|
||||
);
|
||||
// 搜索表单数据
|
||||
const queryParams = reactive<IObject>({});
|
||||
const inputTagMap = reactive<IObject>({});
|
||||
for (const item of formItems) {
|
||||
item.initFn && item.initFn(item);
|
||||
if (item.type === "input-tag") {
|
||||
inputTagMap[item.prop] = {
|
||||
data: Array.isArray(item.initialValue) ? item.initialValue : [],
|
||||
inputVisible: false,
|
||||
inputValue: "",
|
||||
inputRef: null,
|
||||
buttonAttrs: {
|
||||
size: item.attrs?.size ?? "default",
|
||||
btnText: item.attrs?.btnText ?? "+ New Tag",
|
||||
style: "color: #b0b2b7",
|
||||
},
|
||||
inputAttrs: {
|
||||
size: item.attrs?.size ?? "default",
|
||||
clearable: item.attrs?.clearable ?? false,
|
||||
style: "width: 150px",
|
||||
},
|
||||
tagAttrs: {
|
||||
size: item.attrs?.size ?? "default",
|
||||
},
|
||||
};
|
||||
queryParams[item.prop] = computed({
|
||||
get() {
|
||||
return typeof item.attrs?.join === "string"
|
||||
? inputTagMap[item.prop].data.join(item.attrs.join)
|
||||
: inputTagMap[item.prop].data;
|
||||
},
|
||||
set(value) {
|
||||
// resetFields时会被调用
|
||||
inputTagMap[item.prop].data =
|
||||
typeof item.attrs?.join === "string"
|
||||
? value.split(item.attrs.join).filter((item: any) => item !== "")
|
||||
: value;
|
||||
},
|
||||
});
|
||||
} else {
|
||||
queryParams[item.prop] = item.initialValue ?? "";
|
||||
}
|
||||
}
|
||||
// 获取tooltip的属性
|
||||
const getTooltipProps = (tips: any) => {
|
||||
return typeof tips === "string" ? { content: tips } : tips;
|
||||
};
|
||||
|
||||
// 重置操作
|
||||
function handleReset() {
|
||||
onMounted(() => {
|
||||
formItems.map((item) => {
|
||||
item.initFn && item.initFn(item);
|
||||
if (item.type === "input-tag" || item.type === "custom-tag") {
|
||||
queryParams[item.prop] = item.initialValue ?? [];
|
||||
} else if (item.type === "input-number") {
|
||||
queryParams[item.prop] = item.initialValue ?? null;
|
||||
} else {
|
||||
queryParams[item.prop] = item.initialValue ?? "";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 查询/重置操作
|
||||
const handleQuery = () => emit("queryClick", queryParams);
|
||||
const handleReset = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
emit("resetClick", queryParams);
|
||||
}
|
||||
|
||||
// 查询操作
|
||||
function handleQuery() {
|
||||
emit("queryClick", queryParams);
|
||||
}
|
||||
|
||||
// 获取分页数据
|
||||
function getQueryParams() {
|
||||
return queryParams;
|
||||
}
|
||||
|
||||
// 显示/隐藏 SearchForm
|
||||
function toggleVisible() {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
|
||||
// 关闭标签
|
||||
function handleCloseTag(prop: string, tag: string) {
|
||||
inputTagMap[prop].data.splice(inputTagMap[prop].data.indexOf(tag), 1);
|
||||
}
|
||||
// 添加标签
|
||||
function handleInputConfirm(prop: string) {
|
||||
if (inputTagMap[prop].inputValue) {
|
||||
inputTagMap[prop].data.push(inputTagMap[prop].inputValue);
|
||||
}
|
||||
inputTagMap[prop].inputVisible = false;
|
||||
inputTagMap[prop].inputValue = "";
|
||||
}
|
||||
// 显示标签输入框
|
||||
function handleShowInput(prop: string) {
|
||||
inputTagMap[prop].inputVisible = true;
|
||||
nextTick(() => {
|
||||
inputTagMap[prop].inputRef.focus();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露的属性和方法
|
||||
defineExpose({ getQueryParams, toggleVisible });
|
||||
defineExpose({
|
||||
// 获取分页数据
|
||||
getQueryParams: () => queryParams,
|
||||
// 显示/隐藏 SearchForm
|
||||
toggleVisible: () => (visible.value = !visible.value),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-input-number .el-input__inner) {
|
||||
text-align: left;
|
||||
}
|
||||
.el-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 1rem;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,17 +26,31 @@ export interface IOperatData {
|
||||
$index: number;
|
||||
}
|
||||
|
||||
export type ComponentType =
|
||||
| "input"
|
||||
| "select"
|
||||
| "input-number"
|
||||
| "date-picker"
|
||||
| "time-picker"
|
||||
| "time-select"
|
||||
| "tree-select"
|
||||
| "input-tag"
|
||||
| "custom-tag"
|
||||
| "cascader";
|
||||
|
||||
export interface ISearchConfig {
|
||||
// 页面名称(参与组成权限标识,如sys:user:xxx)
|
||||
pageName: string;
|
||||
// 标签冒号
|
||||
colon?: boolean;
|
||||
// 表单项
|
||||
formItems: Array<{
|
||||
// 组件类型(如input,select等)
|
||||
type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag";
|
||||
type?: ComponentType;
|
||||
// 标签文本
|
||||
label: string;
|
||||
// 标签提示
|
||||
tips?: string;
|
||||
tips?: string | IObject;
|
||||
// 键名
|
||||
prop: string;
|
||||
// 组件属性(input-tag组件支持join,btnText,size属性)
|
||||
@@ -44,7 +58,9 @@ export interface ISearchConfig {
|
||||
// 初始值
|
||||
initialValue?: any;
|
||||
// 可选项(适用于select组件)
|
||||
options?: { label: string; value: any }[];
|
||||
options?: Array<{ label: string; value: any }>;
|
||||
// 组件事件
|
||||
events?: Record<string, (...args: any[]) => void>;
|
||||
// 初始化数据函数扩展
|
||||
initFn?: (formItem: IObject) => void;
|
||||
}>;
|
||||
|
||||
70
src/components/InputTag/index.vue
Normal file
70
src/components/InputTag/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="flex-y-center gap-2">
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
v-bind="config.tagAttrs"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-if="inputVisible"
|
||||
ref="inputRef"
|
||||
v-model.trim="inputValue"
|
||||
@keyup.enter.stop.prevent="handleInputConfirm"
|
||||
@blur.stop.prevent="handleInputConfirm"
|
||||
/>
|
||||
<el-button v-else v-bind="config.buttonAttrs" @click="showInput">
|
||||
{{ config.buttonAttrs.btnText ? config.buttonAttrs.btnText : "+ New Tag" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { InputInstance } from "element-plus";
|
||||
|
||||
const inputValue = ref("");
|
||||
const inputVisible = ref(false);
|
||||
const inputRef = ref<InputInstance>();
|
||||
|
||||
// 定义 model，用于与父组件的 v-model绑定
|
||||
const tags = defineModel<string[]>();
|
||||
|
||||
defineProps({
|
||||
config: {
|
||||
type: Object as () => {
|
||||
buttonAttrs: Record<string, any>;
|
||||
inputAttrs: Record<string, any>;
|
||||
tagAttrs: Record<string, any>;
|
||||
},
|
||||
default: () => ({
|
||||
buttonAttrs: {},
|
||||
inputAttrs: {},
|
||||
tagAttrs: {},
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const handleClose = (tag: string) => {
|
||||
if (tags.value) {
|
||||
const newTags = tags.value.filter((t) => t !== tag);
|
||||
tags.value = [...newTags];
|
||||
}
|
||||
};
|
||||
|
||||
const showInput = () => {
|
||||
inputVisible.value = true;
|
||||
nextTick(() => inputRef.value?.focus());
|
||||
};
|
||||
|
||||
const handleInputConfirm = () => {
|
||||
if (inputValue.value) {
|
||||
const newTags = [...(tags.value || []), inputValue.value];
|
||||
tags.value = newTags;
|
||||
}
|
||||
inputVisible.value = false;
|
||||
inputValue.value = "";
|
||||
};
|
||||
</script>
|
||||
@@ -1,4 +1,6 @@
|
||||
import { createApp } from "vue";
|
||||
// TODO::不引入el-input-tag样式会丢失
|
||||
import "element-plus/es/components/input-tag/style/css";
|
||||
import App from "./App.vue";
|
||||
import setupPlugins from "@/plugins";
|
||||
|
||||
|
||||
@@ -3,17 +3,22 @@ import type { ISearchConfig } from "@/components/CURD/types";
|
||||
|
||||
const searchConfig: ISearchConfig = {
|
||||
pageName: "sys:user",
|
||||
colon: false,
|
||||
formItems: [
|
||||
{
|
||||
tips: "支持模糊搜索",
|
||||
type: "input",
|
||||
label: "关键字",
|
||||
prop: "keywords",
|
||||
attrs: {
|
||||
placeholder: "用户名/昵称/手机号",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
style: { width: "200px" },
|
||||
},
|
||||
events: {
|
||||
// 监听输入框输入事件
|
||||
blur: (e) => console.log("失去焦点: ", e),
|
||||
focus: (e) => console.log("获得焦点: ", e),
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -27,9 +32,7 @@ const searchConfig: ISearchConfig = {
|
||||
"check-strictly": true,
|
||||
"render-after-expand": false,
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "150px",
|
||||
},
|
||||
style: { width: "200px" },
|
||||
},
|
||||
async initFn(formItem) {
|
||||
formItem.attrs.data = await DeptAPI.getOptions();
|
||||
@@ -38,20 +41,22 @@ const searchConfig: ISearchConfig = {
|
||||
},
|
||||
},
|
||||
{
|
||||
tips: { effect: "light", placement: "top", content: "自定义文字提示" },
|
||||
type: "select",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
attrs: {
|
||||
placeholder: "全部",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "100px",
|
||||
},
|
||||
style: { width: "200px" },
|
||||
},
|
||||
options: [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
],
|
||||
events: {
|
||||
change: (e) => console.log("发生变化: ", e),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "date-picker",
|
||||
@@ -63,9 +68,62 @@ const searchConfig: ISearchConfig = {
|
||||
"start-placeholder": "开始时间",
|
||||
"end-placeholder": "截止时间",
|
||||
"value-format": "YYYY-MM-DD",
|
||||
style: {
|
||||
width: "240px",
|
||||
},
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "date-picker",
|
||||
label: "日期选择器",
|
||||
prop: "testDataPicker",
|
||||
attrs: {
|
||||
type: "date",
|
||||
placeholder: "选择日期",
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input-number",
|
||||
label: "数字输入框",
|
||||
prop: "testInputNumber",
|
||||
attrs: {
|
||||
controls: false,
|
||||
placeholder: "请输入数字",
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input-tag",
|
||||
label: "标签选择器",
|
||||
prop: "testInputTags",
|
||||
attrs: {
|
||||
clearable: true,
|
||||
placeholder: "请输入",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "custom-tag",
|
||||
label: "标签选择器",
|
||||
prop: "testCustomTags",
|
||||
attrs: {
|
||||
buttonAttrs: { btnText: "+ New Tag" },
|
||||
inputAttrs: {},
|
||||
tagAttrs: {},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "time-picker",
|
||||
label: "时间选择器",
|
||||
prop: "testTimePicker",
|
||||
attrs: {
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "time-select",
|
||||
label: "时间选择",
|
||||
prop: "testTimeSelect",
|
||||
attrs: {
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user