提交 f1c2bb55 编写于 作者: Mosher's avatar Mosher

update:更新表单

1、标签位置支持
2、样式调整
3、表单分组标题栏关闭模式支持
上级 792791c5
{{#neq item.psEditor.editorType "HIDDEN"}}
<AppFormItem
name="{{item.codeName}}"
{{#if item.captionItemName}}
:label="state.data.{{lowerCase item.captionItemName}}"
{{else}}
label="{{item.caption}}"
{{/if}}
{{#if item.labelPos}}
labelPos="{{item.labelPos}}"
{{/if}}
:labelWidth="{{item.labelWidth}}"
:showLabel="{{item.showCaption}}"
:rules="state.rules.{{item.codeName}}"
:required="state.detailsModel.{{item.codeName}}.required"
:visible="state.detailsModel.{{item.codeName}}.visible"
:layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=item.psLayout layoutPos=item.psLayoutPos}}"
<AppFormItem
name="{{item.codeName}}"
{{#if item.captionItemName}}
:label="state.data.{{lowerCase item.captionItemName}}"
{{else}}
label="{{item.caption}}"
{{/if}}
{{#if item.labelPos}}
labelPos="{{item.labelPos}}"
{{/if}}
:labelWidth="{{item.labelWidth}}"
:showLabel="{{item.showCaption}}"
:rules="state.rules.{{item.codeName}}"
:required="state.detailsModel.{{item.codeName}}.required"
:visible="state.detailsModel.{{item.codeName}}.visible"
:layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=item.psLayout layoutPos=item.psLayoutPos}}"
{{#if item.psSysCss}}
class="{{item.psSysCss.cssName}}"
class="{{item.psSysCss.cssName}}"
{{/if}}
{{#if item.labelPSSysCss}}
labelClass="{{item.labelPSSysCss.cssName}}"
labelClass="{{item.labelPSSysCss.cssName}}"
{{/if}}
{{#if (or item.width item.height)}}
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}}
>
{{#if item.psEditor}}
<div class="form-editor-container" style="{{#if item.editorWidth}}width: {{item.editorWidth}}px;{{/if}}{{#if item.editorHeight}}height: {{item.editorHeight}}px{{/if}}">
{{> @macro/front-end/editors/include-editor.hbs type=item.psEditor.editorType item=item ctrlType="form"}}
</div>
<div class="form-editor-container" style="{{#if item.psEditor.editorWidth}}width: {{item.psEditor.editorWidth}}px;{{/if}}{{#if item.psEditor.editorHeight}}height: {{item.psEditor.editorHeight}}px{{/if}}">
{{> @macro/front-end/editors/include-editor.hbs type=item.psEditor.editorType item=item ctrlType="form"}}
</div>
{{/if}}
</AppFormItem>
</AppFormItem>
{{/neq}}
<script setup lang="ts">
import { Ref, ref } from "vue";
import { IActionParam, ILayoutOpts, IParam } from "@core";
interface FormGroupProps {
......@@ -9,7 +10,7 @@ interface FormGroupProps {
iconClass?: string;
titleClass?: string;
infoGroupMode?: boolean;
titleBarCloseMode?: number;
titleBarCloseMode?: number | 0 | 1 | 2;
showCaption?: boolean;
visible?: boolean;
uIActionGroup?: IParam;
......@@ -27,13 +28,21 @@ const emit = defineEmits<FormGroupEmit>();
const handleGroupAction = (action: IParam) => {
emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: action });
}
// 显示内容区
const showContent: Ref<boolean> = ref(props.titleBarCloseMode === 2 ? false : true);
const handleMenuGroupAction = ($event: IParam) => {
if (props.uIActionGroup && props.uIActionGroup.details?.length > 0) {
const details = props.uIActionGroup.details;
const detail = details.find((action: IParam) => Object.is(action.uIActionTag, $event.key));
emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: detail });
}
}
}
// 处理内容显示状态变化
const handleContentShowStatusChange = (event: MouseEvent) => {
event.stopPropagation();
showContent.value = !showContent.value;
}
</script>
<template>
......@@ -46,6 +55,11 @@ const handleMenuGroupAction = ($event: IParam) => {
<template #default="{ slotClass, slotStyle }">
<a-card :class="slotClass" :style="slotStyle" :headStyle="titleClass" :bordered="false">
<template v-if="showCaption" #title>
<template v-if="titleBarCloseMode === 1 || titleBarCloseMode === 2">
<span
:class="['fa', 'show-content-icon', showContent ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down']"
@click="handleContentShowStatusChange"></span>
</template>
<p class="app-form-group-title">
<AppIconText :iconClass="iconClass" :imgPath="imgPath" :text="title" />
</p>
......@@ -93,7 +107,7 @@ const handleMenuGroupAction = ($event: IParam) => {
</template>
</template>
</template>
<AppRow :layoutOpts="layoutOpts">
<AppRow v-if="showContent" :layoutOpts="layoutOpts">
<slot></slot>
</AppRow>
</a-card>
......@@ -105,13 +119,27 @@ const handleMenuGroupAction = ($event: IParam) => {
.app-form-group {
.ant-card-head {
text-align: left;
max-height: 60px;
height: 38px;
min-height: 38px;
.ant-card-head-title,
.ant-card-extra {
padding: 6px 0;
}
.app-form-group-title {
margin: 0px;
}
}
.ant-card-body {
height: calc(100% - 60px);
height: calc(100% - 38px);
padding-top: 6px;
}
}
.show-content-icon {
position: absolute;
top: 0;
transform: translateY(60%);
& + .app-form-group-title {
padding-left: 16px;
}
}
</style>
\ No newline at end of file
......@@ -78,4 +78,26 @@ const initRules = () => {
</template>
<style lang="scss">
// 上方标签
.app-form-item.label-top {
flex-direction: column;
}
// 下方标签
.app-form-item.label-bottom {
flex-direction: column-reverse;
}
.app-form-item.label-right {
flex-direction: row-reverse;
}
// 标题在下方时调整错误提示位置
.ant-form-item-has-error.label-bottom {
.ant-form-item-control {
position: relative;
}
.ant-form-item-explain-error {
position: absolute;
right: 0;
top: 100%;
}
}
</style>
\ No newline at end of file
......@@ -92,7 +92,6 @@ const onChange = ($event: any) => {
@blur="onChange"
:placeholder="placeholder"/>
<a-textarea
showCount
v-else-if="Object.is('textarea', type)"
v-model:value="value"
:disabled="disabled"
......@@ -109,4 +108,12 @@ const onChange = ($event: any) => {
@blur="onChange"
:placeholder="showMaxLength && maxLength ? `最大内容长度为${maxLength}` : placeholder" />
</div>
</template>
\ No newline at end of file
</template>
<style scoped>
.app-editor-container,
.app-editor-container .ant-input {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册