From ecca8b507f4264db6601f24fce6feba0109befd6 Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 24 Oct 2024 18:52:24 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E8=A7=86=E5=9B=BE=E5=92=8C=E9=A2=84=E8=A7=88=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E9=A1=B9=E5=9F=BA=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-base/src/index.ts | 4 + .../src/interface/i-preview-view.event.ts | 10 ++ .../src/interface/i-preview-view.state.ts | 18 ++++ packages/design-base/src/interface/index.ts | 2 + .../src/panel-items/preview-content/index.ts | 2 + .../preview-content.controller.ts | 101 ++++++++++++++++++ .../preview-content/preview-content.state.ts | 18 ++++ .../design-view-base.controller.ts | 4 +- .../design-view-base.engine.ts | 2 +- .../src/views/design-view-base/index.ts | 2 + packages/design-base/src/views/index.ts | 4 +- .../src/views/preview-view-base/index.ts | 2 + .../preview-view-base.controller.ts | 30 ++++++ .../preview-view-base.engine.ts | 85 +++++++++++++++ 14 files changed, 279 insertions(+), 5 deletions(-) create mode 100644 packages/design-base/src/interface/i-preview-view.event.ts create mode 100644 packages/design-base/src/interface/i-preview-view.state.ts create mode 100644 packages/design-base/src/panel-items/preview-content/index.ts create mode 100644 packages/design-base/src/panel-items/preview-content/preview-content.controller.ts create mode 100644 packages/design-base/src/panel-items/preview-content/preview-content.state.ts rename packages/design-base/src/views/{ => design-view-base}/design-view-base.controller.ts (96%) rename packages/design-base/src/views/{ => design-view-base}/design-view-base.engine.ts (99%) create mode 100644 packages/design-base/src/views/design-view-base/index.ts create mode 100644 packages/design-base/src/views/preview-view-base/index.ts create mode 100644 packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts create mode 100644 packages/design-base/src/views/preview-view-base/preview-view-base.engine.ts diff --git a/packages/design-base/src/index.ts b/packages/design-base/src/index.ts index c8f6c68a..e676da91 100644 --- a/packages/design-base/src/index.ts +++ b/packages/design-base/src/index.ts @@ -26,3 +26,7 @@ export { DesignOperationState, DesignOperationController, } from './panel-items/design_operation'; +export { + PreviewContentState, + PreviewContentController, +} from './panel-items/preview-content'; diff --git a/packages/design-base/src/interface/i-preview-view.event.ts b/packages/design-base/src/interface/i-preview-view.event.ts new file mode 100644 index 00000000..b477622b --- /dev/null +++ b/packages/design-base/src/interface/i-preview-view.event.ts @@ -0,0 +1,10 @@ +import { IViewEvent } from '@ibiz-template/runtime'; + +/** + * 预览视图事件 + * + * @export + * @interface IPreviewViewEvent + * @extends {IViewEvent} + */ +export interface IPreviewViewEvent extends IViewEvent {} diff --git a/packages/design-base/src/interface/i-preview-view.state.ts b/packages/design-base/src/interface/i-preview-view.state.ts new file mode 100644 index 00000000..b4ab2028 --- /dev/null +++ b/packages/design-base/src/interface/i-preview-view.state.ts @@ -0,0 +1,18 @@ +import { IViewState } from '@ibiz-template/runtime'; + +/** + * 预览视图UI状态对象 + * + * @export + * @interface IPreviewViewState + * @extends {IViewState} + */ +export interface IPreviewViewState extends IViewState { + /** + * 主数据 + * + * @type {IData} + * @memberof IPreviewViewState + */ + data: IData; +} diff --git a/packages/design-base/src/interface/index.ts b/packages/design-base/src/interface/index.ts index be9c798e..97dff00a 100644 --- a/packages/design-base/src/interface/index.ts +++ b/packages/design-base/src/interface/index.ts @@ -4,3 +4,5 @@ export type { IDesignViewEvent } from './i-design-view.event'; export type { IActionItem } from './i-action-item'; export type { ITreeNode } from './i-tree-node'; export type { INewItem } from './i-new-item'; +export type { IPreviewViewEvent } from './i-preview-view.event'; +export type { IPreviewViewState } from './i-preview-view.state'; diff --git a/packages/design-base/src/panel-items/preview-content/index.ts b/packages/design-base/src/panel-items/preview-content/index.ts new file mode 100644 index 00000000..f7b99c3f --- /dev/null +++ b/packages/design-base/src/panel-items/preview-content/index.ts @@ -0,0 +1,2 @@ +export { PreviewContentController } from './preview-content.controller'; +export { PreviewContentState } from './preview-content.state'; diff --git a/packages/design-base/src/panel-items/preview-content/preview-content.controller.ts b/packages/design-base/src/panel-items/preview-content/preview-content.controller.ts new file mode 100644 index 00000000..3319fa7b --- /dev/null +++ b/packages/design-base/src/panel-items/preview-content/preview-content.controller.ts @@ -0,0 +1,101 @@ +/* eslint-disable no-empty-function */ +import { IAppView, IPanelContainer } from '@ibiz/model-core'; +import { PanelItemController } from '@ibiz-template/runtime'; +import { PreviewContentState } from './preview-content.state'; +import { PreviewViewControllerBase } from '../../views'; +import { IPreviewViewEvent, IPreviewViewState } from '../../interface'; + +/** + * 预览内容区控制器 + * + * @export + * @class PreviewContentController + * @extends {PanelItemController} + */ +export class PreviewContentController extends PanelItemController { + /** + * 预览内容区状态 + * + * @type {PreviewContentState} + * @memberof PreviewContentController + */ + declare state: PreviewContentState; + + /** + * 预览视图控制器 + * + * @readonly + * @type {PreviewViewControllerBase< + * IAppView, + * IPreviewViewState, + * IPreviewViewEvent + * >} + * @memberof PreviewContentController + */ + get view(): PreviewViewControllerBase< + IAppView, + IPreviewViewState, + IPreviewViewEvent + > { + return this.panel.view as PreviewViewControllerBase< + IAppView, + IPreviewViewState, + IPreviewViewEvent + >; + } + + /** + * 主数据 + * + * @readonly + * @type {IData} + * @memberof PreviewContentController + */ + get majorData(): IData { + return this.view.state.data; + } + + /** + * 创建面板状态对象 + * + * @protected + * @return {*} {PreviewContentState} + * @memberof PreviewContentController + */ + protected createState(): PreviewContentState { + return new PreviewContentState(this.parent?.state); + } + + /** + * 初始化 + * + * @protected + * @return {*} {Promise} + * @memberof PreviewContentController + */ + protected async onInit(): Promise { + await super.onInit(); + // 加载数据 + await this.load(); + // 初始化子项数据 + await this.initItems(); + } + + /** + * 加载数据 + * + * @protected + * @return {*} {Promise} + * @memberof PreviewContentController + */ + protected async load(): Promise {} + + /** + * 初始化子项数据 + * + * @protected + * @return {*} {Promise} + * @memberof PreviewContentController + */ + protected async initItems(): Promise {} +} diff --git a/packages/design-base/src/panel-items/preview-content/preview-content.state.ts b/packages/design-base/src/panel-items/preview-content/preview-content.state.ts new file mode 100644 index 00000000..bc23f94b --- /dev/null +++ b/packages/design-base/src/panel-items/preview-content/preview-content.state.ts @@ -0,0 +1,18 @@ +import { PanelItemState } from '@ibiz-template/runtime'; + +/** + * 预览内容区控制器 + * + * @export + * @class PreviewContentState + * @extends {PanelItemState} + */ +export class PreviewContentState extends PanelItemState { + /** + * 预览子项数据集合 + * + * @type {IData[]} + * @memberof PreviewContentState + */ + items: IData[] = []; +} diff --git a/packages/design-base/src/views/design-view-base.controller.ts b/packages/design-base/src/views/design-view-base/design-view-base.controller.ts similarity index 96% rename from packages/design-base/src/views/design-view-base.controller.ts rename to packages/design-base/src/views/design-view-base/design-view-base.controller.ts index a60f747b..c673bbe2 100644 --- a/packages/design-base/src/views/design-view-base.controller.ts +++ b/packages/design-base/src/views/design-view-base/design-view-base.controller.ts @@ -1,11 +1,11 @@ import { getPFPlugin, ViewController } from '@ibiz-template/runtime'; import { IAppView } from '@ibiz/model-core'; -import { SelectState } from '../utils'; +import { SelectState } from '../../utils'; import { IDesignPreviewProvider, IDesignViewEvent, IDesignViewState, -} from '../interface'; +} from '../../interface'; export class DesignViewControllerBase< M extends IAppView, diff --git a/packages/design-base/src/views/design-view-base.engine.ts b/packages/design-base/src/views/design-view-base/design-view-base.engine.ts similarity index 99% rename from packages/design-base/src/views/design-view-base.engine.ts rename to packages/design-base/src/views/design-view-base/design-view-base.engine.ts index f8515244..697c2249 100644 --- a/packages/design-base/src/views/design-view-base.engine.ts +++ b/packages/design-base/src/views/design-view-base/design-view-base.engine.ts @@ -13,7 +13,7 @@ import { IAppView, IDEEditForm } from '@ibiz/model-core'; import { NavPosController } from '@ibiz-template/vue3-util'; import { RuntimeModelError } from '@ibiz-template/core'; import { DesignViewControllerBase } from './design-view-base.controller'; -import { IDesignViewEvent, IDesignViewState } from '../interface'; +import { IDesignViewEvent, IDesignViewState } from '../../interface'; export class DesignViewEngineBase extends ViewEngineBase { /** diff --git a/packages/design-base/src/views/design-view-base/index.ts b/packages/design-base/src/views/design-view-base/index.ts new file mode 100644 index 00000000..6fdc20c4 --- /dev/null +++ b/packages/design-base/src/views/design-view-base/index.ts @@ -0,0 +1,2 @@ +export { DesignViewControllerBase } from './design-view-base.controller'; +export { DesignViewEngineBase } from './design-view-base.engine'; diff --git a/packages/design-base/src/views/index.ts b/packages/design-base/src/views/index.ts index 6fdc20c4..d84cdd21 100644 --- a/packages/design-base/src/views/index.ts +++ b/packages/design-base/src/views/index.ts @@ -1,2 +1,2 @@ -export { DesignViewControllerBase } from './design-view-base.controller'; -export { DesignViewEngineBase } from './design-view-base.engine'; +export * from './design-view-base'; +export * from './preview-view-base'; diff --git a/packages/design-base/src/views/preview-view-base/index.ts b/packages/design-base/src/views/preview-view-base/index.ts new file mode 100644 index 00000000..da38d953 --- /dev/null +++ b/packages/design-base/src/views/preview-view-base/index.ts @@ -0,0 +1,2 @@ +export { PreviewViewControllerBase } from './preview-view-base.controller'; +export { PreviewViewEngineBase } from './preview-view-base.engine'; diff --git a/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts b/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts new file mode 100644 index 00000000..ac3565bc --- /dev/null +++ b/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts @@ -0,0 +1,30 @@ +import { IAppView } from '@ibiz/model-core'; +import { ViewController } from '@ibiz-template/runtime'; +import { IPreviewViewEvent, IPreviewViewState } from '../../interface'; +import { PreviewViewEngineBase } from './preview-view-base.engine'; + +/** + * 预览视图控制器基类 + * + * @export + * @class PreviewViewControllerBase + * @extends {ViewController} + * @template M + * @template S + * @template E + */ +export class PreviewViewControllerBase< + M extends IAppView, + S extends IPreviewViewState, + E extends IPreviewViewEvent, +> extends ViewController { + /** + * 初始化预览视图引擎 + * + * @protected + * @memberof PreviewViewControllerBase + */ + protected initEngines(): void { + this.engines.push(new PreviewViewEngineBase(this)); + } +} diff --git a/packages/design-base/src/views/preview-view-base/preview-view-base.engine.ts b/packages/design-base/src/views/preview-view-base/preview-view-base.engine.ts new file mode 100644 index 00000000..093dbacd --- /dev/null +++ b/packages/design-base/src/views/preview-view-base/preview-view-base.engine.ts @@ -0,0 +1,85 @@ +import { IAppView } from '@ibiz/model-core'; +import { IAppDEService, ViewEngineBase } from '@ibiz-template/runtime'; +import { PreviewViewControllerBase } from './preview-view-base.controller'; +import { IPreviewViewEvent, IPreviewViewState } from '../../interface'; + +/** + * 预览视图引擎基类 + * + * @export + * @class PreviewViewEngineBase + * @extends {ViewEngineBase} + */ +export class PreviewViewEngineBase extends ViewEngineBase { + /** + * 视图控制器 + * + * @protected + * @type {PreviewViewControllerBase< + * IAppView, + * IPreviewViewState, + * IPreviewViewEvent + * >} + * @memberof PreviewViewEngineBase + */ + protected declare view: PreviewViewControllerBase< + IAppView, + IPreviewViewState, + IPreviewViewEvent + >; + + /** + * 主实体服务 + * + * @protected + * @type {IAppDEService} + * @memberof PreviewViewEngineBase + */ + protected service!: IAppDEService; + + /** + * 视图created生命周期执行逻辑 + * + * @return {*} {Promise} + * @memberof PreviewViewEngineBase + */ + async onCreated(): Promise { + await super.onCreated(); + await this.initDeService(); + await this.load(); + } + + /** + * 初始化实体服务 + * + * @return {*} {Promise} + * @memberof PreviewViewEngineBase + */ + async initDeService(): Promise { + const { appId, appDataEntityId } = this.view.model; + const app = ibiz.hub.getApp(appId); + this.service = await app.deService.getService( + this.view.context, + appDataEntityId!, + ); + } + + /** + * 加载主数据 + * + * @protected + * @return {*} {Promise} + * @memberof PreviewViewEngineBase + */ + protected async load(): Promise { + try { + this.view.startLoading(); + const res = await this.service.get(this.view.context, this.view.params); + if (res.ok && res.data) { + this.view.state.data = res.data; + } + } finally { + this.view.endLoading(); + } + } +} -- Gitee From 039a72d8260c16417bbd25b835eaaad412e5adfc Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 24 Oct 2024 18:53:05 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=20=E6=96=B0=E5=A2=9E=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/form-shell/form-shell.scss | 44 +++ .../src/components/form-shell/form-shell.tsx | 279 ++++++++++++++++++ packages/dnd-design/src/components/index.ts | 2 + packages/dnd-design/src/index.ts | 7 +- .../form-preview-content.controller.ts | 167 +++++++++++ .../form-preview-content.provider.ts | 28 ++ .../form-preview-content.scss | 5 + .../form-preview-content.state.ts | 10 + .../form-preview-content.tsx | 35 +++ .../panel-items/form-preview-content/index.ts | 15 + packages/dnd-design/src/panel-items/index.ts | 2 + .../src/views/dnd-design-view/index.ts | 2 + .../form-preview-view.controller.ts | 30 ++ .../form-preview-view.engine.ts | 10 + .../form-preview-view.provider.ts | 24 ++ .../src/views/form-preview-view/index.ts | 2 + packages/dnd-design/src/views/index.ts | 4 +- 17 files changed, 663 insertions(+), 3 deletions(-) create mode 100644 packages/dnd-design/src/components/form-shell/form-shell.scss create mode 100644 packages/dnd-design/src/components/form-shell/form-shell.tsx create mode 100644 packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts create mode 100644 packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.provider.ts create mode 100644 packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.scss create mode 100644 packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.state.ts create mode 100644 packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.tsx create mode 100644 packages/dnd-design/src/panel-items/form-preview-content/index.ts create mode 100644 packages/dnd-design/src/views/dnd-design-view/index.ts create mode 100644 packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts create mode 100644 packages/dnd-design/src/views/form-preview-view/form-preview-view.engine.ts create mode 100644 packages/dnd-design/src/views/form-preview-view/form-preview-view.provider.ts create mode 100644 packages/dnd-design/src/views/form-preview-view/index.ts diff --git a/packages/dnd-design/src/components/form-shell/form-shell.scss b/packages/dnd-design/src/components/form-shell/form-shell.scss new file mode 100644 index 00000000..e5be9f82 --- /dev/null +++ b/packages/dnd-design/src/components/form-shell/form-shell.scss @@ -0,0 +1,44 @@ +@include b(form-shell) { + width: 100%; + height: 100%; + + @include b(light-theme-shell) { + #{getCssVarName(color, primary, active, text)}: getCssVar(color, primary) !important; + + .#{bem(form-item-container)} { + #{getCssVarName(form-item-container, label-color)}: getCssVar(color, text, 1) !important; + } + + .#{bem(form-group)} { + #{getCssVarName(form-group-caption, text-color)}: getCssVar(color, text, 0) !important; + } + + .#{bem(form-item)} { + #{getCssVarName(editor, default-text-color)}: getCssVar(color, text, 2) !important; + #{getCssVarName(form-item, text-color)}: getCssVar(color, text, 2) !important; + } + + @include b(form-page) { + #{getCssVarName(form-page, font-size)}: getCssVar(font-size, header-4); + #{getCssVarName(form-page, hover-bg-color)}: transparent; + #{getCssVarName(form-page, hover-text-color)}: getCssVar(color, primary); + #{getCssVarName(form-page, active-bg-color)}: transparent; + #{getCssVarName(form-page, active-text-color)}: getCssVar(color, primary); + } + + @include b(form-tab-panel) { + #{getCssVarName(form-tab-panel, font-size)}: getCssVar(font-size, header-4); + #{getCssVarName(form-tab-panel, hover-bg-color)}: transparent; + #{getCssVarName(form-tab-panel, hover-text-color)}: getCssVar(color, primary); + #{getCssVarName(form-tab-panel, active-bg-color)}: transparent; + #{getCssVarName(form-tab-panel, active-text-color)}: getCssVar(color, primary); + } + + // 表单分组按钮颜色，调整为蓝色 + .#{bem(form-group-header, right)} { + .el-button { + --el-button-text-color: getCssVar(color, text, 0); + } + } + } +} \ No newline at end of file diff --git a/packages/dnd-design/src/components/form-shell/form-shell.tsx b/packages/dnd-design/src/components/form-shell/form-shell.tsx new file mode 100644 index 00000000..43c8033d --- /dev/null +++ b/packages/dnd-design/src/components/form-shell/form-shell.tsx @@ -0,0 +1,279 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { PropType, defineComponent, ref, watch } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { + IDEEditForm, + IDEFormDetail, + IDEFormPage, + IDEFormItem, + IDEFormIFrame, + IDEFormRawItem, + ILayoutPos, + ILayout, + IDESearchForm, + IDEFormGroupBase, + IDEFormButtonList, + IDEFormMDCtrl, +} from '@ibiz/model-core'; +import './form-shell.scss'; + +export default defineComponent({ + name: 'IBizFormShell', + props: { + context: { type: Object as PropType, required: true }, + data: { + type: Object as PropType, + required: true, + }, + items: { + type: Object as PropType, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('form-shell'); + const shellNS = useNamespace('light-theme-shell'); + + /** + * 表单模型 + */ + const modelData = ref(); + + /** + * 转换树型数据 + * + * @param {IData[]} originalTree + * @param {(node: IData) => IData} transformFunc + * @param {{ + * originalChildrenName: string; + * currentChildrenName: string; + * }} opt + * @return {*} {IData[]} + */ + const transformTree = ( + original: IData[], + transformFunc: (node: IData, parentNode?: IData) => IDEFormDetail, + parentNode?: IData, + ): IDEFormDetail[] => { + return original.map(item => { + const children = item.psdeformdetails + ? transformTree(item.psdeformdetails, transformFunc, item) + : []; + const detail = transformFunc(item, parentNode); + if (children.length > 0) { + (detail as any)[ + detail.detailType === 'TABPANEL' + ? 'deformTabPages' + : 'deformDetails' + ] = children; + } + return detail; + }); + }; + + /** + * 解析表单成员 + * + * @param {IData[]} data + * @return {*} {IDEFormPage[]} + */ + const parseFormDetail = (data: IData[]): IDEFormPage[] => { + const transform = (item: IData, parent?: IData): IDEFormDetail => { + let detail = { + width: item.width, + height: item.height, + caption: item.caption, + detailType: item.detailtype, + id: item.psdeformdetailname, + name: item.psdeformdetailname, + appId: props.context.srfappid, + codeName: item.psdeformdetailname, + showCaption: item.showcaption !== 0, + sysImage: { + appId: props.context.srfappid, + cssClass: item.pssysimagename, + }, + detailStyle: item.detailstyle, + layout: { + appId: props.context.srfappid, + layout: item.playoutmode, + // flex布局 + dir: item.flexdir, + align: item.flexalign, + valign: item.flexvalign, + } as ILayout, + layoutPos: { + appId: props.context.srfappid, + layout: item.playoutmode, + // 栅格布局 + colXS: item.col_xs || parent?.child_col_xs, + colXSOffset: item.col_xs_os, + colSM: item.col_sm || parent?.child_col_sm, + colSMOffset: item.col_sm_os, + colMD: item.col_md || parent?.child_col_md, + colMDOffset: item.col_md_os, + colLG: item.col_lg || parent?.child_col_lg, + colLGOffset: item.col_lg_os, + // flex布局 + basis: item.flexbasis, + grow: item.flexgrow, + shrink: item.flexshrink, + } as ILayoutPos, + } as IDEFormDetail; + switch (detail.detailType) { + case 'FORMITEM': + detail = { + ...detail, + emptyCaption: item.emptycaption, + labelPos: item.labelpos || 'LEFT', + labelWidth: item.labelwidth, + allowEmpty: item.allowempty !== 0, + hidden: item.editortype === 'HIDDEN', + valueFormat: item.valueformat, + enableCond: item.enablecond, + enableItemPriv: item.enableitempriv, + resetItemNames: item.resetitemname + ? item.resetitemname.split(';') + : undefined, + editor: { + appId: props.context.srfappid, + editorType: item.editortype || 'SPAN', + placeHolder: item.placeholder, + editorItems: item.valueitemname + ? item.valueitemname.split(';') + : undefined, + editorHeight: item.ctrlheight, + editorWidth: item.ctrlwidth, + }, + } as IDEFormItem; + break; + case 'TABPAGE': + case 'TABPANEL': + case 'FORMPAGE': + case 'GROUPPANEL': + detail = { + ...detail, + enableAnchor: item.enableanchor, + captionItemName: item.valueitemname, + titleBarCloseMode: item.titlebarclosemode, + } as IDEFormGroupBase; + break; + case 'IFRAME': + detail = { + ...detail, + iframeUrl: item.editorparams, + } as IDEFormIFrame; + break; + case 'RAWITEM': + detail = { + ...detail, + rawItem: { + appId: props.context.srfappid, + contentType: item.contenttype, + caption: item.rawcontent || '', + content: item.htmlcontent || '', + sysImage: { + appId: props.context.srfappid, + cssClass: item.pssysimagename, + }, + }, + } as IDEFormRawItem; + break; + case 'BUTTONLIST': + detail = { + ...detail, + uiactionGroup: { + appId: props.context.srfappid, + uiactionGroupDetails: [], + }, + } as IDEFormButtonList; + break; + case 'MDCTRL': + detail = { + ...detail, + contentType: item.mdctrltype, + } as IDEFormMDCtrl; + break; + default: + break; + } + return detail; + }; + return transformTree(data, transform); + }; + + const init = async (): Promise => { + const data = props.data; + const model: IDEEditForm | IDESearchForm = { + controlType: data.formtype, + appId: props.context.srfappid, + codeName: data.codename, + autoSaveMode: 0, + navBarPos: data.navbarpos, + navBarStyle: data.navbarstyle, + navBarWidth: data.navbarwidth || 0, + navbarHeight: data.navbarheight, + navBarSysCss: { + appId: props.context.srfappid, + cssName: data.navbarpssyscssname, + }, + enableAutoSave: false, + enableCustomized: false, + infoFormMode: data.infoformflag, + showFormNavBar: data.formnavbar, + formFuncMode: data.funcmode, + formStyle: data.formstyle, + formWidth: data.formwidth, + noTabHeader: data.showtabheader === 0, + tabHeaderPos: data.tabheaderpos, + logicName: data.psdeformname, + deformPages: parseFormDetail(props.items), + } as IDEEditForm; + modelData.value = model; + console.log(12323, model); + }; + + watch( + () => props.items, + () => { + init(); + }, + { + immediate: true, + deep: true, + }, + ); + + return { + ns, + shellNS, + modelData, + }; + }, + render() { + if (this.modelData) { + return ( +
+ {this.modelData.controlType === 'FORM' ? ( + + ) : ( + + )} +
+ ); + } + return null; + }, +}); diff --git a/packages/dnd-design/src/components/index.ts b/packages/dnd-design/src/components/index.ts index 49b530eb..9439d924 100644 --- a/packages/dnd-design/src/components/index.ts +++ b/packages/dnd-design/src/components/index.ts @@ -1,10 +1,12 @@ import { App } from 'vue'; import DndDraggableItem from './dnd-draggable-item/dnd-draggable-item'; import DndDraggableTabs from './dnd-draggable-tabs/dnd-draggable-tabs'; +import IBizFormShell from './form-shell/form-shell'; export default { install(app: App) { app.component(DndDraggableItem.name, DndDraggableItem); app.component(DndDraggableTabs.name, DndDraggableTabs); + app.component(IBizFormShell.name, IBizFormShell); }, }; diff --git a/packages/dnd-design/src/index.ts b/packages/dnd-design/src/index.ts index 8c983381..60e9ff35 100644 --- a/packages/dnd-design/src/index.ts +++ b/packages/dnd-design/src/index.ts @@ -6,7 +6,7 @@ import { } from '@ibiz-template/runtime'; import { IAppDataEntity } from '@ibiz/model-core'; import DesignBase from '@ibiz-template-plugin/design-base'; -import { DndDesignViewProvider } from './views'; +import { DndDesignViewProvider, FormPreviewViewProvider } from './views'; import { EditorParamsProvider } from './editor-plugin/editor-params'; import Components from './components'; import editorPulgin from './editor-plugin'; @@ -54,6 +54,11 @@ export default { () => new DndDesignViewProvider(), ); + registerViewProvider( + 'VIEW_CUSTOM_FORM_PREVIEW_VIEW', + () => new FormPreviewViewProvider(), + ); + registerEditorProvider( 'EDITOR_CUSTOMSTYLE_EditorParamCustom', () => new EditorParamsProvider(), diff --git a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts new file mode 100644 index 00000000..18f0fb82 --- /dev/null +++ b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts @@ -0,0 +1,167 @@ +/* eslint-disable array-callback-return */ +import { getControl } from '@ibiz-template/runtime'; +import { isNilOrEmpty, notNilEmpty } from 'qx-util'; +import { recursiveIterate } from '@ibiz-template/core'; +import { PreviewContentController } from '@ibiz-template-plugin/design-base'; +import { FormPreviewContentState } from './form-preview-content.state'; + +/** + * 表单预览内容区控制器 + * + * @export + * @class FormPreviewContentController + * @extends {PreviewContentController} + */ +export class FormPreviewContentController extends PreviewContentController { + /** + * 预览内容区状态 + * + * @type {FormPreviewContentState} + * @memberof FormPreviewContentController + */ + declare state: FormPreviewContentState; + + /** + * 界面模式集合 + * + * @protected + * @type {IData[]} + * @memberof FormPreviewContentController + */ + protected uiModes: IData[] = []; + + /** + * 属性字段集合 + * + * @protected + * @type {IData[]} + * @memberof FormPreviewContentController + */ + protected fields: IData[] = []; + + /** + * 创建面板状态对象 + * + * @protected + * @return {*} {GridPreviewContentState} + * @memberof FormPreviewContentController + */ + protected createState(): FormPreviewContentState { + return new FormPreviewContentState(this.parent?.state); + } + + /** + * 加载数据 + * + * @protected + * @return {*} {Promise} + * @memberof FormPreviewContentController + */ + protected async load(): Promise { + try { + const app = ibiz.hub.getApp(this.view.model.appId); + const uimode = getControl(this.view.model, 'uimode'); + const psdeid = this.majorData.psdeid; + const context = this.panel.context.clone(); + context.psdataentity = psdeid; + if (uimode) { + const result = await app.deService.exec( + uimode.appDataEntityId!, + 'fetchDefault', + context, + { + n_psdeid_eq: psdeid, + size: 1000, + }, + ); + if (result.ok && result.data) { + this.uiModes = result.data as IData[]; + } + } + const field = getControl(this.view.model, 'field'); + if (field) { + const result = await app.deService.exec( + field.appDataEntityId!, + 'fetchDefault', + context, + { + size: 1000, + }, + ); + if (result.ok && result.data) { + this.fields = result.data as IData[]; + } + } + } catch (error) { + ibiz.log.error(error); + } + } + + /** + * 查找指定项界面模式 + * + * @protected + * @param {IData} item + * @return {*} {(IData | undefined)} + * @memberof FormPreviewContentController + */ + protected findUIMode(item: IData): IData | undefined { + return this.uiModes.find(uiModel => { + if (uiModel.psdefid === item.psdefid) { + return uiModel; + } + }); + } + + /** + * 初始化工具栏项数据 + * + * @protected + * @return {*} {Promise} + * @memberof FormPreviewContentController + */ + protected async initItems(): Promise { + const items = this.majorData.psdeformdetails || []; + recursiveIterate( + { psdeformdetails: items }, + (item: IData) => { + if ( + item.detailtype === 'FORMITEM' && + item.formtype === 'SEARCHFORM' && + !item.caption && + item.logicname + ) { + item.caption = item.logicname; + } + if (item.detailtype === 'FORMITEM' && notNilEmpty(item.psdefid)) { + // 查找界面模式，根据界面模式填充一些属性数据用于预览 + const psDEFUIMode = this.findUIMode(item); + if (psDEFUIMode) { + if (isNilOrEmpty(item.caption) && psDEFUIMode.caption) { + item.caption = psDEFUIMode.caption; + } + if (isNilOrEmpty(item.editortype) && psDEFUIMode.editortype) { + item.editortype = psDEFUIMode.editortype; + } + if (isNilOrEmpty(item.ctrlheight) && psDEFUIMode.ctrlheight) { + item.ctrlheight = psDEFUIMode.ctrlheight; + } + if (isNilOrEmpty(item.ctrlwidth) && psDEFUIMode.ctrlwidth) { + item.ctrlwidth = psDEFUIMode.ctrlwidth; + } + } + if (isNilOrEmpty(item.caption)) { + const psDEField = this.fields.find((psdefield: IData) => { + if (psdefield.psdefieldid === item.psdefid) { + return psdefield; + } + })!; + item.caption = psDEField?.logicname; + } + } + }, + { childrenFields: ['psdeformdetails'] }, + ); + this.state.items = items; + } +} diff --git a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.provider.ts b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.provider.ts new file mode 100644 index 00000000..bf0abc57 --- /dev/null +++ b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.provider.ts @@ -0,0 +1,28 @@ +import { + IPanelItemController, + IPanelItemProvider, + IPanelController, +} from '@ibiz-template/runtime'; +import { IPanelItem } from '@ibiz/model-core'; +import { FormPreviewContentController } from './form-preview-content.controller'; + +/** + * 表单预览内容区适配器 + * + * @export + * @class FormPreviewContentProvider + * @implements {IPanelItemProvider} + */ +export class FormPreviewContentProvider implements IPanelItemProvider { + component = 'IBizFormPreviewContent'; + + async createController( + panelItem: IPanelItem, + panel: IPanelController, + parent?: IPanelItemController, + ): Promise { + const c = new FormPreviewContentController(panelItem, panel, parent); + await c.init(); + return c; + } +} diff --git a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.scss b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.scss new file mode 100644 index 00000000..6d82dc57 --- /dev/null +++ b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.scss @@ -0,0 +1,5 @@ +@include b(form-preview-content) { + width: 100%; + height: 100%; + padding: getCssVar(spacing, base); +} diff --git a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.state.ts b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.state.ts new file mode 100644 index 00000000..47a50566 --- /dev/null +++ b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.state.ts @@ -0,0 +1,10 @@ +import { PreviewContentState } from '@ibiz-template-plugin/design-base'; + +/** + * 表单预览内容区UI状态 + * + * @export + * @class FormPreviewContentState + * @extends {PreviewContentState} + */ +export class FormPreviewContentState extends PreviewContentState {} diff --git a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.tsx b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.tsx new file mode 100644 index 00000000..0095d59c --- /dev/null +++ b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.tsx @@ -0,0 +1,35 @@ +import { PropType, defineComponent } from 'vue'; +import { IPanelRawItem } from '@ibiz/model-core'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { FormPreviewContentController } from './form-preview-content.controller'; +import './form-preview-content.scss'; + +export default defineComponent({ + name: 'IBizFormPreviewContent', + props: { + modelData: { + type: Object as PropType, + required: true, + }, + controller: { + type: Object as PropType, + required: true, + }, + }, + setup() { + const ns = useNamespace('form-preview-content'); + + return { ns }; + }, + render() { + return ( +
+ +
+ ); + }, +}); diff --git a/packages/dnd-design/src/panel-items/form-preview-content/index.ts b/packages/dnd-design/src/panel-items/form-preview-content/index.ts new file mode 100644 index 00000000..ea29615c --- /dev/null +++ b/packages/dnd-design/src/panel-items/form-preview-content/index.ts @@ -0,0 +1,15 @@ +import { App } from 'vue'; +import { registerPanelItemProvider } from '@ibiz-template/runtime'; +import IBizFormPreviewContent from './form-preview-content'; +import { FormPreviewContentProvider } from './form-preview-content.provider'; + +export default { + install(app: App) { + // 注册组件 + app.component('IBizFormPreviewContent', IBizFormPreviewContent); + registerPanelItemProvider( + 'RAWITEM_FORM_PREVIEW', + () => new FormPreviewContentProvider(), + ); + }, +}; diff --git a/packages/dnd-design/src/panel-items/index.ts b/packages/dnd-design/src/panel-items/index.ts index 68d2f38c..3561cef1 100644 --- a/packages/dnd-design/src/panel-items/index.ts +++ b/packages/dnd-design/src/panel-items/index.ts @@ -5,6 +5,7 @@ import DndStencil from './dnd-stencil'; import DndStructure from './dnd-structure'; import DndStencilSearchInput from './dnd-stencil-search-input'; import HiddenFormItemSwitch from './hidden-form-item-switch'; +import FormPreviewContent from './form-preview-content'; export default { install(app: App) { @@ -14,5 +15,6 @@ export default { app.use(DndStructure); app.use(DndStencilSearchInput); app.use(HiddenFormItemSwitch); + app.use(FormPreviewContent); }, }; diff --git a/packages/dnd-design/src/views/dnd-design-view/index.ts b/packages/dnd-design/src/views/dnd-design-view/index.ts new file mode 100644 index 00000000..248b5381 --- /dev/null +++ b/packages/dnd-design/src/views/dnd-design-view/index.ts @@ -0,0 +1,2 @@ +export { DndDesignViewController } from './dnd-design-view.controller'; +export { DndDesignViewProvider } from './dnd-design-view.provider'; diff --git a/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts b/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts new file mode 100644 index 00000000..205a7126 --- /dev/null +++ b/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts @@ -0,0 +1,30 @@ +import { IAppDECustomView } from '@ibiz/model-core'; +import { + IPreviewViewState, + IPreviewViewEvent, + PreviewViewControllerBase, +} from '@ibiz-template-plugin/design-base'; +import { FormPreviewViewEngine } from './form-preview-view.engine'; + +/** + * 表单预览视图控制器 + * + * @export + * @class FormPreviewViewController + * @extends {PreviewViewControllerBase} + */ +export class FormPreviewViewController extends PreviewViewControllerBase< + IAppDECustomView, + IPreviewViewState, + IPreviewViewEvent +> { + /** + * 初始化引擎 + * + * @protected + * @memberof FormPreviewViewController + */ + protected initEngines(): void { + this.engines.push(new FormPreviewViewEngine(this)); + } +} diff --git a/packages/dnd-design/src/views/form-preview-view/form-preview-view.engine.ts b/packages/dnd-design/src/views/form-preview-view/form-preview-view.engine.ts new file mode 100644 index 00000000..45cedd33 --- /dev/null +++ b/packages/dnd-design/src/views/form-preview-view/form-preview-view.engine.ts @@ -0,0 +1,10 @@ +import { PreviewViewEngineBase } from '@ibiz-template-plugin/design-base'; + +/** + * 表单预览视图引擎 + * + * @export + * @class FormPreviewViewEngine + * @extends {PreviewViewEngineBase} + */ +export class FormPreviewViewEngine extends PreviewViewEngineBase {} diff --git a/packages/dnd-design/src/views/form-preview-view/form-preview-view.provider.ts b/packages/dnd-design/src/views/form-preview-view/form-preview-view.provider.ts new file mode 100644 index 00000000..be49cfe2 --- /dev/null +++ b/packages/dnd-design/src/views/form-preview-view/form-preview-view.provider.ts @@ -0,0 +1,24 @@ +import { IAppDECustomView } from '@ibiz/model-core'; +import { CTX, IViewController, IViewProvider } from '@ibiz-template/runtime'; +import { FormPreviewViewController } from './form-preview-view.controller'; + +/** + * 表单预览视图适配器 + * + * @export + * @class FormPreviewViewProvider + * @implements {IViewProvider} + */ +export class FormPreviewViewProvider implements IViewProvider { + component: string = 'IBizView'; + + createController( + model: IAppDECustomView, + context: IContext, + params?: IParams, + ctx?: CTX, + ): IViewController { + const c = new FormPreviewViewController(model, context, params, ctx); + return c; + } +} diff --git a/packages/dnd-design/src/views/form-preview-view/index.ts b/packages/dnd-design/src/views/form-preview-view/index.ts new file mode 100644 index 00000000..f04f54ea --- /dev/null +++ b/packages/dnd-design/src/views/form-preview-view/index.ts @@ -0,0 +1,2 @@ +export { FormPreviewViewController } from './form-preview-view.controller'; +export { FormPreviewViewProvider } from './form-preview-view.provider'; diff --git a/packages/dnd-design/src/views/index.ts b/packages/dnd-design/src/views/index.ts index 9e8afa7d..fc885225 100644 --- a/packages/dnd-design/src/views/index.ts +++ b/packages/dnd-design/src/views/index.ts @@ -1,2 +1,2 @@ -export { DndDesignViewController } from './dnd-design-view/dnd-design-view.controller'; -export { DndDesignViewProvider } from './dnd-design-view/dnd-design-view.provider'; +export * from './dnd-design-view'; +export * from './form-preview-view'; -- Gitee From 862e1832f3fa2a580ac5bcdead7f4cf824aa05e8 Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 24 Oct 2024 18:53:29 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grid-preview-content.controller.ts | 41 +++++++++++++++++++ .../grid-preview-content.provider.ts | 28 +++++++++++++ .../grid-preview-content.scss | 5 +++ .../grid-preview-content.state.ts | 10 +++++ .../grid-preview-content.tsx | 35 ++++++++++++++++ .../panel-items/grid-preview-content/index.ts | 15 +++++++ packages/grid-design/src/panel-items/index.ts | 2 + .../grid-preview-view.controller.ts | 30 ++++++++++++++ .../grid-preview-view.engine.ts | 10 +++++ .../grid-preview-view.provider.ts | 24 +++++++++++ packages/grid-design/src/views/index.ts | 5 +++ 11 files changed, 205 insertions(+) create mode 100644 packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts create mode 100644 packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.provider.ts create mode 100644 packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.scss create mode 100644 packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.state.ts create mode 100644 packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.tsx create mode 100644 packages/grid-design/src/panel-items/grid-preview-content/index.ts create mode 100644 packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts create mode 100644 packages/grid-design/src/views/grid-preview-view/grid-preview-view.engine.ts create mode 100644 packages/grid-design/src/views/grid-preview-view/grid-preview-view.provider.ts diff --git a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts new file mode 100644 index 00000000..f715212c --- /dev/null +++ b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts @@ -0,0 +1,41 @@ +import { PreviewContentController } from '@ibiz-template-plugin/design-base'; +import { GridPreviewContentState } from './grid-preview-content.state'; + +/** + * 表格预览内容区控制器 + * + * @export + * @class GridPreviewContentController + * @extends {PreviewContentController} + */ +export class GridPreviewContentController extends PreviewContentController { + /** + * 预览内容区状态 + * + * @type {GridPreviewContentState} + * @memberof GridPreviewContentController + */ + declare state: GridPreviewContentState; + + /** + * 创建面板状态对象 + * + * @protected + * @return {*} {GridPreviewContentState} + * @memberof GridPreviewContentController + */ + protected createState(): GridPreviewContentState { + return new GridPreviewContentState(this.parent?.state); + } + + /** + * 初始化表格列数据 + * + * @protected + * @return {*} {Promise} + * @memberof GridPreviewContentController + */ + protected async initItems(): Promise { + this.state.items = this.majorData.psdegridcols || []; + } +} diff --git a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.provider.ts b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.provider.ts new file mode 100644 index 00000000..480352c7 --- /dev/null +++ b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.provider.ts @@ -0,0 +1,28 @@ +import { + IPanelItemController, + IPanelItemProvider, + IPanelController, +} from '@ibiz-template/runtime'; +import { IPanelItem } from '@ibiz/model-core'; +import { GridPreviewContentController } from './grid-preview-content.controller'; + +/** + * 表格预览内容区适配器 + * + * @export + * @class GridPreviewContentProvider + * @implements {IPanelItemProvider} + */ +export class GridPreviewContentProvider implements IPanelItemProvider { + component = 'IBizGridPreviewContent'; + + async createController( + panelItem: IPanelItem, + panel: IPanelController, + parent?: IPanelItemController, + ): Promise { + const c = new GridPreviewContentController(panelItem, panel, parent); + await c.init(); + return c; + } +} diff --git a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.scss b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.scss new file mode 100644 index 00000000..1099952d --- /dev/null +++ b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.scss @@ -0,0 +1,5 @@ +@include b(grid-preview-content) { + width: 100%; + height: 100%; + padding: getCssVar(spacing, base); +} \ No newline at end of file diff --git a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.state.ts b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.state.ts new file mode 100644 index 00000000..4147ced5 --- /dev/null +++ b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.state.ts @@ -0,0 +1,10 @@ +import { PreviewContentState } from '@ibiz-template-plugin/design-base'; + +/** + * 表格预览内容区UI状态 + * + * @export + * @class GridPreviewContentState + * @extends {PreviewContentState} + */ +export class GridPreviewContentState extends PreviewContentState {} diff --git a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.tsx b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.tsx new file mode 100644 index 00000000..2939664e --- /dev/null +++ b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.tsx @@ -0,0 +1,35 @@ +import { PropType, defineComponent } from 'vue'; +import { IPanelRawItem } from '@ibiz/model-core'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { GridPreviewContentController } from './grid-preview-content.controller'; +import './grid-preview-content.scss'; + +export default defineComponent({ + name: 'IBizGridPreviewContent', + props: { + modelData: { + type: Object as PropType, + required: true, + }, + controller: { + type: Object as PropType, + required: true, + }, + }, + setup() { + const ns = useNamespace('grid-preview-content'); + + return { ns }; + }, + render() { + return ( +
+ +
+ ); + }, +}); diff --git a/packages/grid-design/src/panel-items/grid-preview-content/index.ts b/packages/grid-design/src/panel-items/grid-preview-content/index.ts new file mode 100644 index 00000000..9629e5f1 --- /dev/null +++ b/packages/grid-design/src/panel-items/grid-preview-content/index.ts @@ -0,0 +1,15 @@ +import { App } from 'vue'; +import { registerPanelItemProvider } from '@ibiz-template/runtime'; +import IBizGridPreviewContent from './grid-preview-content'; +import { GridPreviewContentProvider } from './grid-preview-content.provider'; + +export default { + install(app: App) { + // 注册组件 + app.component('IBizGridPreviewContent', IBizGridPreviewContent); + registerPanelItemProvider( + 'RAWITEM_GRID_PREVIEW', + () => new GridPreviewContentProvider(), + ); + }, +}; diff --git a/packages/grid-design/src/panel-items/index.ts b/packages/grid-design/src/panel-items/index.ts index a5771a9e..c414aea5 100644 --- a/packages/grid-design/src/panel-items/index.ts +++ b/packages/grid-design/src/panel-items/index.ts @@ -3,10 +3,12 @@ import { App } from 'vue'; import GridDesignContent from './grid_design_content'; import GridDesignOperation from './grid_design_operation'; +import GridPreviewContent from './grid-preview-content'; export default { install(app: App) { app.use(GridDesignContent); app.use(GridDesignOperation); + app.use(GridPreviewContent); }, }; diff --git a/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts new file mode 100644 index 00000000..ff5595dd --- /dev/null +++ b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts @@ -0,0 +1,30 @@ +import { IAppDECustomView } from '@ibiz/model-core'; +import { + IPreviewViewState, + IPreviewViewEvent, + PreviewViewControllerBase, +} from '@ibiz-template-plugin/design-base'; +import { GridPreviewViewEngine } from './grid-preview-view.engine'; + +/** + * 表格预览视图控制器 + * + * @export + * @class GridPreviewViewController + * @extends {PreviewViewControllerBase} + */ +export class GridPreviewViewController extends PreviewViewControllerBase< + IAppDECustomView, + IPreviewViewState, + IPreviewViewEvent +> { + /** + * 初始化引擎 + * + * @protected + * @memberof GridPreviewViewController + */ + protected initEngines(): void { + this.engines.push(new GridPreviewViewEngine(this)); + } +} diff --git a/packages/grid-design/src/views/grid-preview-view/grid-preview-view.engine.ts b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.engine.ts new file mode 100644 index 00000000..3e55ea6e --- /dev/null +++ b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.engine.ts @@ -0,0 +1,10 @@ +import { PreviewViewEngineBase } from '@ibiz-template-plugin/design-base'; + +/** + * 表格预览视图引擎 + * + * @export + * @class GridPreviewViewEngine + * @extends {PreviewViewEngineBase} + */ +export class GridPreviewViewEngine extends PreviewViewEngineBase {} diff --git a/packages/grid-design/src/views/grid-preview-view/grid-preview-view.provider.ts b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.provider.ts new file mode 100644 index 00000000..7d6c0808 --- /dev/null +++ b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.provider.ts @@ -0,0 +1,24 @@ +import { IAppDECustomView } from '@ibiz/model-core'; +import { CTX, IViewController, IViewProvider } from '@ibiz-template/runtime'; +import { GridPreviewViewController } from './grid-preview-view.controller'; + +/** + * 实体表格预览视图适配器 + * + * @export + * @class GridPreviewViewProvider + * @implements {IViewProvider} + */ +export class GridPreviewViewProvider implements IViewProvider { + component: string = 'IBizView'; + + createController( + model: IAppDECustomView, + context: IContext, + params?: IParams, + ctx?: CTX, + ): IViewController { + const c = new GridPreviewViewController(model, context, params, ctx); + return c; + } +} diff --git a/packages/grid-design/src/views/index.ts b/packages/grid-design/src/views/index.ts index e4ba0bdf..0c050e00 100644 --- a/packages/grid-design/src/views/index.ts +++ b/packages/grid-design/src/views/index.ts @@ -2,6 +2,7 @@ import { App } from 'vue'; import { registerViewProvider } from '@ibiz-template/runtime'; import { GridDesignViewProvider } from './grid-design-view/grid-design-view.provider'; +import { GridPreviewViewProvider } from './grid-preview-view/grid-preview-view.provider'; export default { install(app: App) { @@ -13,6 +14,10 @@ export default { 'VIEW_CUSTOM_GRID_DESIGN_VIEW_DESIGN', () => new GridDesignViewProvider(), ); + registerViewProvider( + 'VIEW_CUSTOM_GRID_PREVIEW_VIEW', + () => new GridPreviewViewProvider(), + ); }, }; -- Gitee From afee9046f14e6d77c76d0fc226c8627d376f348a Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 24 Oct 2024 18:54:03 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=20=E6=96=B0=E5=A2=9E=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=A0=8F=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../toolbar-design/src/panel-items/index.ts | 2 + .../toolbar-preview-content/index.ts | 15 +++++++ .../toolbar-preview-content.controller.ts | 41 +++++++++++++++++++ .../toolbar-preview-content.provider.ts | 28 +++++++++++++ .../toolbar-preview-content.scss | 5 +++ .../toolbar-preview-content.state.ts | 10 +++++ .../toolbar-preview-content.tsx | 35 ++++++++++++++++ packages/toolbar-design/src/views/index.ts | 5 +++ .../toolbar-preview-view.controller.ts | 30 ++++++++++++++ .../toolbar-preview-view.engine.ts | 10 +++++ .../toolbar-preview-view.provider.ts | 24 +++++++++++ 11 files changed, 205 insertions(+) create mode 100644 packages/toolbar-design/src/panel-items/toolbar-preview-content/index.ts create mode 100644 packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.controller.ts create mode 100644 packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.provider.ts create mode 100644 packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.scss create mode 100644 packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.state.ts create mode 100644 packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.tsx create mode 100644 packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts create mode 100644 packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.engine.ts create mode 100644 packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.provider.ts diff --git a/packages/toolbar-design/src/panel-items/index.ts b/packages/toolbar-design/src/panel-items/index.ts index 81408457..212a1acb 100644 --- a/packages/toolbar-design/src/panel-items/index.ts +++ b/packages/toolbar-design/src/panel-items/index.ts @@ -1,10 +1,12 @@ import { App } from 'vue'; import ToolBarDesignContent from './toolbar_design_content'; import ToolBarDesignOperation from './toolbar_design_operation'; +import ToolBarPreviewContent from './toolbar-preview-content'; export default { install(app: App) { app.use(ToolBarDesignContent); app.use(ToolBarDesignOperation); + app.use(ToolBarPreviewContent); }, }; diff --git a/packages/toolbar-design/src/panel-items/toolbar-preview-content/index.ts b/packages/toolbar-design/src/panel-items/toolbar-preview-content/index.ts new file mode 100644 index 00000000..05adc377 --- /dev/null +++ b/packages/toolbar-design/src/panel-items/toolbar-preview-content/index.ts @@ -0,0 +1,15 @@ +import { App } from 'vue'; +import { registerPanelItemProvider } from '@ibiz-template/runtime'; +import IBizToolbarPreviewContent from './toolbar-preview-content'; +import { ToolbarPreviewContentProvider } from './toolbar-preview-content.provider'; + +export default { + install(app: App) { + // 注册组件 + app.component('IBizToolbarPreviewContent', IBizToolbarPreviewContent); + registerPanelItemProvider( + 'RAWITEM_TOOLBAR_PREVIEW', + () => new ToolbarPreviewContentProvider(), + ); + }, +}; diff --git a/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.controller.ts b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.controller.ts new file mode 100644 index 00000000..a0da2998 --- /dev/null +++ b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.controller.ts @@ -0,0 +1,41 @@ +import { PreviewContentController } from '@ibiz-template-plugin/design-base'; +import { ToolbarPreviewContentState } from './toolbar-preview-content.state'; + +/** + * 工具栏预览内容区控制器 + * + * @export + * @class ToolbarPreviewContentController + * @extends {PreviewContentController} + */ +export class ToolbarPreviewContentController extends PreviewContentController { + /** + * 预览内容区状态 + * + * @type {ToolbarPreviewContentState} + * @memberof ToolbarPreviewContentController + */ + declare state: ToolbarPreviewContentState; + + /** + * 创建面板状态对象 + * + * @protected + * @return {*} {GridPreviewContentState} + * @memberof ToolbarPreviewContentController + */ + protected createState(): ToolbarPreviewContentState { + return new ToolbarPreviewContentState(this.parent?.state); + } + + /** + * 初始化工具栏项数据 + * + * @protected + * @return {*} {Promise} + * @memberof ToolbarPreviewContentController + */ + protected async initItems(): Promise { + this.state.items = this.majorData.psdetbitems || []; + } +} diff --git a/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.provider.ts b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.provider.ts new file mode 100644 index 00000000..db7241e3 --- /dev/null +++ b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.provider.ts @@ -0,0 +1,28 @@ +import { + IPanelItemController, + IPanelItemProvider, + IPanelController, +} from '@ibiz-template/runtime'; +import { IPanelItem } from '@ibiz/model-core'; +import { ToolbarPreviewContentController } from './toolbar-preview-content.controller'; + +/** + * 工具栏预览内容区适配器 + * + * @export + * @class GridPreviewContentProvider + * @implements {IPanelItemProvider} + */ +export class ToolbarPreviewContentProvider implements IPanelItemProvider { + component = 'IBizToolbarPreviewContent'; + + async createController( + panelItem: IPanelItem, + panel: IPanelController, + parent?: IPanelItemController, + ): Promise { + const c = new ToolbarPreviewContentController(panelItem, panel, parent); + await c.init(); + return c; + } +} diff --git a/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.scss b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.scss new file mode 100644 index 00000000..5641ba57 --- /dev/null +++ b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.scss @@ -0,0 +1,5 @@ +@include b(toolbar-preview-content) { + width: 100%; + height: 100%; + padding: getCssVar(spacing, base); +} \ No newline at end of file diff --git a/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.state.ts b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.state.ts new file mode 100644 index 00000000..6f356db2 --- /dev/null +++ b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.state.ts @@ -0,0 +1,10 @@ +import { PreviewContentState } from '@ibiz-template-plugin/design-base'; + +/** + * 工具栏预览内容区UI状态 + * + * @export + * @class ToolbarPreviewContentState + * @extends {PreviewContentState} + */ +export class ToolbarPreviewContentState extends PreviewContentState {} diff --git a/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.tsx b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.tsx new file mode 100644 index 00000000..b634c08b --- /dev/null +++ b/packages/toolbar-design/src/panel-items/toolbar-preview-content/toolbar-preview-content.tsx @@ -0,0 +1,35 @@ +import { PropType, defineComponent } from 'vue'; +import { IPanelRawItem } from '@ibiz/model-core'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { ToolbarPreviewContentController } from './toolbar-preview-content.controller'; +import './toolbar-preview-content.scss'; + +export default defineComponent({ + name: 'IBizToolbarPreviewContent', + props: { + modelData: { + type: Object as PropType, + required: true, + }, + controller: { + type: Object as PropType, + required: true, + }, + }, + setup() { + const ns = useNamespace('toolbar-preview-content'); + + return { ns }; + }, + render() { + return ( +
+ +
+ ); + }, +}); diff --git a/packages/toolbar-design/src/views/index.ts b/packages/toolbar-design/src/views/index.ts index 971704ea..502ec870 100644 --- a/packages/toolbar-design/src/views/index.ts +++ b/packages/toolbar-design/src/views/index.ts @@ -2,6 +2,7 @@ import { registerViewProvider } from '@ibiz-template/runtime'; import { App } from 'vue'; import { ToolbarDesignViewProvider } from './toolbar-design-view/toolbar-design-view.provider'; +import { ToolbarPreviewViewProvider } from './toolbar-preview-view/toolbar-preview-view.provider'; export default { install(app: App) { @@ -13,5 +14,9 @@ export default { 'VIEW_CUSTOM_TOOLBAR_DESIGN_VIEW_DESIGN', () => new ToolbarDesignViewProvider(), ); + registerViewProvider( + 'VIEW_CUSTOM_TOOLBAR_PREVIEW_VIEW', + () => new ToolbarPreviewViewProvider(), + ); }, }; diff --git a/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts new file mode 100644 index 00000000..b6f43e70 --- /dev/null +++ b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts @@ -0,0 +1,30 @@ +import { IAppDECustomView } from '@ibiz/model-core'; +import { + IPreviewViewState, + IPreviewViewEvent, + PreviewViewControllerBase, +} from '@ibiz-template-plugin/design-base'; +import { ToolbarPreviewViewEngine } from './toolbar-preview-view.engine'; + +/** + * 工具栏预览视图控制器 + * + * @export + * @class ToolbarPreviewViewController + * @extends {PreviewViewControllerBase} + */ +export class ToolbarPreviewViewController extends PreviewViewControllerBase< + IAppDECustomView, + IPreviewViewState, + IPreviewViewEvent +> { + /** + * 初始化引擎 + * + * @protected + * @memberof ToolbarPreviewViewController + */ + protected initEngines(): void { + this.engines.push(new ToolbarPreviewViewEngine(this)); + } +} diff --git a/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.engine.ts b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.engine.ts new file mode 100644 index 00000000..c9e1d375 --- /dev/null +++ b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.engine.ts @@ -0,0 +1,10 @@ +import { PreviewViewEngineBase } from '@ibiz-template-plugin/design-base'; + +/** + * 工具栏预览视图引擎 + * + * @export + * @class ToolbarPreviewViewEngine + * @extends {PreviewViewEngineBase} + */ +export class ToolbarPreviewViewEngine extends PreviewViewEngineBase {} diff --git a/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.provider.ts b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.provider.ts new file mode 100644 index 00000000..0960db82 --- /dev/null +++ b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.provider.ts @@ -0,0 +1,24 @@ +import { IAppDECustomView } from '@ibiz/model-core'; +import { CTX, IViewController, IViewProvider } from '@ibiz-template/runtime'; +import { ToolbarPreviewViewController } from './toolbar-preview-view.controller'; + +/** + * 工具栏预览视图适配器 + * + * @export + * @class ToolbarPreviewViewProvider + * @implements {IViewProvider} + */ +export class ToolbarPreviewViewProvider implements IViewProvider { + component: string = 'IBizView'; + + createController( + model: IAppDECustomView, + context: IContext, + params?: IParams, + ctx?: CTX, + ): IViewController { + const c = new ToolbarPreviewViewController(model, context, params, ctx); + return c; + } +} -- Gitee From 3b3ad2e093fc27afcb575ac6013b262cfeb1bcee Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 24 Oct 2024 19:47:21 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=EF=BC=8C=E8=A1=A8=E5=8D=95=EF=BC=8C=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E6=A0=8F=E9=A2=84=E8=A7=88=E9=80=82=E9=85=8D=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../preview-view-base.controller.ts | 48 ++++++- .../form-preview-content.controller.ts | 118 +----------------- .../form-preview-view.controller.ts | 14 +++ .../grid-preview-content.controller.ts | 3 +- .../grid-preview-view.controller.ts | 16 +++ .../toolbar-preview-view.controller.ts | 16 +++ 6 files changed, 96 insertions(+), 119 deletions(-) diff --git a/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts b/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts index ac3565bc..4fb15975 100644 --- a/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts +++ b/packages/design-base/src/views/preview-view-base/preview-view-base.controller.ts @@ -1,6 +1,10 @@ import { IAppView } from '@ibiz/model-core'; import { ViewController } from '@ibiz-template/runtime'; -import { IPreviewViewEvent, IPreviewViewState } from '../../interface'; +import { + IDesignPreviewProvider, + IPreviewViewEvent, + IPreviewViewState, +} from '../../interface'; import { PreviewViewEngineBase } from './preview-view-base.engine'; /** @@ -18,6 +22,37 @@ export class PreviewViewControllerBase< S extends IPreviewViewState, E extends IPreviewViewEvent, > extends ViewController { + /** + * 预览适配器 + * + * @protected + * @type {IDesignPreviewProvider} + * @memberof PreviewViewControllerBase + */ + protected preViewProvider!: IDesignPreviewProvider; + + /** + * 获取预览区适配器 + * + * @return {*} {IDesignPreviewProvider} + * @memberof PreviewViewControllerBase + */ + public getPreViewProvider(): IDesignPreviewProvider { + return this.preViewProvider; + } + + /** + * 生命周期-创建完成 + * + * @protected + * @return {*} {Promise} + * @memberof PreviewViewControllerBase + */ + protected async onCreated(): Promise { + await super.onCreated(); + await this.initPreViewProvider(); + } + /** * 初始化预览视图引擎 * @@ -27,4 +62,15 @@ export class PreviewViewControllerBase< protected initEngines(): void { this.engines.push(new PreviewViewEngineBase(this)); } + + /** + * 初始化预览编辑器 + * + * @protected + * @return {*} {Promise} + * @memberof PreviewViewControllerBase + */ + protected async initPreViewProvider(): Promise { + throw new Error('Method not implemented.'); + } } diff --git a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts index 18f0fb82..f2863a43 100644 --- a/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts +++ b/packages/dnd-design/src/panel-items/form-preview-content/form-preview-content.controller.ts @@ -1,6 +1,4 @@ /* eslint-disable array-callback-return */ -import { getControl } from '@ibiz-template/runtime'; -import { isNilOrEmpty, notNilEmpty } from 'qx-util'; import { recursiveIterate } from '@ibiz-template/core'; import { PreviewContentController } from '@ibiz-template-plugin/design-base'; import { FormPreviewContentState } from './form-preview-content.state'; @@ -21,24 +19,6 @@ export class FormPreviewContentController extends PreviewContentController { */ declare state: FormPreviewContentState; - /** - * 界面模式集合 - * - * @protected - * @type {IData[]} - * @memberof FormPreviewContentController - */ - protected uiModes: IData[] = []; - - /** - * 属性字段集合 - * - * @protected - * @type {IData[]} - * @memberof FormPreviewContentController - */ - protected fields: IData[] = []; - /** * 创建面板状态对象 * @@ -50,69 +30,6 @@ export class FormPreviewContentController extends PreviewContentController { return new FormPreviewContentState(this.parent?.state); } - /** - * 加载数据 - * - * @protected - * @return {*} {Promise} - * @memberof FormPreviewContentController - */ - protected async load(): Promise { - try { - const app = ibiz.hub.getApp(this.view.model.appId); - const uimode = getControl(this.view.model, 'uimode'); - const psdeid = this.majorData.psdeid; - const context = this.panel.context.clone(); - context.psdataentity = psdeid; - if (uimode) { - const result = await app.deService.exec( - uimode.appDataEntityId!, - 'fetchDefault', - context, - { - n_psdeid_eq: psdeid, - size: 1000, - }, - ); - if (result.ok && result.data) { - this.uiModes = result.data as IData[]; - } - } - const field = getControl(this.view.model, 'field'); - if (field) { - const result = await app.deService.exec( - field.appDataEntityId!, - 'fetchDefault', - context, - { - size: 1000, - }, - ); - if (result.ok && result.data) { - this.fields = result.data as IData[]; - } - } - } catch (error) { - ibiz.log.error(error); - } - } - - /** - * 查找指定项界面模式 - * - * @protected - * @param {IData} item - * @return {*} {(IData | undefined)} - * @memberof FormPreviewContentController - */ - protected findUIMode(item: IData): IData | undefined { - return this.uiModes.find(uiModel => { - if (uiModel.psdefid === item.psdefid) { - return uiModel; - } - }); - } - /** * 初始化工具栏项数据 * @@ -125,40 +42,7 @@ export class FormPreviewContentController extends PreviewContentController { recursiveIterate( { psdeformdetails: items }, (item: IData) => { - if ( - item.detailtype === 'FORMITEM' && - item.formtype === 'SEARCHFORM' && - !item.caption && - item.logicname - ) { - item.caption = item.logicname; - } - if (item.detailtype === 'FORMITEM' && notNilEmpty(item.psdefid)) { - // 查找界面模式，根据界面模式填充一些属性数据用于预览 - const psDEFUIMode = this.findUIMode(item); - if (psDEFUIMode) { - if (isNilOrEmpty(item.caption) && psDEFUIMode.caption) { - item.caption = psDEFUIMode.caption; - } - if (isNilOrEmpty(item.editortype) && psDEFUIMode.editortype) { - item.editortype = psDEFUIMode.editortype; - } - if (isNilOrEmpty(item.ctrlheight) && psDEFUIMode.ctrlheight) { - item.ctrlheight = psDEFUIMode.ctrlheight; - } - if (isNilOrEmpty(item.ctrlwidth) && psDEFUIMode.ctrlwidth) { - item.ctrlwidth = psDEFUIMode.ctrlwidth; - } - } - if (isNilOrEmpty(item.caption)) { - const psDEField = this.fields.find((psdefield: IData) => { - if (psdefield.psdefieldid === item.psdefid) { - return psdefield; - } - })!; - item.caption = psDEField?.logicname; - } - } + this.view.preViewProvider.getFormItemPreviewData(item); }, { childrenFields: ['psdeformdetails'] }, ); diff --git a/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts b/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts index 205a7126..3836338d 100644 --- a/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts +++ b/packages/dnd-design/src/views/form-preview-view/form-preview-view.controller.ts @@ -5,6 +5,7 @@ import { PreviewViewControllerBase, } from '@ibiz-template-plugin/design-base'; import { FormPreviewViewEngine } from './form-preview-view.engine'; +import { DndPreViewFactory } from '../../preview-providers/dnd-preview-factory'; /** * 表单预览视图控制器 @@ -18,6 +19,19 @@ export class FormPreviewViewController extends PreviewViewControllerBase< IPreviewViewState, IPreviewViewEvent > { + /** + * 初始化预览适配器 + * + * @protected + * @return {*} {Promise} + * @memberof FormPreviewViewController + */ + protected async initPreViewProvider(): Promise { + this.preViewProvider = + DndPreViewFactory.getInstance().getProvider('DESIGN'); + await this.preViewProvider.init(this); + } + /** * 初始化引擎 * diff --git a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts index f715212c..b12f3409 100644 --- a/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts +++ b/packages/grid-design/src/panel-items/grid-preview-content/grid-preview-content.controller.ts @@ -36,6 +36,7 @@ export class GridPreviewContentController extends PreviewContentController { * @memberof GridPreviewContentController */ protected async initItems(): Promise { - this.state.items = this.majorData.psdegridcols || []; + const items = this.majorData.psdegridcols || []; + this.state.items = this.view.preViewProvider.transformGridCols(items); } } diff --git a/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts index ff5595dd..78d96029 100644 --- a/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts +++ b/packages/grid-design/src/views/grid-preview-view/grid-preview-view.controller.ts @@ -2,9 +2,11 @@ import { IAppDECustomView } from '@ibiz/model-core'; import { IPreviewViewState, IPreviewViewEvent, + DesignPreViewFactory, PreviewViewControllerBase, } from '@ibiz-template-plugin/design-base'; import { GridPreviewViewEngine } from './grid-preview-view.engine'; +import { DESIGN_TYPE } from '../../utils'; /** * 表格预览视图控制器 @@ -18,6 +20,20 @@ export class GridPreviewViewController extends PreviewViewControllerBase< IPreviewViewState, IPreviewViewEvent > { + /** + * 初始化预览适配器 + * + * @protected + * @return {*} {Promise} + * @memberof GridPreviewViewController + */ + protected async initPreViewProvider(): Promise { + this.preViewProvider = DesignPreViewFactory.getInstance().getProvider( + `${DESIGN_TYPE}_DESIGN`, + ); + await this.preViewProvider.init(this); + } + /** * 初始化引擎 * diff --git a/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts index b6f43e70..a970fd52 100644 --- a/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts +++ b/packages/toolbar-design/src/views/toolbar-preview-view/toolbar-preview-view.controller.ts @@ -2,9 +2,11 @@ import { IAppDECustomView } from '@ibiz/model-core'; import { IPreviewViewState, IPreviewViewEvent, + DesignPreViewFactory, PreviewViewControllerBase, } from '@ibiz-template-plugin/design-base'; import { ToolbarPreviewViewEngine } from './toolbar-preview-view.engine'; +import { DESIGN_TYPE } from '../../utils'; /** * 工具栏预览视图控制器 @@ -18,6 +20,20 @@ export class ToolbarPreviewViewController extends PreviewViewControllerBase< IPreviewViewState, IPreviewViewEvent > { + /** + * 初始化 + * + * @protected + * @return {*} {Promise} + * @memberof ToolbarPreviewViewController + */ + protected async initPreViewProvider(): Promise { + this.preViewProvider = DesignPreViewFactory.getInstance().getProvider( + `${DESIGN_TYPE}_DESIGN`, + ); + await this.preViewProvider.init(this); + } + /** * 初始化引擎 * -- Gitee