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

update: 更新应用看板视图

上级 a1a28061
......@@ -12,6 +12,7 @@ import net.ibizsys.model.control.expbar.IPSExpBar;
import net.ibizsys.model.control.toolbar.IPSDETBUIActionItem;
import net.ibizsys.model.control.toolbar.IPSDEToolbar;
import net.ibizsys.model.view.IPSUIAction;
import net.ibizsys.model.control.dashboard.IPSDashboard;
import java.util.*;
......@@ -48,9 +49,18 @@ public class PageModel extends BaseModel{
if(!this.ctrlsMap.containsKey(ctrl.getId())){
this.ctrlsMap.put(ctrl.getId(),ctrl);
}
String ctrlType = ctrl.getControl().getControlType();
// 树导航栏获取数据部件
if ("TREEEXPBAR".equals(ctrl.getControl().getControlType())) {
List<IPSControl> controls = ((IPSExpBar)item).getPSControls();
if ("TREEEXPBAR".equals(ctrlType) || "DASHBOARD".equals(ctrlType)) {
List<IPSControl> controls = new ArrayList<>();
switch (ctrlType) {
case "TREEEXPBAR":
controls = ((IPSExpBar)item).getPSControls();
break;
case "DASHBOARD":
controls = ((IPSDashboard)item).getPSControls();
break;
}
if (controls.size() > 0) {
for (IPSControl control : controls) {
CtrlModel ctrlModel = new CtrlModel(appModel, control);
......
{{#*inline "PORTLET"}}{{>@macro/front-end/widgets/dashboard-detail/portlet.hbs}}{{/inline}}
\ No newline at end of file
{{#eq ctrl.psLayout.layout "FLEX"}}
<div class="app-dashboard-layout-flex" style="{{#if ctrl.psLayout.dir}}flex-direction: {{ctrl.psLayout.dir}};{{/if}}{{#if ctrl.psLayout.align}}justify-content: {{ctrl.psLayout.align}};{{/if}}{{#if ctrl.psLayout.vAlign}}align-items: {{ctrl.psLayout.vAlign}};{{/if}}">
</div>
{{else}}
<a-row class="app-dashboard-layout-table">
{{#each ctrl.PSControls as | portlet | }}
<a-col
{{> @macro/front-end/widgets/common/layout-pos.hbs item=portlet.psLayoutPos}} >
{{#eq portlet.portletType 'CONTAINER'}}
{{#if portlet.PSControls}}
<div class="portlet-card" :bordered="false" dis-hover :padding="0">
{{else}}
<div class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
{{/if}}
{{#if (and portlet.showTitleBar portlet.title)}}
<div class="portlet-card-title">\{{portlet.title}}</div>
{{/if}}
</div>
{{/if}}
</div>
{{/eq}}
</a-col>
{{/each}}
</a-row>
{{/eq}}
\ No newline at end of file
<script setup lang="ts">
</script>
<template>
<AppViewBaseLayout>
<template v-slot:header-left>
<slot name="caption" />
</template>
<template v-slot:header-right>
<slot name="toolbar" />
</template>
<template v-slot:header-bottom>
<slot name="topMessage" />
</template>
<template v-slot:body-top>
<slot name="bodyMessage" />
</template>
<slot />
<template v-slot:footer-content>
<slot name="bottomMessage" />
</template>
</AppViewBaseLayout>
</template>
<style lang="scss">
</style>
\ No newline at end of file
......@@ -9,4 +9,5 @@ export * from './pickup-view'
export * from './mpickup-view'
export * from './pickup-grid-view'
export * from './tree-exp-view'
export * from './tree-view'
\ No newline at end of file
export * from './tree-view'
export * from './portal-view'
\ No newline at end of file
export * from './portal-view-prop'
export * from './portal-view-state'
export * from './portal-view'
\ No newline at end of file
import { ViewPropsBase } from "@core";
/**
* @description 应用看板(门户)视图props
* @export
* @interface PortalViewProps
* @extends {ViewPropsBase}
*/
export interface PortalViewProps extends ViewPropsBase {
}
\ No newline at end of file
import { ViewStateBase } from "@core";
/**
* @description 应用看板(门户)视图state
* @export
* @interface PortalViewState
* @extends {ViewStateBase}
*/
export interface PortalViewState extends ViewStateBase {
}
\ No newline at end of file
import { PortalViewState, IParam, ViewBase } from '@core';
/**
* @description 应用看板(门户)视图
* @export
* @class PortalView
* @extends {PortalView}
*/
export class PortalView extends ViewBase {
/**
* 视图状态
*
* @type {PortalViewState}
* @memberof PortalView
*/
public declare state: PortalViewState;
/**
* 当前视图数据看板
*
* @type {IParam}
* @memberof PortalView
*/
public declare dashboard: IParam;
/**
* @description 处理视图初始化
*
* @memberof PortalView
*/
public useViewInit() {
// 初始化数据看板引用
this.dashboard = ref(null);
const { viewSubject } = this.state;
onMounted(() => {
const { viewParams } = this.state;
viewSubject.next({ tag: this.getDashboard().name, action: "load", data: viewParams });
})
}
/**
* 获取数据看板部件
*
* @return {*} {*}
* @memberof PortalView
*/
public getDashboard(): any {
if (this.dashboard.value) {
return this.dashboard.value;
} else {
return null;
}
}
/**
* @description 安装视图所有功能模块的方法
*
* @memberof PortalView
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
dashboard: this.dashboard
};
}
}
import { IParam, MainControlProps } from "@core";
/**
* @description 数据看板部件的props
* @export
* @interface DashboardControlProps
* @extends {MainControlProps}
*/
export interface DashboardControlProps extends MainControlProps {
}
\ No newline at end of file
import { IParam, MainControlState } from '@core';
/**
* @description 数据看板部件状态
* @export
* @interface DashboardControlState
* @extends {MainControlState}
*/
export interface DashboardControlState extends MainControlState {
}
import { IActionParam, MainControl } from '@core';
import { DashboardControlProps } from './dashboard-control-prop';
import { DashboardControlState } from './dashboard-control-state';
/**
* @description 选择视图面板部件
* @export
* @class DashboardControl
* @extends {MainControl}
*/
export class DashboardControl extends MainControl {
/**
* @description 部件状态
* @type {DashboardControlState}
* @memberof DashboardControl
*/
public declare state: DashboardControlState;
/**
* @description
* @param {DashboardControlProps} props
* @memberof DashboardControl
*/
public useLoad(props: DashboardControlProps) {
const { viewSubject, controlName, context, viewParams } = this.state;
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) {
viewSubject.next({ tag: tag, action: "load", data: data });
}
})
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
})
}
}
/**
* @description 安装部件所有功能模块的方法
* @return {*}
* @memberof DashboardControl
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
load:this.useLoad.bind(this),
};
}
}
\ No newline at end of file
export * from './dashboard-control-prop'
export * from './dashboard-control-state'
export * from './dashboard-control'
\ No newline at end of file
......@@ -11,3 +11,5 @@ export * from './tree-control'
export * from './search-form-control'
export * from './quick-search-form-control'
export * from './searchbar-control'
export * from './dashboard-control'
export * from './portlet-control'
export * from './portlet-control-prop'
export * from './portlet-control-state'
export * from './portlet-control'
\ No newline at end of file
import { MainControlProps } from "@core";
/**
* @description 门户部件参数
* @export
* @interface PortletControlProps
* @extends {MainControlProps}
*/
export interface PortletControlProps extends MainControlProps {
}
\ No newline at end of file
import { IParam, MainControlState } from '@core';
/**
* @description 门户部件状态
* @export
* @interface PortletControlState
* @extends {MainControlState}
*/
export interface PortletControlState extends MainControlState {
}
\ No newline at end of file
import { IActionParam, MainControl } from '@core';
import { PortletControlProps } from './portlet-control-prop';
import { PortletControlState } from './portlet-control-state';
/**
* @description 门户部件
* @export
* @class PortletControl
* @extends {MainControl}
*/
export class PortletControl extends MainControl {
/**
* @description 部件状态
* @type {PortletControlState}
* @memberof PortletControl
*/
public declare state: PortletControlState;
/**
* @description 加载
* @param {PortletControlProps} props
* @memberof PortletControl
*/
public useLoad(props: PortletControlProps) {
const { viewSubject, controlName, context, viewParams } = this.state;
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) {
viewSubject.next({ tag: tag, action: "load", data: data });
}
})
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
})
}
}
/**
* 部件事件
*
* @param {IActionParam} actionParam
* @memberof PortletControl
*/
public onViewEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
const { controlName } = this.state;
}
/**
* @description 安装部件所有功能模块的方法
* @return {*}
* @memberof PortletControl
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
load:this.useLoad.bind(this),
onViewEvent: this.onViewEvent.bind(this)
};
}
}
\ No newline at end of file
import {{page.codeName}} from "./{{spinalCase page.codeName}}.vue";
export default {{page.codeName}};
<script setup lang="ts">
import { Subject } from 'rxjs';
import { PortalView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "DASHBOARD"}}
import { {{codeName}}Dashboard } from '@widgets/app/{{spinalCase codeName}}-dashboard';
{{/eq}}
{{/page.ctrls}}
// props声明和默认值处理
interface Props {
context?: IContext;
viewParams?: IParam;
openType?: "ROUTE" | "MODAL" | "EMBED";
viewSubject?: Subject<IActionParam>;
}
const props = withDefaults(defineProps<Props>(), {
openType:'ROUTE',
viewSubject: () => new Subject<IActionParam>()
})
// emit声明
interface ViewEmit {
(name: "onViewEvent", value: IActionParam): void;
}
const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法
const { state } = new PortalView(viewState, props, emit).moduleInstall();
</script>
<template>
<AppPortalViewLayout :class="['app-edit-view', state.viewSysCss]">
<template v-slot:caption>
<AppIconText
class="app-view__caption"
size="large"
:subCaption="state.subCaption"
:showCaptionBar="state.showCaptionBar"
:text="state.viewCaption"
/>
</template>
{{#page.ctrls}}
{{#eq controlType "DASHBOARD"}}
<{{codeName}}Dashboard
ref="dashboard"
name="{{name}}"
:context="state.context"
:viewParams="state.viewParams"
:controlAction="state.{{name}}.action"
:viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}Dashboard>
{{/eq}}
{{/page.ctrls}}
</AppPortalViewLayout>
</template>
<style lang="scss">
</style>
\ No newline at end of file
import {{ctrl.codeName}}Dashboard from "./{{spinalCase ctrl.codeName}}-dashboard.vue";
export { {{ctrl.codeName}}Dashboard };
// 部件配置对象
export const ctrlState = {
controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}',
isEnableCustomized: {{ctrl.enableCustomized}},
};
\ No newline at end of file
<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-dashboard-state';
import { DashboardControl, IActionParam, IParam, IContext } from '@core';
{{#each ctrl.psControls as | control |}}
{{#neq portletType "CONTAINER"}}
{{#if control.psAppDataEntity}}
import { {{codeName}}Portlet } from '@widgets/{{spinalCase control.psAppDataEntity.codeName}}/{{spinalCase codeName}}-portlet';
{{else}}
import { {{codeName}}Portlet } from '@widgets/app/{{spinalCase codeName}}-portlet';
{{/if}}
{{/neq}}
{{/each}}
interface Props {
name:string,
context: IContext;
viewParams?: IParam;
viewSubject: Subject<IActionParam>;
}
const props = withDefaults(defineProps < Props > (), {
viewSubject: () => new Subject < IActionParam > (),
})
// emit声明
interface CtrlEmit {
(name: "ctrlEvent", value: IActionParam): void;
}
const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法
const { state } = new DashboardControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
<div class="app-dashboard{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
{{#if (eq ctrl.enableCustomized false)}}
{{#eq ctrl.psLayout.layout "FLEX"}}
<div class="app-dashboard-layout-flex" style="{{#if ctrl.psLayout.dir}}flex-direction: {{ctrl.psLayout.dir}};{{/if}}{{#if ctrl.psLayout.align}}justify-content: {{ctrl.psLayout.align}};{{/if}}{{#if ctrl.psLayout.vAlign}}align-items: {{ctrl.psLayout.vAlign}};{{/if}}">
</div>
{{else}}
<a-row class="app-dashboard-layout-table">
{{#each ctrl.psPortlets as | portlet | }}
<a-col
{{> @macro/front-end/widgets/common/layout-pos.hbs item=portlet.psLayoutPos}} >
{{#eq portlet.portletType 'CONTAINER'}}
{{#if portlet.psPortlets}}
<div class="portlet-card" :bordered="false" dis-hover :padding="0">
{{else}}
<div class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
{{/if}}
{{#if (and portlet.showTitleBar portlet.title)}}
<div class="portlet-card-title">{{portlet.title}}</div>
{{/if}}
{{#each portlet.psPortlets as | item | }}
{{#eq item.psLayout.layout "FLEX"}}
<div class="app-dashboard-layout-flex" style="{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
</div>
{{else}}
<a-row class="app-dashboard-layout-table">
<a-col
{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
<{{codeName}}Portlet
ref="portlet"
name="{{item.name}}"
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}Portlet>
</a-col>
</a-row>
{{/eq}}
{{/each}}
</div>
{{else}}
<{{codeName}}Portlet
ref="portlet"
name="{{name}}"
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}Portlet>
{{/eq}}
</a-col>
{{/each}}
</a-row>
{{/eq}}
{{/if}}
</div>
</template>
<style lang="scss">
</style>
\ No newline at end of file
import {{ctrl.codeName}}Portlet from "./{{spinalCase ctrl.codeName}}-portlet.vue";
export { {{ctrl.codeName}}Portlet };
// 部件配置对象
export const ctrlState = {
controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}',
};
\ No newline at end of file
<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-portlet-state';
import { PortletControl, IActionParam, IParam, IContext } from '@core';
interface Props {
name:string,
context: IContext;
viewParams?: IParam;
viewSubject: Subject<IActionParam>;
}
const props = withDefaults(defineProps < Props > (), {
viewSubject: () => new Subject < IActionParam > (),
})
// emit声明
interface CtrlEmit {
(name: "ctrlEvent", value: IActionParam): void;
}
const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法
const { state } = new PortletControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
<div>portlet</div>
</template>
<style lang="scss">
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册