浏览代码

修复自定义表单拖拽与我的任务双栏回显

wyn 4 月之前
父节点
当前提交
69ca372c67
共有 4 个文件被更改,包括 117 次插入48 次删除
  1. 3 3
      src/components/FormDesigner.tsx
  2. 13 3
      src/components/FormManagement.tsx
  3. 19 2
      src/components/IsolationWork.tsx
  4. 82 40
      src/components/MyTask.tsx

+ 3 - 3
src/components/FormDesigner.tsx

@@ -469,7 +469,7 @@ const FieldRenderer: React.FC<{
   setDragPreview
 }) => {
   // 让字段可以拖拽
-  const [{ isDragging }, drag, dragPreview] = useDrag({
+  const [{ isDragging }, drag, dragPreviewRef] = useDrag({
     type: 'field',
     item: () => {
       const dragItem = { fieldId: field.id };
@@ -501,9 +501,9 @@ const FieldRenderer: React.FC<{
   // 拖拽时隐藏原位置的元素,使用自定义预览
   useEffect(() => {
     if (isDragging) {
-      dragPreview(<div style={{ display: 'none' }} />, { offsetX: 0, offsetY: 0 });
+      dragPreviewRef(<div style={{ display: 'none' }} />, { offsetX: 0, offsetY: 0 });
     }
-  }, [isDragging, dragPreview]);
+  }, [isDragging, dragPreviewRef]);
 
   // 判断字段是否为选择类字段(包括单选和多选)
   const isSelectType = (type: FieldType): boolean => {

+ 13 - 3
src/components/FormManagement.tsx

@@ -80,7 +80,8 @@ export default function FormManagement() {
             style={{
               display: 'grid',
               gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
-              gap: '16px',
+              gap: '12px',
+              rowGap: '16px',
             }}
           >
             {children.map((child: any) => {
@@ -667,7 +668,8 @@ export default function FormManagement() {
             const gridStyle = layoutColumns > 1 ? {
               display: 'grid',
               gridTemplateColumns: `repeat(${layoutColumns}, minmax(0, 1fr))`,
-              gap: '16px',
+              gap: '12px',
+              rowGap: '16px',
             } : undefined;
 
             return (
@@ -683,7 +685,15 @@ export default function FormManagement() {
                   } 
                 } : undefined}
               >
-                <div style={gridStyle} className={layoutColumns === 1 ? 'space-y-4' : ''}>
+                <div 
+                  style={gridStyle} 
+                  className={layoutColumns === 1 ? 'space-y-4' : 'form-detail-grid'}
+                >
+                  <style>{`
+                    .form-detail-grid .ant-form-item {
+                      margin-bottom: 12px;
+                    }
+                  `}</style>
                   {(detailData.rule || []).map((field: any) => renderFieldPreview(field))}
                 </div>
               </AntdForm>

+ 19 - 2
src/components/IsolationWork.tsx

@@ -39,7 +39,7 @@ import {
 } from '@ant-design/icons';
 import { userApi, UserVO } from '../api/user';
 import { segregationPointApi, SegregationPointVO } from '../api/spm';
-import { getFormPage, FormVO } from '../api/bpm/form';
+import { getFormPage, getForm, FormVO } from '../api/bpm/form';
 
 interface TableRow {
   id: number;
@@ -4265,10 +4265,25 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
                             }
                             
                             // 调用更新节点接口
+                            const formId = workflowNodeConfig.submitForm ? Number(workflowNodeConfig.submitForm) : undefined;
+                            
+                            // 如果 formId 存在,先调用接口获取表单数据
+                            let formData: any = undefined;
+                            if (formId) {
+                              try {
+                                const formResponse = await getForm(formId);
+                                // 将接口返回的 data 里的所有值传递给 formData
+                                formData = formResponse;
+                              } catch (error) {
+                                console.error('获取表单数据失败:', error);
+                                // 即使获取失败,也继续保存节点,只是不传递 formData
+                              }
+                            }
+                            
                             const updateParam: UpdateWorkflowWorkNodeParam = {
                               nodeId: nodeDO.id,
                               nodeName: workflowNodeConfig.nodeName,
-                              formId: workflowNodeConfig.submitForm ? Number(workflowNodeConfig.submitForm) : undefined,
+                              formId: formId,
                               workerUserId: workflowNodeConfig.responsible ? Number(workflowNodeConfig.responsible) : undefined,
                               isolationType: workflowNodeConfig.isolationMethod || undefined,
                               isolationPoints: workflowNodeConfig.isolationPoints && workflowNodeConfig.isolationPoints.length > 0 
@@ -4279,6 +4294,8 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
                                 ? workflowNodeConfig.selectedIsolationNodeId 
                                 : undefined,
                               nodeUserDOList: nodeUserDOList.length > 0 ? nodeUserDOList : undefined,
+                              // 如果获取到了表单数据,添加到 formData 字段
+                              formData: formData,
                             };
                             
                             await workJobApi.updateWorkflowWorkNode(updateParam);

+ 82 - 40
src/components/MyTask.tsx

@@ -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>