feat: 添加Text Note 控件

src/components/DDComponents/CodeFiled/index.js

@@ -1,26 +1,18 @@
 import React, { useEffect, useState } from 'react';
+import { connect } from 'dva';
 import { Input } from 'antd';
-import { useRequest } from 'umi';
 import { queryContractCode } from '@/services/contract';
-import { queryDepsV2 } from '@/services/department';
-import { connect } from 'dva';
 
 function CodeField(props) {
   const { depId, onChange, depUserTree } = props;
   const [value, setValue] = useState('');
-  //
-  // // 每次更新时 计算合同编号接口 并返回
-  // const { run: runCode } = useRequest(data => queryContractCode(data), {
-  //   manual: true,
-  //   onSuccess: data => {
-  //     setValue(data?.code);
-  //     onChange?.(data?.code);
-  //   },
-  // });
 
   const getContractCode = async params => {
-    const res = queryContractCode(params).catch(err => console.log(err));
-    console.log(res);
+    const res = await queryContractCode(params).catch(err => console.log(err));
+    if (res.code === 200 && res.data && res.data.code) {
+      setValue(res.data.code);
+      onChange(res.data.code);
+    }
   };
 
   const getDepItemById = id => {
@@ -42,7 +34,7 @@ function CodeField(props) {
   useEffect(() => {
     if (!depId || !depUserTree.length) return;
     const dep_code = getDepItemById(depId)?.Code;
-    const company = depUserTree.find(item => item.Flag == 1);
+    const company = depUserTree.find(item => item.Flag === 1);
     const params = {
       company_id: company?.ID,
       company_code: company?.Code,

src/components/DDComponents/DIYTable/index.tsx

@@ -1,7 +1,7 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Input, Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import DDDateField from '@/components/DDComponents/DDDateField';
 import DDSelectField from '@/components/DDComponents/DDSelectField';
 import NumberField from '@/components/DDComponents/NumberField';
@@ -172,15 +172,20 @@ function DIYTable(props: IProps) {
     setTableData([...tableData, { index: tableData.length + 1 }]);
   };
 
-  if (displayOnly) {
-    handleDisplayOnly();
-  } else {
+  if (!displayOnly) {
     handleGenerateTable();
   }
 
+  useEffect(() => {
+    if (!displayOnly) {
+      return;
+    }
+    handleDisplayOnly();
+  }, []);
+
   return (
     <>
-      {table.name ? table.name : table.props.label}
+      {table.name && !displayOnly ? table.name : null}
       <Table
         style={displayOnly ? { margin: '10px 24px 10px 0' } : {}}
         columns={tableColumnDef}

src/pages/Detail/AuditDetailed.js

@@ -101,7 +101,7 @@ const AuditDetailed = props => {
   return (
     <Form
       form={form}
-      style={{ minHeight: '80vh', overflowY: 'auto', paddingRight: 20 }}
+      style={{ minHeight: '25vh', overflowY: 'auto', paddingRight: 20 }}
       layout="vertical"
       autoComplete="off"
       onValuesChange={onValuesChange}

src/pages/Detail/CommitAuditModal.js

@@ -21,9 +21,7 @@ import {
 } 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 AuditDetailed from './AuditDetailed';
 import AuditFlow from './AuditFlow';
 import {
@@ -87,26 +85,154 @@ function CommitAuditModal(props) {
     form: [],
   });
 
+  function getDataValue(item) {
+    let arr = [];
+    arr.push(item.value);
+    if (item.children?.length > 0) {
+      const res = getDataValue(item.children[0]);
+      arr = arr.concat(res);
+    }
+    return arr;
+  }
+
+  const initFormList = async () => {
+    const res = await queryGetBomForm({
+      project_id: version.project_id,
+      node_id: version.template_node_id,
+    });
+    if (res.data) {
+      const formList = JSON.parse(res.data.json);
+      setApprovalProcess(formList.approvalProcess || {});
+      return formList;
+    }
+    return [];
+  };
+
+  /**
+   *
+   * @param {*} currentId 当前节点
+   * @param {*} type 下一个节点的类型  custom-circle: 审批节点   custom-rect: 业务节点
+   * @returns
+   */
+  const getNextNodes = (currentId, type) => {
+    const { edges, nodes } = flowDetail;
+    if (!currentId) return [];
+    // 删除虚线通向的节点
+    // let targetIds = edges
+    //   .filter(edge => {
+    //     let line = edge.attrs?.line?.strokeDasharray?.split(' ');
+    //     return edge.source.cell == currentId && line && line[0] == '0';
+    //   })
+    //   .map(item => item.target.cell);
+    // console.log(
+    //   '---------',
+    //   edges.filter(edge => edge.source.cell == currentId)
+    // );
+    const targetIds = edges
+      .filter(edge => edge.source.cell === currentId)
+      .map(item => item.target.cell);
+
+    edges.filter(edge => edge.source.cell === currentId);
+    const auditNodes = nodes.filter(node => {
+      if (type && node.name !== type) {
+        return false;
+      }
+      return targetIds.indexOf(node.id) !== -1;
+    });
+    const auditNode = auditNodes.map(item => {
+      return {
+        label: item.label,
+        value: item.Id,
+        Id: item.node_id,
+        parentId: currentId,
+        children: [],
+      };
+    });
+    return auditNode || [];
+  };
+
+  const treeData = currentId => {
+    const list = getNextNodes(currentId, 'custom-circle');
+    const fun = nodes => {
+      const re = nodes?.forEach((item, idx) => {
+        const data = getNextNodes(item.Id, 'custom-circle');
+        if (data || data.length > 0) list.push(...data);
+        fun(data);
+      });
+    };
+    fun(list);
+
+    const fun2 = list => {
+      const parents = list.filter(item => list.findIndex(node => node.Id == item.parentId) == -1);
+      let translator = (parents, children) => {
+        setLength(length + 1);
+        parents.forEach(parent => {
+          children.forEach((current, index) => {
+            if (current.parentId === parent.Id) {
+              let temp = JSON.parse(JSON.stringify(children));
+              temp.splice(index, 1);
+              translator([current], temp);
+              if (!parent.children.find(item => item.Id == current.Id))
+                parent.children.push(current);
+            }
+          });
+        });
+      };
+      translator(parents, list);
+      return parents;
+    };
+    return fun2(list);
+  };
+
+  const onChange = async (value, approvalProcess) => {
+    // 加载之前提交的form数据
+    const resFormData = await initFormList();
+    const resData = resFormData?.formList;
+    debugger;
+    const prevFormData =
+      resData && resData.length ? resData.map(resItem => JSON.parse(resItem)) : null;
+    if (prevFormData && prevFormData.length) {
+      const formValues = {};
+      prevFormData.forEach(pItem => {
+        formValues[pItem.template_node_id] = [...pItem.formComponentValues];
+      });
+      setFormComponentValues(formValues);
+    }
+
+    if (value) {
+      changeAudit(value[value.length - 1]);
+      if (prevFormData !== null) {
+        setAuditListFun(approvalProcess, prevFormData);
+      } else {
+        setAuditListFun(approvalProcess);
+      }
+    } else {
+      changeAudit('');
+      setAuditList([]);
+      setApprovalProcess({});
+    }
+    form.setFieldValue('next_template_node_id', '');
+  };
+
   useEffect(() => {
     if (!visible) return;
 
     const { edges, nodes } = flowDetail;
 
-    let Id = version.template_node_id;
+    const Id = version.template_node_id;
     const currentId = flowDetail.nodes.find?.(item => item.Id == Id)?.node_id;
     const data = treeData(currentId);
-    // console.log('===============审批节点======', data);
     const nextNodes = getNextNodes(currentId, 'custom-rect');
     if (data.length <= 0 || nextNodes.length > 0) {
       setAuditId(currentId);
     } else {
-      let defaultValues = {};
-      if (data.length == 1) {
-        let value = getDataValue(data[0]);
-        defaultValues[`circle`] = value;
+      const defaultValues = {};
+      if (data.length === 1) {
+        const value = getDataValue(data[0]);
+        defaultValues.circle = value;
       } else {
         data.forEach((item, index) => {
-          let value = getDataValue(item);
+          const value = getDataValue(item);
           defaultValues[`circle${index}`] = value;
         });
       }
@@ -114,8 +240,8 @@ function CommitAuditModal(props) {
       setTimeout(async () => {
         form.setFieldsValue(defaultValues);
         const initForm = await initFormList();
-        const approvalProcess = initForm?.approvalProcess ? initForm.approvalProcess : {};
-        Object.values(defaultValues).forEach(value => onChange(value, approvalProcess));
+        const tempAP = initForm?.approvalProcess ? initForm.approvalProcess : {};
+        Object.values(defaultValues).forEach(value => onChange(value, tempAP));
       }, 200);
     }
     setData(data);
@@ -164,100 +290,12 @@ function CommitAuditModal(props) {
     // showUploadList: false,
   };
 
-  const initFormList = async () => {
-    const res = await queryGetBomForm({
-      project_id: version.project_id,
-      node_id: version.template_node_id,
-    });
-    if (res.data) {
-      const formList = JSON.parse(res.data.json);
-      setApprovalProcess(formList.approvalProcess || {});
-      return formList;
-    }
-  };
-
-  const treeData = currentId => {
-    const list = getNextNodes(currentId, 'custom-circle');
-    const fun = nodes => {
-      const re = nodes?.forEach((item, idx) => {
-        const data = getNextNodes(item.Id, 'custom-circle');
-        if (data || data.length > 0) list.push(...data);
-        fun(data);
-      });
-    };
-    fun(list);
-
-    const fun2 = list => {
-      const parents = list.filter(item => list.findIndex(node => node.Id == item.parentId) == -1);
-      let translator = (parents, children) => {
-        setLength(length + 1);
-        parents.forEach(parent => {
-          children.forEach((current, index) => {
-            if (current.parentId === parent.Id) {
-              let temp = JSON.parse(JSON.stringify(children));
-              temp.splice(index, 1);
-              translator([current], temp);
-              if (!parent.children.find(item => item.Id == current.Id))
-                parent.children.push(current);
-            }
-          });
-        });
-      };
-      translator(parents, list);
-      return parents;
-    };
-    return fun2(list);
-  };
-
   const currentNodeId = useMemo(() => {
     let Id = version.template_node_id;
     setAuditId(currentNodeId);
     return flowDetail.nodes.find?.(item => item.Id == Id)?.node_id;
   }, [flowDetail, version]);
 
-  /**
-   *
-   * @param {*} currentId 当前节点
-   * @param {*} type 下一个节点的类型  custom-circle: 审批节点   custom-rect: 业务节点
-   * @returns
-   */
-  const getNextNodes = (currentId, type) => {
-    const { edges, nodes } = flowDetail;
-    if (!currentId) return [];
-    // 删除虚线通向的节点
-    // let targetIds = edges
-    //   .filter(edge => {
-    //     let line = edge.attrs?.line?.strokeDasharray?.split(' ');
-    //     return edge.source.cell == currentId && line && line[0] == '0';
-    //   })
-    //   .map(item => item.target.cell);
-    // console.log(
-    //   '---------',
-    //   edges.filter(edge => edge.source.cell == currentId)
-    // );
-    let targetIds = edges
-      .filter(edge => edge.source.cell == currentId)
-      .map(item => item.target.cell);
-
-    edges.filter(edge => edge.source.cell == currentId);
-    let auditNodes = nodes.filter(node => {
-      if (type && node.name != type) {
-        return false;
-      }
-      return targetIds.indexOf(node.id) != -1;
-    });
-    const result = auditNodes.map(item => {
-      return {
-        label: item.label,
-        value: item.Id,
-        Id: item.node_id,
-        parentId: currentId,
-        children: [],
-      };
-    });
-    return result || [];
-  };
-
   const nextNodesList = useMemo(() => {
     if (!auditId && !currentNodeId) return [];
     return getNextNodes(auditId || currentNodeId, 'custom-rect');
@@ -268,35 +306,6 @@ function CommitAuditModal(props) {
     setAuditId(node?.node_id);
   };
 
-  const onChange = async (value, approvalProcess) => {
-    // 加载之前提交的form数据
-    const resFormData = await initFormList();
-    const resData = resFormData?.formList;
-    const prevFormData =
-      resData && resData.length ? resData.map(resItem => JSON.parse(resItem)) : null;
-    if (prevFormData && prevFormData.length) {
-      const formValues = {};
-      prevFormData.forEach(pItem => {
-        formValues[pItem.template_node_id] = [...pItem.formComponentValues];
-      });
-      setFormComponentValues(formValues);
-    }
-
-    if (value) {
-      changeAudit(value[value.length - 1]);
-      if (prevFormData !== null) {
-        setAuditListFun(approvalProcess, prevFormData);
-      } else {
-        setAuditListFun(approvalProcess);
-      }
-    } else {
-      changeAudit('');
-      setAuditList([]);
-      setApprovalProcess({});
-    }
-    form.setFieldValue('next_template_node_id', '');
-  };
-
   const getReComputeAudit = (items, changedValues) => {
     const id = Object.keys(changedValues)[0];
     const formItem = items?.find(item => item.props.id == id);
@@ -427,7 +436,14 @@ function CommitAuditModal(props) {
         });
       }
     } else {
-      const newData = [{ name: tableLabel, id: tableID, type: tableID.split('_')[0], value: rows }];
+      const newData = [
+        {
+          name: tableLabel,
+          id: tableID,
+          type: tableID.split('_')[0],
+          value: rows,
+        },
+      ];
       setFormComponentValues(prevState => {
         return { ...prevState, [currentNodeID]: newData };
       });
@@ -435,11 +451,13 @@ function CommitAuditModal(props) {
   };
 
   const onFormValueChange = (changedFields, allValues) => {
+    console.log(allValues);
     const currentNodeID = auditList[currentTab].nodeId;
     const allFormItem = auditList[currentTab].items;
     const componentValue = formComponentValues[currentNodeID] || [];
     const currentFieldID = Object.keys(changedFields)[0];
     const formItem = allFormItem.find(item => item.props.id === currentFieldID);
+    // 记录变更的formItem值
     if (componentValue.length) {
       for (let index = 0; index < componentValue.length; index++) {
         const item = componentValue[index];
@@ -465,32 +483,35 @@ function CommitAuditModal(props) {
         value: [changedFields[currentFieldID]],
       });
     }
-    setFormComponentValues({ ...formComponentValues, [currentNodeID]: componentValue });
+    setFormComponentValues({
+      ...formComponentValues,
+      [currentNodeID]: componentValue,
+    });
     formValueRef.current.form[currentNodeID] = [...componentValue];
     advanceSubmit();
   };
 
   // 处理tabs页
   const setAuditListFun = async (approvalProcess = {}, prevFormData = []) => {
-    var fieldsValue = await form.validateFields();
+    const fieldsValue = await form.validateFields();
     let addAuditList = [];
-    let result = Object.values(fieldsValue)
+    const result = Object.values(fieldsValue)
       .map(item => {
         if (item && Array.isArray(item)) return item;
       })
       .filter(item => item)
       .flat(Infinity);
-    let nodeList = [...new Set(result)]
+    const nodeList = [...new Set(result)]
       .map(Id => {
         return flowDetail.nodes.find?.(item => item.Id == Id);
       })
       .filter(item => item);
-    let flowIds = [...new Set(nodeList.map(item => item.flow_id))].join(',');
-    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);
-        let newItem = {
+    const flowIds = [...new Set(nodeList.map(item => item.flow_id))].join(',');
+    const processFlows = await queryProcessFlows({ ids: flowIds });
+    if (processFlows && processFlows?.length > 0) {
+      const newlist = nodeList.map(node => {
+        const curData = processFlows.find(item => item.id === node.flow_id);
+        const newItem = {
           name: curData?.name,
           nodeId: node.Id,
           items: JSON.parse(curData?.form_json || '[]'),
@@ -500,7 +521,7 @@ function CommitAuditModal(props) {
       });
       addAuditList = [...addAuditList, ...newlist];
     }
-    addAuditList.forEach((addAuditItem, index) => {
+    addAuditList.forEach(addAuditItem => {
       // 回填部分组件的历史数据
       if (prevFormData.length) {
         const currentForm = prevFormData.find(
@@ -513,37 +534,37 @@ function CommitAuditModal(props) {
           DDComponent.props.defaultValue = prevValue?.value || prevValue?.defaultValue;
         });
       }
-      const tempFormComponentValues = JSON.parse(JSON.stringify(formComponentValues));
-      const Components = Form3x.create({
-        onValuesChange: (props, changedValues, allValues) => {
-          const { items: allFormItem } = props;
-          tempFormComponentValues[addAuditItem.nodeId] = allFormItem
-            .map(formItem => {
-              const itemProps = formItem.props;
-              const val = allValues[itemProps.id];
-              if (!itemProps.label || val === '') return;
-              if (val instanceof Object) {
-                return {
-                  name: itemProps.label,
-                  id: itemProps.id,
-                  value: [...val],
-                };
-              } else if (allValues[itemProps.id]) {
-                return {
-                  name: itemProps.label,
-                  id: itemProps.id,
-                  value: [allValues[itemProps.id]] || undefined,
-                };
-              }
-            })
-            .filter(formItem => formItem);
-          if (getReComputeAudit(allFormItem, changedValues)) advanceSubmit();
-          console.log(tempFormComponentValues);
-          setFormComponentValues({ ...tempFormComponentValues });
-        },
-      })(AuditDetailed);
-
-      addAuditItem.FormComponents = <Components items={addAuditItem.items} />;
+      // const tempFormComponentValues = JSON.parse(JSON.stringify(formComponentValues));
+      // const Components = Form3x.create({
+      //   onValuesChange: (props, changedValues, allValues) => {
+      //     const { items: allFormItem } = props;
+      //     tempFormComponentValues[addAuditItem.nodeId] = allFormItem
+      //       .map(formItem => {
+      //         const itemProps = formItem.props;
+      //         const val = allValues[itemProps.id];
+      //         if (!itemProps.label || val === '') return;
+      //         if (val instanceof Object) {
+      //           return {
+      //             name: itemProps.label,
+      //             id: itemProps.id,
+      //             value: [...val],
+      //           };
+      //         } else if (allValues[itemProps.id]) {
+      //           return {
+      //             name: itemProps.label,
+      //             id: itemProps.id,
+      //             value: [allValues[itemProps.id]] || undefined,
+      //           };
+      //         }
+      //       })
+      //       .filter(formItem => formItem);
+      //     if (getReComputeAudit(allFormItem, changedValues)) advanceSubmit();
+      //     console.log(tempFormComponentValues);
+      //     setFormComponentValues({ ...tempFormComponentValues });
+      //   },
+      // })(AuditDetailed);
+
+      // addAuditItem.FormComponents = <Components items={addAuditItem.items} />;
     });
     setAuditList(addAuditList);
     advanceSubmit();
@@ -872,16 +893,6 @@ function CommitAuditModal(props) {
   );
 }
 
-function getDataValue(item) {
-  let arr = [];
-  arr.push(item.value);
-  if (item.children?.length > 0) {
-    let res = getDataValue(item.children[0]);
-    arr = arr.concat(res);
-  }
-  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';

src/pages/Detail/FormAndFilesNode.js

@@ -1,10 +1,11 @@
 import { Card, Col, Input, Row, Modal, Empty, Collapse } from 'antd';
 import { Form } from '@ant-design/compatible';
 import { useForm } from 'antd/lib/form/Form';
-import { useMemo, useState } from 'react';
-import CommentContent from '@/components/CommentContent';
+import React, { useMemo, useState } from 'react';
 import { connect } from 'dva';
+import CommentContent from '@/components/CommentContent';
 import AttachmentTable from '@/components/AttachmentTable';
+import DIYTable from '@/components/DDComponents/DIYTable';
 
 const { confirm } = Modal;
 const { Panel } = Collapse;
@@ -28,15 +29,16 @@ const FormAndFilesNode = props => {
         </Row>
       </Card>
     );
-  } else if (excelFileList?.length > 0) {
+  }
+
+  if (excelFileList?.length > 0) {
     return (
       <Card title="附件信息">
         <AttachmentTable version={version} canDelete={version.last_version == 0} />
       </Card>
     );
-  } else {
-    return null;
   }
+  return null;
 };
 
 const renderFrom = data => {
@@ -48,10 +50,23 @@ const renderFrom = data => {
     return (
       <>
         {formData.map((item, idx) => {
+          if (item.type === 'DIYTable') {
+            return (
+              <Form.Item
+                key={`FormAndFilesNode_${item.id}`}
+                labelCol={{ span: 4 }}
+                wrapperCol={{ span: 14 }}
+                label={item.name}
+              >
+                <DIYTable key={item.id} table={item} columns={item.value} displayOnly />
+              </Form.Item>
+            );
+          }
+
           const value = item.value.join(',');
           return (
             <Form.Item
-              key={`FormAndFilesNode_${idx}`}
+              key={`FormAndFilesNode_${item.id}`}
               labelCol={{ span: 4 }}
               wrapperCol={{ span: 14 }}
               label={item.name}

src/pages/Detail/Index.js

@@ -140,6 +140,7 @@ function Detail(props) {
     }
     return data;
   }, [auditList, version]);
+
   const active_audit = flow.active_audit;
   const isAuditor = useMemo(() => {
     return active_audit == 1 && flow.currentNode?.auditor == currentUser.ID;
@@ -625,7 +626,7 @@ function Detail(props) {
           )}
 
           <FormAndFilesNode
-            formData={version?.ding_schema}
+            formData={version?.formStr || version?.ding_schema}
             excelFileList={excelFileList}
             version={version}
           />

src/services/contract.js

@@ -1,10 +1,9 @@
 import request from '@/utils/request';
+import { stringify } from 'qs';
 
 // 计算合同编号
 export const queryContractCode = async data => {
-  return await request('/api/contract/v1/code', {
-    params: data,
-  });
+  return await request(`/api/contract/v1/code?${stringify(data)}`);
 };
 
 // http://localhost:8000/api/supplier/v1/supplier/list

src/services/department.js

@@ -1,5 +0,0 @@
-import request from '@/utils/request';
-
-export async function queryDepsV2() {
-  return request(`/api/v2/main/deps`);
-}

src/utils/request.js

@@ -91,7 +91,6 @@ export default function request(url, option, jwt) {
     // API_HOST在config/config.js的define中配置
     // url = API_HOST + url
   }
-  console.log(url);
   let token = getToken();
   if (!token) {
     token = GetTokenFromUrl();