From fa2a0f8fdc04475619693b4aaf93df231aae4338 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Mon, 8 Sep 2025 09:53:39 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=9B=BE=E8=A1=A8=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=86=85=E7=BD=AE=E5=AF=BC=E8=88=AA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../provider/chart-navigation.provider.ts | 163 ++++++++++++++++++ .../control-navigation/provider/index.ts | 2 + src/control/chart/chart.tsx | 110 ++++++------ 4 files changed, 222 insertions(+), 54 deletions(-) create mode 100644 src/common/control-navigation/provider/chart-navigation.provider.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 80be60d53..84553ba7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Added +- 图表新增内置导航功能 - 新增部件参数batchtoolbarmode、全局参数batchToolbarMode，用于设置批操作工具栏显示模式（default 选数据即显示，multiple 需选 2 条以上），仅限卡片、列表、表格、树表格使用 - 新增列表部件样式-扩展视图3：仅非分组列表和分组样式2列表支持，实现列表的从下往上的绘制，同时滚动加载也支持上滚加载 diff --git a/src/common/control-navigation/provider/chart-navigation.provider.ts b/src/common/control-navigation/provider/chart-navigation.provider.ts new file mode 100644 index 000000000..839ea7e77 --- /dev/null +++ b/src/common/control-navigation/provider/chart-navigation.provider.ts @@ -0,0 +1,163 @@ +import { + ChartController, + convertNavData, + EventBase, + INavViewMsg, + MDControlController, +} from '@ibiz-template/runtime'; +import { INavigatable } from '@ibiz/model-core'; +import { NavgationBaseProvider } from './navigation-base.provider'; + +export class ChartNavigationProvider extends NavgationBaseProvider { + /** + * 图表导航栈数据 + * + * @type {IData[]} + * @memberof ChartNavigationProvider + */ + chartNavStack: IData[] = []; + + declare controller: ChartController; + + constructor(controller: MDControlController) { + super(controller); + if (controller.state.enableNavView) { + controller.evt.on('onActive', event => { + this.xDataActive(event); + }); + } + } + + /** + * 获取默认激活数据 + * + * @return {*} {(IData | undefined)} + * @memberof ChartNavigationProvider + */ + getDefaultActiveData(): IData | undefined { + const activeSeriesGenerator = + this.controller.generator.seriesGenerators.find(generator => { + return ( + generator.chartDataArr.length > 0 && generator.model.navAppViewId + ); + }); + if (activeSeriesGenerator && activeSeriesGenerator.groupData) { + const firstGroupName = Object.keys(activeSeriesGenerator.groupData)[0]; + const { chartData } = activeSeriesGenerator.groupData[firstGroupName] + .values() + .next().value as IData; + return chartData; + } + } + + /** + * 图表数据激活 + * + * @param {EventBase} event + * @memberof ChartNavigationProvider + */ + xDataActive(event: EventBase): void { + const { data } = event; + this.navViewMsg.value = this.getNavViewMsg(data[0]); + // 缓存用户导航数据，放置在最前 + this.chartNavStack.unshift(data[0]); + } + + /** + * 通过栈数据导航 + * + * @return {*} {void} + * @memberof ChartNavigationProvider + */ + onNavDataByStack(): void { + const data = this.getDefaultActiveData(); + if (!data) return this.clearNavigation(); + this.controller.setActive(data); + this.controller.setSelection([data]); + } + + /** + * 解析参数 + * + * @param {(INavigatable & { appDataEntityId?: string })} XDataModel + * @param {IData} data + * @param {IContext} context + * @param {IParams} params + * @return {*} {{ context: IContext; params: IParams }} + * @memberof ChartNavigationProvider + */ + prepareParams( + XDataModel: INavigatable & { appDataEntityId?: string }, + data: IData, + context: IContext, + params: IParams, + ): { context: IContext; params: IParams } { + const { context: tempContext, params: tempParams } = super.prepareParams( + XDataModel, + data, + context, + params, + ); + // 序列上或配置导航相关参数 + if (data._seriesModelId) { + const seriesModel = this.controller.model.dechartSerieses?.find( + series => { + return series.id === data._seriesModelId; + }, + ); + if (seriesModel) { + const { navigateContexts, navigateParams } = seriesModel; + // 序列上配的导航视图参数和上下文 + const tempContext2 = convertNavData( + navigateContexts, + data, + params, + tempContext, + ); + const tempParams2 = convertNavData( + navigateParams, + data, + params, + tempParams, + ); + if (data.navParams) Object.assign(tempParams2, data.navParams); + return { + context: Object.assign(tempContext.clone(), tempContext2), + params: tempParams2, + }; + } + } + return { context: tempContext, params: tempParams }; + } + + /** + * 获取导航视图信息 + * + * @param {IData} data + * @return {*} {INavViewMsg} + * @memberof ChartNavigationProvider + */ + public getNavViewMsg(data: IData): INavViewMsg { + let viewModelId; + if (data._seriesModelId) { + const seriesModel = this.controller.model.dechartSerieses?.find( + series => { + return series.id === data._seriesModelId; + }, + ); + viewModelId = seriesModel?.navAppViewId; + } + const result = this.prepareParams( + this.controller.model!, + data, + this.controller.context, + this.controller.params, + ); + return { + key: data._uuid, + context: result.context, + params: result.params, + viewId: viewModelId, + }; + } +} diff --git a/src/common/control-navigation/provider/index.ts b/src/common/control-navigation/provider/index.ts index b4e530334..448822e88 100644 --- a/src/common/control-navigation/provider/index.ts +++ b/src/common/control-navigation/provider/index.ts @@ -3,6 +3,7 @@ import { NavgationBaseProvider } from './navigation-base.provider'; import { CalendarNavigationProvider } from './calendar-navigation.provider'; import { TreeNavigationProvider } from './tree-navigation.provider'; import { MapNavigationProvider } from './map-navigation.provider'; +import { ChartNavigationProvider } from './chart-navigation.provider'; /** * 获取部件导航适配器 @@ -20,5 +21,6 @@ export function getNavigationProvider( if (controlType === 'TREEVIEW' || controlType === 'TREEGRIDEX') return new TreeNavigationProvider(controller); if (controlType === 'MAP') return new MapNavigationProvider(controller); + if (controlType === 'CHART') return new ChartNavigationProvider(controller); return new NavgationBaseProvider(controller); } diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx index d85dfe9c3..87f7211ad 100644 --- a/src/control/chart/chart.tsx +++ b/src/control/chart/chart.tsx @@ -300,70 +300,72 @@ const ChartControl = defineComponent({ }, render() { return ( - -
- {this.renderNoData()} -
+ + +
+ {this.renderNoData()}
-
- {ibiz.i18n.t('control.chart.chartPlaceholder')} -
- {this.showCheck ? ( -
-
- - +
+ {ibiz.i18n.t('control.chart.chartPlaceholder')} +
+ {this.showCheck ? ( +
+
+ - - - -
- {ibiz.i18n.t('control.chart.drillDetail')} + + + + +
+ {ibiz.i18n.t('control.chart.drillDetail')} +
-
+ ) : null} +
+ {this.c.state.showGrid ? ( +
{this.renderGrid()}
) : null}
- {this.c.state.showGrid ? ( -
{this.renderGrid()}
- ) : null}
-
- + + ); }, }); -- Gitee From 4a612955b8dbaf5d0a0f8cc4f8e7d530d6132474 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Mon, 8 Sep 2025 15:20:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9D=BF=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?2=EF=BC=8C=E6=97=A0=E6=B3=95=E7=9B=B4=E6=8E=A5=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E5=85=A8=E9=83=A8=E5=88=86=E9=A1=B5=E9=A1=B9=E6=97=B6?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E4=BE=9B=E3=80=90=E5=85=A8=E9=83=A8=E3=80=91?= =?UTF-8?q?=E9=A1=B9=E7=94=A8=E4=BA=8E=E5=BC=B9=E5=87=BA=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=85=A8=E9=83=A8=E5=88=86=E9=A1=B5=E9=A1=B9=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=E9=80=89=E6=8B=A9=EF=BC=8C=E5=90=8C=E6=97=B6=E5=B7=A6=E5=8F=B3?= =?UTF-8?q?=E4=B8=A4=E4=BE=A7=E7=9A=84=E6=BB=9A=E5=8A=A8=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E5=9C=A8=E6=97=A0=E6=B3=95=E6=BB=9A=E5=8A=A8=E6=97=B6=EF=BC=8C?= =?UTF-8?q?=E9=9A=90=E8=97=8F=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../form-tab-panel/form-tab-panel.scss | 73 ++++++++++++++- .../form-tab-panel/form-tab-panel.tsx | 88 +++++++++++++++++-- src/control/list/list.tsx | 3 +- src/locale/en/index.ts | 3 + src/locale/zh-CN/index.ts | 3 + 6 files changed, 160 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84553ba7c..22809a911 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Added +- 表单分页面板新增样式2，无法直接展示全部分页项时，提供【全部】项用于弹出显示全部分页项进行选择，同时左右两侧的滚动按钮在无法滚动时，隐藏按钮 - 图表新增内置导航功能 - 新增部件参数batchtoolbarmode、全局参数batchToolbarMode，用于设置批操作工具栏显示模式（default 选数据即显示，multiple 需选 2 条以上），仅限卡片、列表、表格、树表格使用 - 新增列表部件样式-扩展视图3：仅非分组列表和分组样式2列表支持，实现列表的从下往上的绘制，同时滚动加载也支持上滚加载 diff --git a/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss b/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss index 32b556b1c..010afc39f 100644 --- a/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss +++ b/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss @@ -8,6 +8,7 @@ $form-tab-panel: ( 'active-text-color': getCssVar(color, primary), 'active-bg-color': transparent, 'active-border-color': getCssVar(color, primary), + 'select-all-height': 40px, ); @include b(form-tab-panel) { @@ -68,6 +69,76 @@ $form-tab-panel: ( } } } - + @include m('style2'){ + .el-tabs__nav-prev.is-disabled, + .el-tabs__nav-next.is-disabled{ + display: none; + } + + .el-tabs__nav-wrap.is-top{ + &:has(.el-tabs__nav-prev.is-disabled){ + padding-left: 0; + } + + &:has(.el-tabs__nav-next.is-disabled){ + padding-right: 0; + } + } + } +} + +@include b('form-tab-panel-tab-panel-container-style2') { + position: relative; + display: flex; + width: 100%; + @include set-component-css-var('form-tab-panel', $form-tab-panel); + + .#{bem(form-tab-panel)} { + width: 100%; + + .el-tabs__header { + width: calc(100% - 72px); + } + } + @include e('popover') { + @include set-component-css-var('form-tab-panel', $form-tab-panel); + + &.el-popover { + padding: 0; + } + } + @include e('select') { + position: absolute; + top: 0; + right: 0; + display: flex; + gap: getCssVar(spacing, extra-tight); + align-items: center; + justify-content: center; + width: 72px; + height: getCssVar('form-tab-panel', 'select-all-height'); + font-size: getCssVar('form-tab-panel', 'font-size'); + color: getCssVar('form-tab-panel', 'text-color'); + cursor: pointer; + border-bottom: 1px solid getCssVar('form-tab-panel', 'header-border-color'); + } + @include e('content') { + padding: getCssVar(spacing, base) 0; + } + @include e('tab-item-content') { + width: 100%; + padding: getCssVar(spacing, extra-tight) getCssVar(spacing, extra-tight) getCssVar(spacing, extra-tight) getCssVar(spacing, base); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + &:hover{ + color: getCssVar('form-tab-panel', 'hover-text-color'); + background-color: getCssVar('form-tab-panel', 'hover-bg-color'); + } + @include when('active'){ + color: getCssVar('form-tab-panel', 'active-text-color'); + } + } } diff --git a/src/control/form/form-detail/form-tab-panel/form-tab-panel.tsx b/src/control/form/form-detail/form-tab-panel/form-tab-panel.tsx index c27ec1dfa..8fa60330c 100644 --- a/src/control/form/form-detail/form-tab-panel/form-tab-panel.tsx +++ b/src/control/form/form-detail/form-tab-panel/form-tab-panel.tsx @@ -1,4 +1,5 @@ -import { defineComponent, PropType, VNode } from 'vue'; +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { defineComponent, PropType, ref, VNode } from 'vue'; import { useController, useNamespace } from '@ibiz-template/vue3-util'; import './form-tab-panel.scss'; import { IDEFormTabPanel } from '@ibiz/model-core'; @@ -22,22 +23,55 @@ export const FormTabPanel = defineComponent({ setup(props) { const ns = useNamespace('form-tab-panel'); useController(props.controller); + const popoverVisible = ref(false); - const onTabClick = (tabIns: IData, event: MouseEvent) => { - props.controller.onTabChange(tabIns.props.name); - + const triggerClick = (key: string, event: MouseEvent) => { // 触发对应FormTabPage的点击事件 - const pageC = props.controller.form.details[ - tabIns.props.name - ] as FormTabPageController; + const pageC = props.controller.form.details[key] as FormTabPageController; if (pageC) { pageC.onClick(event); } }; + const onTabClick = (tabIns: IData, event: MouseEvent) => { + props.controller.onTabChange(tabIns.props.name); + triggerClick(tabIns.props.name, event); + }; + + const onPopoverClick = (key: string, event: MouseEvent) => { + props.controller.selectTab(key); + popoverVisible.value = false; + triggerClick(key, event); + }; + + const renderAllTabContent = () => { + return ( +
+ {props.modelData.deformTabPages?.map(page => { + return ( +
+ onPopoverClick(page.codeName!, event) + } + title={page.caption} + > + {page.caption} +
+ ); + })} +
+ ); + }; + return { ns, + popoverVisible, onTabClick, + renderAllTabContent, }; }, render() { @@ -50,7 +84,7 @@ export const FormTabPanel = defineComponent({ ); }; - return ( + const tabContent = ( ); + if (this.modelData.detailStyle === 'STYLE2') { + return ( +
+ {tabContent} + + {{ + reference: () => { + return ( +
+
+ {ibiz.i18n.t('control.form.formTabPnel.all')} +
+ +
+ ); + }, + default: () => { + return this.renderAllTabContent(); + }, + }} + +
+ ); + } + return tabContent; }, }); export default FormTabPanel; diff --git a/src/control/list/list.tsx b/src/control/list/list.tsx index 9ac706f22..fe78f198e 100644 --- a/src/control/list/list.tsx +++ b/src/control/list/list.tsx @@ -9,7 +9,7 @@ import { } from '@ibiz-template/vue3-util'; import { ref, VNode, watch, PropType, computed, defineComponent } from 'vue'; import { IDEList, ILayoutPanel, IUIActionGroupDetail } from '@ibiz/model-core'; -import { isNil } from 'lodash-es'; +import { isNil, debounce } from 'lodash-es'; import { ControlVO, ListController, @@ -19,7 +19,6 @@ import { } from '@ibiz-template/runtime'; import draggable from 'vuedraggable'; import { showTitle } from '@ibiz-template/core'; -import { debounce } from 'lodash-es'; import { usePagination } from '../../util'; import './list.scss'; diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index 9027535b4..60e3ef06e 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -465,6 +465,9 @@ export default { errorText: 'Error tips', defaultText: 'Direct content', }, + formTabPnel: { + all: 'All', + }, }, gantt: { complete: 'Completed amount', diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index 325721d47..51772b6f1 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -425,6 +425,9 @@ export default { errorText: '错误提示(ERROR)', defaultText: '直接内容', }, + formTabPnel: { + all: '全部', + }, }, gantt: { complete: '完成量', -- Gitee