提交 8aaf05fe 编写于 作者: WodahsOrez's avatar WodahsOrez

update: 添加分页导航视图

上级 e226fb12
......@@ -9,6 +9,7 @@ import lombok.experimental.Accessors;
import net.ibizsys.model.app.view.IPSAppView;
import net.ibizsys.model.control.IPSControl;
import net.ibizsys.model.control.expbar.IPSExpBar;
import net.ibizsys.model.control.expbar.IPSTabExpPanel;
import net.ibizsys.model.control.toolbar.IPSDETBUIActionItem;
import net.ibizsys.model.control.toolbar.IPSDEToolbar;
import net.ibizsys.model.view.IPSUIAction;
......@@ -51,7 +52,7 @@ public class PageModel extends BaseModel{
}
String ctrlType = ctrl.getControl().getControlType();
// 树导航栏获取数据部件
if ("TREEEXPBAR".equals(ctrlType) || "DASHBOARD".equals(ctrlType)) {
if ("TREEEXPBAR".equals(ctrlType) || "DASHBOARD".equals(ctrlType) || "TABEXPPANEL".equals(ctrlType)) {
List<IPSControl> controls = new ArrayList<>();
switch (ctrlType) {
case "TREEEXPBAR":
......@@ -60,6 +61,9 @@ public class PageModel extends BaseModel{
case "DASHBOARD":
controls = ((IPSDashboard)item).getPSControls();
break;
case "TABEXPPANEL":
controls = ((IPSTabExpPanel)item).getPSControls();
break;
}
if (controls.size() > 0) {
for (IPSControl control : controls) {
......
......@@ -11,3 +11,4 @@ export * from './pickup-grid-view'
export * from './tree-exp-view'
export * from './tree-view'
export * from './portal-view'
export * from './tab-exp-view'
......@@ -52,19 +52,6 @@ export class MainView extends ViewBase {
AppActionService.getInstance().execute(uIAction, inputParam);
}
/**
* 处理部件事件
*
* @param {IActionParam} actionParam
* @memberof MainView
*/
public onCtrlEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
if (Object.is(action, 'closeView')) {
this.closeView();
}
}
/**
* @description 安装视图所有功能模块的方法
*
......@@ -76,7 +63,6 @@ export class MainView extends ViewBase {
...superParams,
xDataControl: this.xDataControl,
onToolbarEvent: this.onToolbarEvent.bind(this),
onCtrlEvent: this.onCtrlEvent.bind(this),
};
}
}
export * from './tab-exp-view-prop';
export * from './tab-exp-view-state';
export { TabExpView } from './tab-exp-view';
\ No newline at end of file
import { ExpViewProps } from "@core";
/**
* @description 树导航视图props
* @export
* @interface TabExpViewProps
* @extends {ExpViewProps}
*/
export interface TabExpViewProps extends ExpViewProps {}
import { ExpViewState } from "@core";
/**
* @description 树导航视图状态
* @export
* @interface TabExpViewState
* @extends {ExpViewState}
*/
export interface TabExpViewState extends ExpViewState {}
\ No newline at end of file
import { ExpView } from "@core";
import { TabExpViewProps } from "./tab-exp-view-prop";
import { TabExpViewState } from "./tab-exp-view-state";
/**
* @description 分页导航视图
* @export
* @class TabExpView
* @extends {ExpView}
*/
export class TabExpView extends ExpView {
/**
* @description 视图状态
* @type {TabExpViewState}
* @memberof TabExpView
*/
public declare state: TabExpViewState;
/**
* @description 安装视图所有功能模块的方法
* @return {*}
* @memberof TabExpView
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams
};
}
}
\ No newline at end of file
......@@ -204,6 +204,18 @@ export class ViewBase {
*/
public useCounterService() { }
/**
* 处理部件事件
*
* @param {IActionParam} actionParam
* @memberof ViewBase
*/
public onCtrlEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
if (Object.is(action, 'closeView')) {
this.closeView();
}
}
/**
* @description 安装视图所有功能模块的方法
......@@ -224,7 +236,8 @@ export class ViewBase {
// 处理视图初始化
this.useViewInit();
return {
state: this.state
state: this.state,
onCtrlEvent: this.onCtrlEvent.bind(this),
};
}
}
......@@ -82,6 +82,14 @@ export class ControlBase {
this.emit('ctrlEvent', { tag: this.props.name, action: 'closeView', data: undefined });
}
/**
* 处理部件事件
*
* @param {IActionParam} actionParam
* @memberof ControlBase
*/
public onCtrlEvent(actionParam: IActionParam) {}
/**
* @description 安装部件所有功能模块的方法
* @param {ControlPropsBase} props 传入的Props
......@@ -94,7 +102,8 @@ export class ControlBase {
this.useControlContextParams();
return {
state: this.state,
getData: this.getData
getData: this.getData.bind(this),
onCtrlEvent: this.onCtrlEvent.bind(this),
};
}
}
......@@ -13,3 +13,5 @@ export * from './quick-search-form-control'
export * from './searchbar-control'
export * from './dashboard-control'
export * from './portlet-control'
export * from './tab-exp-panel-control'
export * from './tab-view-panel-control'
......@@ -20,8 +20,8 @@ export class SearchBarControl extends MainControl {
* @param {SearchBarControlProps} props
* @memberof SearchBarControl
*/
public setState(props: SearchBarControlState) {
super.setState(props);
public setState() {
super.setState();
this.state.filterFields = Object.values(this.state.detailsModel);
this.state.filterItems = [];
}
......@@ -33,8 +33,8 @@ export class SearchBarControl extends MainControl {
* @return {*}
* @memberof SearchBarControl [emit] 事件
*/
public moduleInstall(props: SearchBarControlProps, emit?: Function) {
const superParams = super.moduleInstall(props, emit);
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
state: this.state,
......
export * from './tab-exp-panel-control-prop'
export * from './tab-exp-panel-control-state'
export * from './tab-exp-panel-control'
\ No newline at end of file
import { IParam, MainControlProps } from "@core";
/**
* @description 搜索栏部件的props
* @export
* @interface TabExpPanelControlProps
* @extends {MainControlProps}
*/
export interface TabExpPanelControlProps extends MainControlProps {
}
\ No newline at end of file
import { IParam, MainControlState } from '@core';
/**
* @description 搜索栏部件状态
* @export
* @interface TabExpPanelControlState
* @extends {MainControlState}
*/
export interface TabExpPanelControlState extends MainControlState {
}
\ No newline at end of file
import { UIUtil, deepCopy, IActionParam, IParam, MainControl, TabExpPanelControlState, TabExpPanelControlProps } from '@core';
/**
* @description 分页导航部件
* @export
* @class TabExpPanelControl
* @extends {MainControl}
*/
export class TabExpPanelControl extends MainControl {
/**
* @description 部件状态
* @type {TabExpPanelControlState}
* @memberof TabExpPanelControl
*/
public declare state: TabExpPanelControlState;
/**
* @description 安装部件所有功能模块的方法
* @param {TabExpPanelControlProps} props
* @param {Function} [emit]
* @return {*}
* @memberof TabExpPanelControl [emit] 事件
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
state: this.state,
};
}
}
\ No newline at end of file
export * from './tab-view-panel-control-prop'
export * from './tab-view-panel-control-state'
export * from './tab-view-panel-control'
\ No newline at end of file
import { MainControlProps } from "@core";
/**
* @description 选择视图面板部件参数
* @export
* @interface TabViewPanelControlProps
* @extends {MainControlProps}
*/
export interface TabViewPanelControlProps extends MainControlProps {
}
\ No newline at end of file
import { IParam, MainControlState } from '@core';
/**
* @description 选择视图面板通讯对象
* @export
* @interface TabViewPanelControlState
* @extends {MainControlState}
*/
export interface TabViewPanelControlState extends MainControlState {
}
\ No newline at end of file
import { IActionParam, MainControl } from '@core';
import { TabViewPanelControlProps } from './tab-view-panel-control-prop';
import { TabViewPanelControlState } from './tab-view-panel-control-state';
/**
* @description 分页视图面板部件
* @export
* @class TabViewPanelControl
* @extends {MainControl}
*/
export class TabViewPanelControl extends MainControl {
/**
* @description 部件状态
* @type {FormControlState}
* @memberof TabViewPanelControl
*/
public declare state: TabViewPanelControlState;
/**
* @description 安装部件所有功能模块的方法
* @return {*}
* @memberof TabViewPanelControl
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
};
}
}
\ No newline at end of file
......@@ -18,7 +18,13 @@ const routes = [
{{#if appEntityResource.appDataEntity.allPSAppViews}}
{{#each appEntityResource.appDataEntity.allPSAppViews as |appView|}}
{{#if (eq appView.getRefFlag true)}}
{{#if (or (eq appView.viewType 'DEEDITVIEW') (eq appView.viewType 'DEGRIDVIEW') (eq appView.viewType 'DETREEEXPVIEW') (eq appView.viewType 'DETREEVIEW'))}}
{{#if (or
(eq appView.viewType 'DEEDITVIEW')
(eq appView.viewType 'DEGRIDVIEW')
(eq appView.viewType 'DETREEEXPVIEW')
(eq appView.viewType 'DETREEVIEW')
(eq appView.viewType 'DETABEXPVIEW')
) }}
{
path: "{{appEntityResource.path}}/views/{{lowerCase appView.codeName}}",
meta: {
......
import {{page.codeName}} from "./{{spinalCase page.codeName}}.vue";
export default {{page.codeName}};
export const viewState = {
{{> @macro/front-end/views/view-base-config.hbs}}
};
\ No newline at end of file
<script setup lang="ts">
import { Subject } from 'rxjs';
import { PickupView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "TABEXPPANEL"}}
import { {{codeName}}TabExpPanel } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-tab-exp-panel';
{{/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: "viewEvent", value: IActionParam): void;
}
const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法
const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(viewState, props, emit).moduleInstall();
</script>
<template>
<AppPickupViewLayout :class="['app-tab-exp-view', state.viewSysCss]">
<template #caption>
<AppIconText class="app-view__caption" size="large" :text="state.viewCaption" />
</template>
{{#page.ctrls}}
{{#eq controlType "TOOLBAR"}}
<template v-slot:toolbar>
<AppToolbar
mode="button"
name="{{lowerCase codeName}}"
:actionModel="state.viewToolbarModel"
@onToolbarEvent="onToolbarEvent"/>
</template>
{{/eq}}
{{#eq controlType "TABEXPPANEL"}}
<{{codeName}}TabExpPanel
name="{{name}}"
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
@onCtrlEvent="onCtrlEvent"
></{{codeName}}TabExpPanel>
{{/eq}}
{{/page.ctrls}}
</AppPickupViewLayout>
</template>
\ No newline at end of file
......@@ -45,6 +45,8 @@ defineExpose({ state, name: '{{ctrl.name}}' });
<div class="app-pickup-view-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
{{#if ctrl.embeddedPSAppDEView}}
<{{ctrl.embeddedPSAppDEView.codeName}}
:context="state.context"
:viewParams="state.viewParams"
:isShowButton="state.isShowButton"
:selectedData="state.selectedData"
:viewSubject="state.viewSubject"
......
import {{ctrl.codeName}}TabExpPanel from "./{{spinalCase ctrl.codeName}}-tab-exp-panel.vue";
export { {{ctrl.codeName}}TabExpPanel };
export const ctrlState = {
controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}',
data: {},
};
\ No newline at end of file
<script setup lang="ts">
import { Subject } from 'rxjs';
import { IActionParam, IParam, ControlAction, TabExpPanelControl, IContext } from '@core';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-tab-exp-panel-state';
{{#each ctrl.psControls as |viewPanel| }}
import { {{codeName}}TabViewPanel } from '@widgets/{{spinalCase viewPanel.psAppDataEntity.codeName}}/{{spinalCase codeName}}-tab-view-panel';
{{/each}}
interface Props {
name:string,
context: IContext;
viewParams?: IParam;
showBusyIndicator?: boolean;
selectedData?: string;
viewSubject: Subject<IActionParam>;
}
const props = withDefaults(defineProps < Props > (), {
viewSubject: () => new Subject < IActionParam > (),
showBusyIndicator: true,
})
// emit声明
interface CtrlEmit {
(name: "onCtrlEvent", value: IActionParam): void;
}
const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法
const { state, onCtrlEvent } = new TabExpPanelControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
<div class="app-tab-exp-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
{{#if ctrl.psControls}}
<a-tabs class="app-tab-exp-panel__tabs">
{{#each ctrl.psControls as |viewPanel| }}
<a-tab-pane {{#if viewPanel.psSysCss}}class="{{viewPanel.psSysCss.cssName}}"{{/if}} key="{{viewPanel.codeName}}">
<template #tab>
<AppIconText {{#if viewPanel.psSysImage}}{{#if viewPanel.psSysImage.cssClass}}:iconClass="{{viewPanel.psSysImage.cssClass}}" {{/if}}{{#if viewPanel.psSysImage.imagePath}}:imgPath="{{viewPanel.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{viewPanel.caption}}"/>
</template>
<{{viewPanel.codeName}}TabViewPanel
name="{{name}}"
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
@onCtrlEvent="onCtrlEvent"
/>
</a-tab-pane>
{{/each}}
</a-tabs>
{{else}}
<div class="app-tab-exp-panel--empty">视图不存在,请配置分页视图</div>
{{/if}}
</div>
</template>
\ No newline at end of file
import {{ctrl.codeName}}TabViewPanel from "./{{spinalCase ctrl.codeName}}-tab-view-panel.vue";
export { {{ctrl.codeName}}TabViewPanel };
export const ctrlState = {
controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}',
data: {},
};
\ No newline at end of file
<script setup lang="ts">
import { Subject } from 'rxjs';
import { IActionParam, IParam, ControlAction, TabViewPanelControl, IContext } from '@core';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-tab-view-panel-state';
{{#if ctrl.embeddedPSAppDEView}}
import {{ctrl.embeddedPSAppDEView.codeName}} from '@views/{{spinalCase ctrl.embeddedPSAppDEView.psAppModule.codeName}}/{{spinalCase ctrl.embeddedPSAppDEView.codeName}}';
{{/if}}
interface Props {
name:string,
context: IContext;
viewParams?: IParam;
showBusyIndicator?: boolean;
viewSubject: Subject<IActionParam>;
}
const props = withDefaults(defineProps < Props > (), {
viewSubject: () => new Subject < IActionParam > (),
showBusyIndicator: true,
})
// emit声明
interface CtrlEmit {
(name: "onCtrlEvent", value: IActionParam): void;
}
const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法
const { state, onViewEvent } = new TabViewPanelControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
<div class="app-tab-view-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
{{#if ctrl.embeddedPSAppDEView}}
<{{ctrl.embeddedPSAppDEView.codeName}}
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
@viewEvent="onViewEvent"
/>
{{else}}
<div class="app-tab-view-panel--empty">视图不存在,请配置选择视图</div>
{{/if}}
</div>
</template>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册