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

update:更新表单布局

上级 9aef90da
......@@ -42,7 +42,7 @@
{{/if}}
{{#if (and (eq item.detailType "BUTTON") item.psUIAction)}}
{{!-- TODO 补充显示图标和文字模式 --}}
uIAction: { caption: '{{item.psUIAction.caption}}', uIActionMode: "{{item.psUIAction.uIActionMode}}", disabled: false, visible: true, uIActionTag: '{{detail.psUIAction.uIActionTag}}', showCaption: {{item.showCaption}}, {{#if item.psUIAction.psSysImage}}{{#if item.psUIAction.psSysImage.imagePath}} imgPath: "{{item.psUIAction.psSysImage.imagePath}}",{{/if}}{{#if item.psUIAction.psSysImage.cssClass}} iconClass: "{{item.psUIAction.psSysImage.cssClass}}",{{/if}}{{/if}} },
uIAction: { caption: '{{item.psUIAction.caption}}', uIActionMode: "{{item.psUIAction.uIActionMode}}", disabled: false, visible: true, uIActionTag: '{{item.psUIAction.uIActionTag}}', showCaption: {{item.showCaption}}, {{#if item.psUIAction.psSysImage}}{{#if item.psUIAction.psSysImage.imagePath}} imgPath: "{{item.psUIAction.psSysImage.imagePath}}",{{/if}}{{#if item.psUIAction.psSysImage.cssClass}} iconClass: "{{item.psUIAction.psSysImage.cssClass}}",{{/if}}{{/if}} },
{{/if}}
{{#if (and (eq item.detailType "GROUPPANEL") item.psUIActionGroup)}}
uIActionGroup: {
......
<AppRaw
<AppFormRaw
name="{{item.codeName}}"
:visible="state.detailsModel.{{item.codeName}}.visible"
{{#if item.psSysCss}}
class="{{item.psSysCss.cssName}}"
{{/if}}
{{#if item.psSysImage}}
{{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{/if}}
{{#if item.psSysImage.cssClass}}
iconClass="{{item.psSysImage.cssClass}}"
{{/if}}
{{#if item.psSysImage.imagePath}}
imgPath="{{item.psSysImage.imagePath}}"
{{/if}}
{{/if}}
contentType="{{item.contentType}}"
{{#if (or item.rawItemHeight item.rawItemWidth)}}
style="{{#if item.rawItemHeight}}height: {{item.rawItemHeight}}px;{{/if}}{{#if item.rawItemWidth}}width: {{item.rawItemWidth}}px;{{/if}}"
{{#if (and item.psLayoutPos (or item.psLayoutPos.width item.psLayoutPos.height))}}
style="{{#if item.psLayoutPos.width}}width: {{item.psLayoutPos.width}}px; {{/if}}{{#if item.psLayoutPos.height}}height: {{item.psLayoutPos.height}}px; {{/if}}"
{{/if}}
{{#if (or (gt item.rawItemWidth 0) (gt item.rawItemHeight 0))}}
rawStyle="{{#gt item.rawItemWidth 0}}width: {{item.rawItemWidth}}px; {{/gt}}{{#gt item.rawItemHeight 0}}height: {{item.rawItemHeight}}px;{{/gt}}"
{{/if}}
{{#if (eq item.contentType 'RAW')}}value="{{item.rawContent}}"{{else if (eq item.contentType 'HTML')}}:value="`{{item.htmlContent}}`"{{/if}}/>
contentType="{{item.contentType}}"
:layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=item.psLayout layoutPos=item.psLayoutPos}}"
{{#if (eq item.contentType 'RAW')}}
value="{{item.rawContent}}"
{{else if (eq item.contentType 'HTML')}}
:value="`{{item.htmlContent}}`"
{{/if}}
/>
......@@ -5,7 +5,8 @@
{{#eq type "BUTTON"}}{{> @macro/front-end/widgets/form-detail/form-button.hbs}}{{/eq}}
{{#eq type "IFRAME"}}{{> @macro/front-end/widgets/form-detail/form-iframe.hbs}}{{/eq}}
{{#eq type "FORMPART"}}{{> @macro/front-end/widgets/form-detail/form-formpart.hbs}}{{/eq}}
{{#eq type "TABPAGE"}}{{> @macro/front-end/widgets/form-detail/form-druipart.hbs}}{{/eq}}
{{#eq type "TABPAGE"}}{{> @macro/front-end/widgets/form-detail/form-tabpage.hbs}}{{/eq}}
{{#eq type "DRUIPART"}}{{> @macro/front-end/widgets/form-detail/form-druipart.hbs}}{{/eq}}
{{#eq type "RAWITEM"}}{{> @macro/front-end/widgets/form-detail/form-rawitem.hbs}}{{/eq}}
{{#eq type "FORMDETAILSMODEL"}}{{> @macro/front-end/widgets/form-detail/form-details-model.hbs}}{{/eq}}
{{#eq type "FORMACTIONMODEL"}}{{> @macro/front-end/widgets/form-detail/form-action-model.hbs}}{{/eq}}
\ No newline at end of file
......@@ -28,7 +28,9 @@ let slotStyle = computed(() => {
return ''
}
let result = '';
if (attrs.style) {
result += isObject(attrs.style) ? styleObj2Str(attrs.style) : attrs.style;
}
if (layout?.value?.colStyle) {
result += layout.value.colStyle;
}
......
......@@ -26,7 +26,7 @@ const emit = defineEmits<FormButtonEmits>();
const click = (event: MouseEvent) => {
const data = deepCopy(props.uIAction);
Object.assign(data, { event: event });
emit('action', { tag: name, action: 'formButtonAction', data: data });
emit('action', { tag: props.name, action: 'formButtonAction', data: data });
}
</script>
......
......@@ -105,9 +105,13 @@ const handleMenuGroupAction = ($event: IParam) => {
.app-form-group {
.ant-card-head {
text-align: left;
max-height: 60px;
.app-form-group-title {
margin: 0px;
}
}
.ant-card-body {
height: calc(100% - 60px);
}
}
</style>
\ No newline at end of file
......@@ -14,8 +14,8 @@ const props = withDefaults(defineProps<FormIframeProps>(), {
</script>
<template>
<AppCol class="app-formDruipart" :visible="visible" :layoutOpts="layoutOpts" v-show="visible">
<iframe class="app-formDruipart__iframe" :src="iFrameUrl" style="height: 100%;width: 100%;border: 0"></iframe>
<AppCol class="app-form-iframe" :visible="visible" :layoutOpts="layoutOpts" v-show="visible">
<iframe class="app-form-iframe__content" :src="iFrameUrl" style="height: 100%;width: 100%;border: 0"></iframe>
</AppCol>
</template>
......
......@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<FormPageProps>(), {
</script>
<template>
<a-tab-pane class="app-formPage" :key="$attrs.key" :tab="tab">
<a-tab-pane class="app-form-page" :key="$attrs.key" :tab="tab">
<AppRow :layoutOpts="layoutOpts">
<slot></slot>
</AppRow>
......
......@@ -9,6 +9,7 @@ interface FormRawProps{
imgPath?: string;
value?:any;
contentType?: string;
rawStyle?: IParam
}
const props = withDefaults(defineProps<FormRawProps>(), {
visible: true,
......@@ -17,13 +18,15 @@ const props = withDefaults(defineProps<FormRawProps>(), {
</script>
<template>
<AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-formRaw">
<AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-form-raw">
<template #default="{slotStyle, slotClass}">
<AppRaw
:name="name"
:class="slotClass"
:style="slotStyle"
:iconClass="iconClass"
:value="value"
:rawStyle="rawStyle"
:contentType="contentType">
</AppRaw>
</template>
......
......@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<FormTabPageProps>(), {
</script>
<template>
<a-tab-pane class="app-formTabPage" v-show="visible" :tab="caption">
<a-tab-pane class="app-form-tabpage" v-show="visible" :tab="caption">
<AppRow :layoutOpts="layoutOpts">
<slot></slot>
</AppRow>
......
......@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<FormTabPanelProps>(), {
</script>
<template>
<AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-formTabPanel">
<AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-form-tabpanel">
<template v-slot:default="{ slotStyle, slotClass }">
<a-tabs :class="slotClass" :style="slotStyle">
<slot></slot>
......
<script setup lang="ts">
import { IActionParam } from "@core";
import { IActionParam, IParam } from "@core";
interface RawProps {
/**
* @description 编辑器名称
......@@ -30,6 +30,11 @@ interface RawProps {
* @description 标题
*/
caption?: string;
/**
* @description 直接内容样式
*/
rawStyle?: IParam;
}
interface EditorEmit {
......@@ -45,12 +50,12 @@ const emit = defineEmits<EditorEmit>();
<template>
<div :class="['app-raw-item', 'app-raw', `app-raw-${name}`]">
<div class="raw-caption" v-if="caption">{{ caption }}</div>
<div class="raw-caption" v-if="caption" :style="rawStyle">{{ caption }}</div>
<div v-if="Object.is(contentType, 'RAW')">
{{ value }}
</div>
<div v-else-if="Object.is(contentType, 'HTML')" v-html="value" />
<div v-else-if="Object.is(contentType, 'IMAGE')">
<div v-else-if="Object.is(contentType, 'HTML')" v-html="value" :style="rawStyle" />
<div v-else-if="Object.is(contentType, 'IMAGE')" :style="rawStyle">
<AppIconText :iconClass="iconClass" :imgPath="imgPath"/>
</div>
</div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册