fix: 流程模块

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

+.flowContainer {
+  display: flex;
+  width: 100%;
+  position: relative;
+
+  .orgContainer {
+    position: relative;
+    left: 0;
+    top: 0;
+    height: calc(100vh - 74px);
+    width: 280px;
+    margin-right: 10px;
+    overflow-x: hidden;
+    transition-property: width, left;
+    transition-duration: 0.5s;
+    white-space: nowrap;
+    .processTitle {
+      font-size: 15px;
+      font-weight: bold;
+      color: #333e51;
+      padding-left: 14px;
+    }
+    .splitLine {
+      width: 100%;
+      color: #eeecec;
+    }
+    .listItem {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 14px;
+      line-height: 28px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #414e65;
+      cursor: pointer;
+    }
+    .pickItem {
+      background-color: #f5f6f9;
+    }
+    .switcher {
+      display: block;
+      position: absolute;
+      font-size: 18px;
+      color: #1890ff !important;
+      top: 50%;
+      right: 2px;
+      transform: translate(0%, -50%);
+      z-index: 1;
+    }
+  }
+  .orgContainerHide {
+    left: 0px;
+    top: 0;
+    width: 26px;
+  }
+  .processContainer {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 74px);
+    min-width: 800px;
+    background: white;
+    .buttonList {
+      display: flex;
+      justify-content: flex-end;
+      margin: 10px 10px 10px 0;
+      .ant-btn {
+        vertical-align: middle;
+        line-height: 2px;
+      }
+    }
+    .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 - 210px);
+      border-right: white;
+      overflow: auto !important;
+    }
+    .ant-pagination {
+      z-index: 999;
+      border-top: 1px solid #f0eded;
+    }
+  }
+}
+.ant-radio-wrapper {
+  min-width: 150px;
+  margin-bottom: 2px;
+}
+.doctorTable {
+  margin-bottom: 16px;
+  table {
+    width: 100%;
+    td {
+      padding: 6px;
+      border: 1px solid #e8e8e8;
+    }
+    thead {
+      tr {
+        font-weight: 600;
+        background: #fafafa;
+      }
+      td {
+        width: 12rem;
+      }
+    }
+    tbody {
+      tr:hover {
+        background-color: #ededed;
+      }
+    }
+  }
+}

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

+import React, { useState, useEffect } from 'react';
+import { flowReOrder } from '@/services/platform/flow';
+import Sortable from 'sortablejs';
+import { Modal, notification } from 'antd';
+import styles from '../flow.less';
+const Order = props => {
+  const { visible, handleCancel, tableData, submitCallBack } = props;
+  const [orderTable, setOrderTable] = useState([]);
+  const [flowIDs, setFlowIDs] = useState('');
+  // 页面弹出的时候初始化拖拽
+  let dragTimer = null;
+  useEffect(() => {
+    if (visible) {
+      setOrderTable(() => {
+        let table;
+        table = tableData.filter(item => item.extendID !== -1);
+        return table;
+      });
+      dragTimer = setTimeout(() => {
+        dragSort();
+      }, 0);
+    }
+    return () => {
+      clearTimeout(dragTimer);
+    };
+  }, [visible]);
+  // 根据orderTable初始化flowIDs
+  useEffect(() => {
+    let ids;
+    orderTable.forEach((item, index) => {
+      if (index === orderTable.length - 1) {
+        ids += `${item.extendID}`;
+      } else {
+        ids += `${item.extendID},`;
+      }
+    });
+
+    setFlowIDs(ids);
+  }, [orderTable]);
+  // 初始化排序
+  const dragSort = () => {
+    let el = document.getElementById('doctor-drag-items');
+    if (el) {
+      Sortable.create(el, {
+        animation: 100, // 动画参数
+        onEnd(evt) {
+          // 拖拽完毕之后发生，只需关注该事件
+          let ids = '';
+          let drg = evt.from.children;
+          drg.forEach((item, index) => {
+            if (index === drg.length - 1) {
+              ids += `${item.getAttribute('drag-id')}`;
+            } else {
+              ids += `${item.getAttribute('drag-id')},`;
+            }
+          });
+          setFlowIDs(ids);
+        },
+      });
+    }
+  };
+  // 提交表单
+  const onSubmit = () => {
+    flowReOrder({ flowIDs }).then(res => {
+      if (res.code === 0) {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '保存成功',
+        });
+        submitCallBack();
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+  return (
+    <Modal
+      title="调整顺序"
+      visible={visible}
+      onOk={onSubmit}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <div className={styles.doctorTable}>
+        <table>
+          <tbody id="doctor-drag-items">
+            {orderTable && orderTable.length > 0 ? (
+              orderTable.map(item => (
+                <tr
+                  drag-id={item.extendID}
+                  key={item.extendID}
+                  style={{ cursor: 'move' }}
+                >
+                  <td>
+                    <span title={item.name}>{item.name}</span>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan="10" style={{ textAlign: 'center' }}>
+                  暂无数据
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+  );
+};
+export default Order;

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

+import React, { useEffect } from 'react';
+import { CMFlowGet, CMFlowPost } from '@/services/platform/flow';
+import { Form, Modal, Input, Radio, Select, notification } from 'antd';
+const { Option } = Select;
+const { TextArea } = Input;
+
+const ProcessConfig = props => {
+  const { onSubumit, handleCancel, visible, processMsg } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    if (visible) {
+      getFormData();
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    CMFlowGet({ flowId: processMsg.ID }).then(res => {
+      if (res.code === 0) {
+        form.setFieldsValue(res.data);
+      }
+    });
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        console.log(validate);
+        CMFlowPost({ ...validate, flowId: processMsg.ID })
+          .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}
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+      >
+        <Form.Item label="流程名称" name="name">
+          <Input disabled />
+        </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">
+          <Select>
+            <Option value="多表显示">多表显示</Option>
+            <Option value="多表在办显示">多表在办显示</Option>
+            <Option value="表堆叠显示">表堆叠显示</Option>
+            <Option value="分派节点显示">分派节点显示</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="编码样式" name="coding12Checked">
+          <Radio.Group>
+            <Radio value={false}>GIS-2021-0000001 (前缀长度 + 13 位)</Radio>
+            <Radio value>GIS000000001 (始终 12 位)</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="接口配置" name="interfaceConfig">
+          <TextArea />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default ProcessConfig;

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

+// 节点配置
+.NodeContent {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 74px);
+  min-width: 800px;
+  background: white;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    height: 50px;
+    line-height: 50px;
+    .nodeTitle {
+      font-size: 18px;
+      color: #0072ff;
+      font-weight: bold;
+      margin-left: 10px;
+    }
+    .buttonBox {
+      margin-right: 10px;
+      .ant-btn {
+        vertical-align: middle;
+        line-height: 1px;
+      }
+    }
+  }
+  .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;
+    }
+  }
+}
+
+// 编辑节点表单
+.formData {
+  height: 32rem;
+  overflow-y: scroll;
+  .filedListItem {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    width: 100%;
+    .ant-btn-icon-only {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 82px;
+      margin-left: 10px;
+    }
+  }
+}
+
+// 字段集选择
+.fieldContent {
+  display: flex;
+  .willSelectBox {
+    width: 50%;
+    height: 600px;
+    overflow-y: scroll;
+    padding: 8px;
+    border-right: 1px solid rgb(153, 187, 232);
+    box-sizing: border-box;
+    .cardContent {
+      height: 530px;
+      overflow-y: scroll;
+      .cardBox {
+        padding: 10px;
+        margin-bottom: 10px;
+        border: 1px solid #b5b8c8;
+        box-sizing: border-box;
+      }
+    }
+  }
+  .hasSelectBox {
+    width: 50%;
+    height: 600px;
+    overflow-y: scroll;
+    padding: 8px 8px 8px 12px;
+    box-sizing: border-box;
+    .doctorTable {
+      margin-bottom: 16px;
+      table {
+        width: 100%;
+        td {
+          padding: 6px;
+          border: 1px solid #e8e8e8;
+        }
+        thead {
+          tr {
+            font-weight: 600;
+            background: #fafafa;
+          }
+          td {
+            width: 12rem;
+          }
+        }
+        tbody {
+          tr:hover {
+            background-color: #ededed;
+          }
+        }
+      }
+    }
+  }
+  .header {
+    margin: 0px 0px 10px;
+    background-color: rgb(223, 232, 246);
+    .headDivider {
+      margin-bottom: 10px;
+      background-color: #dfe8f6;
+    }
+  }
+  .cardDivider {
+    margin-bottom: 10px;
+    font-weight: 700;
+    color: #15428b;
+    border-top-color: #99bbe8;
+  }
+}

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

+import React, { useEffect, useState } from 'react';
+import Sortable from 'sortablejs';
+import { Modal, Divider, Checkbox } from 'antd';
+import styles from '../../flowNode.less';
+const CheckboxGroup = Checkbox.Group;
+
+const Fieldselection = props => {
+  const { onSubumit, handleCancel, visible, fieldList } = props;
+  const [checkList, setCheckList] = useState([]);
+  const [selectList, setSelectList] = useState([]); // 选中字段列表
+  useEffect(() => {
+    if (visible) {
+      setCheckList(fieldList);
+    }
+  }, [visible]);
+  useEffect(() => {
+    let arr = [];
+    if (checkList.length < 0) {
+      return;
+    }
+    checkList.forEach(element => {
+      arr = [...arr, ...element[1].defaultCheckedList];
+    });
+    setSelectList(arr);
+    // 初始化拖拽
+    setTimeout(() => {
+      dragSort();
+    }, 0);
+    console.log(arr);
+  }, [checkList]);
+  // 提交表单
+  const onFinish = () => {
+    console.log(selectList, '子组件');
+    onSubumit(selectList);
+  };
+  // 复选框
+  const onChange = (list, index) => {
+    setCheckList(value => {
+      const chooseList = JSON.parse(JSON.stringify(value));
+      chooseList[index][1].defaultCheckedList = list;
+      chooseList[index][1].indeterminate =
+        !!list.length && list.length < chooseList[index][1].plainOptions.length;
+      chooseList[index][1].checkAll =
+        list.length === chooseList[index][1].plainOptions.length;
+      return chooseList;
+    });
+  };
+  // 全选
+  const onCheckAllChange = (e, index) => {
+    console.log(e, 'eeeee');
+    setCheckList(value => {
+      const chooseList = JSON.parse(JSON.stringify(value));
+      chooseList[index][1].defaultCheckedList = e.target.checked
+        ? chooseList[index][1].plainOptions
+        : [];
+      chooseList[index][1].indeterminate = false;
+      chooseList[index][1].checkAll = e.target.checked;
+      return chooseList;
+    });
+  };
+
+  // 初始化排序
+  const dragSort = () => {
+    let el = document.getElementById('doctor-drag-items');
+    if (el) {
+      Sortable.create(el, {
+        animation: 100, // 动画参数
+        onEnd(evt) {
+          // 拖拽完毕之后发生，只需关注该事件
+          let arr = [];
+          let len = evt.from.children;
+          len.forEach(item => {
+            arr.push(item.getAttribute('drag-id'));
+          });
+          setSelectList(arr);
+        },
+      });
+    }
+  };
+  return (
+    <Modal
+      title="流程节点配置"
+      visible={visible}
+      onOk={onFinish}
+      width="700px"
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+      centered
+    >
+      <div className={styles.fieldContent}>
+        {/* 待选字段列表 */}
+        <div className={styles.willSelectBox}>
+          <div className={styles.header}>
+            <Divider orientation="left" className={styles.headDivider}>
+              待选字段列表
+            </Divider>
+          </div>
+          <div className={styles.cardContent}>
+            {checkList.map((item, index) => (
+              <div className={styles.cardBox} key={index}>
+                <div className={styles.title}>
+                  <Divider orientation="left" className={styles.cardDivider}>
+                    <span style={{ marginRight: '10px' }}>{item[0]}</span>
+                    <Checkbox
+                      indeterminate={item[1].indeterminate}
+                      onChange={e => onCheckAllChange(e, index)}
+                      checked={item[1].checkAll}
+                    />
+                  </Divider>
+                </div>
+                <div className={styles.filedList}>
+                  <CheckboxGroup
+                    key={index}
+                    options={item[1].plainOptions}
+                    value={item[1].defaultCheckedList}
+                    onChange={list => onChange(list, index)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        {/* 已选字段列表 */}
+        <div className={styles.hasSelectBox}>
+          <div className={styles.header}>
+            <Divider orientation="left" className={styles.headDivider}>
+              已选字段列表
+            </Divider>
+          </div>
+          <div className={styles.doctorTable}>
+            <table>
+              <thead>
+                <tr>
+                  <td>字段名</td>
+                </tr>
+              </thead>
+              <tbody id="doctor-drag-items">
+                {selectList && selectList.length > 0 ? (
+                  selectList.map((item, index) => (
+                    <tr drag-id={item} key={index} style={{ cursor: 'move' }}>
+                      <td>
+                        <span title={item}>{item}</span>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan="10" style={{ textAlign: 'center' }}>
+                      暂无数据
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default Fieldselection;

src/routes/config.js

@@ -47,11 +47,12 @@ import DimensionsConfig from '@/pages/platformCenter/dimensionsConfig/dimensions
 import TaskScheduling from '@/pages/artificial/taskScheduling/taskScheduling';
 import PoliciesIssued from '@/pages/artificial/policiesIssued/policiesIssued';
 import AuthControl from '@/pages/authcontrol';
-import TableManager from '@/pages/platformCenter/bsmanager/tablemanager'
-import StandingBook from '@/pages/platformCenter/standingBook/standingBook'
-import FiledConfig from '@/pages/platformCenter/filedConfig/filedConfig'
+import TableManager from '@/pages/platformCenter/bsmanager/tablemanager';
+import StandingBook from '@/pages/platformCenter/standingBook/standingBook';
+import FiledConfig from '@/pages/platformCenter/filedConfig/filedConfig';
 import Incident from '@/pages/platformCenter/bsmanager/workOrder/incident';
-import Flow from '@/pages/platformCenter/bsmanager/workOrder/flow';
+import Flow from '@/pages/platformCenter/bsmanager/workFlow/flow';
+import FlowNode from '@/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode';
 // import ColConen from '@/components/Colophon/colContent';
 
 const iconStyle = { verticalAlign: '0.125em' };
@@ -288,12 +289,17 @@ export default {
                   name: '事件',
                   component: Incident,
                 },
-                
                 {
                   path: '/platformCenter/bsmanger/flow',
                   name: '流程',
                   component: Flow,
                 },
+                {
+                  path: '/platformCenter/bsmanger/flowNode',
+                  name: '流程节点',
+                  hideMenu: true,
+                  component: FlowNode,
+                },
                 // {
                 //   path: '/platformCenter/bsmanger/standbookmanager',
                 //   name: '台账配置',
@@ -305,7 +311,7 @@ export default {
               path: '/platformCenter/video',
               name: '视频平台',
               component: VideoManager,
-            }
+            },
           ],
         },
         {
@@ -346,7 +352,7 @@ export default {
               path: '/dataCenter/dictionary1',
               name: '数据字典',
               component: Dictionary1,
-            }
+            },
             // {
             //   path: '/dataCenter/video',
             //   name: '视频管理',

src/services/platform/flow.jsx

+import { get, post, PUBLISH_SERVICE } from '@/services/index';
+// 工单流程列表查询
+export const reloadFlows = param =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlows`, param);
+// 流程信息查询
+export const CMFlowGet = param =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow/${param.flowId}`);
+// 流程信息查询
+export const CMFlowPost = param =>
+  post(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow/${param.flowId}`, param);
+// 工单流程组内调序
+export const flowReOrder = param =>
+  post(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReOrder?flowIDs=${
+      param.flowIDs
+    }`,
+  );
+// 工单流程组内调序
+export const removeFlowExtend = param =>
+  post(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowExtend?flowIDs=${
+      param.flowIDs
+    }`,
+  );
+// 流程节点列表查询
+export const reloadFlowNodes = param =>
+  get(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_ReloadFlowNodes?flowName=${
+      param.flowName
+    }`,
+  );
+// 清除节点配置
+export const removeFlowNodeExtend = param =>
+  get(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_RemoveFlowNodeExtend?flowNodeExtendID=${
+      param.flowNodeExtendID
+    }`,
+  );
+// 流程节点详情
+export const getFlowNode = param =>
+  get(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_GetFlowNode?flowNodeId=${
+      param.flowNodeId
+    }`,
+  );
+// 流程节点详情
+export const loadRollbackNodes = param =>
+  get(
+    `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_LoadRollbackNodes?flowNodeId=${
+      param.flowNodeId
+    }`,
+  );
+// 加载事件主表
+export const loadEventTypeTable = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_LoadTables`, query);
+
+// 根据触发事件加载字段
+export const loadEventFields = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Feedback_LoadEventFields`, query);
+
+// 加载反馈类型
+export const loadFeedbackType = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Feedback_LoadFeedbackType`, query);
+// 加载反馈类型
+export const editFlowNodeExtend = query =>
+  post(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_EditFlowNodeExtend`, query);