diff --git a/src/components/PageSearch/index.vue b/src/components/PageSearch/index.vue index e1723b87..f2f6e55b 100644 --- a/src/components/PageSearch/index.vue +++ b/src/components/PageSearch/index.vue @@ -20,6 +20,38 @@ @keyup.enter="handleQuery" /> + + + + + {{ tag }} + + + + + + + {{ inputTagMap[item.prop].buttonAttrs.btnText }} + + + + @@ -78,7 +110,7 @@ export interface ISearchConfig { // 表单项 formItems: Array<{ // 组件类型(如input,select等) - type?: "input" | "select" | "tree-select" | "date-picker"; + type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag"; // 标签文本 label: string; // 键名 @@ -127,13 +159,46 @@ const showNumber = computed(() => { }); // 搜索表单数据 const queryParams = reactive({}); +const inputTagMap = reactive({}); for (const item of formItems) { item.initFn && item.initFn(item); - queryParams[item.prop] = item.initialValue ?? ""; + if (item.type === "input-tag") { + inputTagMap[item.prop] = { + data: 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(() => { + if (item.attrs?.join) { + return inputTagMap[item.prop].data.join(item.attrs.join); + } else { + return inputTagMap[item.prop].data; + } + }); + } else { + queryParams[item.prop] = item.initialValue ?? ""; + } } // 重置操作 function handleReset() { queryFormRef.value?.resetFields(); + for (const key in inputTagMap) { + inputTagMap[key].data = []; + } emit("resetClick", queryParams); } // 查询操作 @@ -148,6 +213,25 @@ function getQueryParams() { 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 });