fix: 重构工作流编辑器选择角色机构，默认承办人模块交互

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

@@ -209,8 +209,13 @@ const FlowNode = () => {
         dataIndex: 'extendRollbackNode',
         align: 'center',
         width: 80,
+        ellipsis: {
+          showTitle: true,
+        },
         render: (text, record) => (
+          <Tooltip placement="topLeft" title={text}>
             <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
+          </Tooltip>
         ),
       },
       {

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

@@ -15,13 +15,16 @@ import {
 } from 'antd';
 import { DeleteOutlined, EditTwoTone } from '@ant-design/icons';
 import RoalChoose from './nodeModalComponents/RoalChoose';
+import Undertaker from './nodeModalComponents/Undertaker';
+
 const { Option } = Select;
 
 const NodeModal = props => {
   const { onSubumit, handleCancel, visible, modalType, editMsg } = props;
   const [form] = Form.useForm();
   const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
-  const [isEdit, setIsEdit] = useState(); // 是编辑角色还是添加角色
+  const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
+  const [editIndex, setEditIndex] = useState(); // 当前编辑默认承办人索引
   const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
   const [nodeMsg, setNodeMsg] = useState({
     NodeName: '',
@@ -59,44 +62,26 @@ const NodeModal = props => {
     roleList.splice(index, 1);
     setNodeMsg({ ...nodeMsg, roleList });
   };
-  // 添加用户
-  const addUser = (obj, treeLength) => {
-    if (obj.roleId === '' || obj.roleName === '' || treeLength === 0) {
-      notification.error({
-        message: '提示',
-        duration: 3,
-        description: '请选择角色',
-      });
-      return;
-    }
-    // 如果已经有角色就提示
-    if (nodeMsg.roleList.some(item => item.roleId === obj.roleId) && isEdit === 'add') {
-      notification.error({
-        message: '提示',
-        duration: 3,
-        description: '机构(角色)已存在',
-      });
-      return;
-    }
-    // 编辑角色覆盖原有
-    let chooseIndex = nodeMsg.roleList.findIndex(item => item.roleId === obj.roleId);
-    let newList;
-    if (chooseIndex === -1) {
-      // 添加表格
-      setNodeMsg({ ...nodeMsg, roleList: [...nodeMsg.roleList, obj] });
-    } else {
-      newList = [...nodeMsg.roleList];
-      newList[chooseIndex] = obj;
-      // 修改表格
-      setNodeMsg({ ...nodeMsg, roleList: [...newList] });
-    }
+  // 添加角色或机构
+  const addUser = selectList => {
+    setNodeMsg({ ...nodeMsg, roleList: selectList });
     setShowRoal(false);
   };
+  // 添加默认承办人
+  const addUnderTaker = (userName, userId) => {
+    let list = JSON.parse(JSON.stringify(nodeMsg.roleList));
+    console.log(list, 'list');
+    console.log(editIndex, 'editIndex');
+    list[editIndex].defauletUserName = userName;
+    list[editIndex].defaultUserId = userId;
+    setNodeMsg({ ...nodeMsg, roleList: list });
+    setShowUnderTaker(false);
+  };
   // 编辑默认承办人
-  const toEdit = record => {
-    setIsEdit('edit');
+  const toEdit = (record, index) => {
+    setEditIndex(index);
     setChooseUser(record);
-    setShowRoal(true);
+    setShowUnderTaker(true);
   };
   // 定义表格
   const columns = [
@@ -133,9 +118,15 @@ const NodeModal = props => {
       render: (text, record, index) => (
         <>
           <Space>
-            <Tooltip title="删除角色">
+            <Tooltip title="编辑默认承办人">
+              <EditTwoTone
+                onClick={() => toEdit(record, index)}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
+            <Tooltip title="删除角色或机构">
               <Popconfirm
-                title="是否删除该角色?"
+                title="是否删除该角色或机构?"
                 onConfirm={() => delUser(record, index)}
                 onCancel={() => message.error('取消删除')}
                 okText="是"
@@ -144,12 +135,6 @@ const NodeModal = props => {
                 <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
               </Popconfirm>
             </Tooltip>
-            <Tooltip title="修改默认承办人">
-              <EditTwoTone
-                onClick={() => toEdit(record)}
-                style={{ fontSize: '16px', color: '#1890FF' }}
-              />
-            </Tooltip>
           </Space>
         </>
       ),
@@ -163,6 +148,7 @@ const NodeModal = props => {
         onClose={handleCancel}
         visible={visible}
         bodyStyle={{ paddingBottom: 20 }}
+        zIndex={10}
         footer={
           <Space>
             <Button onClick={handleCancel}>取消</Button>
@@ -226,11 +212,10 @@ const NodeModal = props => {
           style={{ marginBottom: '10px' }}
           onClick={() => {
             setShowRoal(true);
-            setIsEdit('add');
           }}
           type="primary"
         >
-          添加
+          请选择角色或机构
         </Button>
         <Table
           dataSource={nodeMsg.roleList}
@@ -239,21 +224,26 @@ const NodeModal = props => {
           bordered
           size="small"
           scroll={{ y: 'calc(100vh - 550px)' }}
-          onRow={record => ({
+          onRow={(record, index) => ({
             onDoubleClick: () => {
-              toEdit(record);
+              toEdit(record, index);
             },
           })}
           pagination={false}
         />
       </Drawer>
       <RoalChoose
+        roleList={nodeMsg.roleList}
         visible={showRoal}
-        modalType={isEdit}
-        chooseUser={chooseUser}
         handleCancel={() => setShowRoal(false)}
         onSubumit={addUser}
       />
+      <Undertaker
+        chooseUser={chooseUser}
+        visible={showUnderTaker}
+        handleCancel={() => setShowUnderTaker(false)}
+        onSubumit={addUnderTaker}
+      />
     </>
   );
 };

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RoalChoose.less

+.modalContainer {
+  .ant-modal-body {
+    padding: 0;
+  }
+  .ant-modal-header {
+    padding: 28px 16px;
+  }
+  .pageContent {
+    display: flex;
+    height: 450px;
+    .optionalList {
+      position: relative;
+      width: 60%;
+      border-right: 1px solid #e7e7e7;
+      .title {
+        position: absolute;
+        left: 17px;
+        top: 10px;
+        font-weight: 700;
+        font-size: 14px;
+        z-index: 1;
+        color: #00070d;
+      }
+      .tabContent {
+        height: 430px;
+        .ant-tabs-content-holder {
+          height: 355px;
+        }
+      }
+      .searchInput {
+        position: absolute;
+        width: 200px;
+        z-index: 1;
+        top: 3px;
+        right: 40px;
+
+        .ant-input,
+        .ant-input-affix-wrapper {
+          border-top-left-radius: 20px;
+          border-bottom-left-radius: 20px;
+        }
+        .ant-input-group-addon {
+          border-top-right-radius: 20px;
+          border-bottom-right-radius: 20px;
+        }
+        .ant-input-search-button {
+          width: 40px;
+          border-top-right-radius: 20px;
+          border-bottom-right-radius: 20px;
+        }
+      }
+      .checkContent {
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: 32px;
+        .check {
+          width: 150px;
+          margin-bottom: 10px;
+          margin-right: 6px;
+          .ant-checkbox-wrapper span {
+            max-width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      .footer {
+        padding-left: 25px;
+        .ant-pagination {
+          border: none;
+        }
+      }
+      .ant-tabs-nav {
+        padding-left: 90px;
+        background-color: #f2f1f1;
+      }
+      .ant-tabs-tab {
+        background-color: #f2f1f1;
+        color: #666666;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+      .ant-tabs-tab-active {
+        background-color: #fff;
+        color: #1685ff;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+    }
+    .selectedList {
+      position: relative;
+      width: 40%;
+
+      .header {
+        height: 40px;
+        width: 100%;
+        background-color: #f2f1f1;
+        .title {
+          position: absolute;
+          left: 17px;
+          top: 10px;
+          font-weight: 700;
+          font-size: 14px;
+          z-index: 1;
+          color: #00070d;
+        }
+      }
+      .selectBox {
+        height: 365px;
+        padding: 10px;
+        overflow-y: scroll;
+        .selectContent {
+          display: flex;
+          flex-wrap: wrap;
+          flex-direction: row;
+          .selectValue {
+            margin-bottom: 15px;
+          }
+        }
+      }
+    }
+  }
+}

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

+import React, { useEffect, useState } from 'react';
+import { GetRoleUser } from '@/services/workflow/workflow';
+import { Modal, Checkbox, notification, Empty, Divider } from 'antd';
+const Undertaker = props => {
+  const { onSubumit, handleCancel, visible, chooseUser } = props;
+  const [checkedList, setCheckedList] = useState([]); // 选中的数据
+  const [plainOptions, setPlainOptions] = useState([]); // 默认的的数据
+  const [indeterminate, setIndeterminate] = useState(false); // 全选框的有选择但是没有全选的样式
+  const [checkAll, setCheckAll] = useState(false); // 全选框全选样式
+  const CheckboxGroup = Checkbox.Group;
+  useEffect(() => {
+    if (visible) {
+      getData();
+    } else {
+      setCheckedList([]);
+      setPlainOptions([]);
+      setCheckAll(false);
+      setIndeterminate(false);
+    }
+  }, [visible]);
+  useEffect(() => {
+    // 选中列表回显
+    if (chooseUser && plainOptions.length > 0) {
+      onChange(chooseUser.defaultUserId);
+    }
+  }, [plainOptions]);
+
+  // 获取可选默认承办人数据
+  const getData = () => {
+    GetRoleUser({
+      pageIndex: 1,
+      pageSize: 1,
+      roleId: chooseUser.roleId,
+      Type: Number(chooseUser.type),
+    }).then(res => {
+      if (res.code === 0) {
+        let data = res.data.data[0].userList.map(item => ({ value: item.id, label: item.name }));
+        setPlainOptions(data);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+  // 保存选择默认承办人
+  const onSave = () => {
+    let userName = [];
+    let mapList = new Map();
+    plainOptions.forEach(item => {
+      mapList.set(item.value, item.label);
+    });
+    checkedList.forEach(item => {
+      if (mapList.has(item)) {
+        userName.push(mapList.get(item));
+      }
+    });
+    onSubumit(userName.join(','), checkedList);
+  };
+  // 复选框全选监听
+  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);
+  };
+  return (
+    <div>
+      <Modal
+        title="选择默认承办人"
+        visible={visible}
+        onOk={onSave}
+        width={400}
+        onCancel={handleCancel}
+        maskClosable={false}
+        destroyOnClose
+      >
+        <div>
+          <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+            <span style={{ fontWeight: 700 }}>用户列表</span>
+          </Checkbox>
+          <Divider style={{ margin: '10px 0' }} />
+          <div style={{ height: '380px', overflowY: 'scroll' }}>
+            {plainOptions.length > 0 ? (
+              <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
+            ) : (
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未有查找到用户" />
+            )}
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Undertaker;

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

@@ -108,7 +108,6 @@
   .roleContent {
     width: 50%;
     margin-right: 10px;
-
     .treeContent {
       width: 100%;
       height: 370px;