提交 0e58d318 编写于 作者: sq3536's avatar sq3536

Merge remote-tracking branch 'origin/master'

...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"> style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}">
{{#if item.psSysImage}} {{#if item.psSysImage}}
<template #icon> <template #icon>
<AppIconText {{#if item.psSysImage.cssClass}}:iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}:imgPath="{{item.psSysImage.imagePath}}"{{/if}}/> <AppIconText {{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{/if}}/>
</template> </template>
{{/if}} {{/if}}
{{#if item.showCaption}} {{#if item.showCaption}}
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"> style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}">
{{#if item.psSysImage}} {{#if item.psSysImage}}
<template #icon> <template #icon>
<AppIconText {{#if item.psSysImage.cssClass}}:iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}:imgPath="{{item.psSysImage.imagePath}}"{{/if}}/> <AppIconText {{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{/if}}/>
</template> </template>
{{/if}} {{/if}}
{{#if item.showCaption}} {{#if item.showCaption}}
......
<a-tab-pane v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} key="{{item.codeName}}"> <a-tab-pane v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} key="{{item.codeName}}">
<template #tab> <template #tab>
<AppIconText {{#if item.labelPSSysCss}}class="{{item.labelPSSysCss.cssName}}" {{/if}}{{#if item.psSysImage}}{{#if item.psSysImage.cssClass}}:iconClass="{{item.psSysImage.cssClass}}" {{/if}}{{#if item.psSysImage.imagePath}}:imgPath="{{item.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{item.caption}}"/> <AppIconText {{#if item.labelPSSysCss}}class="{{item.labelPSSysCss.cssName}}" {{/if}}{{#if item.psSysImage}}{{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}" {{/if}}{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{item.caption}}"/>
</template> </template>
{{#eq item.psLayout.layout "FLEX"}} {{#eq item.psLayout.layout "FLEX"}}
<div class="app-form-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 class="app-form-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 v-if="Object.is(column.dataIndex, '{{#if item.dataItemName}}{{lowerCase item.dataItemName}}{{else}}{{item.codeName}}{{/if}}')" class="header-cell"> <div v-if="Object.is(column.dataIndex, '{{#if item.dataItemName}}{{lowerCase item.dataItemName}}{{else}}{{item.codeName}}{{/if}}')" class="header-cell">
{{#if item.psSysImage}} {{#if item.psSysImage}}
<AppIconText {{#if item.psSysImage.cssClass}}:iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}:imgPath="{{item.psSysImage.imagePath}}"{{/if}}/> <AppIconText {{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{/if}}/>
<span class="title">\{{title}}</span> <span class="title">\{{title}}</span>
{{else}} {{else}}
<span class="title">\{{title}}</span> <span class="title">\{{title}}</span>
......
import { ExpViewState } from "@core"; import { ExpViewState } from '@core';
/** /**
* @description 树导航视图状态 * @description 树导航视图状态
...@@ -6,4 +6,9 @@ import { ExpViewState } from "@core"; ...@@ -6,4 +6,9 @@ import { ExpViewState } from "@core";
* @interface TabExpViewState * @interface TabExpViewState
* @extends {ExpViewState} * @extends {ExpViewState}
*/ */
export interface TabExpViewState extends ExpViewState {} export interface TabExpViewState extends ExpViewState {
\ No newline at end of file /**
* 默认打开的分页name
*/
defaultActivePanel?: string;
}
import { ExpView } from "@core"; import { ExpView, isExist } from '@core';
import { TabExpViewProps } from "./tab-exp-view-prop"; import { TabExpViewProps } from './tab-exp-view-prop';
import { TabExpViewState } from "./tab-exp-view-state"; import { TabExpViewState } from './tab-exp-view-state';
/** /**
* @description 分页导航视图 * @description 分页导航视图
...@@ -9,7 +9,6 @@ import { TabExpViewState } from "./tab-exp-view-state"; ...@@ -9,7 +9,6 @@ import { TabExpViewState } from "./tab-exp-view-state";
* @extends {ExpView} * @extends {ExpView}
*/ */
export class TabExpView extends ExpView { export class TabExpView extends ExpView {
/** /**
* @description 视图状态 * @description 视图状态
* @type {TabExpViewState} * @type {TabExpViewState}
...@@ -17,15 +16,26 @@ export class TabExpView extends ExpView { ...@@ -17,15 +16,26 @@ export class TabExpView extends ExpView {
*/ */
public declare state: TabExpViewState; public declare state: TabExpViewState;
/**
*【内置功能】提供通过viewparams里的srfDefaultPanel指定默认打开的分页的功能
*/
public useDefaultPanel() {
const { srfDefaultPanel } = this.state.viewParams;
if (isExist(srfDefaultPanel)) {
this.state.defaultActivePanel = srfDefaultPanel;
}
}
/** /**
* @description 安装视图所有功能模块的方法 * @description 安装视图所有功能模块的方法
* @return {*} * @return {*}
* @memberof TabExpView * @memberof TabExpView
*/ */
public moduleInstall() { public moduleInstall() {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
this.useDefaultPanel()
return { return {
...superParams ...superParams,
}; };
} }
} }
\ No newline at end of file
...@@ -7,5 +7,14 @@ import { IParam, MainControlProps } from "@core"; ...@@ -7,5 +7,14 @@ import { IParam, MainControlProps } from "@core";
* @extends {MainControlProps} * @extends {MainControlProps}
*/ */
export interface TabExpPanelControlProps extends MainControlProps { export interface TabExpPanelControlProps extends MainControlProps {
/**
* 分页栏显示位置
* 目前支持上,下,左,右
*/
tabPosition: "left" | "right" | "top" | "bottom";
/**
* 默认打开的分页name
*/
defaultActivePanel?: string;
} }
\ No newline at end of file
...@@ -7,5 +7,18 @@ import { IParam, MainControlState } from '@core'; ...@@ -7,5 +7,18 @@ import { IParam, MainControlState } from '@core';
* @extends {MainControlState} * @extends {MainControlState}
*/ */
export interface TabExpPanelControlState extends MainControlState { 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 { ...@@ -15,6 +15,15 @@ export class TabExpPanelControl extends MainControl {
*/ */
public declare state: TabExpPanelControlState; 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 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @param {TabExpPanelControlProps} props * @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
// 部件样式汇总 // 部件样式汇总
@use './search-form.scss'; @use './search-form.scss';
@use './app-menu.scss'; @use './app-menu.scss';
@use './app-tree-exp-bar.scss'; @use './app-tree-exp-bar.scss';
\ No newline at end of file @use './app-tab-exp-panel.scss';
@use './app-tab-view-panel.scss';
\ No newline at end of file
<script setup lang="ts"> <script setup lang="ts">
import { Subject } from 'rxjs'; 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'; import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}} {{#page.ctrls}}
{{#eq controlType "TABEXPPANEL"}} {{#eq controlType "TABEXPPANEL"}}
...@@ -28,7 +28,7 @@ interface ViewEmit { ...@@ -28,7 +28,7 @@ interface ViewEmit {
const emit = defineEmits<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> </script>
<template> <template>
...@@ -49,9 +49,11 @@ const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(v ...@@ -49,9 +49,11 @@ const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(v
{{#eq controlType "TABEXPPANEL"}} {{#eq controlType "TABEXPPANEL"}}
<{{codeName}}TabExpPanel <{{codeName}}TabExpPanel
name="{{name}}" name="{{name}}"
tabPosition="{{lowerCase page.tabLayout}}"
:context="state.context" :context="state.context"
:viewParams="state.viewParams" :viewParams="state.viewParams"
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
:defaultActivePanel="state.defaultActivePanel"
@onCtrlEvent="onCtrlEvent" @onCtrlEvent="onCtrlEvent"
></{{codeName}}TabExpPanel> ></{{codeName}}TabExpPanel>
{{/eq}} {{/eq}}
......
...@@ -11,12 +11,20 @@ interface Props { ...@@ -11,12 +11,20 @@ interface Props {
viewParams?: IParam; viewParams?: IParam;
showBusyIndicator?: boolean; showBusyIndicator?: boolean;
selectedData?: string; selectedData?: string;
tabPosition?: string;
defaultActivePanel?: string;
viewSubject: Subject<IActionParam>; viewSubject: Subject<IActionParam>;
} }
const props = withDefaults(defineProps < Props > (), { const props = withDefaults(defineProps < Props > (), {
viewSubject: () => new Subject < IActionParam > (), viewSubject: () => new Subject < IActionParam > (),
showBusyIndicator: true, 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声明 // emit声明
...@@ -37,11 +45,11 @@ defineExpose({ state, name: '{{ctrl.name}}' }); ...@@ -37,11 +45,11 @@ defineExpose({ state, name: '{{ctrl.name}}' });
<div class="app-tab-exp-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"> <div class="app-tab-exp-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
{{#if ctrl.psControls}} {{#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| }} {{#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> <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> </template>
<{{viewPanel.codeName}}TabViewPanel <{{viewPanel.codeName}}TabViewPanel
name="{{name}}" name="{{name}}"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册