表单封装

其实，在前端框架中，所有的表单页面，都是基于SimpleForm的封装，无论是主表还是明细表，最外层封装都是SimpleForm（二开使用的是可以复用的SimpleFormSetup），如果需要实现多个子表单的效果，只需要在对应位置插入标题或者布局组件即可。

默认情况下，SimpleForm是对第一层元素循环，同时处理显隐、响应式布局以及响应式布局的换行，对于非slot组件，都是将属性传给SimpleFormItem

<template>
    <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
        <Row v-bind="getRow">
            <template v-for="schema in getSchemas" :key="schema.field">
                <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
                    <div v-if="schema?.componentProps.respBreakLine" style="width: 100%; height: 1px"></div>
                    <template v-if="showComponent(schema) && schema.type !== 'slot'">
                        <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
                    </template>
                    <template v-if="schema.type === 'slot'"><!-- 无关代码省略 --></template>
                </Col>
            </template>
        </Row>

        <div :style="{ textAlign: getProps.buttonLocation }">
            <!-- 表单可以配置显示提交和清空按钮 也可以在前后添加按钮 -->
            <slot name="buttonBefore"></slot>
            <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">{{ t('提交') }}</a-button>
            <!-- 无关代码省略 -->
            <slot name="buttonAfter"></slot>
        </div>
    </Form>
</template>

对于完全使用useForm或者SimpleForm构建表单的，封装也提供了提交和清除按钮，但是页面形式的表单或者审批页面不用这2个按钮，而是用的工具栏里的封装。