提交 f235a4be 编写于 作者: LUCIFER-ZHU's avatar LUCIFER-ZHU

update: 更新门户部件绘制菜单、操作栏

上级 1f7541e2
<script setup lang="ts">
import { IActionParam, IParam, IContext, UIUtil } from '@core';
import { Subject, Subscription } from 'rxjs';
interface Props {
uiService: any;
items: IParam;
viewSubject?: Subject<IActionParam>;
}
const props = withDefaults(defineProps<Props>(), {});
interface appActionBarEmit {
(name: 'itemClick', value: IParam): void;
}
const emit = defineEmits<appActionBarEmit>();
/**
* 视图状态事件
*/
let viewStateEvent: Subscription | undefined = undefined;
/**
* 数据
*/
let value:any = null;
/**
* Vue生命周期mounted
*/
onMounted(() => {
if (props.viewSubject) {
viewStateEvent = props.viewSubject.subscribe(({ tag, action, data }) => {
if (!Object.is(tag, 'all-portlet')) {
return;
}
if (Object.is(action, 'loadmodel')) {
value = data
UIUtil.calcActionItemAuthState(data, props.items, props.uiService);
}
});
}
});
/**
* Vue生命周期unmounted
*/
onUnmounted(() => {
if (viewStateEvent) {
viewStateEvent.unsubscribe();
}
});
/**
* 处理点击事件
*/
const handleClick = (item: any, $event: any) => {
let _data = {
tag: item.viewlogicname,
params: value,
event: $event,
data: item
};
emit("itemClick", _data);
};
</script>
<template>
<div class="app-actionbar">
<div
class="app-actionbar-item"
v-for="(item,index) in Object.values(items)"
:key="index"
>
<a-badge
v-if="item.counterService&&item.counterService.counterData"
v-show="item.visabled"
:count="item.counterService.counterData[item.counterId]"
type="primary"
>
<a-button
:disabled="item.disabled"
@click="handleClick(item, $event)"
>
<i
v-if="item.icon"
style="margin-right: 5px;"
:class="item.icon"
></i>
{{item.actionName}}
</a-button>
</a-badge>
<a-button
v-show="item.visabled"
:disabled="item.disabled"
v-else
@click="handleClick(item, $event)"
>
<i
v-if="item.icon"
style="margin-right: 5px;"
:class="item.icon"
></i>
{{item.actionName}}
</a-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.app-actionbar {
padding: 12px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
.app-actionbar-item {
margin-right: 10px;
margin-bottom: 10px;
}
}
</style>
\ No newline at end of file
import { PortalViewState, IParam, ViewBase } from '@core'; import { PortalViewState, IParam, ViewBase, IActionParam } from '@core';
/** /**
* @description 应用看板(门户)视图 * @description 应用看板(门户)视图
...@@ -52,6 +52,17 @@ export class PortalView extends ViewBase { ...@@ -52,6 +52,17 @@ export class PortalView extends ViewBase {
} }
} }
/**
* 处理部件事件
*
* @param {IActionParam} actionParam
* @memberof PortalView
*/
public onCtrlEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
// TODO
}
/** /**
* @description 安装视图所有功能模块的方法 * @description 安装视图所有功能模块的方法
* *
......
...@@ -38,6 +38,17 @@ export class DashboardControl extends MainControl { ...@@ -38,6 +38,17 @@ export class DashboardControl extends MainControl {
} }
} }
/**
* 处理部件事件
*
* @param {IActionParam} actionParam
* @memberof PortletControl
*/
public onCtrlEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
const { controlName } = this.state;
}
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @return {*} * @return {*}
...@@ -48,6 +59,7 @@ export class DashboardControl extends MainControl { ...@@ -48,6 +59,7 @@ export class DashboardControl extends MainControl {
return { return {
...superParams, ...superParams,
load:this.useLoad.bind(this), load:this.useLoad.bind(this),
onCtrlEvent: this.onCtrlEvent.bind(this),
}; };
} }
} }
\ No newline at end of file
...@@ -15,6 +15,14 @@ export class MainControl extends ControlBase { ...@@ -15,6 +15,14 @@ export class MainControl extends ControlBase {
*/ */
public declare state: MainControlState; public declare state: MainControlState;
/**
* 界面行为服务
*
* @type {(IParam | undefined)}
* @memberof MainControl
*/
public appUIService: IParam | undefined;
/** /**
* @memberof MainControl * @memberof MainControl
*/ */
...@@ -38,6 +46,21 @@ export class MainControl extends ControlBase { ...@@ -38,6 +46,21 @@ export class MainControl extends ControlBase {
return actionModel; return actionModel;
} }
/**
*@description 使用UI服务
*
* @memberof MainControl
*/
public useUIService() {
const { context, appEntityCodeName } = this.state;
if (appEntityCodeName) {
App.getUIService(appEntityCodeName.toLowerCase(), context).then((service: IParam) => {
this.appUIService = service;
this.state.UIService = this.appUIService;
})
}
}
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @return {*} * @return {*}
...@@ -45,6 +68,8 @@ export class MainControl extends ControlBase { ...@@ -45,6 +68,8 @@ export class MainControl extends ControlBase {
*/ */
public moduleInstall() { public moduleInstall() {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
// 使用UI服务
this.useUIService();
return { return {
...superParams ...superParams
}; };
......
...@@ -40,7 +40,7 @@ export class PortletControl extends MainControl { ...@@ -40,7 +40,7 @@ export class PortletControl extends MainControl {
/** /**
* 部件事件 * 处理视图事件
* *
* @param {IActionParam} actionParam * @param {IActionParam} actionParam
* @memberof PortletControl * @memberof PortletControl
...@@ -50,6 +50,42 @@ export class PortletControl extends MainControl { ...@@ -50,6 +50,42 @@ export class PortletControl extends MainControl {
const { controlName } = this.state; const { controlName } = this.state;
} }
/**
* 处理部件事件
*
* @param {IActionParam} actionParam
* @memberof PortletControl
*/
public onCtrlEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
const { controlName } = this.state;
}
/**
* 触发界面行为
*
* @memberof PortletControl
*/
public handleItemClick(actionParam: any): void {
console.log('视图逻辑', actionParam);
const { data: uIAction} = actionParam;
if (!uIAction) {
console.warn("执行参数不足");
return;
}
// 准备参数
const inputParam = {
context: this.state.context,
viewParams: this.state.viewParams,
data: [],
event: actionParam.event,
actionEnvironment: this
};
// 执行行为
App.getAppActionService().execute(uIAction, inputParam);
}
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @return {*} * @return {*}
...@@ -59,8 +95,10 @@ export class PortletControl extends MainControl { ...@@ -59,8 +95,10 @@ export class PortletControl extends MainControl {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams, ...superParams,
load:this.useLoad.bind(this), load: this.useLoad.bind(this),
onViewEvent: this.onViewEvent.bind(this) onViewEvent: this.onViewEvent.bind(this),
onCtrlEvent: this.onCtrlEvent.bind(this),
handleItemClick: this.handleItemClick.bind(this),
}; };
} }
} }
\ No newline at end of file
...@@ -29,7 +29,7 @@ interface ViewEmit { ...@@ -29,7 +29,7 @@ interface ViewEmit {
const emit = defineEmits<ViewEmit>(); const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state } = new PortalView(viewState, props, emit).moduleInstall(); const { state, dashboard, onCtrlEvent } = new PortalView(viewState, props, emit).moduleInstall();
</script> </script>
......
...@@ -42,7 +42,7 @@ interface CtrlEmit { ...@@ -42,7 +42,7 @@ interface CtrlEmit {
const emit = defineEmits <CtrlEmit> (); const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { name, state } = new DashboardControl(ctrlState, props, emit).moduleInstall(); const { name, state, onCtrlEvent } = new DashboardControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力 // 暴露内部状态及能力
defineExpose({ name, state }); defineExpose({ name, state });
......
...@@ -12,5 +12,29 @@ export const ctrlState = { ...@@ -12,5 +12,29 @@ export const ctrlState = {
imagePath: '{{ctrl.psSysImage.imagePath}}', imagePath: '{{ctrl.psSysImage.imagePath}}',
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if ctrl.psAppDataEntity}}
// 实体名称
appEntityName: '{{ctrl.psAppDataEntity.codeName}}',
appEntityCodeName: '{{ctrl.psAppDataEntity.codeName}}',
{{/if}}
{{#if ctrl.psUIActionGroup.psUIActionGroupDetails}}
// 操作栏模型
actionBarModelData: {
{{#each ctrl.psUIActionGroup.psUIActionGroupDetails as | groupDetail |}}
{{groupDetail.psUIAction.uIActionTag}} : {
viewlogicname: '{{groupDetail.name}}',
actionName: '{{groupDetail.psUIAction.caption}}',
icon: '{{groupDetail.psUIAction.psSysImage.cssClass}}',
disabled: false, visabled: true,
dataAccessAction: {{#if groupDetail.psUIAction.dataAccessAction}}false{{else}}true{{/if}},
getNoPrivDisplayMode: {{#if groupDetail.psUIAction.noPrivDisplayMode}}groupDetail.psUIAction.noPrivDisplayMode{{else}}6{{/if}},
codeName:'{{groupDetail.psUIAction.codeName}}',
fullCodeName:'{{groupDetail.psUIAction.fullCodeName}}',
uIActionMode:'{{groupDetail.psUIAction.uIActionMode}}',
uIActionTag:'{{groupDetail.psUIAction.uIActionTag}}',
uIActionType:'{{groupDetail.psUIAction.uIActionType}}',
},
{{/each}}
},
{{/if}}
}; };
\ No newline at end of file
...@@ -2,10 +2,23 @@ ...@@ -2,10 +2,23 @@
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-portlet-state'; import { ctrlState } from './{{spinalCase ctrl.codeName}}-portlet-state';
import { PortletControl, IActionParam, IParam, IContext } from '@core'; import { PortletControl, IActionParam, IParam, IContext } from '@core';
// 引入视图start
{{#if (eq ctrl.portletType "VIEW")}}
{{#if ctrl.portletPSAppView}} {{#if ctrl.portletPSAppView}}
import {{ctrl.portletPSAppView.codeName}} from '@views/{{spinalCase ctrl.portletPSAppView.psAppModule.codeName}}/{{spinalCase ctrl.portletPSAppView.codeName}}'; import {{ctrl.portletPSAppView.codeName}} from '@views/{{spinalCase ctrl.portletPSAppView.psAppModule.codeName}}/{{spinalCase ctrl.portletPSAppView.codeName}}';
{{/if}} {{/if}}
{{/if}}
// 引入视图end
// 引入菜单start
{{#if (eq ctrl.portletType "APPMENU")}}
{{#each ctrl.psControls as | control |}}
{{#eq control.controlType "APPMENU"}}
import { {{control.codeName}}Menu } from '@widgets/app/{{spinalCase control.codeName}}-menu';
{{/eq}}
{{/each}}
{{/if}}
// 引入菜单end
interface Props { interface Props {
name:string, name:string,
...@@ -26,7 +39,7 @@ interface CtrlEmit { ...@@ -26,7 +39,7 @@ interface CtrlEmit {
const emit = defineEmits <CtrlEmit> (); const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { name, state, onViewEvent } = new PortletControl(ctrlState, props, emit).moduleInstall(); const { name, state, onViewEvent, onCtrlEvent, handleItemClick } = new PortletControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力 // 暴露内部状态及能力
defineExpose({ name, state }); defineExpose({ name, state });
...@@ -34,13 +47,13 @@ defineExpose({ name, state }); ...@@ -34,13 +47,13 @@ defineExpose({ name, state });
<template> <template>
<div class="app-portlet{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" > <div class="app-portlet{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" >
<template v-if="state.showTitleBar && state.title"> <template v-if="state.showTitleBar && state.title">
<p class='portlet-title'> <div class='portlet-title'>
<span> <span>
<i v-if="state.iconcls" :class="state.iconcls" /> <i v-if="state.iconcls" :class="state.iconcls" />
<img v-if="state.imagePath" :src="state.imagePath" /> <img v-if="state.imagePath" :src="state.imagePath" />
\{{state.title}} \{{state.title}}
</span> </span>
</p> </div>
</template> </template>
<div :class="{'portlet-with-title': state.showTitleBar, 'portlet-without-title': !state.showTitleBar}"> <div :class="{'portlet-with-title': state.showTitleBar, 'portlet-without-title': !state.showTitleBar}">
{{#if (eq ctrl.portletType 'VIEW') }} {{#if (eq ctrl.portletType 'VIEW') }}
...@@ -51,8 +64,27 @@ defineExpose({ name, state }); ...@@ -51,8 +64,27 @@ defineExpose({ name, state });
@viewEvent="onViewEvent" @viewEvent="onViewEvent"
/> />
{{else if (eq ctrl.portletType 'APPMENU')}} {{else if (eq ctrl.portletType 'APPMENU')}}
{{#each ctrl.psControls as | control |}}
<{{control.codeName}}Menu
ref="menu"
name="{{name}}"
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
menuAlign="LEFT"
:collapsed="false"
@ctrlEvent="onCtrlEvent"
></{{control.codeName}}Menu>
{{/each}}
{{else if (eq ctrl.portletType 'CUSTOM')}} {{else if (eq ctrl.portletType 'CUSTOM')}}
<div>暂未支持自定义绘制</div>
{{else if (eq ctrl.portletType 'ACTIONBAR')}} {{else if (eq ctrl.portletType 'ACTIONBAR')}}
<app-action-bar
:viewSubject="state.viewSubject"
:uiService="state.UIService"
:items="state.actionBarModelData"
@itemClick="handleItemClick"
></app-action-bar>
{{else if (eq ctrl.portletType 'TOOLBAR')}} {{else if (eq ctrl.portletType 'TOOLBAR')}}
{{else if (eq ctrl.portletType 'HTML')}} {{else if (eq ctrl.portletType 'HTML')}}
{{else if (eq ctrl.portletType 'RAWITEM')}} {{else if (eq ctrl.portletType 'RAWITEM')}}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册