From 7329d44bdeefd98c9c06434814558e147414fe0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E6=94=BF=E6=9D=83?= <1978141412@qq.com> Date: Thu, 14 Nov 2024 19:42:47 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=90=9C=E7=B4=A2=E6=A0=8F?= =?UTF-8?q?=E8=BF=87=E6=BB=A4=E6=B7=BB=E5=8A=A0=E7=BC=96=E8=BE=91=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search-bar/filter-tree/filter-tree.scss | 10 ++ .../search-bar/filter-tree/filter-tree.tsx | 128 +++++++++++++++--- src/locale/en/index.ts | 1 + src/locale/zh-CN/index.ts | 1 + 4 files changed, 119 insertions(+), 21 deletions(-) diff --git a/src/control/search-bar/filter-tree/filter-tree.scss b/src/control/search-bar/filter-tree/filter-tree.scss index 8ef4000e..01f364f3 100644 --- a/src/control/search-bar/filter-tree/filter-tree.scss +++ b/src/control/search-bar/filter-tree/filter-tree.scss @@ -77,6 +77,9 @@ $filter-tree: ( position: absolute; top: getCssVar(spacing, base); left: rem(-40px); + @include when (readonly) { + color: getCssVar(color, disabled, text); + } .van-dropdown-menu__bar { box-shadow: none; background-color: transparent; @@ -114,6 +117,13 @@ $filter-tree: ( @include e(item-header) { display: flex; } + @include e(item-footer) { + display: flex; + gap: getCssVar(spacing, super, loose); + .van-button { + width: 100%; + } + } } @include b(filter-field-select) { diff --git a/src/control/search-bar/filter-tree/filter-tree.tsx b/src/control/search-bar/filter-tree/filter-tree.tsx index 98a0595d..8ac01e08 100644 --- a/src/control/search-bar/filter-tree/filter-tree.tsx +++ b/src/control/search-bar/filter-tree/filter-tree.tsx @@ -115,6 +115,15 @@ export const FilterTreeControl = defineComponent({ // 新建节点 const addNode: Ref = ref(null); + // 编辑节点 + const editNode: Ref = ref(null); + + // 编辑项index + let editIndex: number | undefined; + + // 拷贝节点 + const copyNode: Ref = ref(null); + // UI实际用的FilterNodes const UiFilterNodes = computed(() => { return props.filterNodes; @@ -340,15 +349,51 @@ export const FilterTreeControl = defineComponent({ emit('cancel'); }; + const closePopup = () => { + addNode.value = null; + editNode.value = null; + copyNode.value = null; + showPopup.value = false; + }; + + const onEditItem = () => { + if (copyNode.value && copyNode.value.value) { + Object.assign(editNode.value!, copyNode.value); + } + closePopup(); + }; + + const onRemove = () => { + if (!UiFilterNodes.value.length) { + return; + } + const children = (UiFilterNodes.value[0] as IFilterNodeGroup).children; + children.splice(editIndex as number, 1); + // 删除根分组时，将第一个过滤节点转为根节点 + if ( + children.length > 0 && + children[0].nodeType === 'GROUP' && + children[0].children.length + ) { + children[0] = children[0].children[0]; + } + closePopup(); + }; + const onAddItem = () => { - if (!UiFilterNodes.value.length || !addNode.value) { + // 新增条件无value时不添加 + if ( + !UiFilterNodes.value.length || + !addNode.value || + !addNode.value.value + ) { return; } const children = (UiFilterNodes.value[0] as IData as IFilterNodeGroup) .children; if (children[0] && !(children[0] as IFilterNodeField).field) { Object.assign(children[0], addNode.value); - showPopup.value = false; + closePopup(); return; } children.push({ @@ -356,8 +401,7 @@ export const FilterTreeControl = defineComponent({ logicType: 'AND', children: [addNode.value], }); - addNode.value = null; - showPopup.value = false; + closePopup(); }; onMounted(() => { @@ -367,6 +411,24 @@ export const FilterTreeControl = defineComponent({ } }); + /** + * @description 过滤项点击 + * @param {MouseEvent} event + * @param {IFilterNodeField} item + */ + const onFilterItemClick = ( + event: MouseEvent, + item: IFilterNodeField, + index: number, + root: boolean, + ) => { + event.stopPropagation(); + editNode.value = item; + copyNode.value = { ...item }; + editIndex = root ? 0 : index + 1; + showPopup.value = true; + }; + /** * 绘制编辑器 * @param node @@ -411,7 +473,11 @@ export const FilterTreeControl = defineComponent({ * @param node * @returns */ - const renderFilterItem = (node: IFilterNodeField) => { + const renderFilterItem = ( + node: IFilterNodeField, + index: number, + root: boolean, + ) => { // 不显示的不绘制 if (node.hidden) { return; @@ -432,7 +498,12 @@ export const FilterTreeControl = defineComponent({ } const opItem = FilterModes.find(x => x.valueOP === node.valueOP); return ( -
+
{ + onFilterItemClick(event, node, index, root); + }} + >
{item.label}
{opItem?.label}
@@ -476,12 +547,12 @@ export const FilterTreeControl = defineComponent({ } return (
-
+
{root ? ibiz.i18n.t('control.searchBar.when') : renderType(node)}
- {node.children.map(child => { + {node.children.map((child, index) => { if (child.nodeType === 'FIELD') { - return renderFilterItem(child); + return renderFilterItem(child, index, root); } // 移动端只支持单层分组 if (child.nodeType === 'GROUP') { @@ -492,8 +563,10 @@ export const FilterTreeControl = defineComponent({ ); }; - const renderNewItem = () => { - const node = addNode.value; + // 绘制气泡项，新建或编辑时使用 + const renderPopupItem = () => { + const editing = !!editNode.value; + const node = editing ? copyNode.value : addNode.value; if (!node) { return; } @@ -507,6 +580,25 @@ export const FilterTreeControl = defineComponent({ editor = renderEditor(node, filterC); } } + let footer = ( +
+ + {ibiz.i18n.t('control.searchBar.add')} + +
+ ); + if (editing) { + footer = ( +
+ + {ibiz.i18n.t('control.searchBar.remove')} + + + {ibiz.i18n.t('control.searchBar.confirm')} + +
+ ); + } return (
@@ -534,13 +626,7 @@ export const FilterTreeControl = defineComponent({
{editor}
- - {ibiz.i18n.t('control.searchBar.add')} - + {footer}
); }; @@ -550,7 +636,7 @@ export const FilterTreeControl = defineComponent({ showPopup, UiFilterNodes, renderFilterGroup, - renderNewItem, + renderPopupItem, onConfirm, onReset, addItem, @@ -574,7 +660,7 @@ export const FilterTreeControl = defineComponent({ })}
- + {ibiz.i18n.t('control.searchBar.reset')} - {this.renderNewItem()} + {this.renderPopupItem()}
); diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index 03beb631..73fdb38e 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -92,6 +92,7 @@ export default { reset: 'Reset', filter: 'Filter', add: 'Add', + remove: 'Remove', addCond: 'Add filter', value: 'Value', when: 'When', diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index 43bb3191..9eb37be2 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -85,6 +85,7 @@ export default { reset: '重置', filter: '筛选', add: '添加', + remove: '删除', addCond: '添加筛选条件', value: '值', when: '当', -- Gitee From 51981fb84119264e1c31827c778db63e9e7c7a96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E6=94=BF=E6=9D=83?= <1978141412@qq.com> Date: Thu, 14 Nov 2024 19:44:00 +0800 Subject: [PATCH 2/3] =?UTF-8?q?style:=20=E4=B8=8B=E6=8B=89=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=8F=AA=E8=AF=BB=E6=A0=B7=E5=BC=8F=E6=97=B6=E5=AF=B9?= =?UTF-8?q?=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss | 5 ++++- src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx | 8 +++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss index 880d61a5..ff980178 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss @@ -63,12 +63,15 @@ @include b(dropdown-readonly-text-item) { display: inline-block; - padding: 0 rem(16px); + padding: 0; font-size: rem(14px); line-height: rem(24px); color: getCssVar(dropdown, select-option-item-color); background-color: getCssVar(dropdown, select-option-item-bkcolor); border-radius: getCssVar(spacing, base); + @include m(has-bg) { + padding: 0 getCssVar(spacing, base); + } } @include b(dropdown-pop){ diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx index aef2a187..18d20e88 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx @@ -258,7 +258,13 @@ export const IBizDropdown = defineComponent({ const codeListItem = this.getCodeListItem(text); return ( Date: Thu, 14 Nov 2024 19:44:15 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=97=A5?= =?UTF-8?q?=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b5f5cf6..d8ba9016 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ - 分页搜索视图中快捷搜索提示根据当前激活的关系视图显示 - 按钮组支持项显示隐藏 - 编辑表单及编辑器支持注入属性 +- 搜索栏过滤添加编辑删除功能 +- 下拉列表只读样式时对齐 ### Fixed -- Gitee