feat: 完成基本控件的form的数据回显

src/components/DDComponents/DDSelectField/index.js

@@ -4,12 +4,13 @@ import { Select } from 'antd';
 const { Option } = Select;
 
 function DDSelectField(props) {
-  const { options, disabled, onChange } = props;
+  const { options, disabled, onChange, defaultValue } = props;
 
   return (
     <Select
       style={{ width: '100%' }}
       disabled={disabled}
+      defaultValue={defaultValue}
       onChange={value => {
         onChange(String(value));
       }}

src/components/DDComponents/NumberField/index.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { InputNumber } from 'antd';
 
 function NumberField(props) {
-  const { onChange, disabled, unit } = props;
+  const { onChange, disabled, unit, defaultValue } = props;
 
   return (
     <InputNumber
       style={{ width: '100%' }}
+      defaultValue={defaultValue}
       disabled={disabled}
       formatter={value => `${value}${unit || ''}`}
       onChange={e => {

src/components/DDComponents/index.js

@@ -1,4 +1,4 @@
-import { Input, InputNumber, Select, DatePicker, Rate } from 'antd';
+import {Input, InputNumber, Select, DatePicker, Rate} from 'antd';
 import TableField from './TableField';
 import PhoneField from './PhoneField';
 import InnerContactField from './InnerContactField';
@@ -11,11 +11,11 @@ import DDDateField from './DDDateField';
 import DDDateRangeField from './DDDateRangeField';
 import DDAttachment from './DDAttachment';
 
-const { Option } = Select;
-const { RangePicker } = DatePicker;
+const {Option} = Select;
+const {RangePicker} = DatePicker;
 
 export default function DDComponents(props) {
-  const { item, onChange } = props;
+  const {item, onChange} = props;
   const {
     id,
     label,
@@ -40,6 +40,7 @@ export default function DDComponents(props) {
     notPrint,
     verticalPrint,
     hiddenInApprovalDetail,
+    defaultValue,
     disabled,
     notUpper,
     children, // 子控件
@@ -49,6 +50,7 @@ export default function DDComponents(props) {
     case 'TextField': //单行输入
       component = (
         <Input
+          defaultValue={defaultValue}
           disabled={disabled}
           placeholder={placeholder}
           onChange={e => onChange?.(e.target.value)}
@@ -58,6 +60,7 @@ export default function DDComponents(props) {
     case 'TextareaField': //多行输入
       component = (
         <Input.TextArea
+          defaultValue={defaultValue}
           disabled={disabled}
           placeholder={placeholder}
           onChange={e => onChange?.(e.target.value)}
@@ -65,35 +68,36 @@ export default function DDComponents(props) {
       );
       break;
     case 'NumberField': //数字输入
-      component = <NumberField disabled={disabled} unit={unit} onChange={onChange} />;
+      component = <NumberField defaultValue={defaultValue} disabled={disabled} unit={unit} onChange={onChange}/>;
       break;
     case 'DDSelectField': //单选框
-      component = <DDSelectField options={options} onChange={onChange} disabled={disabled} />;
+      component =
+        <DDSelectField defaultValue={defaultValue} options={options} onChange={onChange} disabled={disabled}/>;
       break;
     case 'DDMultiSelectField': //多选框
-      component = <DDMultiSelectField disabled={disabled} options={options} onChange={onChange} />;
+      component = <DDMultiSelectField disabled={disabled} options={options} onChange={onChange}/>;
       break;
     case 'DDDateField': //日期控件
-      component = <DDDateField format={format} disabled={disabled} onChange={onChange} />;
+      component = <DDDateField format={format} disabled={disabled} onChange={onChange}/>;
       break;
     case 'DDDateRangeField': //时间区间控件
-      component = <DDDateRangeField format={format} disabled={disabled} onChange={onChange} />;
+      component = <DDDateRangeField format={format} disabled={disabled} onChange={onChange}/>;
       break;
     case 'TextNote': //文本说明控件
       console.info('文本说明控件!');
       console.log(item);
       break;
     case 'PhoneField': //电话控件
-      component = <PhoneField onChange={onChange} />;
+      component = <PhoneField onChange={onChange}/>;
       break;
     case 'DDPhotoField': //图片控件
-      component = <DDPhotoField />;
+      component = <DDPhotoField/>;
       break;
     case 'MoneyField': //金额控件
-      component = <Input placeholder={placeholder} onChange={onChange} />;
+      component = <Input defaultValue={defaultValue} placeholder={placeholder} onChange={onChange}/>;
       break;
     case 'TableField': //明细控件
-      component = <TableField item={item} />;
+      component = <TableField item={item}/>;
       break;
     case 'DDAttachment': //附件
       // component = <DDAttachment />
@@ -104,7 +108,7 @@ export default function DDComponents(props) {
       component = <InnerContactField onChange={onChange}></InnerContactField>;
       break;
     case 'DepartmentField': //部门控件
-      component = <DepartmentField onChange={onChange} />;
+      component = <DepartmentField onChange={onChange}/>;
       break;
     case 'RelateField': //关联审批单
       component = '关联审批单控件未渲染!'

src/pages/Detail/CommitAuditModal.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import React, {useEffect, useState, useRef, useMemo, useCallback} from 'react';
 import '@ant-design/compatible/assets/index.css';
 import {
   Modal,
@@ -19,11 +19,11 @@ import {
   Divider,
   Collapse,
 } from 'antd';
-import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
-import { connect } from 'dva';
-import { isArray, result, set } from 'lodash';
-import { useForm } from 'rc-field-form';
-import { async } from '@antv/x6/lib/registry/marker/async';
+import {PlusOutlined, UploadOutlined} from '@ant-design/icons';
+import {connect} from 'dva';
+import {isArray, result, set} from 'lodash';
+import {useForm} from 'rc-field-form';
+import {async} from '@antv/x6/lib/registry/marker/async';
 import AuditDetailed from './AuditDetailed';
 import AuditFlow from './AuditFlow';
 import {
@@ -32,21 +32,22 @@ import {
   queryProcessFlows,
   querySaveBomForm,
 } from '@/services/boom';
-import { Form as Form3x } from '@ant-design/compatible';
-import { getCurrentUser } from '@/utils/authority';
+import {Form as Form3x} from '@ant-design/compatible';
+import {getCurrentUser} from '@/utils/authority';
 import DDCode from '@/components/DDComponents/DDCode';
-import { uploadFile, queryUserListByRoleID } from '@/services/boom';
+import {uploadFile, queryUserListByRoleID} from '@/services/boom';
 import ApprovalProcess from './ApprovalProcess';
-import { uuidv4 } from '@antv/xflow';
+import {uuidv4} from '@antv/xflow';
 import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
 import AttachmentTable from '@/components/AttachmentTable';
-import { getToken } from '@/utils/utils';
+import {getToken} from '@/utils/utils';
 import LuckyExcel from 'luckyexcel';
+import DDComponents from "@/components/DDComponents";
 
-const { TextArea } = Input;
-const { Option } = Select;
-const { TabPane } = Tabs;
-const { Step } = Steps;
+const {TextArea} = Input;
+const {Option} = Select;
+const {TabPane} = Tabs;
+const {Step} = Steps;
 
 // 提交
 function CommitAuditModal(props) {
@@ -82,7 +83,7 @@ function CommitAuditModal(props) {
 
   useEffect(() => {
     if (!visible) return;
-    const { edges, nodes } = flowDetail;
+    const {edges, nodes} = flowDetail;
     // initFormList().then(approvalProcess => {
     let Id = version.template_node_id;
     const currentId = flowDetail.nodes.find?.(item => item.Id == Id)?.node_id;
@@ -105,7 +106,7 @@ function CommitAuditModal(props) {
       // 设置延迟，等待组件渲染
       setTimeout(async () => {
         form.setFieldsValue(defaultValues);
-        const approvalProcess = await initFormList();
+        const {approvalProcess} = await initFormList();
         Object.values(defaultValues).forEach(value => onChange(value, approvalProcess || {}));
       }, 200);
     }
@@ -137,7 +138,8 @@ function CommitAuditModal(props) {
     uploadList.current = files.map(file => OSSData.host + '/' + file.url);
     console.log(uploadList.current);
   };
-  const OnUploading = file => {};
+  const OnUploading = file => {
+  };
   const uploadProps = {
     OSSData: OSSData,
     // onDone: OnModelFileDone,
@@ -155,7 +157,7 @@ function CommitAuditModal(props) {
     if (res.data) {
       const formList = JSON.parse(res.data.json);
       setApprovalProcess(formList.approvalProcess || {});
-      return formList.approvalProcess;
+      return formList;
       // setFormComponentValues(defaultFormData);
     }
   };
@@ -205,7 +207,7 @@ function CommitAuditModal(props) {
    * @returns
    */
   const getNextNodes = (currentId, type) => {
-    const { edges, nodes } = flowDetail;
+    const {edges, nodes} = flowDetail;
     if (!currentId) return [];
     //删除虚线通向的节点
     // let targetIds = edges
@@ -251,15 +253,23 @@ function CommitAuditModal(props) {
     setAuditId(node?.node_id);
   };
 
-  const onChange = (value, approvalProcess) => {
+  const onChange = async (value, approvalProcess) => {
+    // 加载之前提交的form数据
+    const {formList: resData} = await initFormList();
+    const prevFormData = resData && resData.length ? JSON.parse(resData[0]) : [];
     if (value) {
       changeAudit(value[value.length - 1]);
-      setAuditListFun(approvalProcess);
+      if (prevFormData.length && value[0] === prevFormData.template_node_id) {
+        setAuditListFun(approvalProcess, prevFormData.formComponentValues);
+      } else {
+        setAuditListFun(approvalProcess);
+      }
     } else {
       changeAudit('');
       setAuditList([]);
       setApprovalProcess({});
     }
+
     form.setFieldValue('next_template_node_id', '');
   };
 
@@ -311,7 +321,7 @@ function CommitAuditModal(props) {
   };
 
   //处理tabs页
-  const setAuditListFun = async (approvalProcess = {}) => {
+  const setAuditListFun = async (approvalProcess = {}, prevFromData = []) => {
     var fieldsValue = await form.validateFields();
     let addAuditList = [];
     let result = Object.values(fieldsValue)
@@ -326,7 +336,7 @@ function CommitAuditModal(props) {
       })
       .filter(item => item);
     let flowIds = [...new Set(nodeList.map(item => item.flow_id))].join(',');
-    let data = await queryProcessFlows({ ids: flowIds });
+    let data = await queryProcessFlows({ids: flowIds});
     if (data && data?.length > 0) {
       let newlist = nodeList.map(node => {
         let curData = data.find(item => item.id == node.flow_id);
@@ -341,9 +351,16 @@ function CommitAuditModal(props) {
       addAuditList = [...addAuditList, ...newlist];
     }
     addAuditList.forEach((item, index) => {
+      // 回填历史数据
+     if (prevFromData.length) {
+        item.items.forEach(DDComponent => {
+          const prevValue = prevFromData.find(pItem => pItem.id === DDComponent.props.id)
+          DDComponent.props.defaultValue = prevValue.value
+        })
+      }
       let Components = Form3x.create({
         onValuesChange: (props, changedValues, allValues) => {
-          const { items } = props;
+          const {items} = props;
           formComponentValues[item.nodeId] = items
             .map(item => {
               const itemProps = item.props;
@@ -365,10 +382,10 @@ function CommitAuditModal(props) {
             })
             .filter(item => item);
           if (getReComputeAudit(items, changedValues)) advanceSubmit();
-          setFormComponentValues({ ...formComponentValues });
+          setFormComponentValues({...formComponentValues});
         },
       })(AuditDetailed);
-      item.FormComponents = <Components items={item.items} />;
+      item.FormComponents = <Components items={item.items}/>;
     });
     setAuditList(addAuditList);
     if (Object.keys(approvalProcess).length == 0) advanceSubmit();
@@ -545,7 +562,7 @@ function CommitAuditModal(props) {
       await querySaveBomForm({
         project_id: version.project_id,
         node_id: version.template_node_id,
-        json: JSON.stringify({ approvalProcess }),
+        json: JSON.stringify({approvalProcess, fromList}),
       });
       params.audit_series = uuidv4();
       params.files = uploadList.current.join(',');
@@ -574,13 +591,13 @@ function CommitAuditModal(props) {
   const CascaderNode = index => {
     return (
       <Form.Item
-        labelCol={{ span: 7 }}
-        wrapperCol={{ span: 15 }}
+        labelCol={{span: 7}}
+        wrapperCol={{span: 15}}
         label={`审批节点${index + 1}`}
         name={`circle${index}`}
         key={`circle${index}`}
       >
-        <Cascader style={{ width: '100%' }} options={data} onChange={onChange} />
+        <Cascader style={{width: '100%'}} options={data} onChange={onChange}/>
       </Form.Item>
     );
   };
@@ -642,28 +659,28 @@ function CommitAuditModal(props) {
       <Form form={form}>
         {data.map((item, idx) => (data.length == 1 ? CascaderNode('') : CascaderNode(idx)))}
         <Form.Item
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 15 }}
+          labelCol={{span: 7}}
+          wrapperCol={{span: 15}}
           label="业务节点"
           name="next_template_node_id"
           // rules={[{ required: true, message: '请选择业务节点' }]}
         >
-          <Select style={{ width: '100%' }}>
+          <Select style={{width: '100%'}}>
             {nextNodesList.map(item => (
               <Option key={item.value}>{item.label}</Option>
             ))}
           </Select>
         </Form.Item>
-        <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="备注信息" name="desc">
-          <Input.TextArea />
+        <Form.Item labelCol={{span: 7}} wrapperCol={{span: 15}} label="备注信息" name="desc">
+          <Input.TextArea/>
         </Form.Item>
-        <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="附件">
-          {OSSData.host && <AliyunOSSUpload {...uploadProps} directory={false} label="上传文件" />}
+        <Form.Item labelCol={{span: 7}} wrapperCol={{span: 15}} label="附件">
+          {OSSData.host && <AliyunOSSUpload {...uploadProps} directory={false} label="上传文件"/>}
         </Form.Item>
       </Form>
-      <Collapse style={{ marginTop: 20 }}>
+      <Collapse style={{marginTop: 20}}>
         <Collapse.Panel header="已上传附件" key="1">
-          <AttachmentTable version={version} canDelete={version.last_version == 0} />
+          <AttachmentTable version={version} canDelete={version.last_version == 0}/>
         </Collapse.Panel>
       </Collapse>
       <Tabs defaultActiveKey="1">
@@ -673,7 +690,7 @@ function CommitAuditModal(props) {
               <Col span={17}>{item.FormComponents}</Col>
               <Col offset={1} span={6}>
                 {!approvalProcess[item.nodeId] ? ( //!formComponentValues[item.nodeId] ||
-                  <Empty description="请先填写表单" />
+                  <Empty description="请先填写表单"/>
                 ) : (
                   <ApprovalProcess
                     id={item.nodeId}
@@ -699,6 +716,7 @@ function getDataValue(item) {
   }
   return arr;
 }
+
 const uploadExcelByUrl = (nodeType, versionId) => {
   const TEMPLATE_URL =
     'https://water-service-test.oss-cn-hangzhou.aliyuncs.com/doc/contract/2023-06-29/ed0d5dcd-6ce0-40df-9d17-a1f69245dbb9.xlsx';
@@ -714,7 +732,7 @@ const uploadExcelByUrl = (nodeType, versionId) => {
 
         let len = exportJson.sheets.length;
         const excelData = exportJson.sheets?.map(item => {
-          return { ...item, order: Number(item.order) };
+          return {...item, order: Number(item.order)};
         });
         delete record.id;
         record.order = len;
@@ -742,7 +760,7 @@ async function getExcel(gridKey) {
   return JSON.parse(JSON.parse(res));
 }
 
-export default connect(({ xflow, detail, user }) => ({
+export default connect(({xflow, detail, user}) => ({
   flowDetail: xflow.flowDetail,
   versionList: detail.versionList,
   currentUser: user.currentUser,