fix: 工单配置迁移到工作流编辑器

src/pages/bsmanager/workOrder/workFlow/flowComponents/ProcessConfig.jsx

@@ -93,7 +93,7 @@ const ProcessConfig = props => {
             {/* <Option value="分派节点显示">分派节点显示</Option> */}
           </Select>
         </Form.Item>
-        <Form.Item label="编码样式" name="coding12Checked">
+        <Form.Item label="编码样式" name="useFixedCodingRule">
           <Radio.Group>
             <Radio value={false}>{form.getFieldValue('codingDefaultText')}</Radio>
             <Radio value>{form.getFieldValue('coding12Text')}</Radio>

src/pages/bsmanager/workOrder/workflowEdit/Workflow.jsx

@@ -11,6 +11,7 @@ import {
   FormOutlined,
   DeleteTwoTone,
   ExclamationCircleOutlined,
+  ControlOutlined,
 } from '@ant-design/icons';
 
 import classnames from 'classnames';
@@ -19,6 +20,7 @@ import PageContainer from '@/components/BasePageContainer';
 import FlowChart from './workFlowComponents/FlowChart';
 import FlowModal from './workFlowComponents/FlowModal';
 import FlowGroupModal from './workFlowComponents/FlowGroupModal';
+import Timelimit from '../workFlow/flowComponents/Timelimit';
 
 import styles from './workflow.less';
 
@@ -42,6 +44,7 @@ const Workflow = () => {
   const [visible, setVisible] = useState({
     FlowModal: false,
     FlowGroupModal: false,
+    auxiliaryView: false,
   }); // 弹窗显示
   useEffect(() => {
     getFlowList();
@@ -118,6 +121,13 @@ const Workflow = () => {
     setModalType('edit');
     setEditMsg(val);
   };
+  const timeConfig = (val, e) => {
+    console.log(val, 'val');
+    e.stopPropagation();
+    showModal('auxiliaryView', true);
+    setModalType('edit');
+    setEditMsg({ ...val, name: val.FlowName, ID: val.FlowID });
+  };
   // 删除流程
   const delFlow = (val, e) => {
     e.stopPropagation();
@@ -264,6 +274,14 @@ const Workflow = () => {
             {obj.FlowName}
           </span>
           <div className={styles.nodeTip}>
+            <Tooltip title="时限配置">
+              <ControlOutlined
+                onClick={e => {
+                  timeConfig(obj, e);
+                }}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
             <Tooltip title="编辑流程" className={styles.fs}>
               <FormOutlined onClick={e => editFlow(obj, e)} />
             </Tooltip>
@@ -377,6 +395,12 @@ const Workflow = () => {
         keep={keep}
         onSubumit={val => groupCallBack(val)}
       />
+      {/* 流程时限配置 */}
+      <Timelimit
+        visible={visible.auxiliaryView}
+        msg={editMsg}
+        handleCancel={() => showModal('auxiliaryView', false)}
+      />
     </PageContainer>
   );
 };

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx

 /* eslint-disable global-require */
 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Modal, notification, Spin, Tooltip } from 'antd';
+import { Button, Modal, notification, Spin, Tooltip, message } from 'antd';
 import lodash from 'lodash';
-import { SaveNodeChange, GetFlowNode } from '@/services/workflow/workflow';
+import {
+  SaveNodeChange,
+  GetFlowNode,
+  FlowNodeSave,
+  DeleteFlowNode,
+  DeleteFlowNodes,
+} from '@/services/workflow/workflow';
 
 import { ExclamationCircleOutlined, TrophyOutlined } from '@ant-design/icons';
 import { Prompt } from 'react-router-dom';
@@ -72,7 +78,16 @@ const FlowChart = props => {
     myOverview = objGo(go.Overview, 'myOverviewDiv', { observed: diagram });
     // 监听节点或线的删除事件
     diagram.addDiagramListener('SelectionDeleted', e => {
+      let delNodes = [];
+      let delLinks = [];
       e.subject.each(n => {
+        if (n.data.LineId) {
+          delLinks.push(n.data.LineId);
+        }
+        if (n.data.ActivityId) {
+          delNodes.push(n.data.ActivityId);
+        }
+
         // 如果删除得节点不是新增得就给id放入到删除节点数组中
         if (n.data.NodeId && !AddNodes.some(item => item === n.data.NodeId)) {
           setTimeout(() => {
@@ -85,13 +100,21 @@ const FlowChart = props => {
           }, 0);
         }
       });
+      DeleteFlowNodes({ ActivityIds: delNodes, LineIds: delLinks }).then(res => {
+        if (res.code === 0) {
+          message.success('删除成功');
+        } else {
+          message.error(res.msg);
+        }
+      });
+      console.log(delNodes, delLinks, 'fffff');
     });
     // 监听节点或线的删除前事件
     diagram.commandHandler.canDeleteSelection = () =>
       // 用例获取选中的节点或线
-      diagram.selection.all(() => {
+      diagram.selection.all(e => {
         // 判断是否存在不允许删除的节点或线
-        showDeleteConfirm();
+        showDeleteConfirm(e.data);
         return false;
       });
     // 监听线,连接线的时候加上text属性
@@ -242,7 +265,7 @@ const FlowChart = props => {
     };
   }, [currentFlowData]);
   // 删除提醒
-  const showDeleteConfirm = () => {
+  const showDeleteConfirm = val => {
     confirm({
       title: '确定要删除所选中的节点吗？',
       icon: <ExclamationCircleOutlined />,
@@ -251,16 +274,29 @@ const FlowChart = props => {
       okType: 'danger',
       cancelText: '否',
       onOk() {
-        delNode();
+        delNode(val);
       },
       onCancel() {},
     });
   };
   // 删除节点
-  const delNode = () => {
+  const delNode = val => {
     setShowLeaveTip(true);
     leaveCallBack(true);
     diagram.commandHandler.deleteSelection();
+    // if (val.LineId) {
+    //   diagram.commandHandler.deleteSelection();
+    //   return;
+    // }
+
+    // DeleteFlowNode({ activityId: val.ActivityId }).then(res => {
+    //   if (res.code === 0) {
+    //     message.success('删除成功');
+    //     diagram.commandHandler.deleteSelection();
+    //   } else {
+    //     message.error(res.msg);
+    //   }
+    // });
   };
 
   const animateFadeDown = e => {
@@ -276,6 +312,29 @@ const FlowChart = props => {
   };
   // 初始化拖拽面板
   const initPalette = () => {
+    const defaultField = {
+      aheadHandle: 1,
+      NodeHandling: 1,
+      RuleList: [],
+      roleList: [],
+      CarbonCopyPeopleList: [],
+      ExtendPageList: [],
+      NodeAliasName: '',
+      Handover: '移交选择人',
+      TableName: '',
+      Fields: '',
+      WebPage: '',
+      FeedbackName: '',
+      SubFlowInfo: {},
+      Transferable: 0,
+      EventsInformation: 1,
+      IsSendMessage: 1,
+      IsSave: 0,
+      AutoClose: '否',
+      HalfwayClose: 0,
+      RollbackNode: '(上一节点)',
+      Rollbackable: false,
+    };
     myPaletteNode = objGo(go.Palette, 'myPaletteNode', {
       // 代替默认动画，使用自定义淡入淡出
       'animationManager.initialAnimationStyle': go.AnimationManager.None,
@@ -294,33 +353,21 @@ const FlowChart = props => {
           NodeName: '开始节点',
           NodeType: '1',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          CarbonCopyPeopleList: [],
-          roleList: [],
+          ...defaultField,
         },
         {
           category: 'nodeGeneral',
           NodeName: '普通节点',
           NodeType: '0',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          roleList: [],
-          CarbonCopyPeopleList: [],
+          ...defaultField,
         },
         {
           category: 'nodeEnd',
           NodeName: '结束节点',
           NodeType: '2',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          roleList: [],
-          CarbonCopyPeopleList: [],
+          ...defaultField,
         },
       ]),
     });
@@ -369,33 +416,21 @@ const FlowChart = props => {
           NodeName: '条件网关',
           NodeType: '20',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          roleList: [],
-          CarbonCopyPeopleList: [],
+          ...defaultField,
         },
         {
           category: 'gatewayParallel',
           NodeName: '并行网关',
           NodeType: '22',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          roleList: [],
-          CarbonCopyPeopleList: [],
+          ...defaultField,
         },
         {
           category: 'gatewayJoin',
           NodeName: '汇合网关',
           NodeType: '21',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          roleList: [],
-          CarbonCopyPeopleList: [],
+          ...defaultField,
         },
       ]),
     });
@@ -443,11 +478,7 @@ const FlowChart = props => {
           NodeName: '子流程',
           NodeType: '30',
           SerialNo: 0,
-          aheadHandle: 1,
-          NodeHandling: 1,
-          RuleList: [],
-          roleList: [],
-          CarbonCopyPeopleList: [],
+          ...defaultField,
         },
       ]),
     });
@@ -872,66 +903,87 @@ const FlowChart = props => {
     diagram.commandHandler.canSelectAll();
   };
   // 节点配置回调
-  const nodeCallBack = (obj, nextlinkNodes) => {
-    let nameIsRepeat;
-    let { nodes } = diagram;
-    let keyArr = [];
-    // 遍历输出节点对象
-    nodes.each(node => {
-      keyArr = [...keyArr, Number(node.data.key)];
-      if (obj.NodeName === node.data.NodeName) {
-        nameIsRepeat = true;
-        if (modalType === 'edit' && obj.NodeName === editMsg.NodeName) {
-          nameIsRepeat = false;
-        }
-      }
-    });
-    if (nameIsRepeat) {
-      notification.error({
-        message: '提示',
-        duration: 3,
-        description: '节点名称不能重复',
-      });
-      return;
-    }
-    // 编辑节点
-    let nodeData = diagram.model.findNodeDataForKey(nodeKey);
-    const {
-      NodeName,
-      NodeType,
-      roleList,
-      SerialNo,
-      aheadHandle,
-      NodeHandling,
-      nodeDetail,
-      RuleList,
-      CarbonCopyPeopleList,
-      SubFlowInfo,
-    } = obj;
-    nodeData.NodeName = NodeName;
-    nodeData.NodeType = NodeType;
-    nodeData.NodeId = nodeKey;
-    nodeData.roleList = roleList;
-    nodeData.SerialNo = SerialNo;
-    nodeData.aheadHandle = aheadHandle;
-    nodeData.NodeHandling = NodeHandling;
-    nodeData.nodeDetail = nodeDetail;
-    nodeData.RuleList = RuleList;
-    nodeData.CarbonCopyPeopleList = CarbonCopyPeopleList;
-    nodeData.SubFlowInfo = SubFlowInfo;
-    diagram.model.updateTargetBindings(nodeData);
+  // const nodeCallBack = obj => {
+  //   let nameIsRepeat;
+  //   let { nodes } = diagram;
+  //   let keyArr = [];
+  //   // 遍历输出节点对象
+  //   nodes.each(node => {
+  //     keyArr = [...keyArr, Number(node.data.key)];
+  //     if (obj.NodeName === node.data.NodeName) {
+  //       nameIsRepeat = true;
+  //       if (modalType === 'edit' && obj.NodeName === editMsg.NodeName) {
+  //         nameIsRepeat = false;
+  //       }
+  //     }
+  //   });
+  //   if (nameIsRepeat) {
+  //     notification.error({
+  //       message: '提示',
+  //       duration: 3,
+  //       description: '节点名称不能重复',
+  //     });
+  //     return;
+  //   }
+  //   // 编辑节点
+  //   let nodeData = diagram.model.findNodeDataForKey(nodeKey);
+  //   const {
+  //     NodeName,
+  //     NodeType,
+  //     roleList,
+  //     SerialNo,
+  //     aheadHandle,
+  //     NodeHandling,
+  //     nodeDetail,
+  //     RuleList,
+  //     CarbonCopyPeopleList,
+  //     SubFlowInfo,
+  //   } = obj;
+  //   nodeData.NodeName = NodeName;
+  //   nodeData.NodeType = NodeType;
+  //   nodeData.NodeId = nodeKey;
+  //   nodeData.roleList = roleList;
+  //   nodeData.SerialNo = SerialNo;
+  //   nodeData.aheadHandle = aheadHandle;
+  //   nodeData.NodeHandling = NodeHandling;
+  //   nodeData.nodeDetail = nodeDetail;
+  //   nodeData.RuleList = RuleList;
+  //   nodeData.CarbonCopyPeopleList = CarbonCopyPeopleList;
+  //   nodeData.SubFlowInfo = SubFlowInfo;
+  //   diagram.model.updateTargetBindings(nodeData);
 
-    // 给线上添加文字
-    let diagramObj = JSON.parse(diagram.model.toJson());
-    console.log(diagramObj.linkDataArray, 'diagramObj.linkDataArray');
-    diagramObj.linkDataArray.forEach(item => {
-      let node = diagram.model.findLinkDataForKey(item.LineKey);
-      node.text = item.RuleName;
-      diagram.model.updateTargetBindings(node);
+  //   // 给线上添加文字
+  //   let diagramObj = JSON.parse(diagram.model.toJson());
+  //   console.log(diagramObj.linkDataArray, 'diagramObj.linkDataArray');
+  //   diagramObj.linkDataArray.forEach(item => {
+  //     let node = diagram.model.findLinkDataForKey(item.LineKey);
+  //     node.text = item.RuleName;
+  //     diagram.model.updateTargetBindings(node);
+  //   });
+  //   // 关闭时进行数据比对看数据是否改变
+  //   leaveTip();
+  //   // setVisible(false);
+  // };
+  const nodeCallBack = () => {
+    FlowNodeSave({
+      flowID,
+      ...currentNode.current,
+      CarbonCopyPeopleList: currentNode.current.CarbonCopyPeopleList.map(item =>
+        Number(item.value),
+      ),
+    }).then(res => {
+      if (res.code === 0) {
+        diagram.model.setDataProperty(currentNode.current, 'ActivityId', res.data.ActivityId);
+        diagram.model.setDataProperty(
+          currentNode.current,
+          'FlowNodeExtendId',
+          res.data.FlowNodeExtendId,
+        );
+        message.success('保存成功');
+      } else {
+        message.error(res.msg);
+      }
     });
-    // 关闭时进行数据比对看数据是否改变
-    leaveTip();
-    // setVisible(false);
   };
   // 关闭时进行数据比对看数据是否改变
   const leaveTip = () => {
@@ -1019,7 +1071,7 @@ const FlowChart = props => {
     });
     SaveNodeChange({
       FlowId: flowID,
-      DeleteNodes,
+      // DeleteNodes,
       DeleteLines,
       Lines: diagramObj.linkDataArray,
       Nodes: diagramObj.nodeDataArray,
@@ -1101,8 +1153,9 @@ const FlowChart = props => {
           editMsg={editMsg}
           modalType={modalType}
           nodeChage={nodeChage}
+          currentNode={currentNode.current}
           handleCancel={() => setVisible(false)}
-          onSubumit={(obj, nextlinkNodes) => nodeCallBack(obj, nextlinkNodes)}
+          onSubumit={obj => nodeCallBack(obj)}
           flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
         />
       </div>

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowModal.jsx

-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { CreateFlow } from '@/services/workflow/workflow';
-import { Form, Modal, Input, notification, Select } from 'antd';
+import { Form, Modal, Input, notification, Select, Radio } from 'antd';
 const { Option } = Select;
-
+const { TextArea } = Input;
 const FlowModal = props => {
   const { onSubumit, handleCancel, visible, msg, modalType, treeData, keep } = props;
   const [form] = Form.useForm();
+  const [flag, setFlag] = useState(0);
   useEffect(() => {
     form.resetFields();
     if (visible) {
@@ -117,6 +118,36 @@ const FlowModal = props => {
         <Form.Item label="流程描述" name="Text">
           <Input placeholder="请输入流程描述" />
         </Form.Item>
+        <Form.Item label="流程结束" name="FlowEndBehavior">
+          <Radio.Group>
+            <Radio value={0}>不做任何事情</Radio>
+            <Radio value={1}>直接关闭事件</Radio>
+            <Radio value={2}>事件转为待审核</Radio>
+            <Radio value={3}>重新处理事件</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item
+          label="前端样式"
+          name="WebPage"
+          initialValue="多表显示"
+          rules={[{ required: true, message: '请选择前端样式' }]}
+        >
+          <Select placeholder="请选择前端样式">
+            <Option value="多表在办显示">多表在办显示</Option>
+            <Option value="多表显示">多表显示</Option>
+            {/* <Option value="表堆叠显示">表堆叠显示</Option> */}
+            {/* <Option value="分派节点显示">分派节点显示</Option> */}
+          </Select>
+        </Form.Item>
+        <Form.Item label="编码样式" name="UseFixedCodingRule">
+          <Radio.Group>
+            <Radio value={false}>{msg.Coding12Text}</Radio>
+            <Radio value>{msg.CodingDefaultText}</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="接口配置" name="interfaceConfig">
+          <TextArea placeholder="请填写接口配置" />
+        </Form.Item>
       </Form>
     </Modal>
   );

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx

 import React, { useEffect, useState, useRef } from 'react';
-import {
-  Drawer,
-  Form,
-  Space,
-  Button,
-  Input,
-  Select,
-  Divider,
-  Table,
-  Tooltip,
-  Popconfirm,
-  message,
-} from 'antd';
+import { Button, Divider, Tooltip, message } from 'antd';
 import lodash from 'lodash';
-import {
-  DeleteOutlined,
-  EditTwoTone,
-  PlusCircleOutlined,
-  PlusOutlined,
-  SaveFilled,
-} from '@ant-design/icons';
-import RoalChoose from './nodeModalComponents/RoalChoose';
-import Undertaker from './nodeModalComponents/Undertaker';
+import { PlusOutlined } from '@ant-design/icons';
+import { FlowNodeSave } from '@/services/workflow/workflow';
+import classNames from 'classnames';
 import ConfigSubprocess from './nodeModalComponents/ConfigSubprocess';
-
-import RuleConfig from '@/components/RuleConfig';
-import PeopleSelector from '@/components/PeopleSelector';
+import ConfgGateway from './nodeModalComponents/ConfgGateway';
+import ConfigNodeMsg from './nodeModalComponents/ConfigNodeMsg';
+import ConfgUndertake from './nodeModalComponents/ConfgUndertake';
+import ConfigCopyPerson from './nodeModalComponents/ConfigCopyPerson';
+import ConfigOperate from './nodeModalComponents/ConfigOperate';
+import ConfigView from './nodeModalComponents/ConfigView';
 
 import styles from './NodeModal.less';
-import { GetFormDataSource } from '@/services/workflow/workflow';
-
-const { Option } = Select;
-let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
-let chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
-let chnUnitChar = ['', '十', '百', '千'];
+const tabList = ['常用配置', '高级配置', '移交配置'];
 const NodeModal = props => {
-  const { flowData, onSubumit, handleCancel, visible, editMsg, flowID, nodeChage } = props;
-  const [form] = Form.useForm();
-  const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
-  const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
-  const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
-  const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
-  const [editIndex, setEditIndex] = useState(); // 当前编辑默认承办人索引
-  const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
-  const [ruleIndex, setRuleIndex] = useState(); // 编辑当前规则索引
-  const [nodeMsg, setNodeMsg] = useState({
-    NodeName: '',
-    NodeType: '',
-    SerialNo: '',
-    aheadHandle: 1,
-    NodeHandling: 1,
-    roleList: [],
-    nodeDetail: {},
-    RuleList: {},
-    CarbonCopyPeopleList: [],
-  });
-  // const [CarbonCopyPeopleList, setCarbonCopyPeopleList] = useState([]); // 抄送人列表
-  // const [RuleList, setRuleList] = useState([]); // 规则配置列表
-  const [flag, setFlag] = useState(0); // 用于刷新界面
-  const [fieldList, setFieldList] = useState([]); // 当规则字段
-  const allFieldList = useRef([]);
-  const nextlinkNodes = useRef([]);
-  const previousLinkNodes = useRef([]);
+  const {
+    flowData,
+    onSubumit,
+    handleCancel,
+    visible,
+    editMsg,
+    flowID,
+    nodeChage,
+    currentNode,
+  } = props;
+  const [activeConfig, setActiveConfig] = useState('常用配置');
   const RuleList = useRef([]); // 规则配置列表
-  const CarbonCopyPeopleList = useRef([]); // 抄送人列表
-  const talbeList = useRef([]);
-  const subNodeMsg = useRef({});
-  useEffect(() => {
-    form.resetFields();
-    nextlinkNodes.current = [];
-    previousLinkNodes.current = [];
-    talbeList.current = [];
-    RuleList.current = [];
-
-    CarbonCopyPeopleList.current = [];
-    if (JSON.stringify(editMsg) === '{}') {
-      return;
-    }
-    // if (visible) {
-    console.log(editMsg, 'editMsg');
-
-    // 获取网关连接的节点
-    if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
-      getNextLinkNodes(editMsg.key);
-
-      // getPreviousLinkNodes(editMsg.key);
-      // setRuleList(editMsg.RuleList);
-      RuleList.current = editMsg.RuleList;
-
-      // 获取表数据
-      GetFormDataSource({ flowID }).then(res => {
-        let list = new Set(talbeList.current);
-        allFieldList.current = [];
-        res.data.forEach(item => {
-          if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
-            allFieldList.current.push({
-              TableFieldNames: item.TableFieldNames,
-              TableName: item.TableName,
-            });
-          }
-          list.add(item.TableName);
-          // if (previousLinkNodes.current.some(ele => ele.NodeName === item.NodeName)) {
-          //   list.add(item.TableName);
-          // }
-        });
-        talbeList.current = [...list];
-        console.log(nextlinkNodes.current, 'nextlinkNodes.current');
-        setFlag(flag + 1);
-      });
-    } else {
-      // setCarbonCopyPeopleList(editMsg.CarbonCopyPeopleList);
-      CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
-      setFlag(flag + 1);
-    }
-
-    getFormData();
-    console.log(form.getFieldValue(), 'getFieldValue');
-    // } else {
-    //   nextlinkNodes.current = [];
-    //   previousLinkNodes.current = [];
-    //   talbeList.current = [];
-
-    //   RuleList.current = [];
-
-    //   CarbonCopyPeopleList.current = [];
-    //   setFlag(flag + 1);
-    // }
-  }, [visible, editMsg]);
-  const SectionToChinese = section => {
-    let strIns = '';
-    let chnStr = '';
-    let unitPos = 0;
-    let zero = true;
-    while (section > 0) {
-      let v = section % 10;
-      if (v === 0) {
-        if (!zero) {
-          zero = true;
-          chnStr = chnNumChar[v] + chnStr;
-        }
-      } else {
-        zero = false;
-        strIns = chnNumChar[v];
-        strIns += chnUnitChar[unitPos];
-        chnStr = strIns + chnStr;
-      }
-      // eslint-disable-next-line no-plusplus
-      unitPos++;
-      section = Math.floor(section / 10);
-    }
-    return chnStr;
-  };
-  const NumberToChinese = num => {
-    let unitPos = 0;
-    let strIns = '';
-    let chnStr = '';
-    let needZero = false;
 
-    if (num === 0) {
-      return chnNumChar[0];
-    }
+  const refConfigSubprocess = useRef();
+  const refConfgGateway = useRef();
+  const refConfigNodeMsg = useRef();
+  const refConfgUndertake = useRef();
+  const refConfigCopyPerson = useRef();
+  const refConfigOperate = useRef();
+  const refConfigView = useRef();
 
-    while (num > 0) {
-      let section = num % 10000;
-      if (needZero) {
-        chnStr = chnNumChar[0] + chnStr;
-      }
-      strIns = SectionToChinese(section);
-      strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
-      chnStr = strIns + chnStr;
-      needZero = section < 1000 && section > 0;
-      num = Math.floor(num / 10000);
-      // eslint-disable-next-line no-plusplus
-      unitPos++;
-    }
+  useEffect(() => {
+    setActiveConfig('常用配置');
+  }, [editMsg]);
 
-    return chnStr;
-  };
-  // 获取被网关连接的节点
-  const getNextLinkNodes = key => {
-    flowData.linkDataArray.forEach(item => {
-      if (item.from === key) {
-        let linkNode = flowData.nodeDataArray.find(ele => ele.key === item.to);
-        if (linkNode.NodeType === '20') {
-          getNextLinkNodes(linkNode.key);
-        } else if (!nextlinkNodes.current.some(ele => ele.key === linkNode.key)) {
-          nextlinkNodes.current.push(linkNode);
-        }
-      }
-    });
-  };
-  // 获取当前网关之前所有节点
-  const getPreviousLinkNodes = key => {
-    flowData.linkDataArray.forEach(item => {
-      // 判断节点是否为第一个节点
-      let isFistNode = flowData.linkDataArray.some(ele => ele.to === item.form);
-      // 当前线的指向节点是当前双击节点并且不是第一节点继续往下找
-      if (item.to === key && !isFistNode) {
-        // 指向当前节点的节点
-        let lastNode = flowData.nodeDataArray.find(ele => ele.key === item.from);
-        // 已存节点是否包含指向当前节点的节点
-        let hasNode = previousLinkNodes.current.some(ele => ele.key === lastNode.key);
-        // 如果没有就存入
-        if (!hasNode) {
-          previousLinkNodes.current.push(lastNode);
-          getPreviousLinkNodes(lastNode.key);
-        }
-      }
-    });
-    let list = JSON.parse(JSON.stringify(previousLinkNodes.current));
-    previousLinkNodes.current = list.filter(
-      item => item.NodeType !== '20' && item.NodeType !== '21',
-    );
-  };
-  // 获取表单回显
-  const getFormData = () => {
-    const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg;
-    console.log(NodeHandling, 'NodeHandling');
-    form.setFieldsValue({
-      NodeName,
-      NodeType,
-      SerialNo,
-      aheadHandle: aheadHandle || aheadHandle === 0 ? aheadHandle : 1,
-      NodeHandling: NodeHandling || NodeHandling === 0 ? NodeHandling : 1,
-    });
-    setNodeMsg(editMsg);
-  };
   // 提交表单
   const onFinish = () => {
+    console.log(refConfigSubprocess, 'refConfigSubprocess');
     // 规则填写校验
-
-    for (let i = 0; i < RuleList.current.length; i++) {
-      if (!RuleList.current[i].RuleName) {
+    let obj = {
+      ...refConfigNodeMsg.current?.getParmar(),
+      ...refConfgGateway.current?.getParmar(),
+      ...refConfgUndertake.current?.getParmar(),
+      ...refConfigCopyPerson.current?.getParmar(),
+      ...refConfigOperate.current?.getParmar(),
+      ...refConfigSubprocess.current?.getParmar(),
+      ...refConfigView.current?.getParmar(),
+    };
+    console.log(obj);
+
+    for (let i = 0; i < obj.RuleList.length; i++) {
+      if (!obj.RuleList[i].RuleName) {
         message.error('请填写规则名称');
         return;
       }
-      if (!RuleList.current[i].NextNodeId && RuleList[i].NextNodeId !== 0) {
+      if (!obj.RuleList[i].NextNodeId && obj.RuleList[i].NextNodeId !== 0) {
         message.error('请选择需要流转的节点');
         return;
       }
-      if (!RuleList.current[i].RuleContent) {
+      if (!obj.RuleList[i].RuleContent) {
         message.error('请填写规则');
         return;
       }
     }
-    const newListLength = new Set(RuleList.current.map(item => item.NextNodeId)).size;
-    if (RuleList.current.length > newListLength) {
+    const newListLength = new Set(obj.RuleList.map(item => item.NextNodeId)).size;
+    if (obj.RuleList.length > newListLength) {
       message.error('规则流转到的节点不能重复');
       return;
     }
-    form.validateFields().then(validate => {
-      console.log(validate, 'validate');
-      if (validate) {
-        validate.SerialNo = Number(validate.SerialNo);
-        let nodeDetail = JSON.stringify({
-          ...validate,
-          NodeType: nodeMsg.NodeType,
-          roleList: nodeMsg.roleList,
-          SubFlowInfo: subNodeMsg.current,
-        });
-        let obj = {
-          ...validate,
-          NodeType: nodeMsg.NodeType,
-          roleList: nodeMsg.roleList,
-          nodeDetail,
-          RuleList: RuleList.current,
-          CarbonCopyPeopleList: CarbonCopyPeopleList.current,
-          SubFlowInfo: subNodeMsg.current,
-        };
-        console.log(nextlinkNodes.current);
-        onSubumit(obj, nextlinkNodes.current);
-      }
-    });
+    console.log(currentNode, 'currentNode');
+    onSubumit();
   };
-  // 删除角色
-  const delUser = (record, index) => {
-    let roleList = [...nodeMsg.roleList];
-    roleList.splice(index, 1);
-    let nodeDetail = JSON.stringify({
-      ...nodeMsg,
-      roleList,
-      RuleList: RuleList.current,
-      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
-    });
-    setNodeMsg({
-      ...nodeMsg,
-      roleList,
-      nodeDetail,
-      RuleList: RuleList.current,
-      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
-    });
-    nodeChage('roleList', roleList);
-  };
-  // 添加角色或机构
-  const addUser = selectList => {
-    console.log(selectList, 'selectList');
-    let nodeDetail = JSON.stringify({
-      ...nodeMsg,
-      roleList: selectList,
-      RuleList: RuleList.current,
-      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
-    });
-    setNodeMsg({
-      ...nodeMsg,
-      roleList: selectList,
-      nodeDetail,
-      RuleList: RuleList.current,
-      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
-    });
-    nodeChage('roleList', selectList);
-    setShowRoal(false);
-  };
-  // 添加默认承办人
-  const addUnderTaker = (userName, userId) => {
-    let list = JSON.parse(JSON.stringify(nodeMsg.roleList));
-    console.log(list, 'list');
-    console.log(editIndex, 'editIndex');
-    list[editIndex].defauletUserName = userName;
-    list[editIndex].defaultUserId = userId;
-    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList: list });
-    setNodeMsg({ ...nodeMsg, roleList: list, nodeDetail });
-    nodeChage('roleList', list);
-    setShowUnderTaker(false);
-  };
-  // 编辑默认承办人
-  const toEdit = (record, index) => {
-    setEditIndex(index);
-    setChooseUser(record);
-    setShowUnderTaker(true);
-  };
-  // 添加规则
-  const addRule = () => {
-    console.log(fieldList, 'fieldList');
-    console.log(nextlinkNodes.current, RuleList.current, 'nextlinkNodes.current');
-    if (nextlinkNodes.current.length === 0) {
-      message.error('请连接需要添加规则的节点');
-      return;
-    }
-    if (RuleList.current.length === nextlinkNodes.current.length) {
-      message.error('请连接需要添加规则的节点');
-      return;
-    }
-    let list = JSON.parse(JSON.stringify(RuleList.current));
-    list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
-    // setRuleList(list);
-    RuleList.current = list;
-    nodeChage('RuleList', list);
-    setFlag(flag + 1);
-  };
-  // 删除规则
-  const deleRule = index => {
-    let list = JSON.parse(JSON.stringify(RuleList.current));
-    list.splice(index, 1);
-    // setRuleList(list);
-    RuleList.current = list;
-    nodeChage('RuleList', list);
-    setFlag(flag + 1);
-  };
-  // 规则回填
-  const saveRule = e => {
-    let list = JSON.parse(JSON.stringify(RuleList.current));
-    console.log(e);
-    list[ruleIndex].RuleContent = e;
-    console.log(list, 'listlist');
-    // setRuleList(list);
-    RuleList.current = list;
-    nodeChage('RuleList', list);
-    setShowRule(false);
-  };
-  // 选择人员回填
-  const savePerson = e => {
-    console.log(e);
-    // setCarbonCopyPeopleList(e);
-    CarbonCopyPeopleList.current = e;
-    nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
-    setShowPersonSelect(false);
-  };
-  // 网关表单配置监听
-  const formChage = (e, index, field) => {
-    let list = lodash.cloneDeep(RuleList.current);
-    if (field === 'TableNames') {
-      list[index][field] = e.join(',');
-    }
-    if (field === 'RuleName') {
-      e.persist();
-      list[index][field] = e.target.value;
-    } else {
-      list[index][field] = e;
-    }
-
-    // setRuleList(list);
-    RuleList.current = list;
-    nodeChage('RuleList', list);
-    setFlag(flag + 1);
-  };
-  // 节点配置表单监听
-  const changeValue = (changedFields, allFields) => {
-    console.log(changedFields, allFields);
-
-    nodeChage(changedFields[0].name[0], changedFields[0].value);
-  };
-  // 配置当前规则
-  const editRule = (msg, index) => {
-    console.log(msg, 'masgasdg');
-    // let listfleld = msg.TableNames.split(',');
-
-    let listfleld = talbeList.current;
-    let list = [
-      {
-        TableFieldNames: [
-          '上报人名称',
-          '上报人部门',
-          '上报站点',
-          '处理站点',
-          '更新时间',
-          '上报时间',
-        ],
-        TableName: '内部字段',
-      },
-    ];
-    console.log(listfleld, allFieldList.current, 'listfleld1111');
-    listfleld.forEach(item => {
-      console.log(allFieldList.current.find(ele => ele.TableName === item), 'aaaaaa');
-      let obj = allFieldList.current.find(ele => ele.TableName === item);
-      if (obj.TableName && obj.TableFieldNames?.length > 0) {
-        list.push({
-          TableFieldNames: obj.TableFieldNames,
-          TableName: obj.TableName,
-        });
-      }
-    });
-    console.log(list, 'listfleld');
-    setFieldList(list);
-    setRuleIndex(index);
-    setShowRule(true);
-  };
-  // 配置当前节点抄送人
-  const editCC = () => {
-    setShowPersonSelect(true);
-  };
-  const getSubNodeMsg = msg => {
-    console.log(msg, 'asdgfasdg');
-    subNodeMsg.current = msg;
-    nodeChage('SubFlowInfo', msg);
-  };
-  // 定义表格
-  const columns = [
-    {
-      title: '名称',
-      dataIndex: 'roleName',
-      align: 'left',
-      width: 80,
-      ellipsis: {
-        showTitle: false,
-      },
-      render: text => (
-        <Tooltip placement="topLeft" title={text}>
-          {text}
-        </Tooltip>
-      ),
-    },
-    {
-      title: '类型',
-      dataIndex: 'type',
-      align: 'center',
-      width: 60,
-
-      filters: [
-        {
-          text: '角色',
-          value: 2,
-        },
-        {
-          text: '机构',
-          value: 1,
-        },
-      ],
-      onFilter: (value, record) => record.type === value,
-      render: text => (text === 2 ? '角色' : '机构'),
-    },
-    {
-      title: '默认承办人',
-      dataIndex: 'defauletUserName',
-      align: 'center',
-      ellipsis: {
-        showTitle: false,
-      },
-      width: 90,
-      render: text => (
-        <Tooltip placement="topLeft" title={text}>
-          {text || '（无）'}
-        </Tooltip>
-      ),
-    },
-    {
-      title: '操作',
-      align: 'center',
-      ellipsis: true,
-      width: 60,
-      render: (text, record, index) => (
-        <>
-          <Space>
-            <Tooltip title="编辑默认承办人">
-              <EditTwoTone
-                onClick={() => toEdit(record, index)}
-                style={{ fontSize: '16px', color: '#1890FF' }}
-              />
-            </Tooltip>
-            <Tooltip title="删除角色或机构">
-              <DeleteOutlined
-                onClick={() => delUser(record, index)}
-                style={{ fontSize: '16px', color: '#e86060' }}
-              />
-              {/* <Popconfirm
-                title="是否删除该角色或机构?"
-                onConfirm={() => delUser(record, index)}
-                onCancel={() => message.error('取消删除')}
-                okText="是"
-                cancelText="否"
-              >
-                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
-              </Popconfirm> */}
-            </Tooltip>
-          </Space>
-        </>
-      ),
-    },
-  ];
 
   return (
     <>
-      {/* <div style={{ height: 200, width: 425, position: 'relative' }}> */}
-      {/* <Drawer
-        title={null}
-        closable={false}
-        width="25%"
-        onClose={handleCancel}
-        visible
-        mask={false}
-        bodyStyle={{ paddingBottom: 20 }}
-        getContainer={false}
+      <div className={styles.configContent}>
+        <div
+          className={styles.tabBox}
           style={{
-          position: 'absolute',
+            display:
+              editMsg.NodeType === '20' ||
+              editMsg.NodeType === '21' ||
+              editMsg.NodeType === '22' ||
+              editMsg.NodeType === '30'
+                ? 'none'
+                : 'flex',
           }}
-        keyboard={false}
-        zIndex={19}
-        footer={
-          <Space>
-            <Button onClick={handleCancel}>取消</Button>
-            <Button onClick={onFinish} type="primary">
-              应用
-            </Button>
-          </Space>
-        }
-      > */}
+        >
+          {tabList.map(item => (
+            <div
+              key={item}
+              onClick={() => setActiveConfig(item)}
+              className={classNames(styles.name, {
+                [styles.activeConfig]: activeConfig === item,
+              })}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
         <div className={styles.nodeConfig}>
-        <Divider
-          orientation="left"
+          {/*  配置切换栏 */}
+
+          {/* 节点信息or网关信息 */}
+          <div
             style={{
-            borderTopColor: '#99bbe8',
-            color: '#15428b',
-            fontWeight: 700,
+              display: activeConfig !== '常用配置' ? 'none' : 'block',
             }}
           >
-          {nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
-            ? '网关'
-            : '节点'}
-          信息
-        </Divider>
-        <div className={styles.titleBox}>
-          {/* 条件网关 */}
-          <p style={{ display: form?.getFieldValue('NodeType') === '20' ? 'block' : 'none' }}>
-            条件网关：客户端填写表单内容，根据设置的条件规则以及出口的目标节点，进行全规则匹配，确定最终流转节点。
-          </p>
-          {/* 汇合网关 */}
-          <p style={{ display: form?.getFieldValue('NodeType') === '21' ? 'block' : 'none' }}>
-            汇合网关：等待所有的入口分支流程全部完成，自动移交到下一节点，汇合网关支持规则配置。
-          </p>
-          {/* 并行网关 */}
-          <p style={{ display: form?.getFieldValue('NodeType') === '22' ? 'block' : 'none' }}>
-            并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。
-          </p>
-        </div>
-        <Form
-          form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
-          onFieldsChange={changeValue}
-          labelAlign="left"
-        >
-          <Form.Item
-            label="排序"
-            name="SerialNo"
-            rules={[{ required: true, message: '请输入排序' }]}
-          >
-            <Input placeholder="请输入序号" />
-          </Form.Item>
-          <Form.Item
-            label={`${
-              nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
-                ? '网关'
-                : '节点'
-            }名称`}
-            name="NodeName"
-            rules={[{ required: true, message: '请输入节点名称' }]}
-          >
-            <Input
-              placeholder={`请输入${
-                nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
-                  ? '网关'
-                  : '节点'
-              }名称`}
+            <ConfigNodeMsg
+              ref={refConfigNodeMsg}
+              nodeChage={nodeChage}
+              editMsg={editMsg}
+              flowID={flowID}
             />
-          </Form.Item>
-
-          <div style={{ display: 'none' }}>
-            <Form.Item label="检查前面在办" name="aheadHandle">
-              <Select>
-                <Option value={1}>前面有在办不能移交</Option>
-                <Option value={0}>前面有在办可以移交</Option>
-              </Select>
-            </Form.Item>
-          </div>
             <div
               style={{
                 display:
-                form?.getFieldValue('NodeType') === '1' ||
-                form?.getFieldValue('NodeType') === '2' ||
-                form?.getFieldValue('NodeType') === '20' ||
-                form?.getFieldValue('NodeType') === '21' ||
-                form?.getFieldValue('NodeType') === '22' ||
-                form?.getFieldValue('NodeType') === '30'
+                  editMsg.NodeType === '20' ||
+                  editMsg.NodeType === '21' ||
+                  editMsg.NodeType === '22' ||
+                  editMsg.NodeType === '30'
                     ? 'none'
                     : 'block',
               }}
             >
-            <Form.Item label="办理方式" name="NodeHandling">
-              <Select>
-                <Option value={1}>多人接收，一人办理（抢占模式）</Option>
-                <Option value={0}>多人接收，多人办理（会签模式）</Option>
-                <Option value={2}>一人接收，一人办理</Option>
-              </Select>
-            </Form.Item>
+              <ConfigOperate
+                ref={refConfigOperate}
+                nodeChage={nodeChage}
+                editMsg={editMsg}
+                flowID={flowID}
+              />
+            </div>
           </div>
-        </Form>
-
           <div
             style={{
               display:
-              form?.getFieldValue('NodeType') === '20' ||
-              form?.getFieldValue('NodeType') === '21' ||
-              form?.getFieldValue('NodeType') === '22' ||
-              form?.getFieldValue('NodeType') === '30'
+                activeConfig !== '高级配置' ||
+                editMsg.NodeType === '20' ||
+                editMsg.NodeType === '21' ||
+                editMsg.NodeType === '22' ||
+                editMsg.NodeType === '30'
                   ? 'none'
                   : 'block',
             }}
           >
-          <Divider
-            orientation="left"
-            style={{
-              borderTopColor: '#99bbe8',
-              color: '#15428b',
-              fontWeight: 700,
-            }}
-          >
-            承办管理
-          </Divider>
-          <div
-            style={{
-              widnt: '100%',
-              marginBottom: '10px',
-              display: 'flex',
-              justifyContent: 'right',
-            }}
-          >
-            <Button
-              onClick={() => {
-                setShowRoal(true);
-              }}
-              type="primary"
-            >
-              设置
-            </Button>
+            <ConfigView
+              ref={refConfigView}
+              nodeChage={nodeChage}
+              editMsg={editMsg}
+              flowID={flowID}
+            />
           </div>
 
-          <Table
-            dataSource={nodeMsg.roleList}
-            columns={columns}
-            rowKey={record => record.roleId}
-            bordered
-            size="small"
-            scroll={{ y: 'calc(100vh - 630px)' }}
-            onRow={(record, index) => ({
-              onDoubleClick: () => {
-                toEdit(record, index);
-              },
-            })}
-            pagination={false}
-          />
-          <Divider
-            orientation="left"
+          <div
             style={{
-              borderTopColor: '#99bbe8',
-              color: '#15428b',
-              fontWeight: 700,
+              display:
+                editMsg.NodeType === '20' ||
+                editMsg.NodeType === '21' ||
+                editMsg.NodeType === '22' ||
+                editMsg.NodeType === '30' ||
+                activeConfig !== '移交配置'
+                  ? 'none'
+                  : 'block',
             }}
           >
-            节点抄送人
-          </Divider>
-          <div className={styles.buttonBox} onClick={() => editCC()}>
-            <div
-              className={styles.setButton}
-              style={{ textAlign: CarbonCopyPeopleList?.current.length > 0 ? 'left' : 'center' }}
-            >
-              <Tooltip title={CarbonCopyPeopleList?.current.map(item => item.label).join(',')}>
-                <span>
-                  {CarbonCopyPeopleList?.current.length > 0
-                    ? CarbonCopyPeopleList?.current.map(item => item.label).join(',')
-                    : '选择抄送人'}
-                </span>
-              </Tooltip>
-            </div>
-            <div className={styles.addIcon}>
-              <PlusOutlined />
-            </div>
-          </div>
-        </div>
-        {form?.getFieldValue('NodeType') === '30' && (
-          <ConfigSubprocess nodeMsg={nodeMsg} flowID={flowID} getSubNodeMsg={getSubNodeMsg} />
+            {/* 承办管理 */}
+            <ConfgUndertake ref={refConfgUndertake} nodeChage={nodeChage} editMsg={editMsg} />
+            {/* 节点抄送人 */}
+            <ConfigCopyPerson ref={refConfigCopyPerson} nodeChage={nodeChage} editMsg={editMsg} />
+          </div>
+          {/* 子流程配置 */}
+          {editMsg.NodeType === '30' && (
+            <ConfigSubprocess
+              ref={refConfigSubprocess}
+              editMsg={editMsg}
+              flowID={flowID}
+              nodeChage={nodeChage}
+            />
           )}
+          {/* 网关规则配置 */}
           <div
             style={{
               display:
-              form?.getFieldValue('NodeType') !== '20' &&
-              form?.getFieldValue('NodeType') !== '21' &&
-              form?.getFieldValue('NodeType')
+                editMsg.NodeType !== '20' && editMsg.NodeType !== '21' && editMsg.NodeType
                   ? 'none'
                   : 'block',
             }}
           >
-          <Divider
-            orientation="left"
-            style={{
-              borderTopColor: '#99bbe8',
-              color: '#15428b',
-              fontWeight: 700,
-              // margin: '30px 0 10px 0',
-            }}
-          >
-            规则配置
-          </Divider>
-          <div className={styles.titleBox}>
-            当满足规则配置时，会根据规则流转到对应的节点；
-            <br />
-            当不设置条件时，默认需要人为选择流转到哪个节点。
-          </div>
-          <div className={styles.btnAddRule} onClick={addRule}>
-            <PlusCircleOutlined style={{ marginRight: '10px' }} />
-            添加规则
-          </div>
-          <div className={styles.ruleContent}>
-            {RuleList.current.map((item, index) => (
-              <div className={styles.ruleBox} key={index}>
-                <div className={styles.ruleTitle}>
-                  <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
-                  <DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => deleRule(index)} />
-                </div>
-                <div className={styles.formBox}>
-                  <div className={styles.label}>规则名称：</div>
-                  <div className={styles.item}>
-                    <Input
-                      style={{ width: '100%' }}
-                      value={item.RuleName}
-                      placeholder="请输入规则名称"
-                      onChange={e => {
-                        formChage(e, index, 'RuleName');
-                      }}
+            <ConfgGateway
+              ref={refConfgGateway}
+              nodeChage={nodeChage}
+              flowID={flowID}
+              editMsg={editMsg}
+              flowData={flowData}
             />
           </div>
         </div>
-                <div className={styles.formBox}>
-                  <div className={styles.label}>设置规则流转到：</div>
-                  <div className={styles.item}>
-                    <Select
-                      style={{ width: '100%' }}
-                      value={item.NextNodeId}
-                      onChange={e => {
-                        formChage(e, index, 'NextNodeId');
-                      }}
-                    >
-                      {nextlinkNodes.current.map(ele => (
-                        <Option value={ele.NodeId} key={ele.NodeName}>
-                          {ele.NodeName}
-                        </Option>
-                      ))}
-                    </Select>
-                  </div>
-                </div>
-                {/* <div className={styles.formBox}>
-                  <div className={styles.label}>选择业务表单：</div>
-                  <div className={styles.item}>
-                    <Select
-                      style={{ width: '100%' }}
-                      onChange={e => {
-                        formChage(e, index, 'TableNames');
-                      }}
-                      value={item.TableNames ? item.TableNames.split(',') : []}
-                      mode="multiple"
-                    >
-                      {talbeList.current.map(ele => (
-                        <Option value={ele} key={ele}>
-                          {ele}
-                        </Option>
-                      ))}
-                    </Select>
-                  </div>
-                </div> */}
-                <div className={styles.buttonBox} onClick={() => editRule(item, index)}>
-                  <div
-                    className={styles.setButton}
-                    style={{ textAlign: item.RuleContent ? 'left' : 'center' }}
-                  >
-                    <Tooltip title={item.RuleContent}>
-                      <span>{item.RuleContent ? item.RuleContent : '设置条件'} </span>
-                      {/* <span>{item.RuleContent} </span> */}
-                    </Tooltip>
-                  </div>
-                  <div className={styles.addIcon}>
-                    <PlusOutlined />
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
+        <div className={styles.footer}>
+          <Button type="primary" onClick={onFinish}>
+            确定
+          </Button>
         </div>
       </div>
-      {/* </Drawer> */}
-      {/* </div> */}
-      <RoalChoose
-        roleList={nodeMsg.roleList}
-        visible={showRoal}
-        handleCancel={() => setShowRoal(false)}
-        onSubumit={addUser}
-      />
-      <Undertaker
-        chooseUser={chooseUser}
-        visible={showUnderTaker}
-        handleCancel={() => setShowUnderTaker(false)}
-        onSubumit={addUnderTaker}
-      />
-      <RuleConfig
-        RuleContent={RuleList.current[ruleIndex]?.RuleContent}
-        fieldList={fieldList}
-        visible={showRule}
-        handleCancel={() => setShowRule(false)}
-        onSubumit={e => saveRule(e)}
-        flag={1}
-      />
-      <PeopleSelector
-        visible={showPersonSelect}
-        personList={CarbonCopyPeopleList.current}
-        onCancel={() => setShowPersonSelect(false)}
-        onSubumit={e => savePerson(e)}
-      />
     </>
   );
 };

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.less

-.nodeConfig {
+.configContent {
   position: absolute;
   height: 100%;
   // min-width: 425px;
+  display: flex;
+  flex-direction: column;
   right: 0;
   top: 0;
   background-color: #fff;
-  width: 25%;
+  // width: 25%;
+  width: 360px;
   padding: 20px;
-  overflow-y: scroll;
+
   margin-left: 15px;
   z-index: 10;
 
-  .titleBox {
-    color: #BCBCBC;
-    font-size: 14px;
-    padding-left: 20px;
-  }
-
-  .btnAddRule {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 31px;
+  .tabBox {
     margin: auto;
-    margin-top: 15px;
-    margin-bottom: 15px;
+    // width: 70%;
+    width: 300px;
+    height: 30px;
+    display: flex;
+    margin-bottom: 20px;
 
-    border: 1px dashed #188FFD;
-    border-radius: 3px;
-    color: #188FFD;
-    line-height: 31px;
+    .name {
+      width: 33%;
       text-align: center;
-    cursor: pointer;
+      background-color: #EEEEEE;
+      color: #040404;
+      padding: 5px;
     }
 
-  .buttonBox {
-    // padding-left: 15px;
-    width: 100%;
-    height: 34px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-
-    .setButton {
-      width: 90%;
-      height: 100%;
-      line-height: 34px;
-      border: 2px solid #6A98FA;
-      text-align: left;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding: 0 10px;
+    .activeConfig {
+      background-color: #6288FF;
+      color: #fff;
 
     }
-
-    .addIcon {
-      height: 100%;
-      flex: 1;
-      border: 2px solid #6A98FA;
-      border-left: 0px;
-      text-align: center;
-    }
   }
 
-  .ruleContent {
-    width: 100%;
-
-    .ruleBox {
-      margin-top: 5px;
-      margin-bottom: 15px;
-
-      .ruleTitle {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 15px;
-        align-items: center;
-
-        .textContet {
-          color: #1890ff;
-          font-size: 16px;
-          font-weight: 700;
+  .footer {
+    margin-top: 20px;
   }
 
-        .btnClose {}
-      }
+  .nodeConfig {
 
-      .formBox {
+    padding-right: 10px;
+    overflow-y: scroll;
+    flex: 1;
+
+    .filedListItem {
       display: flex;
+      flex-wrap: nowrap;
       justify-content: space-between;
-        align-items: center;
-        margin-bottom: 15px;
-        padding-left: 15px;
-
-        .label {
-          white-space: nowrap;
-        }
-
-        .item {
       width: 100%;
-        }
-      }
 
-      .buttonBox {
-        // padding-left: 15px;
-        width: 100%;
-        height: 34px;
+      .ant-btn-icon-only {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        cursor: pointer;
-
-        .setButton {
-          width: 90%;
-          height: 100%;
-          line-height: 34px;
-          border: 2px solid #6A98FA;
-          text-align: left;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          padding: 0 10px;
-
-        }
-
-        .addIcon {
-          height: 100%;
-          flex: 1;
-          border: 2px solid #6A98FA;
-          border-left: 0px;
-          text-align: center;
-        }
-      }
+        justify-content: center;
+        width: 82px;
+        margin-left: 10px;
       }
     }
 
-}
-
-
-.titleBox {
+    .titleBox {
       color: #BCBCBC;
       font-size: 14px;
-  // padding-left: 20px;
-}
+      padding-left: 20px;
+    }
 
-.btnAddRule {
+    .btnAddRule {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -162,9 +84,9 @@
       line-height: 31px;
       text-align: center;
       cursor: pointer;
-}
+    }
 
-.buttonBox {
+    .buttonBox {
       // padding-left: 15px;
       width: 100%;
       height: 34px;
@@ -193,9 +115,9 @@
         border-left: 0px;
         text-align: center;
       }
-}
+    }
 
-.ruleContent {
+    .ruleContent {
       width: 100%;
 
       .ruleBox {
@@ -222,7 +144,7 @@
           justify-content: space-between;
           align-items: center;
           margin-bottom: 15px;
-      // padding-left: 15px;
+          padding-left: 15px;
 
           .label {
             white-space: nowrap;
@@ -264,4 +186,8 @@
           }
         }
       }
+    }
+
+  }
+
 }
\ No newline at end of file

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/AddView.jsx

+import React, { useEffect } from 'react';
+
+import { Form, Modal, Input } from 'antd';
+
+const AddView = props => {
+  const { onSubumit, handleCancel, visible, msg, flowNodeId, modalType, title } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      if (modalType === 'edit') {
+        getFormData();
+      }
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    form.setFieldsValue(msg);
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = {};
+        console.log(modalType);
+
+        if (modalType === 'add') {
+          obj = validate;
+        } else {
+          obj = { ...validate, key: msg.key };
+        }
+        onSubumit(obj, modalType);
+      }
+    });
+  };
+  return (
+    <Modal
+      title="流程节点辅助视图配置"
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+      >
+        {/* <Form.Item label="流程节点" name="FlowName">
+          <Input disabled />
+        </Form.Item> */}
+        <Form.Item label="前端标签" name="WebLabel">
+          <Input placeholder="请输入前端标签" />
+        </Form.Item>
+        <Form.Item label="前端视图" name="WebPage">
+          <Input placeholder="请输入前端视图" />
+        </Form.Item>
+        <Form.Item label="视图参数" name="WebParam">
+          <Input placeholder="请输入视图参数" />
+        </Form.Item>
+        <Form.Item label="手持标签" name="MobileLabel">
+          <Input placeholder="请输入手持标签" />
+        </Form.Item>
+        <Form.Item label="手持视图" name="MobilePage">
+          <Input placeholder="请输入手持视图" />
+        </Form.Item>
+        <Form.Item label="手持参数" name="MobileParam">
+          <Input placeholder="请输入手持参数" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddView;

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfgGateway.jsx

-import React from 'react';
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 
-const Confggateway = () => {
-  return <div>confggateway</div>;
+import { Input, Select, Divider, Tooltip, message } from 'antd';
+import { DeleteOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import lodash from 'lodash';
+import RuleConfig from '@/components/RuleConfig';
+import styles from '../NodeModal.less';
+import { GetFormDataSource } from '@/services/workflow/workflow';
+
+let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+let chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
+let chnUnitChar = ['', '十', '百', '千'];
+const { Option } = Select;
+
+const Confggateway = (props, ref) => {
+  const { nodeChage, flowID, editMsg, flowData } = props;
+  const [fieldList, setFieldList] = useState([]); // 当规则字段
+  const [ruleIndex, setRuleIndex] = useState(); // 编辑当前规则索引
+  const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
+  const [flag, setFlag] = useState(0); // 用于刷新界面
+
+  const nextlinkNodes = useRef([]); // 获取后面链接的节点
+  const previousLinkNodes = useRef([]); // 之前的节点
+  const RuleList = useRef([]); // 规则配置列表
+  const allFieldList = useRef([]); // 所有字段列表
+  const talbeList = useRef([]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  useEffect(() => {
+    nextlinkNodes.current = [];
+    previousLinkNodes.current = [];
+    RuleList.current = [];
+    allFieldList.current = [];
+    talbeList.current = [];
+    // 获取网关连接的节点
+    if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
+      getNextLinkNodes(editMsg.key);
+
+      // getPreviousLinkNodes(editMsg.key);
+
+      RuleList.current = editMsg.RuleList;
+
+      // 获取表数据
+      GetFormDataSource({ flowID }).then(res => {
+        let list = new Set(talbeList.current);
+        allFieldList.current = [];
+        res.data.forEach(item => {
+          if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
+            allFieldList.current.push({
+              TableFieldNames: item.TableFieldNames,
+              TableName: item.TableName,
+            });
+          }
+          list.add(item.TableName);
+          // if (previousLinkNodes.current.some(ele => ele.NodeName === item.NodeName)) {
+          //   list.add(item.TableName);
+          // }
+        });
+        talbeList.current = [...list];
+        console.log(nextlinkNodes.current, 'nextlinkNodes.current');
+        setFlag(flag + 1);
+      });
+    }
+  }, [editMsg]);
+  const getParmar = () => ({ RuleList: RuleList.current });
+  // 数字转中文
+  const SectionToChinese = section => {
+    let strIns = '';
+    let chnStr = '';
+    let unitPos = 0;
+    let zero = true;
+    while (section > 0) {
+      let v = section % 10;
+      if (v === 0) {
+        if (!zero) {
+          zero = true;
+          chnStr = chnNumChar[v] + chnStr;
+        }
+      } else {
+        zero = false;
+        strIns = chnNumChar[v];
+        strIns += chnUnitChar[unitPos];
+        chnStr = strIns + chnStr;
+      }
+      // eslint-disable-next-line no-plusplus
+      unitPos++;
+      section = Math.floor(section / 10);
+    }
+    return chnStr;
+  };
+  // 数字转中文
+  const NumberToChinese = num => {
+    let unitPos = 0;
+    let strIns = '';
+    let chnStr = '';
+    let needZero = false;
+
+    if (num === 0) {
+      return chnNumChar[0];
+    }
+
+    while (num > 0) {
+      let section = num % 10000;
+      if (needZero) {
+        chnStr = chnNumChar[0] + chnStr;
+      }
+      strIns = SectionToChinese(section);
+      strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
+      chnStr = strIns + chnStr;
+      needZero = section < 1000 && section > 0;
+      num = Math.floor(num / 10000);
+      // eslint-disable-next-line no-plusplus
+      unitPos++;
+    }
+
+    return chnStr;
+  };
+  // 获取被网关连接的节点
+  const getNextLinkNodes = key => {
+    flowData.linkDataArray.forEach(item => {
+      if (item.from === key) {
+        let linkNode = flowData.nodeDataArray.find(ele => ele.key === item.to);
+        if (linkNode.NodeType === '20') {
+          getNextLinkNodes(linkNode.key);
+        } else if (!nextlinkNodes.current.some(ele => ele.key === linkNode.key)) {
+          nextlinkNodes.current.push(linkNode);
+        }
+      }
+    });
+  };
+  // 获取当前网关之前所有节点
+  const getPreviousLinkNodes = key => {
+    flowData.linkDataArray.forEach(item => {
+      // 判断节点是否为第一个节点
+      let isFistNode = flowData.linkDataArray.some(ele => ele.to === item.form);
+      // 当前线的指向节点是当前双击节点并且不是第一节点继续往下找
+      if (item.to === key && !isFistNode) {
+        // 指向当前节点的节点
+        let lastNode = flowData.nodeDataArray.find(ele => ele.key === item.from);
+        // 已存节点是否包含指向当前节点的节点
+        let hasNode = previousLinkNodes.current.some(ele => ele.key === lastNode.key);
+        // 如果没有就存入
+        if (!hasNode) {
+          previousLinkNodes.current.push(lastNode);
+          getPreviousLinkNodes(lastNode.key);
+        }
+      }
+    });
+    let list = JSON.parse(JSON.stringify(previousLinkNodes.current));
+    previousLinkNodes.current = list.filter(
+      item => item.NodeType !== '20' && item.NodeType !== '21',
+    );
+  };
+  // 网关表单配置监听
+  const formChage = (e, index, field) => {
+    let list = lodash.cloneDeep(RuleList.current);
+    if (field === 'TableNames') {
+      list[index][field] = e.join(',');
+    }
+    if (field === 'RuleName') {
+      e.persist();
+      list[index][field] = e.target.value;
+    } else {
+      list[index][field] = e;
+    }
+
+    // setRuleList(list);
+    RuleList.current = list;
+    nodeChage('RuleList', list);
+    setFlag(flag + 1);
+  };
+  // 添加规则
+  const addRule = () => {
+    console.log(fieldList, 'fieldList');
+    console.log(nextlinkNodes.current, RuleList.current, 'nextlinkNodes.current');
+    if (nextlinkNodes.current.length === 0) {
+      message.error('请连接需要添加规则的节点');
+      return;
+    }
+    if (RuleList.current.length === nextlinkNodes.current.length) {
+      message.error('请连接需要添加规则的节点');
+      return;
+    }
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
+    // setRuleList(list);
+    RuleList.current = list;
+    nodeChage('RuleList', list);
+    setFlag(flag + 1);
+  };
+  // 删除规则
+  const deleRule = index => {
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    list.splice(index, 1);
+    // setRuleList(list);
+    RuleList.current = list;
+    nodeChage('RuleList', list);
+    setFlag(flag + 1);
+  };
+  // 配置当前规则
+  const editRule = (msg, index) => {
+    console.log(msg, 'masgasdg');
+    // let listfleld = msg.TableNames.split(',');
+
+    let listfleld = talbeList.current;
+    let list = [
+      {
+        TableFieldNames: [
+          '上报人名称',
+          '上报人部门',
+          '上报站点',
+          '处理站点',
+          '更新时间',
+          '上报时间',
+        ],
+        TableName: '内部字段',
+      },
+    ];
+    console.log(listfleld, allFieldList.current, 'listfleld1111');
+    listfleld.forEach(item => {
+      console.log(allFieldList.current.find(ele => ele.TableName === item), 'aaaaaa');
+      let obj = allFieldList.current.find(ele => ele.TableName === item);
+      if (obj.TableName && obj.TableFieldNames?.length > 0) {
+        list.push({
+          TableFieldNames: obj.TableFieldNames,
+          TableName: obj.TableName,
+        });
+      }
+    });
+    console.log(list, 'listfleld');
+    setFieldList(list);
+    setRuleIndex(index);
+    setShowRule(true);
+  };
+  // 规则回填
+  const saveRule = e => {
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    console.log(e);
+    list[ruleIndex].RuleContent = e;
+    console.log(list, 'listlist');
+    // setRuleList(list);
+    RuleList.current = list;
+    nodeChage('RuleList', list);
+    setShowRule(false);
+  };
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          // margin: '30px 0 10px 0',
+        }}
+      >
+        规则配置
+      </Divider>
+      <div className={styles.titleBox}>
+        当满足规则配置时，会根据规则流转到对应的节点；
+        <br />
+        当不设置条件时，默认需要人为选择流转到哪个节点。
+      </div>
+      <div className={styles.btnAddRule} onClick={addRule}>
+        <PlusCircleOutlined style={{ marginRight: '10px' }} />
+        添加规则
+      </div>
+      <div className={styles.ruleContent}>
+        {RuleList.current.map((item, index) => (
+          <div className={styles.ruleBox} key={index}>
+            <div className={styles.ruleTitle}>
+              <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
+              <DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => deleRule(index)} />
+            </div>
+            <div className={styles.formBox}>
+              <div className={styles.label}>规则名称：</div>
+              <div className={styles.item}>
+                <Input
+                  style={{ width: '100%' }}
+                  value={item.RuleName}
+                  placeholder="请输入规则名称"
+                  onChange={e => {
+                    formChage(e, index, 'RuleName');
+                  }}
+                />
+              </div>
+            </div>
+            <div className={styles.formBox}>
+              <div className={styles.label}>设置规则流转到：</div>
+              <div className={styles.item}>
+                <Select
+                  style={{ width: '100%' }}
+                  value={item.NextNodeId}
+                  onChange={e => {
+                    formChage(e, index, 'NextNodeId');
+                  }}
+                >
+                  {nextlinkNodes.current.map(ele => (
+                    <Option value={ele.NodeId} key={ele.NodeName}>
+                      {ele.NodeName}
+                    </Option>
+                  ))}
+                </Select>
+              </div>
+            </div>
+            {/* <div className={styles.formBox}>
+                  <div className={styles.label}>选择业务表单：</div>
+                  <div className={styles.item}>
+                    <Select
+                      style={{ width: '100%' }}
+                      onChange={e => {
+                        formChage(e, index, 'TableNames');
+                      }}
+                      value={item.TableNames ? item.TableNames.split(',') : []}
+                      mode="multiple"
+                    >
+                      {talbeList.current.map(ele => (
+                        <Option value={ele} key={ele}>
+                          {ele}
+                        </Option>
+                      ))}
+                    </Select>
+                  </div>
+                </div> */}
+            <div className={styles.buttonBox} onClick={() => editRule(item, index)}>
+              <div
+                className={styles.setButton}
+                style={{ textAlign: item.RuleContent ? 'left' : 'center' }}
+              >
+                <Tooltip title={item.RuleContent}>
+                  <span>{item.RuleContent ? item.RuleContent : '设置条件'} </span>
+                  {/* <span>{item.RuleContent} </span> */}
+                </Tooltip>
+              </div>
+              <div className={styles.addIcon}>
+                <PlusOutlined />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <RuleConfig
+        RuleContent={RuleList.current[ruleIndex]?.RuleContent}
+        fieldList={fieldList}
+        visible={showRule}
+        handleCancel={() => setShowRule(false)}
+        onSubumit={e => saveRule(e)}
+        flag={1}
+      />
+    </div>
+  );
 };
 
-export default Confggateway;
+export default forwardRef(Confggateway);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfgUndertake.jsx

+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
+import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
+import RoalChoose from './RoalChoose';
+import Undertaker from './Undertaker';
+
+const ConfgUndertake = (props, ref) => {
+  const { nodeChage, editMsg } = props;
+  const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
+  const [editIndex, setEditIndex] = useState(); // 当前编辑默认承办人索引
+  const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
+  const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
+  const [roleList, setRoleList] = useState([]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  useEffect(() => {
+    setRoleList(editMsg.roleList);
+  }, [editMsg]);
+  const getParmar = () => ({ roleList });
+  // 编辑默认承办人
+  const toEdit = (record, index) => {
+    setEditIndex(index);
+    setChooseUser(record);
+    setShowUnderTaker(true);
+  };
+  // 删除角色
+  const delUser = (record, index) => {
+    let list = [...roleList];
+    list.splice(index, 1);
+
+    setRoleList(list);
+    nodeChage('roleList', list);
+  };
+  // 添加角色或机构
+  const addUser = selectList => {
+    console.log(selectList, 'selectList');
+
+    setRoleList(selectList);
+    nodeChage('roleList', selectList);
+    setShowRoal(false);
+  };
+  // 添加默认承办人
+  const addUnderTaker = (userName, userId) => {
+    let list = JSON.parse(JSON.stringify(roleList));
+    console.log(list, 'list');
+    console.log(editIndex, 'editIndex');
+    list[editIndex].defauletUserName = userName;
+    list[editIndex].defaultUserId = userId;
+    setRoleList(list);
+    nodeChage('roleList', list);
+    setShowUnderTaker(false);
+  };
+  // 定义表格
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'roleName',
+      align: 'left',
+      width: 80,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: text => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      align: 'center',
+      width: 60,
+
+      filters: [
+        {
+          text: '角色',
+          value: 2,
+        },
+        {
+          text: '机构',
+          value: 1,
+        },
+      ],
+      onFilter: (value, record) => record.type === value,
+      render: text => (text === 2 ? '角色' : '机构'),
+    },
+    {
+      title: '默认承办人',
+      dataIndex: 'defauletUserName',
+      align: 'center',
+      ellipsis: {
+        showTitle: false,
+      },
+      width: 90,
+      render: text => (
+        <Tooltip placement="topLeft" title={text}>
+          {text || '（无）'}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      width: 60,
+      render: (text, record, index) => (
+        <>
+          <Space>
+            <Tooltip title="编辑默认承办人">
+              <EditTwoTone
+                onClick={() => toEdit(record, index)}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
+            <Tooltip title="删除角色或机构">
+              <DeleteOutlined
+                onClick={() => delUser(record, index)}
+                style={{ fontSize: '16px', color: '#e86060' }}
+              />
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+        }}
+      >
+        承办管理
+      </Divider>
+      <div
+        style={{
+          widnt: '100%',
+          marginBottom: '10px',
+          display: 'flex',
+          justifyContent: 'right',
+        }}
+      >
+        <Button
+          onClick={() => {
+            setShowRoal(true);
+          }}
+          type="primary"
+        >
+          设置
+        </Button>
+      </div>
+      <Table
+        dataSource={roleList}
+        columns={columns}
+        rowKey={record => record.roleId}
+        bordered
+        size="small"
+        scroll={{ y: 'calc(100vh - 630px)' }}
+        onRow={(record, index) => ({
+          onDoubleClick: () => {
+            toEdit(record, index);
+          },
+        })}
+        pagination={false}
+      />
+      <RoalChoose
+        roleList={roleList}
+        visible={showRoal}
+        handleCancel={() => setShowRoal(false)}
+        onSubumit={addUser}
+      />
+      <Undertaker
+        chooseUser={chooseUser}
+        visible={showUnderTaker}
+        handleCancel={() => setShowUnderTaker(false)}
+        onSubumit={addUnderTaker}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(ConfgUndertake);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigCopyPerson.jsx

+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Divider, Tooltip } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import PeopleSelector from '@/components/PeopleSelector';
+import styles from '../NodeModal.less';
+
+const ConfigCopyPerson = (props, ref) => {
+  const { nodeChage, editMsg } = props;
+  const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
+  const CarbonCopyPeopleList = useRef([]); // 抄送人列表
+  const [flag, setFlag] = useState(0); // 用于刷新界面
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  useEffect(() => {
+    // if(editMsg)
+    if (JSON.stringify(editMsg) === '{}') {
+      return;
+    }
+    CarbonCopyPeopleList.current = [];
+    CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
+    setFlag(flag + 1);
+  }, [editMsg]);
+  const getParmar = () => ({ CarbonCopyPeopleList: CarbonCopyPeopleList.current });
+  // 选择人员回填
+  const savePerson = e => {
+    console.log(e);
+    // setCarbonCopyPeopleList(e);
+    CarbonCopyPeopleList.current = e;
+    nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
+    setShowPersonSelect(false);
+  };
+  // 配置当前节点抄送人
+  const editCC = () => {
+    setShowPersonSelect(true);
+  };
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+        }}
+      >
+        节点抄送人
+      </Divider>
+      <div className={styles.buttonBox} onClick={() => editCC()}>
+        <div
+          className={styles.setButton}
+          style={{ textAlign: CarbonCopyPeopleList?.current.length > 0 ? 'left' : 'center' }}
+        >
+          <Tooltip title={CarbonCopyPeopleList?.current.map(item => item.label).join(',')}>
+            <span>
+              {CarbonCopyPeopleList?.current.length > 0
+                ? CarbonCopyPeopleList?.current.map(item => item.label).join(',')
+                : '选择抄送人'}
+            </span>
+          </Tooltip>
+        </div>
+        <div className={styles.addIcon}>
+          <PlusOutlined />
+        </div>
+      </div>
+
+      <PeopleSelector
+        visible={showPersonSelect}
+        personList={CarbonCopyPeopleList.current}
+        onCancel={() => setShowPersonSelect(false)}
+        onSubumit={e => savePerson(e)}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(ConfigCopyPerson);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigNodeMsg.jsx

+import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Input, Select, Divider, Tooltip, message, Form, Button, Radio } from 'antd';
+import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { loadEventTypeTable, loadEventFields, loadFeedbackType } from '@/services/flow/flow';
+import Fieldselection from '../../../../workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection';
+import styles from '../NodeModal.less';
+const { Option } = Select;
+
+const ConfigNodeMsg = (props, ref) => {
+  const { nodeChage, editMsg, flowID } = props;
+  const [form] = Form.useForm();
+  const [eventTable, setEventTable] = useState([]); // 表名
+  const [filedList, setFiledList] = useState([]); // 当前选择表的所有字段
+  const [fieldList, setFieldList] = useState([]); // 当前选择库字段列表
+  const [showField, setShowField] = useState(false); // 选择字段弹窗
+  const [fieldName, setFieldName] = useState(); // 编辑的字段
+  const [filedData, setFiledData] = useState([]); // 已选字段列表
+  const [backType, setBackType] = useState([]); // 反馈类型
+
+  const [nodeMsg, setNodeMsg] = useState({
+    NodeName: '',
+    NodeType: '',
+    SerialNo: '',
+    aheadHandle: 1,
+    NodeHandling: 1,
+    roleList: [],
+    nodeDetail: {},
+    RuleList: {},
+    CarbonCopyPeopleList: [],
+  });
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  useEffect(() => {
+    form.resetFields();
+    getTableName();
+    // 获取反馈类型
+    getFeedbackName();
+    getFormData();
+  }, [editMsg]);
+  const getParmar = () => form.getFieldsValue();
+  // 获取表单回显
+  const getFormData = () => {
+    const { aheadHandle, NodeHandling } = editMsg;
+
+    form.setFieldsValue({
+      ...editMsg,
+      aheadHandle: aheadHandle || aheadHandle === 0 ? aheadHandle : 1,
+      NodeHandling: NodeHandling || NodeHandling === 0 ? NodeHandling : 1,
+    });
+    setNodeMsg(editMsg);
+  };
+  // 获取表名
+  const getTableName = () => {
+    loadEventTypeTable({ flowNodeId: editMsg.ActivityId }).then(res => {
+      if (res.code === 0) {
+        setEventTable(res.data);
+      }
+    });
+  };
+  // 表切换
+  const changTable = val => {
+    loadEventFields({ eventTableName: val }).then(res => {
+      if (res.code === 0) {
+        let initList = [];
+        res.data.forEach(item => {
+          item.root.forEach(ele => {
+            initList.push(ele.fieldName);
+          });
+        });
+        // 处理外部字段
+        Object.keys(form.getFieldsValue()).forEach(key => {
+          saveOutFieldsLength(key, initList);
+        });
+        setFiledList(initList);
+      }
+    });
+  };
+  // 保存外部字段个数
+  const saveOutFieldsLength = (key, initList) => {
+    switch (key) {
+      case 'Fields':
+        form.setFieldsValue({ OutFields: dealExternal(key, initList) });
+        break;
+      case 'SeeFields':
+        form.setFieldsValue({ OutSeeFields: dealExternal(key, initList) });
+        break;
+      default:
+        break;
+    }
+  };
+  // 处理外部字段
+  const dealExternal = (fileds, list) => {
+    let isExternal;
+    let externalLength = 0;
+    if (form.getFieldValue(fileds)) {
+      form
+        .getFieldValue(fileds)
+        .split(',')
+        .forEach(item => {
+          isExternal = list.some(val => val === item);
+          if (!isExternal && item !== '') {
+            // eslint-disable-next-line no-plusplus
+            externalLength++;
+          }
+        });
+    }
+    return externalLength;
+  };
+  // 字段配置
+  const deployField = val => {
+    let value = form.getFieldsValue(true);
+    if (!value.TableName) {
+      message.error('请先选择表');
+      return;
+    }
+    setFieldName(val);
+    loadEventFields({ eventTableName: value.TableName }).then(res => {
+      if (res.code === 0) {
+        let defaultCheckedList = value[val] ? value[val].split(',') : [];
+
+        // 保存所有的字段用于右侧显示
+        setFiledData(defaultCheckedList);
+        let allFields = []; // 所有得字段用来判断是否为外部字段
+        // 处理树形结构
+        let checkList = res.data.map(item => {
+          let plainOptions = [];
+          // 存入没个组得字段
+          item.root.forEach(ele => {
+            plainOptions = [...plainOptions, ele.fieldName];
+          });
+          // 存所有得字段
+          allFields = [...allFields, ...plainOptions];
+          return {
+            groupName: item.groupName,
+            plainOptions,
+            defaultCheckedList: [],
+          };
+        });
+        let externalFields = {
+          groupName: '外部字段',
+          indeterminate: false,
+          checkAll: true,
+          plainOptions: [],
+          defaultCheckedList: [],
+        }; // 外部字段
+        defaultCheckedList.forEach(item => {
+          // 添加外部字段
+          let isExternal = allFields.some(checkName => checkName === item);
+          if (!isExternal) {
+            externalFields.plainOptions.push(item);
+            externalFields.defaultCheckedList.push(item);
+          }
+          checkList.forEach(element => {
+            // 当前得模块是否有当前字段
+            let indeterminate = element.plainOptions.some(checkName => checkName === item);
+            // 处理已选中的字段
+            if (indeterminate) {
+              element.defaultCheckedList.push(item);
+            }
+            if (
+              element.defaultCheckedList.length > 0 &&
+              element.defaultCheckedList.length < element.plainOptions.length
+            ) {
+              element.indeterminate = true;
+            } else {
+              element.indeterminate = false;
+            }
+            // 处理是否全选字段
+            if (element.defaultCheckedList.length === element.plainOptions.length) {
+              element.checkAll = true;
+            } else {
+              element.checkAll = false;
+            }
+          });
+        });
+        // 添加外部字段
+        if (externalFields.plainOptions.length > 0) {
+          checkList.push(externalFields);
+        }
+        setFieldList(checkList);
+        setTimeout(() => {
+          setShowField(true);
+        }, 0);
+      }
+    });
+  };
+  // 字段修改后回调函数
+  const setFiled = val => {
+    let Fields = '';
+    val.forEach((item, index) => {
+      if (index === val.length - 1) {
+        Fields = `${Fields + item}`;
+      } else {
+        Fields = `${Fields + item},`;
+      }
+    });
+    let obj = {};
+    obj[fieldName] = Fields;
+    console.log(obj, 'ojoafds');
+    nodeChage(fieldName, Fields);
+    form.setFieldsValue(obj);
+    saveOutFieldsLength(fieldName, filedList);
+    setShowField(false);
+  };
+  // 获取反馈类型
+  const getFeedbackName = () => {
+    loadFeedbackType().then(res => {
+      if (res.code === 0) {
+        setBackType(res.data);
+      }
+    });
+  };
+  // 节点配置表单监听
+  const changeValue = (changedFields, allFields) => {
+    nodeChage(changedFields[0].name[0], changedFields[0].value);
+  };
+
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+        }}
+      >
+        {nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
+          ? '网关'
+          : '节点'}
+        信息
+      </Divider>
+      <div className={styles.titleBox}>
+        {/* 条件网关 */}
+        <p style={{ display: form?.getFieldValue('NodeType') === '20' ? 'block' : 'none' }}>
+          条件网关：客户端填写表单内容，根据设置的条件规则以及出口的目标节点，进行全规则匹配，确定最终流转节点。
+        </p>
+        {/* 汇合网关 */}
+        <p style={{ display: form?.getFieldValue('NodeType') === '21' ? 'block' : 'none' }}>
+          汇合网关：等待所有的入口分支流程全部完成，自动移交到下一节点，汇合网关支持规则配置。
+        </p>
+        {/* 并行网关 */}
+        <p style={{ display: form?.getFieldValue('NodeType') === '22' ? 'block' : 'none' }}>
+          并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。
+        </p>
+      </div>
+      <Form
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 18 }}
+        onFieldsChange={changeValue}
+        labelAlign="left"
+      >
+        <Form.Item label="排序" name="SerialNo" rules={[{ required: true, message: '请输入排序' }]}>
+          <Input placeholder="请输入序号" disabled />
+        </Form.Item>
+        <Form.Item
+          label={`${
+            nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
+              ? '网关'
+              : '节点'
+          }名称`}
+          name="NodeName"
+          rules={[{ required: true, message: '请输入节点名称' }]}
+        >
+          <Input
+            disabled={editMsg.ActivityId}
+            placeholder={`请输入${
+              nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
+                ? '网关'
+                : '节点'
+            }名称`}
+          />
+        </Form.Item>
+
+        <div style={{ display: 'none' }}>
+          <Form.Item label="检查前面在办" name="aheadHandle">
+            <Select>
+              <Option value={1}>前面有在办不能移交</Option>
+              <Option value={0}>前面有在办可以移交</Option>
+            </Select>
+          </Form.Item>
+        </div>
+
+        <div
+          style={{
+            display:
+              editMsg.NodeType === '20' ||
+              editMsg.NodeType === '21' ||
+              editMsg.NodeType === '22' ||
+              editMsg.NodeType === '30'
+                ? 'none'
+                : 'block',
+          }}
+        >
+          <Form.Item label="节点别名" name="NodeAliasName">
+            <Input placeholder="请输入节点别名" />
+          </Form.Item>
+          <Form.Item label="移交方式" name="Handover">
+            <Radio.Group>
+              <Radio value="移交选择人">移交选择人</Radio>
+              <Radio value="自处理">自处理</Radio>
+              <Radio value="移交默认人">移交默认人</Radio>
+              <Radio value="移交发起人">移交发起人</Radio>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label="工单主表" name="TableName">
+            <Select placeholder="请选择工单主表" onChange={changTable} showSearch>
+              {eventTable.map(item => (
+                <Option value={item.Name} key={item.ID}>
+                  {item.Name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+            label={
+              <div className={styles.formData_label}>
+                {form.getFieldValue('OutFields') ? (
+                  <Tooltip title={`外部字段${form.getFieldValue('OutFields')}个`}>
+                    <InfoCircleOutlined style={{ color: 'red', padding: '0.2rem 0.2rem 0 0' }} />
+                  </Tooltip>
+                ) : (
+                  ''
+                )}
+                <span>字段编辑</span>
+              </div>
+            }
+          >
+            <div className={styles.filedListItem}>
+              <Form.Item name="Fields" style={{ marginBottom: 0, width: '100%' }}>
+                <Input placeholder="请选编辑字段" allowClear />
+              </Form.Item>
+              <Button
+                type="dashed"
+                icon={<PlusOutlined />}
+                onClick={() => {
+                  deployField('Fields');
+                }}
+              />
+            </div>
+          </Form.Item>
+          <Form.Item label="前端视图" name="WebPage">
+            <Input placeholder="请配置前端视图" />
+          </Form.Item>
+          <Form.Item label="反馈类型" name="FeedbackName">
+            <Select placeholder="请选择反馈类型" allowClear>
+              {backType.map(item => (
+                <Option value={item.value} key={item.value}>
+                  {item.value}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </div>
+        <div
+          style={{
+            display:
+              editMsg.NodeType === '1' ||
+              editMsg.NodeType === '2' ||
+              editMsg.NodeType === '20' ||
+              editMsg.NodeType === '21' ||
+              editMsg.NodeType === '22' ||
+              editMsg.NodeType === '30'
+                ? 'none'
+                : 'block',
+          }}
+        >
+          <Form.Item label="办理方式" name="NodeHandling">
+            <Select>
+              <Option value={1}>多人接收，一人办理（抢占模式）</Option>
+              <Option value={0}>多人接收，多人办理（会签模式）</Option>
+              <Option value={2}>一人接收，一人办理</Option>
+            </Select>
+          </Form.Item>
+        </div>
+      </Form>
+      {/* 字段集选择 */}
+      <Fieldselection
+        visible={showField}
+        handleCancel={() => setShowField(false)}
+        fieldList={fieldList}
+        onSubumit={val => setFiled(val)}
+        filedData={filedData}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(ConfigNodeMsg);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigOperate.jsx

+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Divider, Tooltip, message, Switch, Row, Col, Checkbox } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { loadRollbackNodes } from '@/services/flow/flow';
+const { Option } = Select;
+
+const ConfigOperate = (props, ref) => {
+  const { nodeChage, editMsg } = props;
+  const [form] = Form.useForm();
+  const [backNodes, setBackNodes] = useState([]); // 允许返回的节点
+
+  useEffect(() => {
+    form.resetFields();
+    const {
+      Transferable,
+      EventsInformation,
+      IsSendMessage,
+      IsSave,
+      AutoClose,
+      HalfwayClose,
+    } = editMsg;
+    const obj = {
+      Transferable: Transferable === 1,
+      EventsInformation: EventsInformation === 1,
+      IsSendMessage: IsSendMessage === 1,
+      IsSave: IsSave === 1,
+      AutoClose: AutoClose === '是',
+      HalfwayClose: HalfwayClose === 1,
+    };
+
+    form.setFieldsValue({ ...editMsg, ...obj });
+
+    rollBackNodes();
+  }, [editMsg]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => {
+    let obj = form.getFieldsValue();
+    obj.Transferable = obj.Transferable ? 1 : 0;
+    obj.EventsInformation = obj.Transferable ? 1 : 0;
+    obj.IsSendMessage = obj.Transferable ? 1 : 0;
+    obj.IsSave = obj.Transferable ? 1 : 0;
+    obj.AutoClose = obj.Transferable ? 1 : 0;
+    obj.HalfwayClose = obj.Transferable ? 1 : 0;
+    return obj;
+  };
+  // 加载修改流程节点配置允许退回列表
+  const rollBackNodes = () => {
+    loadRollbackNodes({ flowNodeId: editMsg.ActivityId }).then(res => {
+      if (res.code === 0) {
+        setBackNodes(res.data);
+      }
+    });
+  };
+  // 节点配置表单监听
+  const changeValue = (changedFields, allFields) => {
+    let value;
+    switch (changedFields[0].name[0]) {
+      case 'Transferable':
+        value = changedFields[0].value ? 1 : 0;
+        break;
+      case 'EventsInformation':
+        value = changedFields[0].value ? 1 : 0;
+        break;
+      case 'IsSendMessage':
+        value = changedFields[0].value ? 1 : 0;
+        break;
+      case 'IsSave':
+        value = changedFields[0].value ? 1 : 0;
+        break;
+      case 'AutoClose':
+        value = changedFields[0].value ? '是' : '否';
+        break;
+      case 'HalfwayClose':
+        value = changedFields[0].value ? 1 : 0;
+        break;
+
+      default:
+        value = changedFields[0].value;
+        break;
+    }
+    nodeChage(changedFields[0].name[0], value);
+  };
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+        }}
+      >
+        操作配置
+      </Divider>
+      <Form
+        form={form}
+        labelCol={{ span: 20 }}
+        wrapperCol={{ span: 4 }}
+        onFieldsChange={changeValue}
+        labelAlign="left"
+      >
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
+          <div style={{ flex: `0 0 ${(20 / 24) * 100}%`, display: 'flex', alignItems: 'center' }}>
+            回退至
+            <Form.Item
+              name="RollbackNode"
+              wrapperCol={{ span: 24 }}
+              style={{ marginLeft: '5px', width: '100px', marginBottom: 0 }}
+            >
+              <Select placeholder="请选择回退节点">
+                {backNodes.map(item => (
+                  <Option value={item.Name} key={item.ID}>
+                    {item.Name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+            ：
+          </div>
+
+          <Form.Item
+            valuePropName="checked"
+            name="Rollbackable"
+            style={{ flex: `0 0 ${(4 / 24) * 100}%`, marginBottom: 0 }}
+          >
+            <Switch checkedChildren="是" unCheckedChildren="否" />
+          </Form.Item>
+        </div>
+
+        <Form.Item
+          valuePropName="checked"
+          style={{ marginBottom: '12px' }}
+          label={
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Tooltip title="开始节点不允许转单">
+                <InfoCircleOutlined style={{ color: '#1890ff', marginRight: '3px' }} />
+              </Tooltip>
+              <span>转单</span>
+            </div>
+          }
+          name="Transferable"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="否" />
+        </Form.Item>
+        <Form.Item
+          valuePropName="checked"
+          style={{ marginBottom: '12px' }}
+          label="暂存"
+          name="IsSave"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="否" />
+        </Form.Item>
+        <Form.Item
+          style={{ marginBottom: '12px' }}
+          valuePropName="checked"
+          label={
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Tooltip title="开始节点和结束节点不可配置中途关单">
+                <InfoCircleOutlined style={{ color: '#1890ff', marginRight: '3px' }} />
+              </Tooltip>
+              <span>中途关单</span>
+            </div>
+          }
+          name="HalfwayClose"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="否" />
+        </Form.Item>
+        <Form.Item
+          style={{ marginBottom: '12px' }}
+          valuePropName="checked"
+          label={
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Tooltip title="结束节点可配置自动关单">
+                <InfoCircleOutlined style={{ color: '#1890ff', marginRight: '3px' }} />
+              </Tooltip>
+              <span>自动关单</span>
+            </div>
+          }
+          name="AutoClose"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="否" />
+        </Form.Item>
+        <Form.Item
+          valuePropName="checked"
+          style={{ marginBottom: '12px' }}
+          label="显示事件信息"
+          name="EventsInformation"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="是" />
+        </Form.Item>
+        <Form.Item
+          valuePropName="checked"
+          style={{ marginBottom: '12px' }}
+          label="是否发送短信"
+          name="IsSendMessage"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="否" />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export default forwardRef(ConfigOperate);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigSubprocess.jsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Drawer, Form, Space, Button, Input, Select, Divider, Tooltip, message } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { GetSubEventFlows, GetFlowMapFields } from '@/services/workflow/workflow';
@@ -6,12 +6,16 @@ import lodash from 'lodash';
 
 const { Option, OptGroup } = Select;
 
-const ConfigSubprocess = props => {
+const ConfigSubprocess = (props, ref) => {
   const [form] = Form.useForm();
-  const { nodeMsg, flowID, getSubNodeMsg } = props;
+  const { editMsg, flowID, nodeChage } = props;
   const [currentNodeField, setCurrentNodeField] = useState([]);
   const [childNodeField, setChildNodeField] = useState([]);
   const [flowList, setFlowList] = useState([]);
+  const SubFlowInfo = useRef();
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
   useEffect(() => {
     GetSubEventFlows().then(res => {
       const list = new Map();
@@ -34,10 +38,10 @@ const ConfigSubprocess = props => {
     });
   }, []);
   useEffect(() => {
-    console.log(nodeMsg, 'nodeMsg');
+    console.log(editMsg, 'editMsg');
     form.setFieldsValue({ flowKey: '', MapFields: [] });
-    if (nodeMsg.SubFlowInfo) {
-      GetFlowMapFields({ flowID, subFlowID: nodeMsg.SubFlowInfo?.SubFlowID }).then(res => {
+    if (editMsg.SubFlowInfo) {
+      GetFlowMapFields({ flowID, subFlowID: editMsg.SubFlowInfo?.SubFlowID }).then(res => {
         if (res.code === 0) {
           res.data.ParentFlowMapList.forEach(item => {
             item.TableFieldNames = item.TableFieldNames.map(ele => ({
@@ -60,10 +64,10 @@ const ConfigSubprocess = props => {
       });
 
       form.setFieldsValue({
-        flowKey: nodeMsg.SubFlowInfo
-          ? `${nodeMsg.SubFlowInfo?.SubFlowEventConfigID}-${nodeMsg.SubFlowInfo?.SubFlowID}`
+        flowKey: editMsg.SubFlowInfo
+          ? `${editMsg.SubFlowInfo?.SubFlowEventConfigID}-${editMsg.SubFlowInfo?.SubFlowID}`
           : null,
-        MapFields: nodeMsg.SubFlowInfo?.MapFields?.map(item => ({
+        MapFields: editMsg.SubFlowInfo?.MapFields?.map(item => ({
           nodeField: `${item.ParentFlowMapTableName}-${item.ParentFlowMapFieldName}-${
             item.ParentFlowMapTableType
           }`,
@@ -71,8 +75,8 @@ const ConfigSubprocess = props => {
         })),
       });
     }
-  }, [nodeMsg]);
-
+  }, [editMsg]);
+  const getParmar = () => ({ SubFlowInfo: SubFlowInfo.current });
   const changeValue = (changedFields, allFields) => {
     console.log(changedFields, 'changedFields');
     let MapFields = [];
@@ -90,10 +94,8 @@ const ConfigSubprocess = props => {
       SubFlowID: Number(allFields[0]?.value?.split('-')[1]),
       MapFields: MapFields,
     };
-    getSubNodeMsg(msg);
-
-    // if (changedFields[0].name[0] === 'password') {
-    // }
+    SubFlowInfo.current = msg;
+    nodeChage('SubFlowInfo', SubFlowInfo.current);
   };
   // 选择流程
   const flowChage = e => {
@@ -244,4 +246,4 @@ const ConfigSubprocess = props => {
   );
 };
 
-export default ConfigSubprocess;
+export default forwardRef(ConfigSubprocess);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigView.jsx

+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
+import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
+import AddView from './AddView';
+
+const ConfigView = (props, ref) => {
+  const { editMsg, nodeChage } = props;
+
+  const [viewModal, setViewModal] = useState(false); // 辅助视图新政编辑模态框
+  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
+  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
+  const [flag, setFlag] = useState(0);
+  const tableData = useRef([]); // 辅助视图对应的回显的表格
+  useEffect(() => {
+    tableData.current = [];
+    tableData.current = editMsg.ExtendPageList?.map(item => ({ ...item, key: item.ID }));
+    setFlag(flag + 1);
+  }, [editMsg]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => ({ ExtendPageList: tableData.current });
+  // 编辑辅助视图
+  const toEdit = val => {
+    setViewModal(true);
+    setModalType('edit');
+    setviewMsg(val);
+  };
+  // 辅助视图确定回调
+  const saveView = (val, type) => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    // eslint-disable-next-line prefer-spread
+    let newKey = list.length > 0 ? Math.max.apply(Math, list.map(item => item.key)) + 1 : 0;
+
+    if (type === 'add') {
+      list.push({ ...val, key: newKey });
+    } else {
+      let edtiIndex = list.findIndex(item => item.key === val.key);
+
+      list[edtiIndex] = val;
+    }
+    tableData.current = list;
+    nodeChage('ExtendPageList', tableData.current);
+    setViewModal(false);
+  };
+  // 删除辅助视图
+  const delRow = record => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    list = list.filter(item => item.key !== record.key);
+    tableData.current = list;
+    nodeChage('ExtendPageList', tableData.current);
+    setFlag(flag + 1);
+  };
+  // 定义表格
+  const columns = [
+    {
+      title: '前端标签',
+      dataIndex: 'WebLabel',
+      align: 'center',
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
+    },
+
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      render: record => (
+        <>
+          <Space>
+            <Tooltip title="修改节点辅助视图">
+              <EditTwoTone
+                onClick={() => toEdit(record)}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
+            <Tooltip title="删除节点辅助视图">
+              <DeleteOutlined
+                onClick={() => delRow(record)}
+                style={{ fontSize: '16px', color: '#e86060' }}
+              />
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+        }}
+      >
+        辅助视图
+      </Divider>
+      <div
+        style={{
+          widnt: '100%',
+          marginBottom: '10px',
+          display: 'flex',
+          justifyContent: 'right',
+        }}
+      >
+        <Button
+          type="primary"
+          onClick={() => {
+            setViewModal(true);
+            setModalType('add');
+          }}
+          icon={<PlusOutlined />}
+        >
+          新增辅助视图
+        </Button>
+      </div>
+      <Table
+        dataSource={tableData.current}
+        columns={columns}
+        rowKey={record => record.key}
+        bordered
+        size="small"
+        scroll={{ y: 'calc(100vh - 630px)' }}
+        onRow={(record, index) => ({
+          onDoubleClick: () => {
+            toEdit(record, index);
+          },
+        })}
+        pagination={false}
+      />
+      <AddView
+        visible={viewModal}
+        msg={viewMsg}
+        modalType={modalType}
+        handleCancel={() => setViewModal(false)}
+        onSubumit={saveView}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(ConfigView);

src/pages/bsmanager/workOrder/workflowEdit/workflow.less

@@ -214,7 +214,7 @@
     }
 
     .myDiagramDiv {
-      width: 75%;
+      width: calc(100% - 360px);
       // flex: 1;
       height: 100%;
     }

src/services/workflow/workflow.js

@@ -28,3 +28,10 @@ export const RuleValidation = param => get(`${PUBLISH_SERVICE}/WorkFlow/RuleVali
 export const GetSubEventFlows = param => get(`${PUBLISH_SERVICE}/WorkFlow/GetSubEventFlows`, param);
 // 获取流程映射表字段信息
 export const GetFlowMapFields = param => get(`${PUBLISH_SERVICE}/WorkFlow/GetFlowMapFields`, param);
+// 保存单个节点
+export const FlowNodeSave = param =>
+  post(`${PUBLISH_SERVICE}/WorkFlow/FlowNodeSave/${param.flowID}`, param);
+// 删除节点
+export const DeleteFlowNode = param => get(`${PUBLISH_SERVICE}/WorkFlow/DeleteFlowNode`, param);
+// 批量删除
+export const DeleteFlowNodes = param => post(`${PUBLISH_SERVICE}/WorkFlow/DeleteFlowNodes`, param);