From 1884344b9996f30be49b8111eb92a7c62df5d48b Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Sat, 9 Nov 2024 15:57:17 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E7=94=98=E7=89=B9=E9=83=A8?= =?UTF-8?q?=E4=BB=B6=E9=80=82=E9=85=8D=E6=BB=91=E5=9D=97=E7=B2=98=E6=80=A7?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=8F=8A=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E6=BB=91=E5=9D=97=E9=A3=98=E7=AA=97=E6=89=93=E5=BC=80=E6=96=B9?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++ src/control/gantt/gantt.scss | 58 +++++++++++++++++++ src/control/gantt/gantt.tsx | 108 ++++++++++++++++++++++++----------- 3 files changed, 137 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9735a466..552c8af6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Changed + +- 甘特部件适配滑块粘性布局样式及调整滑块飘窗打开方式 + ## [0.7.38-alpha.23] - 2024-11-08 ### Changed diff --git a/src/control/gantt/gantt.scss b/src/control/gantt/gantt.scss index e432b2b9..55c3fa33 100644 --- a/src/control/gantt/gantt.scss +++ b/src/control/gantt/gantt.scss @@ -49,6 +49,46 @@ height: 100%; } } + + // 适配滑块粘性布局 + .xg-row.xg-gantt-row { + overflow: visible; + + .xg-slider{ + &.xg-slider-drag.xg-slider-level0 { + overflow: visible; + } + + .xg-slider-block { + overflow: visible; + } + + // 任务滑块宽度为0时不显示 + &.is-no-width { + display: none; + } + } + } + .#{bem('control-gantt__slider--caption')} { + position: sticky; + left: 8px; + } + + // 滑块超出结束时间的总范围时 + .is-exceeds-range { + .#{bem('control-gantt__slider')} { + &::after { + position: absolute; + right: 0; + z-index: 99; + display: block; + width: 16px; + height: 100%; + content: ''; + background-color: var(--ibiz-color-primary); + } + } + } } @include m(empty) { .xg-table-body { @@ -56,6 +96,8 @@ } } @include e(slider) { + display: flex; + align-items: center; height: 100%; padding: getCssVar(spacing,none) getCssVar(spacing,base-tight); cursor: pointer; @@ -93,6 +135,13 @@ align-items: center; } } + + @include m(caption) { + overflow: hidden; + color: getCssVar(color, 'primary', 'text'); + text-overflow: ellipsis; + white-space: nowrap; + } } @include e('setting') { display: flex; @@ -102,6 +151,15 @@ fill: getCssVar('color','primary'); } } + + @include e('slider-popover') { + z-index: 300; + width: auto; + min-width: 300px; + padding: 12px; + border: none; + box-shadow: getCssVar('shadow', 'elevated'); + } .#{bem('tree-grid-ex-field-column','','ellipsis')} { .#{bem('tree-grid-ex-field-column-text-container')} { min-width: 0; diff --git a/src/control/gantt/gantt.tsx b/src/control/gantt/gantt.tsx index 215c2ea5..d6abd032 100644 --- a/src/control/gantt/gantt.tsx +++ b/src/control/gantt/gantt.tsx @@ -5,6 +5,7 @@ import { useControlController, useNamespace, useUIStore, + IBizControlShell, } from '@ibiz-template/vue3-util'; import { computed, @@ -37,6 +38,7 @@ import { IModal, IModalData, IColumnState, + IOverlayPopoverContainer, } from '@ibiz-template/runtime'; import { showTitle } from '@ibiz-template/core'; import { MenuItem } from '@imengyu/vue3-context-menu'; @@ -70,6 +72,9 @@ export const GanttControl = defineComponent({ const isInited: Ref = ref(false); const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); + // 滑块模态 + let overlay: null | IOverlayPopoverContainer = null; + // 滑块移动 const sliderMove = ref(false); @@ -559,14 +564,12 @@ export const GanttControl = defineComponent({ * @return {*} */ const renderNodePanel = (modelData: IPanel, item: IData) => { - return ( - - ); + return h(IBizControlShell, { + data: item, + modelData, + context: c.context, + params: c.params, + }); }; /** @@ -591,6 +594,47 @@ export const GanttControl = defineComponent({ ); }; + /** + * 打开 popover + * + * @param {IGanttNodeData} item + * @param {MouseEvent} evt + * @return {*} + */ + const openPopover = (row: IGanttNodeData, evt: MouseEvent): void => { + if (overlay) { + return; + } + const panel = findNodeLayoutPanel(row._nodeId); + const component = panel + ? renderNodePanel(panel, row._deData!) + : renderNodeInfo(row); + overlay = ibiz.overlay.createPopover( + (modal: IModal): VNode => { + return h(component, { modal }); + }, + undefined, + { + width: 'auto', + height: 'auto', + noArrow: true, + placement: 'bottom', + modalClass: ns.e('slider-popover'), + }, + ); + overlay?.present((evt.target as IParams).children[0] as HTMLElement); + }; + + /** + * 关闭 popover + * + * @return {*} + */ + const closePopover = (): void => { + overlay?.dismiss(); + overlay = null; + }; + /** * 绘制滑块 * @@ -605,35 +649,33 @@ export const GanttControl = defineComponent({ resize-right={c.state.sliderDraggable} > {{ - content: ({ row }: { row: IGanttNodeData }): VNode => { + content: ({ + row, + left, + }: { + row: IGanttNodeData; + left: number; + }): JSX.Element => { const { sysCss } = c.getNodeModel(row._nodeId)!; const sysCssName = sysCss?.cssName || ''; - + const marginLeft = left < 0 ? `${-left}px` : ''; + const caption = row?._text; return ( - onNodeClick(row, evt)} + onDblclick={() => onNodeDbClick(row)} + onContextmenu={evt => onNodeContextmenu(row, evt)} + onMouseenter={evt => openPopover(row, evt)} + onMouseleave={closePopover} > - {{ - reference: () => { - return ( -
onNodeClick(row, evt)} - onDblclick={() => onNodeDbClick(row)} - onContextmenu={evt => onNodeContextmenu(row, evt)} - >
- ); - }, - default: () => { - const panel = findNodeLayoutPanel(row._nodeId); - return panel - ? renderNodePanel(panel, row._deData!) - : renderNodeInfo(row); - }, - }} - +
+ ); }, }} -- Gitee From b0263d98cdd5b1fa1a9e17f90ae39070f8cec909 Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Tue, 12 Nov 2024 10:48:06 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=E5=88=86=E9=A1=B5=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=A7=86=E5=9B=BE=E4=B8=AD=E5=BF=AB=E6=8D=B7=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=8F=90=E7=A4=BA=E6=A0=B9=E6=8D=AE=E5=BD=93=E5=89=8D?= =?UTF-8?q?=E6=BF=80=E6=B4=BB=E7=9A=84=E5=85=B3=E7=B3=BB=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/view-engine/tab-search-view.engine.ts | 64 +++++++++++++++++++++-- 2 files changed, 62 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 552c8af6..b01fadba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### Changed - 甘特部件适配滑块粘性布局样式及调整滑块飘窗打开方式 +- 分页搜索视图中快捷搜索提示根据当前激活的关系视图显示 ## [0.7.38-alpha.23] - 2024-11-08 diff --git a/src/view-engine/tab-search-view.engine.ts b/src/view-engine/tab-search-view.engine.ts index 9a3b2603..529c8e4c 100644 --- a/src/view-engine/tab-search-view.engine.ts +++ b/src/view-engine/tab-search-view.engine.ts @@ -7,7 +7,7 @@ import { SysUIActionTag, ViewController, } from '@ibiz-template/runtime'; -import { IAppDETabSearchView } from '@ibiz/model-core'; +import { IAppDETabSearchView, IDETabViewPanel } from '@ibiz/model-core'; import { TabExpViewEngine } from './tab-exp-view.engine'; /** @@ -112,10 +112,68 @@ export class TabSearchViewEngine extends TabExpViewEngine { } // 分页导航面板切换 if (this.tabExpPanel) { - this.tabExpPanel.evt.on('onTabChange', () => { - this.calcViewParams(); + this.tabExpPanel.evt.on( + 'onTabChange', + ({ tab }: { tab: IDETabViewPanel }) => { + this.calcViewParams(); + this.onQuickSearchPlaceHolder(tab); + }, + ); + + // 适配onTabChange第一次抛值时onMouted没有执行完毕 + const { activeTabViewPanelModel } = this.tabExpPanel as IParams; + if (activeTabViewPanelModel) { + this.onQuickSearchPlaceHolder(activeTabViewPanelModel); + } + } + } + + /** + * 给快捷搜索赋默认提示值 + * @author ljx + * @date 2024-11-12 10:56:25 + * @readonly + */ + async onQuickSearchPlaceHolder(tab: IDETabViewPanel): Promise { + let { caption } = tab; + const viewConfig = await ibiz.hub.config.view.get( + tab.embeddedAppDEViewId || '', + ); + const appDataEntity = await ibiz.hub.getAppDataEntity( + viewConfig.appDataEntityId!, + viewConfig.appId, + ); + + if (appDataEntity) { + const searchFields = appDataEntity.appDEFields!.filter(field => { + return field.enableQuickSearch; }); + if (searchFields.length) { + const placeHolders: string[] = []; + searchFields.forEach(searchField => { + if ( + searchField.lnlanguageRes && + searchField.lnlanguageRes.lanResTag + ) { + placeHolders.push( + ibiz.i18n.t( + searchField.lnlanguageRes.lanResTag, + searchField.logicName, + ), + ); + } else if (searchField.logicName) { + placeHolders.push(searchField.logicName); + } + }); + if (placeHolders.length > 0) { + caption = placeHolders.join('、'); + } + } } + + // 直接赋值 caption + (this.searchBar as IParams).placeHolder = caption || ''; + this.searchBar.state.quickSearchPlaceHolder = caption || ''; } // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types -- Gitee