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 0000000000000000000000000000000000000000..0437fdfeb7eb470e32313a8e4899b1cd9e6abb81 --- /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 0000000000000000000000000000000000000000..f79edfb25dd207ab77c2ff22672e7e5096cbda79 --- /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 0000000000000000000000000000000000000000..d026c127c99330e3c128ae3e0eddf23b6a7f6828 --- /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 0000000000000000000000000000000000000000..2131ad6ff10843b0a73a8fb30450579d95b941c5 --- /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 0000000000000000000000000000000000000000..a930f8a460c5ce993ac28d71ff7d1bf1cefd1554 --- /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 df75423996668f6a0c255036dcfb909b5d1ea9a1..dd3aab84c5638bd66c4606f8ecc3b749d9d698e0 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 9ae170b1863ac247981085e426d8d6b64422c0d5..c562eb8d50d9ce7cd560a350c21f7276813a69a8 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 54e2483c83e09e9f49f98eca65f2636b1d303bc7..33ca16f7044204aa27258b0e50a8cf6b058abf87 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 81eb0cb82377053f17b8c74e55fa112c479af10f..e3ce369d0f689ef76809b79aac113ee9f757e66e 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);