提交 55bad5b2 编写于 作者: WodahsOrez's avatar WodahsOrez

update: 分页导航视图细化

上级 2f391f52
import { ExpViewState } from "@core";
import { ExpViewState } from '@core';
/**
* @description 树导航视图状态
......@@ -6,4 +6,9 @@ import { ExpViewState } from "@core";
* @interface TabExpViewState
* @extends {ExpViewState}
*/
export interface TabExpViewState extends ExpViewState {}
\ No newline at end of file
export interface TabExpViewState extends ExpViewState {
/**
* 默认打开的分页name
*/
defaultActivePanel?: string;
}
import { ExpView } from "@core";
import { TabExpViewProps } from "./tab-exp-view-prop";
import { TabExpViewState } from "./tab-exp-view-state";
import { ExpView, isExist } from '@core';
import { TabExpViewProps } from './tab-exp-view-prop';
import { TabExpViewState } from './tab-exp-view-state';
/**
* @description 分页导航视图
......@@ -9,7 +9,6 @@ import { TabExpViewState } from "./tab-exp-view-state";
* @extends {ExpView}
*/
export class TabExpView extends ExpView {
/**
* @description 视图状态
* @type {TabExpViewState}
......@@ -17,6 +16,16 @@ export class TabExpView extends ExpView {
*/
public declare state: TabExpViewState;
/**
*【内置功能】提供通过viewparams里的srfDefaultPanel指定默认打开的分页的功能
*/
public useDefaultPanel() {
const { srfDefaultPanel } = this.state.viewParams;
if (isExist(srfDefaultPanel)) {
this.state.defaultActivePanel = srfDefaultPanel;
}
}
/**
* @description 安装视图所有功能模块的方法
* @return {*}
......@@ -24,8 +33,9 @@ export class TabExpView extends ExpView {
*/
public moduleInstall() {
const superParams = super.moduleInstall();
this.useDefaultPanel()
return {
...superParams
...superParams,
};
}
}
......@@ -7,5 +7,14 @@ import { IParam, MainControlProps } from "@core";
* @extends {MainControlProps}
*/
export interface TabExpPanelControlProps extends MainControlProps {
/**
* 分页栏显示位置
* 目前支持上,下,左,右
*/
tabPosition: "left" | "right" | "top" | "bottom";
/**
* 默认打开的分页name
*/
defaultActivePanel?: string;
}
\ No newline at end of file
......@@ -8,4 +8,17 @@ import { IParam, MainControlState } from '@core';
*/
export interface TabExpPanelControlState extends MainControlState {
/**
* 分页栏显示位置
* 目前支持上,下,左,右
*
*/
tabPosition: "left" | "right" | "top" | "bottom";
/**
* 当前激活的分页的name
*
*/
activePanel: string;
}
\ No newline at end of file
......@@ -15,6 +15,15 @@ export class TabExpPanelControl extends MainControl {
*/
public declare state: TabExpPanelControlState;
/**
* @memberof TabExpPanelControl
*/
public setState() {
super.setState();
this.state.tabPosition = toRef(this.props, 'tabPosition') as any;
this.state.activePanel = this.props.defaultActivePanel;
}
/**
* @description 安装部件所有功能模块的方法
* @param {TabExpPanelControlProps} props
......
// 分页导航面板部件
// 高度自适应
.app-tab-exp-panel{
height: 100%;
}
.app-tab-exp-panel__tabs{
height: 100%;
.ant-tabs-content{
height: 100%;
}
}
\ No newline at end of file
// 分页视图面板部件
.app-tab-view-panel{
height: 100%;
}
\ No newline at end of file
......@@ -2,3 +2,5 @@
@use './search-form.scss';
@use './app-menu.scss';
@use './app-tree-exp-bar.scss';
@use './app-tab-exp-panel.scss';
@use './app-tab-view-panel.scss';
\ No newline at end of file
<script setup lang="ts">
import { Subject } from 'rxjs';
import { PickupView, IActionParam, IParam, IContext } from '@core';
import { TabExpView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "TABEXPPANEL"}}
......@@ -28,7 +28,7 @@ interface ViewEmit {
const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法
const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(viewState, props, emit).moduleInstall();
const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new TabExpView(viewState, props, emit).moduleInstall();
</script>
<template>
......@@ -49,9 +49,11 @@ const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(v
{{#eq controlType "TABEXPPANEL"}}
<{{codeName}}TabExpPanel
name="{{name}}"
tabPosition="{{lowerCase page.tabLayout}}"
:context="state.context"
:viewParams="state.viewParams"
:viewSubject="state.viewSubject"
:defaultActivePanel="state.defaultActivePanel"
@onCtrlEvent="onCtrlEvent"
></{{codeName}}TabExpPanel>
{{/eq}}
......
......@@ -11,12 +11,20 @@ interface Props {
viewParams?: IParam;
showBusyIndicator?: boolean;
selectedData?: string;
tabPosition?: string;
defaultActivePanel?: string;
viewSubject: Subject<IActionParam>;
}
const props = withDefaults(defineProps < Props > (), {
viewSubject: () => new Subject < IActionParam > (),
showBusyIndicator: true,
tabPosition: "{{#if ctrl.tabLayout}}{{lowerCase ctrl.tabLayout}}{{else}}top{{/if}}",
{{#each ctrl.psControls as |viewPanel| }}
{{#if @first}}
defaultActivePanel: "{{viewPanel.name}}",
{{/if}}
{{/each}}
})
// emit声明
......@@ -37,11 +45,11 @@ defineExpose({ state, name: '{{ctrl.name}}' });
<div class="app-tab-exp-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
{{#if ctrl.psControls}}
<a-tabs class="app-tab-exp-panel__tabs">
<a-tabs :tabPosition="state.tabPosition" v-model:activeKey="state.activePanel" 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}}">
<a-tab-pane key="{{viewPanel.name}}">
<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}}"/>
<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}}"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册