fix: 优化流程模块样式等代码，新增工作流编辑器

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

@@ -252,33 +252,28 @@ const Flow = () => {
               [styles.orgContainerHide]: !treeVisible,
             })}
           >
-            {treeVisible ? (
-              <>
-                <span className={styles.processTitle}>流程列表</span>
-                <hr className={styles.splitLine} />
-                {/* 流程列表 */}
-                {processData.length > 0 &&
-                  processData.map((item, index) => (
-                    <div
-                      className={classnames({
-                        [styles.listItem]: true,
-                        [styles.pickItem]: index === pickItemIndex,
-                      })}
-                      onClick={() => {
-                        setPickItemIndex(index);
-                        setTableData(item.root);
-                      }}
-                      key={item.goupName}
-                    >
-                      {item.goupName}（{item.count ? item.count : ''}）
-                      {index === pickItemIndex ? <RightOutlined /> : ''}
-                    </div>
-                  ))}
-              </>
-            ) : (
-              ''
-            )}
-
+            <div style={{ display: `${treeVisible ? 'block' : 'none'}` }}>
+              <span className={styles.processTitle}>流程列表</span>
+              <hr className={styles.splitLine} />
+              {/* 流程列表 */}
+              {processData.length > 0 &&
+                processData.map((item, index) => (
+                  <div
+                    className={classnames({
+                      [styles.listItem]: true,
+                      [styles.pickItem]: index === pickItemIndex,
+                    })}
+                    onClick={() => {
+                      setPickItemIndex(index);
+                      setTableData(item.root);
+                    }}
+                    key={item.goupName}
+                  >
+                    {item.goupName}（{item.count ? item.count : ''}）
+                    {index === pickItemIndex ? <RightOutlined /> : ''}
+                  </div>
+                ))}
+            </div>
             <div className={styles.switcher}>
               {treeVisible && (
                 <Tooltip title="隐藏流程列表">

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

@@ -75,7 +75,6 @@ const AddModal = props => {
     if (Object.keys(val)[0] === 'StartNode') {
       flowNodes.forEach((item, index) => {
         if (item.Name === val.StartNode) {
-          console.log(234234);
           setStartNodeIndex(index);
         }
       });
@@ -83,7 +82,6 @@ const AddModal = props => {
     if (Object.keys(val)[0] === 'EndNode') {
       flowNodes.forEach((item, index) => {
         if (item.Name === val.EndNode) {
-          console.log(234234);
           setEndNodeIndex(index);
         }
       });

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

@@ -69,11 +69,12 @@
   .hasSelectBox {
     width: 50%;
     height: 600px;
-    overflow-y: scroll;
     padding: 8px 8px 8px 12px;
     box-sizing: border-box;
     .doctorTable {
       margin-bottom: 16px;
+      height: 530px;
+      overflow-y: scroll;
       table {
         width: 100%;
         td {

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

@@ -98,7 +98,7 @@ const NodeEdit = props => {
     setFieldName(val);
     loadEventFields({ eventTableName: value.TableName }).then(res => {
       if (res.code === 0) {
-        let defaultCheckedList = value[val] ? value[val].split('，') : [];
+        let defaultCheckedList = value[val] ? value[val].split(',') : [];
         // 处理数据为树形结构
         let keylist = new Set();
         let list = new Map();
@@ -165,7 +165,7 @@ const NodeEdit = props => {
       if (index === val.length - 1) {
         Fields = `${Fields + item}`;
       } else {
-        Fields = `${Fields + item}，`;
+        Fields = `${Fields + item},`;
       }
     });
     let obj = {};

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

+import React, { useEffect, useState } from 'react';
+import {
+  WFGetAllFlow,
+  GetFlowNode,
+  DeleteFlow,
+} from '@/services/platform/workflow';
+
+import { Card, Spin, Tooltip, notification, Empty, Modal } from 'antd';
+import {
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+  PlusSquareFilled,
+  FileAddTwoTone,
+  FormOutlined,
+  DeleteTwoTone,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+
+import classnames from 'classnames';
+import Tree from '@/components/ExpendableTree';
+import PageContainer from '@/components/BasePageContainer';
+import FlowChart from './workFlowComponents/FlowChart';
+import FlowModal from './workFlowComponents/FlowModal';
+import FlowGroupModal from './workFlowComponents/FlowGroupModal';
+
+import styles from './workflow.less';
+const { confirm } = Modal;
+
+const Workflow = () => {
+  const [treeLoading, setTreeLoading] = useState(false);
+  const [treeData, setTreeData] = useState([]); // 流程数据
+  const [currentSelectId, setCurrentSelectId] = useState(''); // 选中得节点
+  const [flowData, setFlowData] = useState({ Nodes: [], Lines: [] }); // 流程图数据
+  const [treeId, setTreeId] = useState(''); // 树形节点ID
+  const [modalType, setModalType] = useState(''); // 弹窗类型是编辑还是新增
+  const [editMsg, setEditMsg] = useState({}); // 弹窗编辑回显
+  const [editIndex, setEditIndex] = useState(); // 编辑流程组得索引
+  const [treeVisible, setTreeVisible] = useState(true);
+  const [chartLoading, setChartLoading] = useState(false); // 流程图的loading
+  const [visible, setVisible] = useState({
+    FlowModal: false,
+    FlowGroupModal: false,
+  }); // 弹窗显示
+  useEffect(() => {
+    getFlowList();
+  }, []);
+  // 弹窗显示控制
+  const showModal = (key, value) => {
+    setVisible({ ...visible, [key]: value });
+  };
+  // 获取流程列表
+  const getFlowList = () => {
+    setTreeLoading(true);
+    WFGetAllFlow().then(res => {
+      setTreeLoading(false);
+      if (res.code === 0) {
+        let data = res.data.map(item => {
+          item.isOld = true;
+          return item;
+        });
+        setTreeData(data);
+      }
+    });
+  };
+  // 新增流程
+  const addFlow = (val, e) => {
+    e.stopPropagation();
+    showModal('FlowModal', true);
+    setEditMsg(val);
+    setModalType('add');
+  };
+  // 编辑流程
+  const editFlow = (val, e) => {
+    e.stopPropagation();
+    showModal('FlowModal', true);
+    setModalType('edit');
+    setEditMsg(val);
+  };
+  // 删除流程
+  const delFlow = (val, e) => {
+    e.stopPropagation();
+    confirm({
+      title: '确定要删除吗？',
+      icon: <ExclamationCircleOutlined />,
+      content: '',
+      okText: '是',
+      okType: 'danger',
+      cancelText: '否',
+      onOk() {
+        DeleteFlow({ FlowId: val.FlowID })
+          .then(res => {
+            if (res.code === 0) {
+              getFlowList();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '删除成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          })
+          .catch(() => {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '网络异常请稍后再试',
+            });
+          });
+      },
+      onCancel() {},
+    });
+  };
+  // 编辑流程组
+  const eiditFlowGroup = (val, e, index) => {
+    e.stopPropagation();
+    setEditIndex(index);
+    showModal('FlowGroupModal', true);
+    setModalType('edit');
+    setEditMsg(val);
+  };
+  // 添加流程组
+  const addFlowGroup = e => {
+    e.stopPropagation();
+    showModal('FlowGroupModal', true);
+    setModalType('add');
+  };
+  // 点击节点树触发
+  const onSelect = (prop, treeNode) => {
+    if (!treeNode || treeNode.node.children) {
+      setCurrentSelectId(treeId);
+      return;
+    }
+    // 组节点不触发选中
+    if (prop[0]) {
+      // 选中节点处理
+      setCurrentSelectId(prop[0]);
+      setTreeId(prop[0]);
+      setChartLoading(true);
+      GetFlowNode({ flowID: prop[0] }).then(res => {
+        setChartLoading(false);
+        if (res.code === 0) {
+          setFlowData(res.data);
+        } else {
+          notification.error({
+            title: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      });
+    } else {
+      setCurrentSelectId(treeId);
+    }
+  };
+  // 处理树数据
+  const mapTree = (val, index) => {
+    const obj = { ...val };
+    return {
+      title: (
+        <div className={styles.nodeTitle}>
+          <span>{obj.name}</span>
+          <div className={styles.nodeTip}>
+            <Tooltip title="新增流程" className={styles.fs}>
+              <FileAddTwoTone onClick={e => addFlow(obj, e)} />
+            </Tooltip>
+            <Tooltip title="编辑流程组" className={styles.fs}>
+              <FormOutlined onClick={e => eiditFlowGroup(obj, e, index)} />
+            </Tooltip>
+          </div>
+        </div>
+      ),
+      key: obj.name + index,
+      children: obj.children ? obj.children.map(i => mapTreeNode(i)) : [],
+    };
+  };
+  // 渲染树子节点
+  const mapTreeNode = val => {
+    const obj = { ...val };
+    return {
+      title: (
+        <div className={styles.nodeTitle}>
+          <span
+            style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {obj.FlowName}
+          </span>
+          <div className={styles.nodeTip}>
+            <Tooltip title="编辑流程" className={styles.fs}>
+              <FormOutlined onClick={e => editFlow(obj, e)} />
+            </Tooltip>
+            <Tooltip title="删除流程" className={styles.fs}>
+              <DeleteTwoTone onClick={e => delFlow(obj, e)} />
+            </Tooltip>
+          </div>
+        </div>
+      ),
+      key: obj.FlowID,
+    };
+  };
+  //  保存分组后的回调函数
+  const groupCallBack = val => {
+    showModal('FlowGroupModal', false);
+    // 编辑老数据需要掉接口更新新数据手动修改数据，新增插入一条数据
+    if (modalType === 'edit' && editMsg.isOld) {
+      getFlowList();
+    } else if (modalType === 'edit') {
+      let newTree = [...treeData];
+      newTree[editIndex].name = val;
+      setTreeData(newTree);
+    } else {
+      setTreeData([...treeData, { name: val }]);
+    }
+    // 选中当前选中的节点
+    onSelect();
+  };
+  return (
+    <PageContainer>
+      <div className={styles.flowContainer}>
+        {/* 流程树 */}
+        <Spin spinning={treeLoading}>
+          <Card
+            className={classnames({
+              [styles.treeContainer]: true,
+              [styles.treeContainerHide]: !treeVisible,
+            })}
+          >
+            <div style={{ display: `${treeVisible ? 'block' : 'none'}` }}>
+              <span className={styles.processTitle}>流程树</span>
+              <Tooltip title="添加流程组">
+                <PlusSquareFilled
+                  onClick={e => addFlowGroup(e)}
+                  className={styles.treeHeadIcon}
+                />
+              </Tooltip>
+              <hr className={styles.splitLine} />
+              <div className={styles.treeContent}>
+                <Tree
+                  blockNode
+                  autoExpandParent
+                  onSelect={onSelect}
+                  selectedKeys={[currentSelectId]}
+                  treeData={treeData.map((item, index) => mapTree(item, index))}
+                />
+              </div>
+            </div>
+            <div className={styles.switcher}>
+              {treeVisible && (
+                <Tooltip title="隐藏流程列表">
+                  <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
+                </Tooltip>
+              )}
+              {!treeVisible && (
+                <Tooltip title="显示流程列表">
+                  <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
+                </Tooltip>
+              )}
+            </div>
+          </Card>
+        </Spin>
+        {/* 流程图 */}
+        <div className={styles.flowChartContainer}>
+          {currentSelectId ? (
+            <FlowChart
+              flowData={flowData}
+              flowID={currentSelectId}
+              chartLoading={chartLoading}
+            />
+          ) : (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="当前未选中流程"
+            />
+          )}
+        </div>
+      </div>
+      {/* 添加流程弹窗 */}
+      <FlowModal
+        visible={visible.FlowModal}
+        msg={editMsg}
+        modalType={modalType}
+        handleCancel={() => showModal('FlowModal', false)}
+        treeData={treeData}
+        onSubumit={() => {
+          showModal('FlowModal', false);
+          getFlowList();
+        }}
+      />
+      {/* 创建分组弹窗 */}
+      <FlowGroupModal
+        visible={visible.FlowGroupModal}
+        msg={editMsg}
+        modalType={modalType}
+        handleCancel={() => showModal('FlowGroupModal', false)}
+        treeData={treeData}
+        onSubumit={val => groupCallBack(val)}
+      />
+    </PageContainer>
+  );
+};
+
+export default Workflow;

src/pages/platformCenter/bsmanager/workflowEdit/workFlowComponents/FlowGroupModal.jsx

+import React, { useEffect } from 'react';
+import { UpdateFlowGroup } from '@/services/platform/workflow';
+import { Form, Modal, Input, notification } from 'antd';
+
+const FlowGroupModal = props => {
+  const { onSubumit, handleCancel, visible, msg, modalType, treeData } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      if (modalType === 'edit') {
+        getFormData();
+      }
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    form.setFieldsValue({ name: msg.name });
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let hasName;
+        hasName = treeData.some(item => item.name === validate.name);
+        if (modalType === 'edit') {
+          if (hasName && validate.name !== msg.name) {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '流程组名称不能重复',
+            });
+            return;
+          }
+          if (validate.name === msg.name) {
+            onSubumit();
+            return;
+          }
+          if (!msg.isOld) {
+            onSubumit(validate.name);
+            return;
+          }
+          UpdateFlowGroup({
+            oldName: msg.name,
+            newName: validate.name,
+          }).then(res => {
+            if (res.code === 0) {
+              onSubumit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '编辑成功',
+              });
+            } else {
+              onSubumit(validate.name);
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        } else {
+          // 新增
+          if (hasName) {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '流程组名称不能重复',
+            });
+            return;
+          }
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: '新增成功',
+          });
+          onSubumit(validate.name);
+        }
+      }
+    });
+  };
+  return (
+    <Modal
+      title={`${modalType === 'edit' ? '编辑' : '创建'}分组`}
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
+        <Form.Item
+          label="分组名称"
+          name="name"
+          rules={[{ required: true, message: '请输入分组名称' }]}
+        >
+          <Input placeholder="请输入分组名称" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default FlowGroupModal;

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

+import React, { useEffect } from 'react';
+import { CreateFlow } from '@/services/platform/workflow';
+import { Form, Modal, Input, notification, Select } from 'antd';
+const { Option } = Select;
+
+const FlowModal = props => {
+  const { onSubumit, handleCancel, visible, msg, modalType, treeData } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      if (modalType === 'edit') {
+        getFormData();
+      } else {
+        form.setFieldsValue({ Type: msg.name });
+      }
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    form.setFieldsValue({ ...msg });
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = {};
+        if (modalType === 'add') {
+          obj = validate;
+        } else {
+          obj = { ...validate, flowID: msg.FlowID };
+        }
+        CreateFlow(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={`${modalType === 'edit' ? '编辑' : '创建'}流程`}
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
+        <Form.Item
+          label="流程名称"
+          name="FlowName"
+          rules={[{ required: true, message: '请输入流程名称' }]}
+        >
+          <Input placeholder="请输入流程名称" />
+        </Form.Item>
+        <Form.Item label="分组信息" name="Type">
+          <Select>
+            {treeData.map(item => (
+              <Option value={item.name} key={item.name}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item label="编码前缀" name="Prefix">
+          <Input placeholder="请输入编码前缀" />
+        </Form.Item>
+        <Form.Item label="流程描述" name="Text">
+          <Input placeholder="请输入流程描述" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default FlowModal;

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

+import React, { useEffect, useState } from 'react';
+import {
+  Drawer,
+  Form,
+  Space,
+  Button,
+  Input,
+  notification,
+  Select,
+  Divider,
+  Table,
+  Tooltip,
+  Popconfirm,
+  message,
+} from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import RoalChoose from './nodeModalComponents/RoalChoose';
+const { Option } = Select;
+
+const NodeModal = props => {
+  const { onSubumit, handleCancel, visible, modalType, editMsg } = props;
+  const [form] = Form.useForm();
+  const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
+  const [nodeMsg, setNodeMsg] = useState({
+    NodeName: '',
+    NodeType: '',
+    roleList: [],
+  });
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      if (modalType === 'edit') {
+        getFormData();
+      } else {
+        setNodeMsg({ ...nodeMsg, roleList: [] });
+      }
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    setNodeMsg(editMsg);
+    const { NodeName, NodeType } = editMsg;
+    form.setFieldsValue({ NodeName, NodeType });
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = { ...validate, roleList: nodeMsg.roleList };
+        onSubumit(obj);
+      }
+    });
+  };
+  // 删除角色
+  const delUser = (record, index) => {
+    let roleList = [...nodeMsg.roleList];
+    roleList.splice(index, 1);
+    setNodeMsg({ ...nodeMsg, roleList });
+  };
+  // 添加用户
+  const addUser = obj => {
+    if (obj.roleId === '') {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '请选择角色',
+      });
+      return;
+    }
+    // 如果已经有角色就提示
+    if (nodeMsg.roleList.some(item => item.roleId === obj.roleId)) {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '机构(角色)已存在',
+      });
+      return;
+    }
+    setShowRoal(false);
+    // 添加表格
+    setNodeMsg({ ...nodeMsg, roleList: [...nodeMsg.roleList, obj] });
+  };
+  // 定义表格
+  const columns = [
+    {
+      title: '机构(角色)名称',
+      dataIndex: 'roleName',
+      align: 'center',
+    },
+    {
+      title: '默认承办人',
+      dataIndex: 'defauletUserName',
+      align: 'center',
+      ellipsis: {
+        showTitle: false,
+      },
+      render: text => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      render: (text, record, index) => (
+        <>
+          <Space>
+            <Tooltip title="删除角色">
+              <Popconfirm
+                title="是否删除该角色?"
+                onConfirm={() => delUser(record, index)}
+                onCancel={() => message.error('取消删除')}
+                okText="是"
+                cancelText="否"
+              >
+                <DeleteOutlined
+                  style={{ fontSize: '16px', color: '#e86060' }}
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  return (
+    <>
+      <Drawer
+        title="节点配置"
+        width={450}
+        onClose={handleCancel}
+        visible={visible}
+        bodyStyle={{ paddingBottom: 20 }}
+        footer={
+          <Space>
+            <Button onClick={handleCancel}>取消</Button>
+            <Button onClick={onFinish} type="primary">
+              确定
+            </Button>
+          </Space>
+        }
+      >
+        <Divider
+          orientation="left"
+          style={{
+            borderTopColor: '#99bbe8',
+            color: '#15428b',
+            fontWeight: 700,
+            marginBottom: '30px',
+          }}
+        >
+          编辑节点
+        </Divider>
+        <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
+          <Form.Item
+            label="节点名称"
+            name="NodeName"
+            rules={[
+              { required: true, message: '请输入节点名称' },
+              {
+                validator: (_, value) =>
+                  value.length > 6
+                    ? Promise.reject(new Error('节点名称太长啦~'))
+                    : Promise.resolve(),
+              },
+            ]}
+          >
+            <Input placeholder="请输入节点名称（最多6个字）" />
+          </Form.Item>
+          <Form.Item
+            label="节点类型"
+            name="NodeType"
+            rules={[{ required: true, message: '请选择节点类型' }]}
+          >
+            <Select placeholder="请选择节点类型">
+              <Option value="1">开始节点</Option>
+              <Option value="0">普通节点</Option>
+              <Option value="2">结束节点</Option>
+            </Select>
+          </Form.Item>
+        </Form>
+        <Divider
+          orientation="left"
+          style={{
+            borderTopColor: '#99bbe8',
+            color: '#15428b',
+            fontWeight: 700,
+            margin: '30px 0 10px 0',
+          }}
+        >
+          角色用户列表
+        </Divider>
+        <Button
+          style={{ marginBottom: '10px' }}
+          onClick={() => {
+            setShowRoal(true);
+          }}
+        >
+          添加
+        </Button>
+        <Table
+          dataSource={nodeMsg.roleList}
+          columns={columns}
+          rowKey={record => record.roleId}
+          bordered
+          size="small"
+          scroll={{ y: 'calc(100vh - 550px)' }}
+          pagination={false}
+        />
+      </Drawer>
+      <RoalChoose
+        visible={showRoal}
+        handleCancel={() => setShowRoal(false)}
+        onSubumit={addUser}
+      />
+    </>
+  );
+};
+export default NodeModal;

src/pages/platformCenter/bsmanager/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RoalChoose.jsx

+import React, { useEffect, useState } from 'react';
+import { GetRoleUser } from '@/services/platform/workflow';
+import {
+  Form,
+  Modal,
+  Input,
+  Checkbox,
+  Button,
+  Pagination,
+  Spin,
+  Divider,
+} from 'antd';
+import Tree from '@/components/ExpendableTree';
+import { UserOutlined } from '@ant-design/icons';
+import styles from '../../../workflow.less';
+
+const CheckboxGroup = Checkbox.Group;
+
+const RoalChoose = props => {
+  const { onSubumit, handleCancel, visible } = props;
+  const [form] = Form.useForm();
+  const [currentSelectId, setCurrentSelectId] = useState(''); // 当前选择节点Id
+  const [currentRoalName, setCurrentRoalName] = useState(''); // 当前选择节点名称
+  const [treeData, setTreeData] = useState([]); // 左侧树数据
+  const [checkedList, setCheckedList] = useState([]); // 选中的数据
+  const [plainOptions, setPlainOptions] = useState([]); // 默认的的数据
+  const [indeterminate, setIndeterminate] = useState(false); // 全选框的有选择但是没有全选的样式
+  const [checkAll, setCheckAll] = useState(false); // 全选框全选样式
+  const [total, setTotal] = useState(); // 角色人员条数
+  const [loading, setLoading] = useState(false); // 加载时的loading
+  const [currentPage, setCurrentPage] = useState(1);
+  // 初始化
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      setCurrentSelectId('');
+      setPlainOptions([]);
+      setCheckedList([]);
+      setIndeterminate(false);
+      setCheckAll(false);
+      setCurrentPage(1);
+      getData('', 0);
+    } else {
+      setTreeData([]);
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getData = (roleName, pageIndex, pageSize) => {
+    roleName = roleName || '';
+    setLoading(true);
+    GetRoleUser({ roleName, pageIndex, pageSize }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        setTreeData(res.data.data);
+        setTotal(res.data.count);
+      }
+    });
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setCurrentSelectId('');
+        setPlainOptions([]);
+        setCheckedList([]);
+        setIndeterminate(false);
+        setCheckAll(false);
+        setCurrentPage(1);
+        getData(validate.roleName, 1);
+      }
+    });
+  };
+  // 处理属性结构
+  const mapTree = item => {
+    const obj = { ...item };
+    return {
+      title: obj.name,
+      key: obj.id,
+      userList: obj.userList,
+    };
+  };
+  // 选择树
+  const onSelect = (selectedKeys, e) => {
+    setCurrentRoalName(e.node.title);
+    if (selectedKeys[0]) {
+      // 选择后对复选框的用户进行重新赋值
+      let userList = [...e.node.userList];
+      let options = userList.map(item => ({
+        label: item.name,
+        value: item.id,
+      }));
+      setCurrentSelectId(selectedKeys[0]);
+      setPlainOptions(options);
+      setCheckedList([]);
+      setIndeterminate(false);
+      setCheckAll(false);
+    }
+  };
+  // 监听分页
+  const paginationChange = (page, pageSize) => {
+    // 分页时清空复选框
+    setCurrentSelectId('');
+    setPlainOptions([]);
+    setCheckedList([]);
+    setIndeterminate(false);
+    setCheckAll(false);
+    setCurrentPage(page);
+    let roleName = form.getFieldValue('roleName');
+    getData(roleName, page, pageSize);
+  };
+  // 复选框全选监听
+  const onCheckAllChange = e => {
+    let allOptions = plainOptions.map(item => item.value);
+    setCheckedList(e.target.checked ? allOptions : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+  // 复选框监听事件
+  const onChange = list => {
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < plainOptions.length);
+    setCheckAll(list.length === plainOptions.length);
+  };
+  // 保存选择的角色列表
+  const onSave = () => {
+    // 默认承办人字符串拼接
+    let DeafaultUserName = '';
+    checkedList.forEach((item, index) => {
+      plainOptions.forEach(element => {
+        if (item === element.value) {
+          if (index === checkedList.length - 1) {
+            DeafaultUserName += `${element.label}`;
+          } else {
+            DeafaultUserName += `${element.label},`;
+          }
+        }
+      });
+    });
+    // 存入要插入的数据
+    let obj = {
+      roleName: currentRoalName,
+      roleId: currentSelectId,
+      defaultUserId: checkedList,
+      defauletUserName: DeafaultUserName,
+    };
+    onSubumit(obj);
+  };
+  return (
+    <Modal
+      title="角色用户列表"
+      visible={visible}
+      onOk={onSave}
+      width="860px"
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <div className={styles.pageContent}>
+        {/* 角色选择树 */}
+        <div className={styles.roleContent}>
+          {/* 角色搜索 */}
+          <div className={styles.header}>
+            <Form form={form} layout="inline" onFinish={onFinish}>
+              <Form.Item name="roleName">
+                <Input
+                  prefix={<UserOutlined className="site-form-item-icon" />}
+                  placeholder="RoleName"
+                  allowClear
+                />
+              </Form.Item>
+              <Form.Item>
+                <Button type="primary" htmlType="submit">
+                  搜索
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
+          {/* 角色树 */}
+          <Spin spinning={loading}>
+            <div className={styles.treeContent}>
+              <span style={{ marginLeft: '28px', fontWeight: 700 }}>
+                角色列表
+              </span>
+              <Divider style={{ margin: '10px 0' }} />
+              <Tree
+                blockNode
+                autoExpandParent
+                onSelect={onSelect}
+                selectedKeys={[currentSelectId]}
+                treeData={treeData.map(item => mapTree(item))}
+              />
+            </div>
+          </Spin>
+          {/* 分页 */}
+          <div className={styles.footer}>
+            <Pagination
+              size="small"
+              total={total}
+              showSizeChanger
+              defaultCurrent={1}
+              current={currentPage}
+              onChange={paginationChange}
+            />
+          </div>
+        </div>
+        {/* 用户列表 */}
+        <div className={styles.userContent}>
+          <div className={styles.userCheckBox}>
+            <Checkbox
+              indeterminate={indeterminate}
+              onChange={onCheckAllChange}
+              checked={checkAll}
+            >
+              <span style={{ fontWeight: 700 }}>用户列表</span>
+            </Checkbox>
+            <Divider style={{ margin: '10px 0' }} />
+            <div className={styles.checkContent}>
+              <CheckboxGroup
+                options={plainOptions}
+                value={checkedList}
+                onChange={onChange}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default RoalChoose;

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

+// 流程首页
+.flowContainer {
+  position: relative;
+  display: flex;
+  width: 100%;
+  .treeContainer {
+    position: relative;
+    left: 0;
+    top: 0;
+    height: calc(100vh - 74px);
+    width: 250px;
+    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;
+    }
+
+    .treeHeadIcon {
+      color: #1890ff;
+      font-size: 25px;
+      vertical-align: middle;
+      margin-left: 130px;
+    }
+    .ant-tree-treenode {
+      width: 100%;
+    }
+    .ant-tree-title {
+      width: 100%;
+    }
+    .nodeTitle {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .nodeTip {
+        display: none;
+        .fs {
+          font-size: 18px;
+          margin-left: 5px;
+          color: #1890ff;
+        }
+      }
+    }
+    .nodeTitle:hover {
+      .nodeTip {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+    .switcher {
+      display: block;
+      position: absolute;
+      font-size: 18px;
+      color: #1890ff !important;
+      top: 50%;
+      right: 2px;
+      transform: translate(0%, -50%);
+      z-index: 1;
+    }
+  }
+  .treeContainerHide {
+    left: 0px;
+    top: 0;
+    width: 26px;
+  }
+
+  // 流程图
+  .flowChartContainer {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 74px);
+    background-color: #fff;
+    .buttonList {
+      display: flex;
+      justify-content: flex-start;
+      margin: 15px 0 15px 0;
+      .ant-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+      }
+    }
+    canvas {
+      border: 0px;
+      outline: none;
+    }
+    .myDiagramDiv {
+      width: 100%;
+      height: calc(100vh - 135px);
+    }
+  }
+}
+// 角色用户列表
+.pageContent {
+  display: flex;
+  .roleContent {
+    width: 50%;
+    margin-right: 10px;
+
+    .treeContent {
+      width: 100%;
+      height: 370px;
+      margin: 10px 0 10px 0;
+      padding: 20px 20px 20px 20px;
+      box-sizing: border-box;
+      border: 1px solid #ccc;
+      .ant-tree-list-holder {
+        height: 285px;
+      }
+    }
+  }
+  .userContent {
+    width: 50%;
+    .userCheckBox {
+      margin-top: 41px;
+      padding: 20px;
+      box-sizing: border-box;
+      width: 100%;
+      height: 370px;
+      border: 1px solid #ccc;
+      .checkContent {
+        height: 285px;
+        width: 100%;
+        overflow-y: scroll;
+      }
+    }
+  }
+}

src/routes/config.js

@@ -53,7 +53,7 @@ import FiledConfig from '@/pages/platformCenter/filedConfig/filedConfig';
 import Incident from '@/pages/platformCenter/bsmanager/workOrder/incident';
 import Flow from '@/pages/platformCenter/bsmanager/workFlow/flow';
 import FlowNode from '@/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode';
-// import Workflow from '@/pages/platformCenter/bsmanager/workflowEdit/Workflow';
+import Workflow from '@/pages/platformCenter/bsmanager/workflowEdit/Workflow';
 // import ColConen from '@/components/Colophon/colContent';
 
 const iconStyle = { verticalAlign: '0.125em' };
@@ -301,11 +301,11 @@ export default {
                   hideMenu: true,
                   component: FlowNode,
                 },
-                // {
-                //   path: '/platformCenter/bsmanger/Workflow',
-                //   name: '工作流编辑',
-                //   component: Workflow,
-                // },
+                {
+                  path: '/platformCenter/bsmanger/Workflow',
+                  name: '工作流编辑',
+                  component: Workflow,
+                },
                 // {
                 //   path: '/platformCenter/bsmanger/standbookmanager',
                 //   name: '台账配置',

src/services/platform/workflow.jsx

+import { get, post, PUBLISH_SERVICE } from '@/services/index';
+// 获取全部流程
+export const WFGetAllFlow = param =>
+  get(`${PUBLISH_SERVICE}/WorkFlow/WFGetAllFlow`, param);
+// 获取流程节点的信息
+export const GetFlowNode = param =>
+  get(`${PUBLISH_SERVICE}/WorkFlow/GetFlowNode`, param);
+// 创建或更新流程流程
+export const CreateFlow = param =>
+  post(`${PUBLISH_SERVICE}/WorkFlow/CreateFlow`, param);
+// 更新流程名称
+export const UpdateFlowGroup = param =>
+  post(`${PUBLISH_SERVICE}/WorkFlow/UpdateFlowGroup`, param);
+// 查询全部角色对应的人员
+export const GetRoleUser = param =>
+  get(`${PUBLISH_SERVICE}/WorkFlow/GetRoleUser`, param);
+// 获取节点信息
+export const GetNodeInfo = param =>
+  get(`${PUBLISH_SERVICE}/WorkFlow/GetNodeInfo`, param);
+// 创建或修改流程节点
+export const CreateOrUpdateNode = param =>
+  post(`${PUBLISH_SERVICE}/WorkFlow/CreateOrUpdateNode`, param);
+// 保存修改
+export const SaveNodeChange = param =>
+  post(`${PUBLISH_SERVICE}/WorkFlow/SaveNodeChange`, param);
+// 删除流程
+export const DeleteFlow = param =>
+  get(`${PUBLISH_SERVICE}/WorkFlow/DeleteFlow`, param);