From 898ea0194020facac09877ab833fda8ab0cb0b46 Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Mon, 18 Nov 2024 20:29:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=9B=B4=E6=96=B0=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../public/assets/svg/action-button.svg | 12 ++ .../button-list/button-list.provider.ts | 22 ++++ .../dnd-items/button-list/button-list.scss | 21 ++++ .../src/dnd-items/button-list/button-list.tsx | 109 ++++++++++++++++++ .../src/dnd-items/button-list/index.ts | 13 +++ .../src/dnd-items/form-item/form-item.tsx | 5 +- packages/dnd-design/src/dnd-items/index.ts | 2 + .../dnd-stencil-field.controller.ts | 5 +- .../design-preview-provider.ts | 15 +-- 9 files changed, 190 insertions(+), 14 deletions(-) create mode 100644 packages/dnd-design/public/assets/svg/action-button.svg create mode 100644 packages/dnd-design/src/dnd-items/button-list/button-list.provider.ts create mode 100644 packages/dnd-design/src/dnd-items/button-list/button-list.scss create mode 100644 packages/dnd-design/src/dnd-items/button-list/button-list.tsx create mode 100644 packages/dnd-design/src/dnd-items/button-list/index.ts diff --git a/packages/dnd-design/public/assets/svg/action-button.svg b/packages/dnd-design/public/assets/svg/action-button.svg new file mode 100644 index 00000000..0437fdfe --- /dev/null +++ b/packages/dnd-design/public/assets/svg/action-button.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/dnd-design/src/dnd-items/button-list/button-list.provider.ts b/packages/dnd-design/src/dnd-items/button-list/button-list.provider.ts new file mode 100644 index 00000000..f79edfb2 --- /dev/null +++ b/packages/dnd-design/src/dnd-items/button-list/button-list.provider.ts @@ -0,0 +1,22 @@ +import { IDataEntity } from '@ibiz-template/runtime'; +import { IDEForm } from '@ibiz/model-core'; +import { DndItemController } from '../../controller'; +import { + DndItemProvider, + IDndDesignPanelItemController, + IDndItemController, +} from '../../interface'; + +export class ButtonListProvider implements DndItemProvider { + type: string = 'PSDEFORMDETAIL_BUTTONLIST'; + + component: string = 'IBizDndDesignButtonList'; + + createController( + c: IDndDesignPanelItemController, + model: IDEForm, + item: IDataEntity, + ): IDndItemController { + return new DndItemController(c, model, item); + } +} diff --git a/packages/dnd-design/src/dnd-items/button-list/button-list.scss b/packages/dnd-design/src/dnd-items/button-list/button-list.scss new file mode 100644 index 00000000..d026c127 --- /dev/null +++ b/packages/dnd-design/src/dnd-items/button-list/button-list.scss @@ -0,0 +1,21 @@ +@include b(dnd-design-button-list) { + display: flex; + flex-wrap: wrap; + align-items: center; + height: 100%; + min-height: 38px; +} + +@include b(dnd-design-button-list-placeholder) { + display: flex; + align-items: center; + + @include e(icon) { + padding: 0 4px; + font-size: 38px; + } +} + +@include b(dnd-design-button-list-item) { + padding: 3px 4px; +} diff --git a/packages/dnd-design/src/dnd-items/button-list/button-list.tsx b/packages/dnd-design/src/dnd-items/button-list/button-list.tsx new file mode 100644 index 00000000..2131ad6f --- /dev/null +++ b/packages/dnd-design/src/dnd-items/button-list/button-list.tsx @@ -0,0 +1,109 @@ +import { defineComponent, ref, watch } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { DndItemController } from '../../controller'; +import { resource } from '../../global'; +import './button-list.scss'; + +export default defineComponent({ + name: 'IBizDndDesignButtonList', + props: { + controller: { + type: DndItemController, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('dnd-design-button-list'); + + // 界面行为项 + const items = ref([]); + + // 加载次数 + const count = ref(0); + console.log(11111111111, props.controller.data); + // 加载数据 + const load = async () => { + items.value = []; + const context = (props.controller as IData).c.panel.context.clone(); + const data = props.controller.data; + const app = ibiz.hub.getApp(context.srfappid); + const service = await app.deService.getService(context, 'PSDEUAGroup'); + if (service && data.psdeuagroupid) { + context.psdeuagroup = data.psdeuagroupid; + const result = await service.get(context); + if (result && result.ok && result.data) { + if ( + count.value > 1 && + (!Array.isArray(result.data.psdeuagrpdetails) || + !result.data.psdeuagrpdetails.length) + ) { + ibiz.message.warning('当前绑定界面行为组未配置界面行为'); + return; + } + if (Array.isArray(result.data.psdeuagrpdetails)) { + items.value = result.data.psdeuagrpdetails; + } + } + } + }; + + watch( + () => props.controller.data, + (value, oldValue) => { + if (count.value <= 1) { + count.value += 1; + } + const oldGroupId = oldValue?.psdeuagroupid; + const groupId = value?.psdeuagroupid; + if (groupId !== oldGroupId) { + load(); + } + }, + { immediate: true }, + ); + + return { + ns, + items, + }; + }, + render() { + const data = this.controller.data; + if (!data) { + return; + } + if (!data.psdeuagroupid) { + return ( +
+
+ +
按钮组
+
+
+ ); + } + if (data.updatedvt === 'ITEMS') { + return ( +
+
+ ... +
+
+ ); + } + return ( +
+ {this.items.map(item => { + return ( +
+ {item.uacaption || ''} +
+ ); + })} +
+ ); + }, +}); diff --git a/packages/dnd-design/src/dnd-items/button-list/index.ts b/packages/dnd-design/src/dnd-items/button-list/index.ts new file mode 100644 index 00000000..a930f8a4 --- /dev/null +++ b/packages/dnd-design/src/dnd-items/button-list/index.ts @@ -0,0 +1,13 @@ +import { App } from 'vue'; +import Component from './button-list'; +import { ButtonListProvider } from './button-list.provider'; +import { dndProviderRegister } from '../../utils'; + +export default { + install(app: App) { + // 注册组件 + app.component(Component.name, Component); + const provider = new ButtonListProvider(); + dndProviderRegister.registerItemProvider(provider.type, provider); + }, +}; diff --git a/packages/dnd-design/src/dnd-items/form-item/form-item.tsx b/packages/dnd-design/src/dnd-items/form-item/form-item.tsx index df754239..dd3aab84 100644 --- a/packages/dnd-design/src/dnd-items/form-item/form-item.tsx +++ b/packages/dnd-design/src/dnd-items/form-item/form-item.tsx @@ -34,14 +34,13 @@ export default defineComponent({ const renderDefaultField = () => { const data = props.controller.data; - const text = `${data.logicname || ''}(${data.srftext})`; - return ; + return ; }; const renderDesignItem = () => { const data = props.controller.data; const contentStyle = getContentStyle(); - const text = `${data.logicname || ''}(${data.srftext})`; + const text = `${data.srftext}`; const curDate = new Date(); if (data) { switch (data.editortype) { diff --git a/packages/dnd-design/src/dnd-items/index.ts b/packages/dnd-design/src/dnd-items/index.ts index 9ae170b1..c562eb8d 100644 --- a/packages/dnd-design/src/dnd-items/index.ts +++ b/packages/dnd-design/src/dnd-items/index.ts @@ -10,6 +10,7 @@ import Iframe from './iframe'; import DRUIPart from './druipart'; import MDCtrl from './mdctrl'; import FormItemEx from './form-item-ex'; +import ButtonList from './button-list'; export default { install(app: App) { @@ -24,5 +25,6 @@ export default { app.use(DRUIPart); app.use(MDCtrl); app.use(FormItemEx); + app.use(ButtonList); }, }; diff --git a/packages/dnd-design/src/plugins/dnd-stencil-field/dnd-stencil-field.controller.ts b/packages/dnd-design/src/plugins/dnd-stencil-field/dnd-stencil-field.controller.ts index 54e2483c..33ca16f7 100644 --- a/packages/dnd-design/src/plugins/dnd-stencil-field/dnd-stencil-field.controller.ts +++ b/packages/dnd-design/src/plugins/dnd-stencil-field/dnd-stencil-field.controller.ts @@ -54,7 +54,10 @@ export class DndStencilFieldController extends DndStencilPanelItemController { this.panel.context, form.appDataEntityId!, ); - const fieldForm = getControl(this.panel.view.model, 'field'); + const fieldForm = getControl( + this.panel.view.model, + this.view.state.data.formtype === 'EDITFORM' ? 'field' : 'uimode', + ); if (!fieldForm) { throw new RuntimeModelError(this.panel.view, '未找到 field 表单模型'); } diff --git a/packages/dnd-design/src/preview-providers/design-preview-provider.ts b/packages/dnd-design/src/preview-providers/design-preview-provider.ts index 81eb0cb8..e3ce369d 100644 --- a/packages/dnd-design/src/preview-providers/design-preview-provider.ts +++ b/packages/dnd-design/src/preview-providers/design-preview-provider.ts @@ -78,7 +78,11 @@ export class DndDesignPreViewProvider implements IPreviewProvider { */ protected findUIMode(item: IData): IData | undefined { const psdefuimode = this.uiModes.find((uiModel: IData) => { - if (uiModel.psdefid === item.psdefid) { + if ( + (item.formtype === 'SEARCHFORM' && + item.psdefsfitemid === uiModel.psdefsfitemid) || + (item.formtype === 'EDITFORM' && item.psdefid === uiModel.psdefid) + ) { return uiModel; } }); @@ -95,15 +99,6 @@ export class DndDesignPreViewProvider implements IPreviewProvider { * @return {*} {IData} */ private getFormItemPreviewData(item: IData): 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); -- Gitee