From 4d8ef06ff14b7f2ff4e5d423dfb1b776d2ab8c99 Mon Sep 17 00:00:00 2001 From: lxmdream Date: Wed, 10 Apr 2024 19:01:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=9C=E7=B4=A2=E6=A0=8F=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E9=80=BB=E8=BE=91=E9=87=8D=E6=9E=84=EF=BC=8C=E5=90=8C?= =?UTF-8?q?=E6=97=B6=E6=94=AF=E6=8C=81simple=E5=92=8C=E6=99=AE=E9=80=9AITE?= =?UTF-8?q?MS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search-bar/filter-tree/filter-tree.tsx | 157 +++++++++++------- 1 file changed, 97 insertions(+), 60 deletions(-) diff --git a/src/control/search-bar/filter-tree/filter-tree.tsx b/src/control/search-bar/filter-tree/filter-tree.tsx index a679e8ea6..d1660c2d9 100644 --- a/src/control/search-bar/filter-tree/filter-tree.tsx +++ b/src/control/search-bar/filter-tree/filter-tree.tsx @@ -7,15 +7,19 @@ import { SearchBarFilterItemsController, ValueOP, IFilterNodeItems, + SearchBarFilterSimpleItemsController, } from '@ibiz-template/runtime'; import { useNamespace } from '@ibiz-template/vue3-util'; import { computed, defineComponent, h, PropType, resolveComponent } from 'vue'; import './filter-tree.scss'; +import { clearAll } from 'qx-util'; type FieldInfo = { name: string; label: string; valueOPs: string[]; + fieldName: string; + simpleFilterC?: SearchBarFilterSimpleItemsController; }; const FilterModes = [ @@ -81,12 +85,40 @@ export const FilterTreeControl = defineComponent({ return props.filterNodes; }); + /** + * 根据节点数据找到对应的控制器 + * @param node 节点数据 + * @returns + */ const findFilterController = ( - fieldName: string | null, - valueOP: string | null, + node: IFilterNodeField | IFilterNodeItems, ) => { + // simple模式查找控制器 + if (node.nodeType === 'ITEMS' && node.simple) { + const subNode = node.children[0] as IFilterNodeField; + return props.filterControllers.find(item => { + if (item.type === 'SIMPLE_ITEMS') { + const simpleC = item as SearchBarFilterSimpleItemsController; + if ( + simpleC.fieldName === node.field && + simpleC.valueOP === node.valueOP && + simpleC.subFieldName === subNode.field && + simpleC.subValueOP === subNode.valueOP + ) { + return true; + } + } + return false; + }); + } + + const { field, valueOP } = node; return props.filterControllers.find(item => { - if (item.fieldName === fieldName) { + // 给ITEMS模式排除掉SIMPLE_ITEMS的控制器 + if (item.type === 'SIMPLE_ITEMS') { + return false; + } + if (item.fieldName === field) { // 有配属性搜索模式的匹配才是，没配的都是指向没配的哪个过滤项 return item.valueOP ? item.valueOP === valueOP : true; } @@ -94,17 +126,38 @@ export const FilterTreeControl = defineComponent({ }); }; - const findSimpleFilterItemsController = (fieldName: string | null) => { - return props.filterControllers.find(item => { - return ( - item.fieldName === fieldName && - (item as SearchBarFilterItemsController).simple - ); - }) as SearchBarFilterItemsController | undefined; - }; - const allFields: Array = []; + // !初始化所有属性字段信息 + props.filterControllers.forEach(filterC => { + let find = allFields.find(x => x.name === filterC.key); + if (filterC.hidden) { + return; + } + // 没有且不是隐藏的添加进去 + if (find === undefined) { + find = { + name: filterC.key, + fieldName: filterC.fieldName, + label: filterC.label, + valueOPs: [], + }; + if (filterC.type === 'SIMPLE_ITEMS') { + find.simpleFilterC = filterC as SearchBarFilterSimpleItemsController; + } + + allFields.push(find); + } + + // 添加操作符号(没有配置的给全部) + if (!filterC.valueOP) { + find.valueOPs = FilterModes.map(item => item.valueOP); + } else { + find.valueOPs.push(filterC.valueOP); + } + }); + + /** 获取对应属性的操作符号 */ const getFilterModes = ( fieldName: string | null, fieldInfos: FieldInfo[] = allFields, @@ -119,45 +172,34 @@ export const FilterTreeControl = defineComponent({ return field.valueOPs; }; - props.filterControllers.forEach(filterC => { - let find = allFields.find(x => x.name === filterC.fieldName); - // 没有且不是隐藏的添加进去 - if (find === undefined && !filterC.hidden) { - find = { name: filterC.fieldName, label: filterC.label, valueOPs: [] }; - allFields.push(find); - } - - // 添加操作符号 - if (find) { - if (!filterC.valueOP) { - find.valueOPs = FilterModes.map(item => item.valueOP); - } else { - find.valueOPs.push(filterC.valueOP); - } - } - }); - /** - * 属性选择变更 + * 全局属性选择变更 * @author lxm * @date 2023-10-16 05:02:07 * @param {IFilterNodeField} node * @param {string} field */ - const onFieldSelect = (node: IFilterNodeField, field: string) => { - node.value = null; - node.valueOP = null; - node.field = field; - Object.assign(node, { - leaf: true, - logicType: undefined, - children: undefined, - }); + const onFieldSelect = ( + node: IFilterNodeField | IFilterNodeItems, + key: string, + fields: FieldInfo[] = allFields, + ) => { + const fieldInfo = fields.find(item => item.name === key); + if (!fieldInfo) { + ibiz.log.error(`allFields找不到属性标识为${key}的`); + return; + } + // 清空数据 + clearAll(node); - const find = findSimpleFilterItemsController(field); - if (find) { - find.addSimpleFilterNode(node); + if (fieldInfo.simpleFilterC) { + fieldInfo.simpleFilterC.addSimpleFilterNode(node); + return; } + + // 设置过滤属性相关默认值 + node.nodeType = 'FIELD'; + node.field = fieldInfo.fieldName; }; /** @@ -175,14 +217,14 @@ export const FilterTreeControl = defineComponent({ // 操作父改成存在或者不存在的时候调整参数，变成分组接口 if (['EXISTS', 'NOTEXISTS'].includes(valueOP)) { Object.assign(node, { - leaf: false, - logicType: 'ITEMS', - children: [{ leaf: true, field: null, valueOP: null, value: null }], + nodeType: 'ITEMS', + children: [ + { nodeType: 'FIELD', field: null, valueOP: null, value: null }, + ], }); } else { Object.assign(node, { - leaf: true, - logicType: undefined, + nodeType: 'FIELD', children: undefined, }); } @@ -300,7 +342,7 @@ export const FilterTreeControl = defineComponent({ ); editor = renderEditor(node, subFilterC); } else { - const filterC = findFilterController(node.field, node.valueOP); + const filterC = findFilterController(node); if (filterC && !['EXISTS', 'NOTEXISTS'].includes(filterC.valueOP!)) { editor = renderEditor(node, filterC); } @@ -315,7 +357,7 @@ export const FilterTreeControl = defineComponent({ teleported={false} class={ns.e('field-select')} onChange={(field: string) => { - onFieldSelect(node, field); + onFieldSelect(node, field, fieldInfos); }} > {fieldInfos.map(field => { @@ -441,27 +483,22 @@ export const FilterTreeControl = defineComponent({ */ renderFilterItems = (node: IFilterNodeItems) => { const itemsC = findFilterController( - (node as IData as IFilterNodeField).field, - node.valueOP!, + node, ) as SearchBarFilterItemsController; // 绘制简单模式 - if (itemsC.simple) { + if (node.simple) { const child = node.children[0] as IFilterNodeField | undefined; if (!child) { return; } // items的时候编辑器由子filterController控制 - const subFilterC = itemsC.getSubFilterController( - child.field!, - child.valueOP!, - ); return [ { - onFieldSelect(node as IData as IFilterNodeField, field); + onFieldSelect(node, field); }} > {allFields.map(field => { @@ -474,7 +511,7 @@ export const FilterTreeControl = defineComponent({ ); })} , - renderEditor(child, subFilterC), + renderEditor(child, itemsC), ]; } -- Gitee