feat: 流程节点模块

src/pages/platformCenter/bsmanager/workFlow/flow.jsx

@@ -20,11 +20,13 @@ import {
   ApartmentOutlined,
   DeleteOutlined,
   OrderedListOutlined,
+  ControlOutlined,
 } from '@ant-design/icons';
 import classnames from 'classnames';
 import PageContainer from '@/components/BasePageContainer';
 import ProcessConfig from './flowComponents/ProcessConfig';
 import Order from './flowComponents/Order';
+import Timelimit from './flowComponents/Timelimit';
 import styles from './flow.less';
 
 const Flow = () => {
@@ -39,6 +41,7 @@ const Flow = () => {
   const [visible, setVisible] = useState({
     processConfig: false,
     order: false,
+    auxiliaryView: false,
   }); // 弹窗显示
   // 初始化
   useEffect(() => {
@@ -100,7 +103,7 @@ const Flow = () => {
           notification.success({
             message: '提示',
             duration: 3,
-            description: '删除成功',
+            description: '清除成功',
           });
         } else {
           notification.error({
@@ -147,9 +150,10 @@ const Flow = () => {
       ),
     },
     {
-      title: '辅助试图',
+      title: '辅助视图',
       dataIndex: 'extendPageCount',
       align: 'center',
+      width: 80,
       render: text => (
         // eslint-disable-next-line react/no-danger
         <span dangerouslySetInnerHTML={{ __html: text }} />
@@ -204,6 +208,15 @@ const Flow = () => {
                 style={{ fontSize: '16px', color: '#1890FF' }}
               />
             </Tooltip>
+            <Tooltip title="时限配置">
+              <ControlOutlined
+                onClick={() => {
+                  showModal('auxiliaryView', true);
+                  setProcessMsg(record);
+                }}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
             <Tooltip title="节点配置">
               <ApartmentOutlined
                 onClick={() => toNode(record.name)}
@@ -338,6 +351,12 @@ const Flow = () => {
           getProcessData();
         }}
       />
+      {/* 流程时限配置 */}
+      <Timelimit
+        visible={visible.auxiliaryView}
+        msg={processMsg}
+        handleCancel={() => showModal('auxiliaryView', false)}
+      />
     </PageContainer>
   );
 };

src/pages/platformCenter/bsmanager/workFlow/flow.less

@@ -8,7 +8,7 @@
     left: 0;
     top: 0;
     height: calc(100vh - 74px);
-    width: 280px;
+    width: 250px;
     margin-right: 10px;
     overflow-x: hidden;
     transition-property: width, left;
@@ -124,3 +124,48 @@
     }
   }
 }
+
+
+.buttonList {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 15px;
+  .ant-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+  }
+}
+
+// 表格样式
+.ant-table-pagination {
+  padding-right: 12px;
+  background: white;
+  margin: 1px 0;
+  padding: 8px;
+  padding-right: 20px;
+}
+.ant-table-thead tr th {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-table-cell {
+  // text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ant-table-body {
+  height: calc(100vh - 160px);
+  border-right: 1px solid rgb(240, 240, 240);
+  overflow: auto !important;
+}
+.ant-pagination {
+  z-index: 999;
+  border-top: 1px solid #f0eded;
+}
+.unfoldTable {
+  .ant-table {
+    margin-left: -9px !important;
+  }
+}
\ No newline at end of file

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

@@ -8,6 +8,7 @@ const ProcessConfig = props => {
   const { onSubumit, handleCancel, visible, processMsg } = props;
   const [form] = Form.useForm();
   useEffect(() => {
+    form.resetFields();
     if (visible) {
       getFormData();
     }
@@ -78,7 +79,7 @@ const ProcessConfig = props => {
           </Radio.Group>
         </Form.Item>
         <Form.Item label="前端页面" name="webPage">
-          <Select>
+          <Select placeholder="请选择前端页面">
             <Option value="多表显示">多表显示</Option>
             <Option value="多表在办显示">多表在办显示</Option>
             <Option value="表堆叠显示">表堆叠显示</Option>
@@ -92,7 +93,7 @@ const ProcessConfig = props => {
           </Radio.Group>
         </Form.Item>
         <Form.Item label="接口配置" name="interfaceConfig">
-          <TextArea />
+          <TextArea placeholder="请填写接口配置" />
         </Form.Item>
       </Form>
     </Modal>

src/pages/platformCenter/bsmanager/workFlow/flowComponents/Timelimit.jsx

+import React, { useEffect, useState } from 'react';
+import { reloadFlowTimers, removeFlowTimer } from '@/services/platform/flow';
+import {
+  Table,
+  Modal,
+  Space,
+  Tooltip,
+  Popconfirm,
+  Button,
+  notification,
+  message,
+  Spin,
+} from 'antd';
+import { EditTwoTone, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import AddModal from './timelimitComponents/AddModal';
+import styles from '../flow.less';
+
+const Timelimit = props => {
+  const { handleCancel, visible, msg } = props;
+  const [tableData, setTableData] = useState([]); // 回显的表格
+  const [viewModal, setViewModal] = useState(false); // 编辑模态框
+  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
+  const [editMsg, setEditMsg] = useState({}); // 保存编辑的信息
+  const [title, setTitle] = useState('');
+  const [flowId, setFlowId] = useState('');
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      console.log(msg);
+      setFlowId(msg.ID);
+      setTitle(`${msg.name}`);
+      getData();
+    }
+  }, [visible]);
+  // 数据初始化
+  const getData = () => {
+    setLoading(true);
+    reloadFlowTimers({ flowName: msg.name }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        setTableData(res.data);
+      }
+    });
+  };
+  // 编辑
+  const toEdit = val => {
+    setViewModal(true);
+    setModalType('edit');
+    setEditMsg(val);
+  };
+  // 删除
+  const delRow = record => {
+    removeFlowTimer({ flowTimerID: record.ID })
+      .then(res => {
+        if (res.code === 0) {
+          getData();
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: '删除成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      })
+      .catch(() => {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: '网络异常',
+        });
+      });
+  };
+
+  // 定义表格
+  const columns = [
+    {
+      title: '规则名称',
+      dataIndex: 'Name',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '开始节点',
+      dataIndex: 'StartNode',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '结束节点',
+      dataIndex: 'EndNode',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '默认时限',
+      dataIndex: 'TimeLimit',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '时限指派字段',
+      dataIndex: 'TimeLimitFieldHtml',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '超时记录字段',
+      dataIndex: 'TimeoutField',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      render: record => (
+        <>
+          <Space>
+            <Tooltip title="修改流程时限配置">
+              <EditTwoTone
+                onClick={() => toEdit(record)}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
+            <Tooltip title="删除流程时限配置">
+              <Popconfirm
+                title="是否删除改流程时限配置?"
+                onConfirm={() => delRow(record)}
+                onCancel={() => message.error('取消清除')}
+                okText="是"
+                cancelText="否"
+              >
+                <DeleteOutlined
+                  style={{ fontSize: '16px', color: '#e86060' }}
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  return (
+    <Modal
+      title={`${title}-流程时限配置`}
+      visible={visible}
+      width="1200px"
+      onCancel={handleCancel}
+      maskClosable={false}
+      centered
+      footer={null}
+      destroyOnClose
+    >
+      <div className={styles.buttonList}>
+        <Button
+          type="primary"
+          onClick={() => {
+            setViewModal(true);
+            setModalType('add');
+          }}
+          icon={<PlusOutlined />}
+        >
+          新增流程时限配置
+        </Button>
+      </div>
+      <Spin spinning={loading} tip="loading...">
+        <Table
+          dataSource={tableData}
+          columns={columns}
+          rowKey={record => record.ID}
+          bordered
+          size="small"
+          scroll={{ y: '500px' }}
+          onRow={record => ({
+            onDoubleClick: () => {
+              toEdit(record);
+            },
+          })}
+          pagination={{
+            showTotal: (total, range) =>
+              `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+            pageSizeOptions: [10, 20, 50, 100],
+            defaultPageSize: 10,
+            showQuickJumper: true,
+            showSizeChanger: true,
+          }}
+        />
+      </Spin>
+
+      <AddModal
+        visible={viewModal}
+        msg={editMsg}
+        title={title}
+        flowId={flowId}
+        modalType={modalType}
+        handleCancel={() => setViewModal(false)}
+        onSubumit={() => {
+          setViewModal(false);
+          getData();
+        }}
+      />
+    </Modal>
+  );
+};
+export default Timelimit;

src/pages/platformCenter/bsmanager/workFlow/flowComponents/timelimitComponents/AddModal.jsx

+import React, { useEffect, useState } from 'react';
+import {
+  flowReloadFlowNodes,
+  reloadTimeLimitadFlowNodes,
+  operateFlowTimer,
+} from '@/services/platform/flow';
+import { Form, Modal, Input, notification, Select } from 'antd';
+const { Option } = Select;
+
+const AddModal = props => {
+  const {
+    onSubumit,
+    handleCancel,
+    visible,
+    msg,
+    flowId,
+    modalType,
+    title,
+  } = props;
+  const [flowNodes, setFlowNodes] = useState([]);
+  const [timeLimitFlowNodes, setTimeLimitFlowNodes] = useState([]);
+  const [startNodeIndex, setStartNodeIndex] = useState(null);
+  const [endNodeIndex, setEndNodeIndex] = useState(null);
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    setStartNodeIndex(null);
+    setEndNodeIndex(null);
+    if (visible) {
+      getFlowNodes();
+      getLimitadFlowNodes();
+      if (modalType === 'edit') {
+        getFormData();
+      } else {
+        form.setFieldsValue({ FlowName: title });
+      }
+    }
+  }, [visible]);
+  // 获取到节点后存入当前选中对应的索引用于限制选择节点
+  useEffect(() => {
+    if (flowNodes.length > 0) {
+      flowNodes.forEach((item, index) => {
+        if (item.Name === msg.StartNode && modalType === 'edit') {
+          setStartNodeIndex(index);
+        }
+        if (item.Name === msg.EndNode && modalType === 'edit') {
+          setEndNodeIndex(index);
+        }
+      });
+    }
+  }, [flowNodes]);
+  // 根据下拉框选择的流程节点关联的表名加载指派字段
+  const getLimitadFlowNodes = () => {
+    reloadTimeLimitadFlowNodes({ flowNodeTableName: title }).then(res => {
+      if (res.code === 0) {
+        setTimeLimitFlowNodes(res.data);
+      }
+    });
+  };
+  // 根据流程ID加载起止节点和终止节点
+  const getFlowNodes = () => {
+    flowReloadFlowNodes({ flowId }).then(res => {
+      if (res.code === 0) {
+        setFlowNodes(res.data);
+      }
+    });
+  };
+  // 获取表单回显
+  const getFormData = () => {
+    console.log(msg);
+    form.setFieldsValue({ ...msg, FlowName: title });
+  };
+  // 表单监听
+  const onValuesChange = val => {
+    if (Object.keys(val)[0] === 'StartNode') {
+      flowNodes.forEach((item, index) => {
+        if (item.Name === val.StartNode) {
+          console.log(234234);
+          setStartNodeIndex(index);
+        }
+      });
+    }
+    if (Object.keys(val)[0] === 'EndNode') {
+      flowNodes.forEach((item, index) => {
+        if (item.Name === val.EndNode) {
+          console.log(234234);
+          setEndNodeIndex(index);
+        }
+      });
+    }
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = {};
+        console.log(modalType);
+        if (modalType === 'add') {
+          obj = { ...validate, ID: 0 };
+        } else {
+          obj = { ...validate, ID: msg.ID };
+        }
+        operateFlowTimer(obj)
+          .then(res => {
+            if (res.code === 0) {
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '编辑成功',
+              });
+              onSubumit();
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          })
+          .catch(() => {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '网络异常',
+            });
+          });
+      }
+    });
+  };
+  return (
+    <Modal
+      title="流程节点辅助视图配置"
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+        onValuesChange={onValuesChange}
+      >
+        <Form.Item label="流程名称" name="FlowName">
+          <Input disabled />
+        </Form.Item>
+        <Form.Item label="规则名称" name="Name" rules={[{ required: true }]}>
+          <Input placeholder="请输入规则名称" />
+        </Form.Item>
+        <Form.Item
+          label="起止节点"
+          style={{ marginBottom: 0, message: '请选择节点' }}
+          required
+        >
+          <div style={{ display: 'flex' }}>
+            <Form.Item
+              name="StartNode"
+              style={{ width: '100%' }}
+              rules={[{ required: true, message: '请选择节点' }]}
+            >
+              <Select>
+                {flowNodes.map((item, index) => (
+                  <Option
+                    value={item.Name}
+                    key={item.ID}
+                    disabled={endNodeIndex !== null && index >= endNodeIndex}
+                  >
+                    {item.Name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <span style={{ width: '40px', textAlign: 'center' }}>--</span>
+            <Form.Item
+              name="EndNode"
+              style={{ width: '100%' }}
+              rules={[{ required: true, message: '请选择节点' }]}
+            >
+              <Select>
+                {flowNodes.map((item, index) => (
+                  <Option
+                    value={item.Name}
+                    key={item.ID}
+                    disabled={
+                      startNodeIndex !== null && index <= startNodeIndex
+                    }
+                  >
+                    {item.Name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </div>
+        </Form.Item>
+        <Form.Item label="默认时限" style={{ marginBottom: 0 }} required>
+          <div style={{ display: 'flex' }}>
+            <Form.Item
+              name="TimeLimitInt"
+              style={{ marginRight: '18px', width: '100%' }}
+              rules={[
+                { required: true, message: '请选填写时限' },
+                {
+                  validator: (_, value) =>
+                    value < 0
+                      ? Promise.reject(new Error('默认时限需要大于零'))
+                      : Promise.resolve(),
+                },
+              ]}
+            >
+              <Input placeholder="请输入默认时限" />
+            </Form.Item>
+            <Form.Item
+              name="TimeUnit"
+              style={{ width: '100%' }}
+              rules={[{ required: true, message: '请选择时限单位' }]}
+            >
+              <Select>
+                <Option value="小时">小时</Option>
+                <Option value="自然日">自然日</Option>
+                <Option value="工作日">工作日</Option>
+              </Select>
+            </Form.Item>
+          </div>
+        </Form.Item>
+        <Form.Item
+          label="时限指派字段"
+          name="TimeLimitField"
+          rules={[{ required: true, message: '请选择时限指派字段' }]}
+        >
+          <Select>
+            {timeLimitFlowNodes.map(item => (
+              <Option value={item.Name} key={item.ID}>
+                {/* eslint-disable-next-line react/no-danger */}
+                <span dangerouslySetInnerHTML={{ __html: item.Name }} />
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label="超时记录字段"
+          name="TimeoutField"
+          rules={[{ required: true, message: '请选择超时记录字段' }]}
+        >
+          <Select>
+            {timeLimitFlowNodes.map(item => (
+              <Option value={item.Name} key={item.ID}>
+                {/* eslint-disable-next-line react/no-danger */}
+                <span dangerouslySetInnerHTML={{ __html: item.Name }} />
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.jsx

@@ -12,14 +12,16 @@ import {
   notification,
   message,
   Button,
+  Spin,
 } from 'antd';
 import {
   RollbackOutlined,
   EditTwoTone,
-  FontColorsOutlined,
+  ControlOutlined,
   DeleteOutlined,
 } from '@ant-design/icons';
 import NodeEdit from './flowNodeComponents/NodeEdit';
+import AuxiliaryView from './flowNodeComponents/AuxiliaryView';
 import styles from './flowNode.less';
 
 const FlowNode = () => {
@@ -27,11 +29,12 @@ const FlowNode = () => {
   const { flowName, pickItemIndex } = history.location.state;
   const [visible, setVisible] = useState({
     nodeEdit: false,
+    auxiliaryView: false,
   }); // 弹窗显示
   const [tableData, setTableData] = useState([]); // 流程对应的回显的表格
-  const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 开开的表格的key
+  const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 展开的表格的key
   const [nodeMsg, setNodeMsg] = useState(); // 保存节点信息
-
+  const [loading, setLoading] = useState(false);
   useEffect(() => {
     getData();
   }, []);
@@ -41,7 +44,9 @@ const FlowNode = () => {
   };
   // 获取数据
   const getData = () => {
+    setLoading(true);
     reloadFlowNodes({ flowName }).then(res => {
+      setLoading(false);
       if (res.code === 0) {
         setTableData(res.data);
         // 存入需要展开得节点
@@ -51,9 +56,10 @@ const FlowNode = () => {
   };
   // 清除节点
   const delNode = record => {
-    removeFlowNodeExtend({ flowNodeExtendID: record.flowID })
+    removeFlowNodeExtend({ flowNodeExtendID: record.extendID })
       .then(res => {
         if (res.code === 0) {
+          getData();
           notification.success({
             message: '提示',
             duration: 3,
@@ -104,7 +110,7 @@ const FlowNode = () => {
       },
       {
         title: '节点别名',
-        dataIndex: 'NodeAliasName',
+        dataIndex: 'aliasName',
         align: 'center',
         width: 80,
         render: text => (
@@ -217,6 +223,8 @@ const FlowNode = () => {
         render: record => (
           <>
             <Space>
+              {record.ID !== 0 && (
+                <>
                   <Tooltip title="修改节点">
                     <EditTwoTone
                       onClick={() => {
@@ -227,11 +235,16 @@ const FlowNode = () => {
                     />
                   </Tooltip>
                   <Tooltip title="节点辅助视图">
-                <FontColorsOutlined
-                  // onClick={() => toNode(record.name)}
+                    <ControlOutlined
+                      onClick={() => {
+                        showModal('auxiliaryView', true);
+                        setNodeMsg(record);
+                      }}
                       style={{ fontSize: '16px', color: '#1890FF' }}
                     />
                   </Tooltip>
+                </>
+              )}
               <Tooltip title="清除节点配置">
                 <Popconfirm
                   title="是否清除该节点配置?"
@@ -253,7 +266,7 @@ const FlowNode = () => {
     return (
       <Table
         className={styles.unfoldTable}
-        rowKey={record => record.ID}
+        rowKey={record => record.name}
         columns={columns}
         bordered
         size="small"
@@ -262,8 +275,10 @@ const FlowNode = () => {
         pagination={false}
         onRow={record => ({
           onDoubleClick: () => {
+            if (record.ID !== 0) {
               showModal('nodeEdit', true);
               setNodeMsg(record);
+            }
           },
         })}
       />
@@ -354,7 +369,7 @@ const FlowNode = () => {
   return (
     <div className={styles.NodeContent}>
       <div className={styles.header}>
-        <div className={styles.nodeTitle}>{flowName}</div>
+        <div className={styles.nodeTitle}>{flowName}-流程节点配置</div>
         <div className={styles.buttonBox}>
           <Button type="primary" onClick={() => backFlow()}>
             <RollbackOutlined />
@@ -362,6 +377,7 @@ const FlowNode = () => {
           </Button>
         </div>
       </div>
+      <Spin spinning={loading} tip="loading...">
         <Table
           dataSource={tableData}
           columns={columns}
@@ -376,6 +392,8 @@ const FlowNode = () => {
           onExpand={onUnfold}
           pagination={false}
         />
+      </Spin>
+
       <NodeEdit
         visible={visible.nodeEdit}
         msg={nodeMsg}
@@ -385,6 +403,11 @@ const FlowNode = () => {
           getData();
         }}
       />
+      <AuxiliaryView
+        visible={visible.auxiliaryView}
+        msg={nodeMsg}
+        handleCancel={() => showModal('auxiliaryView', false)}
+      />
     </div>
   );
 };

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.less

@@ -24,36 +24,6 @@
       }
     }
   }
-  .ant-table-pagination {
-    padding-right: 12px;
-    background: white;
-    margin: 1px 0;
-    padding: 8px;
-    padding-right: 20px;
-  }
-  .ant-table-thead tr th {
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.85);
-  }
-  .ant-table-cell {
-    // text-align: center;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .ant-table-body {
-    height: calc(100vh - 160px);
-    border-right: white;
-    overflow: auto !important;
-  }
-  .ant-pagination {
-    z-index: 999;
-    border-top: 1px solid #f0eded;
-  }
-  .unfoldTable {
-    .ant-table {
-      margin-left: -9px !important;
-    }
-  }
 }
 
 // 编辑节点表单
@@ -142,3 +112,47 @@
     border-top-color: #99bbe8;
   }
 }
+
+.buttonList {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 15px;
+  .ant-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+  }
+}
+
+// 表格样式
+.ant-table-pagination {
+  padding-right: 12px;
+  background: white;
+  margin: 1px 0;
+  padding: 8px;
+  padding-right: 20px;
+}
+.ant-table-thead tr th {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-table-cell {
+  // text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ant-table-body {
+  height: calc(100vh - 160px);
+  border-right: 1px solid rgb(240, 240, 240);
+  overflow: auto !important;
+}
+.ant-pagination {
+  z-index: 999;
+  border-top: 1px solid #f0eded;
+}
+.unfoldTable {
+  .ant-table {
+    margin-left: -9px !important;
+  }
+}

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/AuxiliaryView.jsx

+import React, { useEffect, useState } from 'react';
+import {
+  reloadFlowNodeExtendPages,
+  removeFlowNodeExtendPage,
+} from '@/services/platform/flow';
+import {
+  Table,
+  Modal,
+  Space,
+  Tooltip,
+  Popconfirm,
+  Button,
+  notification,
+  message,
+  Spin,
+} from 'antd';
+import { EditTwoTone, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import AddModal from './auxiliaryComponents/AddModal';
+import styles from '../flowNode.less';
+
+const AuxiliaryView = props => {
+  const { handleCancel, visible, msg } = props;
+  const [tableData, setTableData] = useState([]); // 辅助视图对应的回显的表格
+  const [viewModal, setViewModal] = useState(false); // 辅助视图新政编辑模态框
+  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
+  const [editMsg, setEditMsg] = useState({}); // 保存编辑的信息
+  const [title, setTitle] = useState('');
+  const [flowNodeId, setFlowNodeId] = useState('');
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      console.log(msg);
+      setFlowNodeId(msg.ID);
+      setTitle(`${msg.flowName}/${msg.name}`);
+      getData();
+    }
+  }, [visible]);
+  // 数据初始化
+  const getData = () => {
+    setLoading(true);
+    reloadFlowNodeExtendPages({ flowNodeId: msg.ID }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        setTableData(res.data);
+      }
+    });
+  };
+  // 编辑辅助视图
+  const toEdit = val => {
+    setViewModal(true);
+    setModalType('edit');
+    setEditMsg(val);
+  };
+  // 删除辅助视图
+  const delRow = record => {
+    removeFlowNodeExtendPage({ flowNodeExtendId: record.ID })
+      .then(res => {
+        if (res.code === 0) {
+          getData();
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: '删除成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      })
+      .catch(() => {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: '网络异常',
+        });
+      });
+  };
+
+  // 定义表格
+  const columns = [
+    {
+      title: '前端便签',
+      dataIndex: 'WebLabel',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '前端视图',
+      dataIndex: 'WebPage',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '前端参数',
+      dataIndex: 'WebParam',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '手持标签',
+      dataIndex: 'MobileLabel',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '手持视图',
+      dataIndex: 'MobilePage',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '手持参数',
+      dataIndex: 'MobileParam',
+      align: 'center',
+      render: text => (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      ),
+    },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      render: record => (
+        <>
+          <Space>
+            <Tooltip title="修改节点辅助视图">
+              <EditTwoTone
+                onClick={() => toEdit(record)}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
+            <Tooltip title="删除节点辅助视图">
+              <Popconfirm
+                title="是否清除该辅助视图?"
+                onConfirm={() => delRow(record)}
+                onCancel={() => message.error('取消清除')}
+                okText="是"
+                cancelText="否"
+              >
+                <DeleteOutlined
+                  style={{ fontSize: '16px', color: '#e86060' }}
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  return (
+    <Modal
+      title={`${title} 的辅助视图`}
+      visible={visible}
+      width="1200px"
+      onCancel={handleCancel}
+      maskClosable={false}
+      centered
+      footer={null}
+    >
+      <div className={styles.buttonList}>
+        <Button
+          type="primary"
+          onClick={() => {
+            setViewModal(true);
+            setModalType('add');
+          }}
+          icon={<PlusOutlined />}
+        >
+          新增辅助视图
+        </Button>
+      </div>
+      <Spin spinning={loading} tip="loading...">
+        <Table
+          dataSource={tableData}
+          columns={columns}
+          rowKey={record => record.ID}
+          bordered
+          size="small"
+          scroll={{ y: '500px' }}
+          onRow={record => ({
+            onDoubleClick: () => {
+              toEdit(record);
+            },
+          })}
+          pagination={{
+            showTotal: (total, range) =>
+              `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+            pageSizeOptions: [10, 20, 50, 100],
+            defaultPageSize: 10,
+            showQuickJumper: true,
+            showSizeChanger: true,
+          }}
+        />
+      </Spin>
+
+      <AddModal
+        visible={viewModal}
+        msg={editMsg}
+        title={title}
+        flowNodeId={flowNodeId}
+        modalType={modalType}
+        handleCancel={() => setViewModal(false)}
+        onSubumit={() => {
+          setViewModal(false);
+          getData();
+        }}
+      />
+    </Modal>
+  );
+};
+export default AuxiliaryView;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx

@@ -34,6 +34,7 @@ const NodeEdit = props => {
   const [isDisable, setIsDisable] = useState(); // 允许回退是否可选择
   const [form] = Form.useForm();
   useEffect(() => {
+    form.resetFields();
     if (visible) {
       // 获取表单回显
       getFormData();
@@ -53,7 +54,7 @@ const NodeEdit = props => {
           ...res.data.Extend,
           FlowName: res.data.FlowName,
         };
-        if (res.data.Extend.Rollbackable) {
+        if (res.data.Extend && res.data.Extend.Rollbackable) {
           setIsDisable(false);
         } else {
           setIsDisable(true);
@@ -231,11 +232,11 @@ const NodeEdit = props => {
           <Input disabled />
         </Form.Item>
         <Form.Item label="节点别名" name="NodeAliasName">
-          <Input />
+          <Input placeholder="请输入节点别名" />
         </Form.Item>
         <Form.Item label="节点类型">
           <Form.Item name="NodeType" style={{ marginBottom: '10px' }}>
-            <Select>
+            <Select placeholder="请选择节点类型">
               <Option value="办理">办理</Option>
               <Option value="上报">上报</Option>
               <Option value="分派">分派</Option>
@@ -262,7 +263,7 @@ const NodeEdit = props => {
               name="RollbackNode"
               style={{ marginBottom: 0, width: '100%' }}
             >
-              <Select disabled={isDisable}>
+              <Select disabled={isDisable} placeholder="请选择回退节点">
                 {backNodes.map(item => (
                   <Option value={item.Name} key={item.ID}>
                     {item.Name}
@@ -336,7 +337,7 @@ const NodeEdit = props => {
             />
           </div>
         </Form.Item>
-        <Form.Item label="前端视图" name="webPage">
+        <Form.Item label="前端视图" name="WebPage">
           <Input placeholder="请配置前端视图" />
         </Form.Item>
         <Form.Item label="手持视图" name="MobilePage">
@@ -346,7 +347,7 @@ const NodeEdit = props => {
           <Input placeholder="请配置视图参数" />
         </Form.Item>
         <Form.Item label="反馈类型" name="FeedbackName">
-          <Select>
+          <Select placeholder="请选择反馈类型">
             {backType.map(item => (
               <Option value={item.value} key={item.value}>
                 {item.value}

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/auxiliaryComponents/AddModal.jsx

+import React, { useEffect } from 'react';
+import {
+  getFlowNodeExtendPage,
+  operateFlowNodeExtendPage,
+} from '@/services/platform/flow';
+import { Form, Modal, Input, notification } from 'antd';
+
+const ProcessConfig = props => {
+  const {
+    onSubumit,
+    handleCancel,
+    visible,
+    msg,
+    flowNodeId,
+    modalType,
+    title,
+  } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      if (modalType === 'edit') {
+        getFormData();
+      } else {
+        form.setFieldsValue({ FlowName: title });
+      }
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    getFlowNodeExtendPage({ flowNodeExtendPageId: msg.ID }).then(res => {
+      if (res.code === 0) {
+        form.setFieldsValue({ ...res.data, FlowName: title });
+      }
+    });
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = {};
+        console.log(modalType);
+        if (modalType === 'add') {
+          obj = validate;
+        } else {
+          obj = { ...validate, ID: msg.ID };
+        }
+        operateFlowNodeExtendPage(obj, flowNodeId)
+          .then(res => {
+            if (res.code === 0) {
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '编辑成功',
+              });
+              onSubumit();
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          })
+          .catch(() => {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '网络异常',
+            });
+          });
+      }
+    });
+  };
+  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 ProcessConfig;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx

@@ -26,11 +26,9 @@ const Fieldselection = props => {
     setTimeout(() => {
       dragSort();
     }, 0);
-    console.log(arr);
   }, [checkList]);
   // 提交表单
   const onFinish = () => {
-    console.log(selectList, '子组件');
     onSubumit(selectList);
   };
   // 复选框
@@ -47,7 +45,6 @@ const Fieldselection = props => {
   };
   // 全选
   const onCheckAllChange = (e, index) => {
-    console.log(e, 'eeeee');
     setCheckList(value => {
       const chooseList = JSON.parse(JSON.stringify(value));
       chooseList[index][1].defaultCheckedList = e.target.checked

src/services/platform/flow.jsx

@@ -15,10 +15,10 @@ export const flowReOrder = param =>
       param.flowIDs
     }`,
   );
-// 工单流程组内调序
+// 删除流程配置
 export const removeFlowExtend = param =>
   post(
-    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowExtend?flowIDs=${
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowExtend?flowId=${
       param.flowIDs
     }`,
   );
@@ -64,3 +64,51 @@ export const loadFeedbackType = query =>
 // 加载反馈类型
 export const editFlowNodeExtend = query =>
   post(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_EditFlowNodeExtend`, query);
+
+// 加载流程辅助视图
+export const reloadFlowNodeExtendPages = query =>
+  get(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlowNodeExtendPages`,
+    query,
+  );
+// 查询流程辅助视图配置信息
+export const getFlowNodeExtendPage = query =>
+  get(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_GetFlowNodeExtendPage`,
+    query,
+  );
+// 添加或修改流程节点辅助视图配置
+export const operateFlowNodeExtendPage = (query, flowNodeId) =>
+  post(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_OperateFlowNodeExtendPage?flowNodeId=${flowNodeId}`,
+    query,
+  );
+// 删除流程节点辅助视图配置
+export const removeFlowNodeExtendPage = query =>
+  post(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowNodeExtendPage?flowNodeExtendId=${
+      query.flowNodeExtendId
+    }`,
+    query,
+  );
+
+// 加载时限配置列表
+export const reloadFlowTimers = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlowTimers`, query);
+// 根据流程ID加载起止节点和终止节点
+export const flowReloadFlowNodes = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlowNodes`, query);
+// 根据下拉框选择的流程节点关联的表名加载指派字段
+export const reloadTimeLimitadFlowNodes = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadTimeLimit`, query);
+// 添加或修改时限配置
+export const operateFlowTimer = query =>
+  post(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_OperateFlowTimer`, query);
+// 添加或修改时限配置
+export const removeFlowTimer = query =>
+  post(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowTimer?flowTimerID=${
+      query.flowTimerID
+    }`,
+    query,
+  );