提交 459e1d7c 编写于 作者: Mosher's avatar Mosher

update:更新门户部件

上级 1172dead
<AppPortletCard <AppPortletCard
name={{portlet.name}} name="{{portlet.name}}"
:isContainer="true" :isContainer="true"
{{#if portlet.caption}} {{#if portlet.caption}}
title="{{portlet.caption}}" title="{{portlet.caption}}"
......
import { IParam, MainControlState } from '@core'; import { MainControlState } from '@core';
/** /**
* @description 数据看板部件状态 * @description 数据看板部件状态
...@@ -7,5 +7,11 @@ import { IParam, MainControlState } from '@core'; ...@@ -7,5 +7,11 @@ import { IParam, MainControlState } from '@core';
* @extends {MainControlState} * @extends {MainControlState}
*/ */
export interface DashboardControlState extends MainControlState { export interface DashboardControlState extends MainControlState {
/**
* 门户部件标识集合
*
* @type {string[]}
* @memberof DashboardControlState
*/
portlets: string[];
} }
...@@ -22,13 +22,17 @@ export class DashboardControl extends MainControl { ...@@ -22,13 +22,17 @@ export class DashboardControl extends MainControl {
* @param {DashboardControlProps} props * @param {DashboardControlProps} props
* @memberof DashboardControl * @memberof DashboardControl
*/ */
public useLoad(props: DashboardControlProps) { public useLoad() {
const { viewSubject, controlName, context, viewParams } = this.state; const { viewSubject, controlName, context, viewParams, portlets } = this.state;
// 订阅viewSubject,监听load行为 // 订阅viewSubject,监听load行为
if (viewSubject) { if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => { let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) { if (Object.is(controlName, tag) && Object.is("load", action)) {
viewSubject.next({ tag: tag, action: "load", data: data }); if (portlets.length) {
portlets.forEach((portlet: string) => {
viewSubject.next({ tag: portlet, action: "load", data: data });
});
}
} }
}) })
// 部件卸载时退订viewSubject // 部件卸载时退订viewSubject
...@@ -56,9 +60,9 @@ export class DashboardControl extends MainControl { ...@@ -56,9 +60,9 @@ export class DashboardControl extends MainControl {
*/ */
public moduleInstall() { public moduleInstall() {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
this.useLoad();
return { return {
...superParams, ...superParams,
load:this.useLoad.bind(this),
onCtrlEvent: this.onCtrlEvent.bind(this), onCtrlEvent: this.onCtrlEvent.bind(this),
}; };
} }
......
import { IParam, MainControlState } from '@core'; import { MainControlState } from '@core';
/** /**
* @description 门户部件状态 * @description 门户部件状态
...@@ -7,5 +7,11 @@ import { IParam, MainControlState } from '@core'; ...@@ -7,5 +7,11 @@ import { IParam, MainControlState } from '@core';
* @extends {MainControlState} * @extends {MainControlState}
*/ */
export interface PortletControlState extends MainControlState { export interface PortletControlState extends MainControlState {
/**
* 子部件标识集合
*
* @type {string[]}
* @memberof PortletControlState
*/
childControls: string[];
} }
\ No newline at end of file
...@@ -22,13 +22,17 @@ export class PortletControl extends MainControl { ...@@ -22,13 +22,17 @@ export class PortletControl extends MainControl {
* @param {PortletControlProps} props * @param {PortletControlProps} props
* @memberof PortletControl * @memberof PortletControl
*/ */
public useLoad(props: PortletControlProps) { public useLoad() {
const { viewSubject, controlName, context, viewParams } = this.state; const { viewSubject, controlName, context, viewParams, childControls } = this.state;
// 订阅viewSubject,监听load行为 // 订阅viewSubject,监听load行为
if (viewSubject) { if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => { let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) { if (Object.is(controlName, tag) && Object.is("load", action)) {
viewSubject.next({ tag: tag, action: "load", data: data }); if (childControls.length) {
childControls.forEach((control: string) => {
viewSubject.next({ tag: control, action: "load", data: data });
});
}
} }
}) })
// 部件卸载时退订viewSubject // 部件卸载时退订viewSubject
...@@ -115,11 +119,10 @@ export class PortletControl extends MainControl { ...@@ -115,11 +119,10 @@ export class PortletControl extends MainControl {
*/ */
public moduleInstall() { public moduleInstall() {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
this.useLoad();
return { return {
...superParams, ...superParams,
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), handleItemClick: this.handleItemClick.bind(this),
handleActionClick: this.handleActionClick.bind(this), handleActionClick: this.handleActionClick.bind(this),
}; };
......
...@@ -33,8 +33,13 @@ defineExpose({ name, state, load }); ...@@ -33,8 +33,13 @@ defineExpose({ name, state, load });
<div v-if="Object.is('CENTER', state.menuAlign)" class="app-menu app-menu--center{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"> <div v-if="Object.is('CENTER', state.menuAlign)" class="app-menu app-menu--center{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
<AppMenuCenter :menus="state.menus" @onMenuSelect="onMenuSelect" :counterData="counterData" /> <AppMenuCenter :menus="state.menus" @onMenuSelect="onMenuSelect" :counterData="counterData" />
</div> </div>
<a-menu v-else class="app-menu{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" v-model:openKeys="state.defaultOpens" v-model:selectedKeys="state.defaultSelect" <a-menu
:mode="Object.is('LEFT', state.menuAlign) ? 'inline' : 'horizontal'" @select="onMenuSelect"> v-else
v-model:openKeys="state.defaultOpens"
v-model:selectedKeys="state.defaultSelect"
:mode="Object.is('LEFT', state.menuAlign) ? 'inline' : 'horizontal'"
class="app-menu{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
@select="onMenuSelect">
<AppMenuItem :items="state.menus" :collapsed="collapsed" :counterData="counterData" /> <AppMenuItem :items="state.menus" :collapsed="collapsed" :counterData="counterData" />
</a-menu> </a-menu>
</template> </template>
......
{{#*inline "getPortlet" portlet}}
{{~#eq portlet.portletType 'CONTAINER'~}}
{{#if portlet.psControls}}
{{~#each portlet.psControls as | control |~}}
{{> getPortlet portlet=control}}{{#unless @last}},{{/unless}}
{{~/each~}}
{{/if}}
{{~else~}}
'{{portlet.name}}'
{{~/eq~}}
{{/inline}}
// 部件配置对象 // 部件配置对象
export const ctrlState = { export const ctrlState = {
controlCodeName: '{{ctrl.codeName}}', controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}', controlName: '{{ctrl.name}}',
isEnableCustomized: {{ctrl.enableCustomized}}, isEnableCustomized: {{ctrl.enableCustomized}},
portlets: [
{{~#each ctrl.psControls as | portlet |~}}
{{> getPortlet portlet=portlet}}{{#unless @last}},{{/unless}}
{{~/each~}}
]
}; };
\ No newline at end of file
...@@ -38,7 +38,7 @@ const { name, state, onCtrlEvent } = dashboardControl; ...@@ -38,7 +38,7 @@ const { name, state, onCtrlEvent } = dashboardControl;
defineExpose({ name, state }); defineExpose({ name, state });
</script> </script>
<template> <template>
<AppRow class="app-dashboard{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=ctrl.psLayout layoutPos=ctrl.psLayoutPos}}"> <AppRow class="app-dashboard{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=ctrl.psLayout layoutPos=ctrl.psLayoutPos}}">
<template v-if="!state.isEnableCustomized"> <template v-if="!state.isEnableCustomized">
{{#each ctrl.psControls as |portlet|}} {{#each ctrl.psControls as |portlet|}}
{{#eq portlet.portletType 'CONTAINER'}} {{#eq portlet.portletType 'CONTAINER'}}
......
...@@ -4,6 +4,13 @@ export const ctrlState = { ...@@ -4,6 +4,13 @@ export const ctrlState = {
controlName: '{{ctrl.name}}', controlName: '{{ctrl.name}}',
portletType: '{{ctrl.portletType}}', portletType: '{{ctrl.portletType}}',
showCaption: {{ctrl.showTitleBar}}, showCaption: {{ctrl.showTitleBar}},
childControls: [
{{~#if ctrl.psControls~}}
{{~#each ctrl.psControls as | control |~}}
'{{control.name}}'
{{~/each~}}
{{~/if~}}
],
{{#if ctrl.psAppDataEntity}} {{#if ctrl.psAppDataEntity}}
// 实体名称 // 实体名称
appEntityCodeName: '{{ctrl.psAppDataEntity.codeName}}', appEntityCodeName: '{{ctrl.psAppDataEntity.codeName}}',
......
...@@ -81,15 +81,16 @@ defineExpose({ name, state }); ...@@ -81,15 +81,16 @@ defineExpose({ name, state });
</template> </template>
</span> </span>
</template> </template>
{{#if (eq ctrl.portletType 'VIEW')}} {{#eq ctrl.portletType 'VIEW'}}
<{{ctrl.portletPSAppView.codeName}} <{{ctrl.portletPSAppView.codeName}}
:context="state.context" :context="state.context"
:viewParams="state.viewParams" :viewParams="state.viewParams"
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
@viewEvent="onViewEvent" @viewEvent="onViewEvent"
/> />
{{else if (eq ctrl.portletType 'APPMENU')}} {{/eq}}
{{#each ctrl.psControls as | control |}} {{#eq ctrl.portletType 'APPMENU'}}
{{#each ctrl.psControls as | control |}}
<{{control.codeName}}Menu <{{control.codeName}}Menu
ref="menu" ref="menu"
name="{{name}}" name="{{name}}"
...@@ -100,21 +101,26 @@ defineExpose({ name, state }); ...@@ -100,21 +101,26 @@ defineExpose({ name, state });
:collapsed="false" :collapsed="false"
@ctrlEvent="onCtrlEvent" @ctrlEvent="onCtrlEvent"
></{{control.codeName}}Menu> ></{{control.codeName}}Menu>
{{/each}} {{/each}}
{{else if (eq ctrl.portletType 'CUSTOM')}} {{/eq}}
{{#eq ctrl.portletType 'CUSTOM'}}
<div>暂未支持自定义绘制</div> <div>暂未支持自定义绘制</div>
{{else if (eq ctrl.portletType 'ACTIONBAR')}} {{/eq}}
{{#eq ctrl.portletType 'ACTIONBAR'}}
<app-action-bar <app-action-bar
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
:uiService="state.UIService" :uiService="state.UIService"
:items="state.actionBarModelData" :items="state.actionBarModelData"
@itemClick="handleItemClick" @itemClick="handleItemClick"
></app-action-bar> ></app-action-bar>
{{else if (eq ctrl.portletType 'TOOLBAR')}} {{/eq}}
{{#eq ctrl.portletType 'TOOLBAR'}}
<div>暂未支持工具栏绘制</div> <div>暂未支持工具栏绘制</div>
{{else if (eq ctrl.portletType 'HTML')}} {{/eq}}
{{#eq ctrl.portletType 'HTML'}}
<iframe :src="state.pageUrl" :style="{ height: '100%', width: '100%', borderWidth: '0px' }"></iframe> <iframe :src="state.pageUrl" :style="{ height: '100%', width: '100%', borderWidth: '0px' }"></iframe>
{{else if (eq ctrl.portletType 'RAWITEM')}} {{/eq}}
{{#eq ctrl.portletType 'RAWITEM'}}
<app-raw <app-raw
:name="state.controlName" :name="state.controlName"
:contentType="state.contentType" :contentType="state.contentType"
...@@ -123,8 +129,9 @@ defineExpose({ name, state }); ...@@ -123,8 +129,9 @@ defineExpose({ name, state });
style="{{#if ctrl.rawItemHeight}}height: {{ctrl.rawItemHeight}}px;{{/if}}{{#if ctrl.rawItemWidth}}width: {{ctrl.rawItemWidth}}px{{/if}}" style="{{#if ctrl.rawItemHeight}}height: {{ctrl.rawItemHeight}}px;{{/if}}{{#if ctrl.rawItemWidth}}width: {{ctrl.rawItemWidth}}px{{/if}}"
:value="state.rawContent" :value="state.rawContent"
></app-raw> ></app-raw>
{{else if (eq ctrl.portletType 'LIST')}} {{/eq}}
{{#ctrl.psControls}} {{#eq ctrl.portletType 'LIST'}}
{{#ctrl.psControls}}
<{{codeName}}List <{{codeName}}List
ref="portlet" ref="portlet"
name="{{name}}" name="{{name}}"
...@@ -134,8 +141,8 @@ defineExpose({ name, state }); ...@@ -134,8 +141,8 @@ defineExpose({ name, state });
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"> @ctrlEvent="onCtrlEvent">
</{{codeName}}List> </{{codeName}}List>
{{/ctrl.psControls}} {{/ctrl.psControls}}
{{/if}} {{/eq}}
</AppPortletCard> </AppPortletCard>
</template> </template>
<style lang="scss"> <style lang="scss">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册