|
|
@@ -1160,26 +1160,47 @@ export default function MyTask() {
|
|
|
<div className="py-8 text-center text-gray-500">表单加载中...</div>
|
|
|
) : formData.rule && formData.rule.length > 0 ? (
|
|
|
<div>
|
|
|
- <AntdForm
|
|
|
- form={detailForm}
|
|
|
- layout={defaultFormConfig.labelPosition === 'top' ? 'vertical' : 'horizontal'}
|
|
|
- size={defaultFormConfig.formSize === 'default' ? 'middle' : defaultFormConfig.formSize}
|
|
|
- requiredMark={defaultFormConfig.hideRequiredMark ? false : undefined}
|
|
|
- labelCol={defaultFormConfig.labelWidth ? {
|
|
|
- style: {
|
|
|
- width: `${defaultFormConfig.labelWidth}px`,
|
|
|
- textAlign: defaultFormConfig.labelPosition === 'left' ? 'left' : defaultFormConfig.labelPosition === 'right' ? 'right' : 'left'
|
|
|
- }
|
|
|
- } : undefined}
|
|
|
- >
|
|
|
- <div className={defaultFormConfig.layoutColumns === 1 ? 'space-y-4' : ''}>
|
|
|
- {(formData.rule || []).map((field: any) => {
|
|
|
- // 如果已通过,禁用所有字段
|
|
|
- const fieldWithDisabled = isApproved ? { ...field, disabled: true, readOnly: true } : field;
|
|
|
- return renderFieldPreview(fieldWithDisabled);
|
|
|
- })}
|
|
|
- </div>
|
|
|
- </AntdForm>
|
|
|
+ {(() => {
|
|
|
+ const formConfig = formData.option?.formConfig || defaultFormConfig;
|
|
|
+ const layoutColumns = formConfig.layoutColumns || 1;
|
|
|
+ const gridStyle = layoutColumns > 1 ? {
|
|
|
+ display: 'grid',
|
|
|
+ gridTemplateColumns: `repeat(${layoutColumns}, minmax(0, 1fr))`,
|
|
|
+ gap: '12px',
|
|
|
+ rowGap: '16px',
|
|
|
+ } : undefined;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <AntdForm
|
|
|
+ form={detailForm}
|
|
|
+ layout={formConfig.labelPosition === 'top' ? 'vertical' : formConfig.labelPosition === 'left' ? 'horizontal' : 'horizontal'}
|
|
|
+ size={formConfig.formSize === 'default' ? 'middle' : formConfig.formSize}
|
|
|
+ requiredMark={formConfig.hideRequiredMark ? false : undefined}
|
|
|
+ labelCol={formConfig.labelWidth ? {
|
|
|
+ style: {
|
|
|
+ width: `${formConfig.labelWidth}px`,
|
|
|
+ textAlign: formConfig.labelPosition === 'left' ? 'left' : formConfig.labelPosition === 'right' ? 'right' : 'left'
|
|
|
+ }
|
|
|
+ } : undefined}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style={gridStyle}
|
|
|
+ className={layoutColumns === 1 ? 'space-y-4' : 'form-detail-grid'}
|
|
|
+ >
|
|
|
+ <style>{`
|
|
|
+ .form-detail-grid .ant-form-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ `}</style>
|
|
|
+ {(formData.rule || []).map((field: any) => {
|
|
|
+ // 如果已通过,禁用所有字段
|
|
|
+ const fieldWithDisabled = isApproved ? { ...field, disabled: true, readOnly: true } : field;
|
|
|
+ return renderFieldPreview(fieldWithDisabled);
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </AntdForm>
|
|
|
+ );
|
|
|
+ })()}
|
|
|
</div>
|
|
|
) : (
|
|
|
<div className="py-4 text-center text-gray-400 text-sm">暂无表单内容</div>
|
|
|
@@ -1325,26 +1346,47 @@ export default function MyTask() {
|
|
|
<div className="py-8 text-center text-gray-500">表单加载中...</div>
|
|
|
) : formData.rule && formData.rule.length > 0 ? (
|
|
|
<div>
|
|
|
- <AntdForm
|
|
|
- form={detailForm}
|
|
|
- layout={defaultFormConfig.labelPosition === 'top' ? 'vertical' : 'horizontal'}
|
|
|
- size={defaultFormConfig.formSize === 'default' ? 'middle' : defaultFormConfig.formSize}
|
|
|
- requiredMark={defaultFormConfig.hideRequiredMark ? false : undefined}
|
|
|
- labelCol={defaultFormConfig.labelWidth ? {
|
|
|
- style: {
|
|
|
- width: `${defaultFormConfig.labelWidth}px`,
|
|
|
- textAlign: defaultFormConfig.labelPosition === 'left' ? 'left' : defaultFormConfig.labelPosition === 'right' ? 'right' : 'left'
|
|
|
- }
|
|
|
- } : undefined}
|
|
|
- >
|
|
|
- <div className={defaultFormConfig.layoutColumns === 1 ? 'space-y-4' : ''}>
|
|
|
- {(formData.rule || []).map((field: any) => {
|
|
|
- // 如果已通过,禁用所有字段
|
|
|
- const fieldWithDisabled = isApproved ? { ...field, disabled: true, readOnly: true } : field;
|
|
|
- return renderFieldPreview(fieldWithDisabled);
|
|
|
- })}
|
|
|
- </div>
|
|
|
- </AntdForm>
|
|
|
+ {(() => {
|
|
|
+ const formConfig = formData.option?.formConfig || defaultFormConfig;
|
|
|
+ const layoutColumns = formConfig.layoutColumns || 1;
|
|
|
+ const gridStyle = layoutColumns > 1 ? {
|
|
|
+ display: 'grid',
|
|
|
+ gridTemplateColumns: `repeat(${layoutColumns}, minmax(0, 1fr))`,
|
|
|
+ gap: '12px',
|
|
|
+ rowGap: '16px',
|
|
|
+ } : undefined;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <AntdForm
|
|
|
+ form={detailForm}
|
|
|
+ layout={formConfig.labelPosition === 'top' ? 'vertical' : formConfig.labelPosition === 'left' ? 'horizontal' : 'horizontal'}
|
|
|
+ size={formConfig.formSize === 'default' ? 'middle' : formConfig.formSize}
|
|
|
+ requiredMark={formConfig.hideRequiredMark ? false : undefined}
|
|
|
+ labelCol={formConfig.labelWidth ? {
|
|
|
+ style: {
|
|
|
+ width: `${formConfig.labelWidth}px`,
|
|
|
+ textAlign: formConfig.labelPosition === 'left' ? 'left' : formConfig.labelPosition === 'right' ? 'right' : 'left'
|
|
|
+ }
|
|
|
+ } : undefined}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style={gridStyle}
|
|
|
+ className={layoutColumns === 1 ? 'space-y-4' : 'form-detail-grid'}
|
|
|
+ >
|
|
|
+ <style>{`
|
|
|
+ .form-detail-grid .ant-form-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ `}</style>
|
|
|
+ {(formData.rule || []).map((field: any) => {
|
|
|
+ // 如果已通过,禁用所有字段
|
|
|
+ const fieldWithDisabled = isApproved ? { ...field, disabled: true, readOnly: true } : field;
|
|
|
+ return renderFieldPreview(fieldWithDisabled);
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </AntdForm>
|
|
|
+ );
|
|
|
+ })()}
|
|
|
</div>
|
|
|
) : (
|
|
|
<div className="py-4 text-center text-gray-400 text-sm">暂无表单内容</div>
|