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/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.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;
-
-    border: 1px dashed #188FFD;
-    border-radius: 3px;
-    color: #188FFD;
-    line-height: 31px;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .buttonBox {
-    // padding-left: 15px;
-    width: 100%;
-    height: 34px;
+    // width: 70%;
+    width: 300px;
+    height: 30px;
     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;
-
-    }
+    margin-bottom: 20px;
 
-    .addIcon {
-      height: 100%;
-      flex: 1;
-      border: 2px solid #6A98FA;
-      border-left: 0px;
+    .name {
+      width: 33%;
       text-align: center;
+      background-color: #EEEEEE;
+      color: #040404;
+      padding: 5px;
     }
-  }
-
-  .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;
-        }
-
-        .btnClose {}
-      }
-
-      .formBox {
-        display: flex;
-        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;
-        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;
-        }
-      }
     }
   }
 
-}
-
-
-.titleBox {
-  color: #BCBCBC;
-  font-size: 14px;
-  // padding-left: 20px;
-}
-
-.btnAddRule {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 31px;
-  margin: auto;
-  margin-top: 15px;
-  margin-bottom: 15px;
-
-  border: 1px dashed #188FFD;
-  border-radius: 3px;
-  color: #188FFD;
-  line-height: 31px;
-  text-align: center;
-  cursor: pointer;
-}
-
-.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;
-
+  .footer {
+    margin-top: 20px;
   }
 
-  .addIcon {
-    height: 100%;
-    flex: 1;
-    border: 2px solid #6A98FA;
-    border-left: 0px;
-    text-align: center;
-  }
-}
-
-.ruleContent {
-  width: 100%;
+  .nodeConfig {
 
-  .ruleBox {
-    margin-top: 5px;
-    margin-bottom: 15px;
+    padding-right: 10px;
+    overflow-y: scroll;
+    flex: 1;
 
-    .ruleTitle {
+    .filedListItem {
       display: flex;
+      flex-wrap: nowrap;
       justify-content: space-between;
-      margin-bottom: 15px;
-      align-items: center;
+      width: 100%;
 
-      .textContet {
-        color: #1890ff;
-        font-size: 16px;
-        font-weight: 700;
+      .ant-btn-icon-only {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 82px;
+        margin-left: 10px;
       }
+    }
 
-      .btnClose {}
+    .titleBox {
+      color: #BCBCBC;
+      font-size: 14px;
+      padding-left: 20px;
     }
 
-    .formBox {
+    .btnAddRule {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 31px;
+      margin: auto;
+      margin-top: 15px;
       margin-bottom: 15px;
-      // padding-left: 15px;
 
-      .label {
-        white-space: nowrap;
-      }
-
-      .item {
-        width: 100%;
-      }
+      border: 1px dashed #188FFD;
+      border-radius: 3px;
+      color: #188FFD;
+      line-height: 31px;
+      text-align: center;
+      cursor: pointer;
     }
 
     .buttonBox {
@@ -263,5 +116,78 @@
         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;
+          }
+
+          .btnClose {}
+        }
+
+        .formBox {
+          display: flex;
+          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;
+          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;
+          }
+        }
+      }
+    }
+
   }
+
 }
\ 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/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/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);