feat(PageSearch): 表单项支持tips配置

This commit is contained in:
cshaptx4869
2024-06-07 16:31:29 +08:00
parent ac80a7cb0b
commit 63cf7c9a00

View File

@@ -12,6 +12,22 @@
:label="item.label" :label="item.label"
:prop="item.prop" :prop="item.prop"
> >
<!-- Label -->
<template #label v-if="item.tips">
<span>
{{ 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>
</span>
</template>
<!-- Input 输入框 --> <!-- Input 输入框 -->
<template v-if="item.type === 'input' || item.type === undefined"> <template v-if="item.type === 'input' || item.type === undefined">
<el-input <el-input
@@ -113,9 +129,11 @@ export interface ISearchConfig {
type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag"; type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag";
// 标签文本 // 标签文本
label: string; label: string;
// 标签提示
tips?: string;
// 键名 // 键名
prop: string; prop: string;
// 组件属性 // 组件属性(input-tag组件支持join,btnText,size属性)
attrs?: IObject; attrs?: IObject;
// 初始值 // 初始值
initialValue?: any; initialValue?: any;
@@ -164,7 +182,7 @@ for (const item of formItems) {
item.initFn && item.initFn(item); item.initFn && item.initFn(item);
if (item.type === "input-tag") { if (item.type === "input-tag") {
inputTagMap[item.prop] = { inputTagMap[item.prop] = {
data: item.initialValue ?? [], data: Array.isArray(item.initialValue) ? item.initialValue : [],
inputVisible: false, inputVisible: false,
inputValue: "", inputValue: "",
inputRef: null, inputRef: null,
@@ -182,12 +200,19 @@ for (const item of formItems) {
size: item.attrs?.size ?? "default", size: item.attrs?.size ?? "default",
}, },
}; };
queryParams[item.prop] = computed(() => { queryParams[item.prop] = computed({
if (item.attrs?.join) { get() {
return inputTagMap[item.prop].data.join(item.attrs.join); return typeof item.attrs?.join === "string"
} else { ? inputTagMap[item.prop].data.join(item.attrs.join)
return inputTagMap[item.prop].data; : 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 { } else {
queryParams[item.prop] = item.initialValue ?? ""; queryParams[item.prop] = item.initialValue ?? "";
@@ -196,9 +221,6 @@ for (const item of formItems) {
// 重置操作 // 重置操作
function handleReset() { function handleReset() {
queryFormRef.value?.resetFields(); queryFormRef.value?.resetFields();
for (const key in inputTagMap) {
inputTagMap[key].data = [];
}
emit("resetClick", queryParams); emit("resetClick", queryParams);
} }
// 查询操作 // 查询操作