提交 e78222e4 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新

上级 bb5ef064
...@@ -53,9 +53,10 @@ ...@@ -53,9 +53,10 @@
{{#if (and (eq formDetail.detailType "GROUPPANEL") (formDetail.psUIActionGroup))}} {{#if (and (eq formDetail.detailType "GROUPPANEL") (formDetail.psUIActionGroup))}}
uIActionGroup: { uIActionGroup: {
extractMode: '{{formDetail.psUIActionGroup.actionGroupExtractMode}}', extractMode: '{{formDetail.psUIActionGroup.actionGroupExtractMode}}',
caption: '{{formDetail.psUIActionGroup.name}}',
details: [ details: [
{{#each formDetail.psUIActionGroup.psUIActionGroupDetails as | detail | }} {{#each formDetail.psUIActionGroup.psUIActionGroupDetails as | detail | }}
{ caption: '{{detail.caption}}', disabled: false, visible: true, uIActionTag: '{{detail.psUIAction.uIActionTag}}', showCaption: {{detail.showCaption}}, showIcon: {{detail.showIcon}}, {{#if detail.psUIAction.psSysImage}}{{#if detail.psUIAction.psSysImage.imagePath}} imgPath: "{{detail.psUIAction.psSysImage.imagePath}}",{{/if}}{{#if detail.psUIAction.psSysImage.cssClass}} iconClass: "{{detail.psUIAction.psSysImage.cssClass}}",{{/if}}{{/if}} }, { caption: '{{detail.psUIAction.caption}}', disabled: false, visible: true, uIActionTag: '{{detail.psUIAction.uIActionTag}}', showCaption: {{detail.showCaption}}, showIcon: {{detail.showIcon}}, {{#if detail.psUIAction.psSysImage}}{{#if detail.psUIAction.psSysImage.imagePath}} imgPath: "{{detail.psUIAction.psSysImage.imagePath}}",{{/if}}{{#if detail.psUIAction.psSysImage.cssClass}} iconClass: "{{detail.psUIAction.psSysImage.cssClass}}",{{/if}}{{/if}} },
{{/each}} {{/each}}
], ],
}, },
......
...@@ -7,11 +7,12 @@ ...@@ -7,11 +7,12 @@
{{#if item.psSysImage}} {{#if item.psSysImage}}
{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}} {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
{{/if}} {{/if}}
:titleStyle="{{item.labelPSSysCss.cssName}}" titleStyle="{{item.labelPSSysCss.cssName}}"
:infoGroupMode="{{item.infoGroupMode}}" :infoGroupMode="{{item.infoGroupMode}}"
:titleBarCloseMode="{{item.titleBarCloseMode}}" :titleBarCloseMode="{{item.titleBarCloseMode}}"
:showCaption="{{item.showCaption}}" :showCaption="{{item.showCaption}}"
:uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"> :uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"
@componentEvent="handleComponentEvent">
{{#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}}">
{{#each item.psDEFormDetails as | formDetail |}} {{#each item.psDEFormDetails as | formDetail |}}
...@@ -30,7 +31,19 @@ ...@@ -30,7 +31,19 @@
{{else}} {{else}}
<a-col <a-col
{{> @macro/front-end/ctrl/common/layoutPos.hbs item=item.psLayoutPos}} > {{> @macro/front-end/ctrl/common/layoutPos.hbs item=item.psLayoutPos}} >
<IbizFormGroup v-show="state.detailsModel.{{item.codeName}}.visible" name="{{item.codeName}}" title="{{item.caption}}"> <IbizFormGroup
v-show="state.detailsModel.{{item.codeName}}.visible"
name="{{item.codeName}}"
title="{{item.caption}}"
{{#if item.psSysImage}}
{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
{{/if}}
titleStyle="{{item.labelPSSysCss.cssName}}"
:infoGroupMode="{{item.infoGroupMode}}"
:titleBarCloseMode="{{item.titleBarCloseMode}}"
:showCaption="{{item.showCaption}}"
:uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"
@componentEvent="handleComponentEvent">
{{#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}}">
{{#each item.psDEFormDetails as | formDetail |}} {{#each item.psDEFormDetails as | formDetail |}}
......
<script setup lang="ts"> <script setup lang="ts">
import { IActionParam } from "@core"; import { IActionParam, IParam } from "@core";
interface FormGroupProps{ interface FormGroupProps{
name: string; name: string;
title: string; title: string;
imgPath: string;
iconClass: string;
titleStyle: string;
infoGroupMode: boolean;
titleBarCloseMode: number;
showCaption: boolean;
uIActionGroup: IParam;
} }
interface FormGroupEmit{ interface FormGroupEmit{
(name: 'componentEvent', value: IActionParam): void (name: 'componentEvent', value: IActionParam): void
} }
const props = withDefaults(defineProps<FormGroupProps>(), {}); const props = withDefaults(defineProps<FormGroupProps>(), {
infoGroupMode: false,
showCaption: true,
titleBarCloseMode: 0,
});
const emit = defineEmits<FormGroupEmit>(); const emit = defineEmits<FormGroupEmit>();
const handleGroupAction = (action: IParam) => {
emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: action});
}
const handleMenuGroupAction = (uIActionTag: string) => {
if (props.uIActionGroup && props.uIActionGroup.details?.length > 0) {
const details = props.uIActionGroup.details;
const detail = details.find((action: IParam) => Object.is(action.uIActionTag, uIActionTag));
emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: detail});
}
}
</script> </script>
<template> <template>
<a-card <a-card
:class="['app-form-group', `app-form-group-${name}`]" :class="['app-form-group', `app-form-group-${name}`]"
:title="title"
:bordered="false"> :bordered="false">
<template #extra> <template v-if="showCaption" #title>
<!-- <a href="#">行为</a> --> <p :class="['app-form-group-title', `${titleStyle}`]">
<IbizIconText :iconClass="iconClass" :imgPath="imgPath" :text="title"/>
</p>
</template>
<template v-if="showCaption" #extra>
<template v-if="uIActionGroup">
<template v-if="Object.is(uIActionGroup.extractMode, 'ITEMS')">
<a-dropdown>
<span class="group-action">
{{uIActionGroup.action}}
</span>
<template #overlay>
<a-menu @click="handleMenuGroupAction">
<template v-for="(item, index) in uIActionGroup.details" :key="index">
<a-menu-item
v-if="item.visible"
:key="item.uIActionTag"
:disabled="item.disabled">
<IbizIconText
:iconClass="item.showIcon && item.iconClass"
:imgPath="item.showIcon && item.imgPath"
:text="item.showCaption && item.caption"/>
</a-menu-item>
</template>
</a-menu>
</template>
</a-dropdown>
</template>
<template v-else>
<span v-for="(item, index) in uIActionGroup.details" :key="index">
<span v-if="index > 0" class="separator">|</span>
<a-button
v-show="item.visible"
type="link"
:disabled="item.disabled"
@click="handleGroupAction(item)">
<IbizIconText
:iconClass="item.showIcon && item.iconClass"
:imgPath="item.showIcon && item.imgPath"
:text="item.showCaption && item.caption"/>
</a-button>
</span>
</template>
</template>
</template> </template>
<slot></slot> <slot></slot>
</a-card> </a-card>
...@@ -31,6 +93,9 @@ const emit = defineEmits<FormGroupEmit>(); ...@@ -31,6 +93,9 @@ const emit = defineEmits<FormGroupEmit>();
width: 100%; width: 100%;
.ant-card-head { .ant-card-head {
text-align: left; text-align: left;
.app-form-group-title {
margin: 0px;
}
} }
} }
</style> </style>
\ No newline at end of file
...@@ -629,6 +629,32 @@ export class FormControl extends MainControl { ...@@ -629,6 +629,32 @@ export class FormControl extends MainControl {
} }
} }
/**
* @description 处理组件事件
* @param {IActionParam} actionParam 行为参数
* @memberof FormControl
*/
public handleComponentEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
switch (action) {
case 'formGroupAction':
this.handleFormGroupAction(tag, data);
break;
default:
break;
}
}
/**
* @description 处理表单分组行为
* @param {string} tag
* @param {*} data
* @memberof FormControl
*/
public handleFormGroupAction(tag: string, data: any) {
console.log(tag, data)
}
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @param {FormControlProps} props 传入的Props * @param {FormControlProps} props 传入的Props
......
...@@ -25,7 +25,7 @@ interface CtrlEmit { ...@@ -25,7 +25,7 @@ interface CtrlEmit {
const emit = defineEmits<CtrlEmit>(); const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, handleEditorEvent } = new FormControl(CtrlConfig).moduleInstall(props, emit); const { state, handleEditorEvent, handleComponentEvent } = new FormControl(CtrlConfig).moduleInstall(props, emit);
</script> </script>
<template> <template>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册