From 326641d60e9b2a1d86f6021df56ef5fad36f5118 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Mon, 12 May 2025 21:09:47 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=97=A5=E5=8E=86=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6=E5=8F=82=E6=95=B0showmode=E6=96=B0=E5=A2=9E=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E5=80=BCexpand,=E5=9C=A8=E6=9C=88=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=8F=AF=E7=94=A8=E4=BA=8E=E5=B0=86?= =?UTF-8?q?=E6=89=80=E6=9C=89=E6=95=B0=E6=8D=AE=E8=BF=9B=E8=A1=8C=E5=B9=B3?= =?UTF-8?q?=E9=93=BA=E5=B1=95=E7=A4=BA=EF=BC=9B=E4=BF=AE=E5=A4=8Dpicker?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E7=BC=96=E8=BE=91=E5=99=A8=E5=9C=A8=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=80=BC=E4=B9=8B=E5=90=8E=E6=8C=89enter=E9=94=AE?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E4=BC=9A=E5=9C=A8=E8=A7=A6=E5=8F=91=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=A1=A8=E5=8D=95=E6=90=9C=E7=B4=A2=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5=E4=B8=8B=E5=B1=95=E5=BC=80=E8=87=AA=E8=BA=AB=E7=9A=84?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 5 +++++ src/control/calendar/calendar.tsx | 4 +++- .../ibiz-picker-dropdown.scss | 11 ++++++++++ .../ibiz-picker-dropdown.tsx | 21 ++++++++++++++++++ .../ibiz-dropdown/ibiz-dropdown.scss | 11 ++++++++++ .../ibiz-dropdown/ibiz-dropdown.tsx | 22 +++++++++++++++++++ 6 files changed, 73 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f14cad9b..3705c197c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,13 @@ ## [Unreleased] +### Fixed + +- 修复picker下拉编辑器在选择值之后按enter键时，会在触发搜索表单搜索的情况下展开自身的下拉框 + ### Added +- 日历控件参数showmode新增参数值expand,在月视图模式下可用于将所有数据进行平铺展示 - 更新分页导航栏支持流式布局，更新分页导航caption支持hover时显示title - 新增实体多数据自定义视图引擎 diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx index 231b78229..50bf71326 100644 --- a/src/control/calendar/calendar.tsx +++ b/src/control/calendar/calendar.tsx @@ -78,6 +78,7 @@ export const CalendarControl = defineComponent({ const calendarRef = ref(); const curPopover = ref(); const showDateRange = ref(c.controlParams.showmode === 'daterange'); + const showDateList = ref(c.controlParams.showmode === 'expand'); // 气泡框对应显示日期 const popoverValue = ref(''); @@ -400,6 +401,7 @@ export const CalendarControl = defineComponent({ curPopover, calendarRef, showDateRange, + showDateList, popoverValue, selectDate, calcItemStyle, @@ -553,7 +555,7 @@ export const CalendarControl = defineComponent({ items: ICalendarItemData[], date: Date, ): VNode[] => { - if (items.length > 1 && !this.showDateRange) { + if (items.length > 1 && !this.showDateRange && !this.showDateList) { return [ renderCalendarItem(items[0], date), { if ( @@ -219,6 +223,10 @@ export const IBizPickerDropDown = defineComponent({ if (isOpen) { items.value = []; onSearch(''); + } else { + nextTick(() => { + hiddenInputRef.value?.focus(); + }); } }; @@ -383,6 +391,7 @@ export const IBizPickerDropDown = defineComponent({ renderGroupAction, renderEmpty, popoverid, + hiddenInputRef, }; }, render() { @@ -480,6 +489,17 @@ export const IBizPickerDropDown = defineComponent({ ); + // 隐藏的辅助input,用来触发当下拉框隐藏时enter键的keyup事件，进而触发搜索表单的搜索事件，同时避免下拉框在搜索时出现 + const hiddenInput = ( + + ); + return (
{this.showFormDefaultContent && formDefaultContent} {this.readonly ? readonlyContent : editContent} + {this.readonly ? null : hiddenInput}
); }, diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss index 7bbaa8030..fa10be34b 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss @@ -19,6 +19,17 @@ $dropdown-readonly-text-item: ( } } + @include e(hidden-input){ + position: relative; + z-index: -9999; + width: 0; + height: 0; + padding: 0; + margin: 0; + border: none; + opacity: 0; + } + .el-select { width: 100%; } diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx index cd81ef2eb..8923ff122 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx @@ -77,6 +77,9 @@ export const IBizDropdown = defineComponent({ // 代码项值是否为数值 const codeItemValueNumber = ref(false); + // 隐藏的input框，用来替代下拉搜索框在浏览器焦点管理系统中的目标元素，用于触发enter键的keyup事件 + const hiddenInputRef = ref(); + // 是否显示表单默认内容 const showFormDefaultContent = computed(() => { if ( @@ -420,6 +423,12 @@ export const IBizDropdown = defineComponent({ // 下拉框出现/隐藏时触发 const onVisibleChange = async (visible: boolean) => { + // 下拉列表隐藏时阻止输入框的自动获取焦点，避免按enter键时触发显示下拉框 + if (!visible) { + nextTick(() => { + hiddenInputRef.value?.focus(); // 获取焦点 + }); + } if ( visible && (!isLoadedCodeList.value || c.editorParams.alwaysLoad === 'true') @@ -516,6 +525,7 @@ export const IBizDropdown = defineComponent({ onVisibleChange, isLoading, prefix, + hiddenInputRef, }; }, @@ -717,6 +727,17 @@ export const IBizDropdown = defineComponent({ ); + // 隐藏的辅助input,用来触发当下拉框隐藏时enter键的keyup事件，进而触发搜索表单的搜索事件，同时避免下拉框在搜索时出现 + const hiddenInput = ( + + ); + return (
{this.showFormDefaultContent && formDefaultContent} {this.readonly ? readonlyContent : editContent} + {this.readonly ? null : hiddenInput}
); }, -- Gitee From a9ccdabdd61b8d2e9094dc51e7bf498a9270b158 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Tue, 13 May 2025 09:49:19 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0picker=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E7=BC=96=E8=BE=91=E5=99=A8=E4=BB=85=E5=9C=A8=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=A1=A8=E5=8D=95=E4=B8=AD=E5=A4=84=E7=90=86=E5=BD=93?= =?UTF-8?q?=E5=89=8D=E4=B8=8B=E6=8B=89=E6=A1=86=E6=B6=88=E5=A4=B1=E6=97=B6?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E7=84=A6=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ibiz-picker-dropdown/ibiz-picker-dropdown.tsx | 11 ++++++++--- .../dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx | 5 +++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx index e9004f61b..e54817a9e 100644 --- a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx +++ b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx @@ -224,9 +224,14 @@ export const IBizPickerDropDown = defineComponent({ items.value = []; onSearch(''); } else { - nextTick(() => { - hiddenInputRef.value?.focus(); - }); + // 处于搜索表单时，但下拉框消失，更改浏览器当前焦点元素，避免按下enter搜索时select弹出下拉框 + const isSearchForm = + c.parent?.form?.model?.controlType === 'SEARCHFORM'; + if (isSearchForm) { + nextTick(() => { + hiddenInputRef.value?.focus(); + }); + } } }; diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx index 8923ff122..7d54966ad 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx @@ -423,8 +423,9 @@ export const IBizDropdown = defineComponent({ // 下拉框出现/隐藏时触发 const onVisibleChange = async (visible: boolean) => { - // 下拉列表隐藏时阻止输入框的自动获取焦点，避免按enter键时触发显示下拉框 - if (!visible) { + // 处于搜索表单中且下拉列表隐藏时阻止输入框的自动获取焦点，避免按enter键时触发显示下拉框 + const isSearchForm = c.parent?.form?.model?.controlType === 'SEARCHFORM'; + if (!visible && isSearchForm) { nextTick(() => { hiddenInputRef.value?.focus(); // 获取焦点 }); -- Gitee From e817c8ed238c12f4fce1d3ffb4b980d7fe581df9 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Tue, 13 May 2025 17:02:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E5=AF=BC=E8=88=AA=E6=B5=81=E5=BC=8F=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=A0=B9=E6=8D=AEsrfnav=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=AE=9A=E4=BD=8D=EF=BC=8C=E5=A6=82=E6=9E=9C?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E8=A7=86=E5=9B=BE=E5=AD=98=E5=9C=A8=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=AE=BD=E9=AB=98=EF=BC=8C=E5=8F=AF=E9=A2=84?= =?UTF-8?q?=E7=95=99=E5=86=85=E5=AE=B9=E5=8C=BA=E5=AE=BD=E9=AB=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 5 +- src/control/drtab/drtab.tsx | 2 + src/control/drtab/flow-drtab.tsx | 96 +++++++++++++++++++++++++++++--- 3 files changed, 94 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3705c197c..d85bba967 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,8 +13,9 @@ ### Added -- 日历控件参数showmode新增参数值expand,在月视图模式下可用于将所有数据进行平铺展示 -- 更新分页导航栏支持流式布局，更新分页导航caption支持hover时显示title +- 更新分页导航流式布局支持根据srfnav自动滚动定位，如果导航视图存在自定义宽高，可预留内容区宽高 +- 日历控件参数showmode新增参数值expand,在月视图模式下可用于将所有数据进行平铺展示 +- 更新分页导航栏支持流式布局，更新分页导航caption支持hover时显示title - 新增实体多数据自定义视图引擎 ## [0.7.40-alpha.15] - 2025-05-09 diff --git a/src/control/drtab/drtab.tsx b/src/control/drtab/drtab.tsx index 3363e7087..f649e6dc9 100644 --- a/src/control/drtab/drtab.tsx +++ b/src/control/drtab/drtab.tsx @@ -209,6 +209,7 @@ export const DRTabControl = defineComponent({ return { c, ns, + activeTab, controlRef, counterData, visibleItems, @@ -230,6 +231,7 @@ export const DRTabControl = defineComponent({ params={this.c.params} showHeader={this.tabPosition === 'flow'} counterData={this.counterData} + activeTab={this.activeTab} > ); } diff --git a/src/control/drtab/flow-drtab.tsx b/src/control/drtab/flow-drtab.tsx index 0e866c6a5..cf3d1f89a 100644 --- a/src/control/drtab/flow-drtab.tsx +++ b/src/control/drtab/flow-drtab.tsx @@ -1,6 +1,15 @@ -import { defineComponent, h, PropType, resolveComponent } from 'vue'; +import { + defineComponent, + h, + PropType, + ref, + watch, + resolveComponent, + Ref, +} from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; import { isNil } from 'ramda'; +import { createUUID } from 'qx-util'; import './flow-drtab.scss'; export const FlowDrtab = defineComponent({ @@ -30,10 +39,79 @@ export const FlowDrtab = defineComponent({ type: Boolean, default: true, }, + activeTab: { + type: Object as PropType, + default: () => {}, + }, }, - setup() { + setup(props) { const ns = useNamespace('flow-drtab'); - return { ns }; + const uuid = createUUID(); + const navtag = ref(''); + const viewList: Ref = ref([]); + + // 滚定到目标 + const scrollToTarget = () => { + if (navtag.value) { + const el = document.getElementById(`${uuid}_${navtag.value}`); + if (el) { + el.scrollIntoView(); + } + } + }; + + // 分页视图挂载完成 + const onViewMounted = () => { + scrollToTarget(); + }; + + watch( + () => props.activeTab, + (newVal, oldVal) => { + if (newVal && newVal.tag !== oldVal?.tag) { + navtag.value = newVal.tag; + scrollToTarget(); + } + }, + { + deep: true, + immediate: true, + }, + ); + + watch( + () => props.drtabpages, + newVal => { + if (newVal) { + Promise.all( + newVal.map(async (item: IData) => { + const view = await ibiz.hub.getAppView(item.appViewId); + return { id: item.id, height: view?.height, width: view?.width }; + }), + ).then(res => { + viewList.value = res; + }); + } + }, + { + deep: true, + immediate: true, + }, + ); + // 计算视图默认宽高 + const calcStyle = (tag: string) => { + const target = viewList.value.find(item => { + return item.id === tag; + }); + if (target) { + return { + height: target.height ? `${target.height}px` : '100%', + width: target.width ? `${target.width}px` : '100%', + }; + } + }; + + return { ns, uuid, onViewMounted, calcStyle }; }, render() { const tabs = this.pagesstate.map((item: IData) => { @@ -44,11 +122,11 @@ export const FlowDrtab = defineComponent({ const target = this.drtabpages.find(page => { return page.id === item.tag; }); - if (item.hidden) { + if (!target || item.hidden) { return null; } return ( -
+
{this.showHeader && (
{item.sysImage && ( @@ -67,11 +145,15 @@ export const FlowDrtab = defineComponent({ )}
)} -
+
{h(viewShell, { context: this.context, params: this.params, - viewId: target?.appViewId, + viewId: target.appViewId, + onMounted: this.onViewMounted, })}
-- Gitee