fix: 修改表字段表格拖拽，优化工作流编辑器

jsconfig.json

-{
-    "compilerOptions": {
-        "jsx": "react",
-        "target": "ES6",
-        "module": "commonjs",
-        "allowSyntheticDefaultImports": true,
-        "baseUrl": "./",
-        "paths": {
-            "@/*": ["src/*"]
-        },
-        "spaces": 2
-    },
-    "exclude": [
-        "node_modules"
-    ]
-}
\ No newline at end of file

package.json

@@ -90,7 +90,7 @@
         "@babel/preset-typescript": "^7.12.1",
         "@babel/runtime": "^7.10.5",
         "@wisdom-cesium/cesium": "^1.0.29",
-        "@wisdom-map/arcgismap": "^1.0.79-26",
+        "@wisdom-map/arcgismap": "^1.0.79-28",
         "@esri/arcgis-html-sanitizer": "2.9.1",
         "@esri/calcite-colors": "6.0.3",
         "ace-builds": "^1.4.12",

src/pages/bsmanager/base/tablemanager/components/Field/DraggableBodyRow.jsx

+import { getStatusClassNames } from 'antd/lib/_util/statusUtils';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
-import './index.less';
+import styles from './index.less';
 
 const DraggableBodyRow = ({
+  pickIndex,
+  dragType,
   name,
   index,
   moveRow,
@@ -13,30 +16,68 @@ const DraggableBodyRow = ({
 }) => {
   useEffect(() => {}, []);
   const ref = useRef();
-  const [{ isOver, dropClassName }, drop] = useDrop({
+  // const
+  const [{ isOver, canDrop, dropClassName }, drop] = useDrop({
     accept: 'DraggableBodyRow',
+    canDrop: () => {
+      // 组不能拖拽到字段上
+      if (!tableType || (dragType === 'group' && tableType === 'field')) {
+        return false;
+      }
+      if (dragType === 'field' && tableType === 'group' && pickIndex === index) {
+        return false;
+      }
+      if (dragType === 'group' && index === 0) {
+        return false;
+      }
+      return true;
+    },
     collect: monitor => {
       const { index: dragIndex } = monitor.getItem() || {};
-      if (dragIndex === index) {
+
+      let rowClass;
+      // 拖拽体为字段时
+      if (dragType === 'field') {
+        if (tableType === 'group') {
+          // 给字段拖拽到组
+          rowClass = ` ${styles.dropOverGroup}`;
+        } else {
+          // 字段之间的拖拽
+          rowClass =
+            dragIndex < index ? ` ${styles.dropOverDownward}` : ` ${styles.dropOverUpward}`;
+        }
+      } else {
+        // 拖拽提为组时
+        if (index === 0 || dragIndex === index || tableType === 'field') {
+          return {};
+        }
+        rowClass = dragIndex < index ? ` ${styles.dropOverDownward}` : ` ${styles.dropOverUpward}`;
+      }
+      // 字段不能拖拽到字段上
+      if (dragIndex === index && tableType === 'field') {
         return {};
       }
       return {
         isOver: monitor.isOver(),
         canDrop: monitor.canDrop(),
-        dropClassName:
-          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+        dropClassName: rowClass,
       };
     },
     drop: item => {
-      moveRow(item.index, index, tableType);
+      moveRow(item.index, index, tableType, dragType);
     },
   });
+  // 拖拽配置
   const [, drag] = useDrag({
-    type: tableType === 'field' ? 'DraggableBodyRow' : '',
+    type: 'DraggableBodyRow',
     item: { index },
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-    }),
+    canDrag: () => {
+      if (dragType === 'group' && index === 0) {
+        return false;
+      }
+      return true;
+    },
+    collect: monitor => ({ isDragging: monitor.isDragging() }),
   });
   drop(drag(ref));
 

src/pages/bsmanager/base/tablemanager/components/Field/index.less

@@ -92,12 +92,16 @@
   background-color: #dfe8f6;
 }
 
-tr.drop-over-downward td {
-  border-bottom: 2px dashed #1890ff;
+tr.dropOverDownward td {
+  border-bottom: 1px dashed #1890ff;
 }
 
-tr.drop-over-upward td {
-  border-top: 2px dashed #1890ff;
+tr.dropOverUpward td {
+  border-top: 1px dashed #1890ff;
+}
+tr.dropOverGroup td {
+  // border: 1px dashed #1890ff;
+  background-color: aqua;
 }
 .clickRowStyle {
   background: #cfe7fd;

src/pages/bsmanager/base/tablemanager/components/Field/loadGroupNew.jsx

 import React, { useState, useEffect } from 'react';
 import { Modal, Spin, Table, Button, notification, Form, Input } from 'antd';
-import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';
 import { LoadFieldsByGroup, LoadGroup, ChangeOrder } from '@/services/tablemanager/tablemanager';
@@ -12,6 +12,8 @@ const LoadGroupNew = props => {
   const [pickIndex, setPickIndex] = useState(0); // 当前选中的索引
   const [loading, setLoading] = useState(false); // 数据是否加载完毕
   const [isModalVisible, setIsModalVisible] = useState(false); // 添加分组弹窗是否显示
+  const [dragType, setDragType] = useState(); // 拖拽的是分组还是字段
+  const [modalType, setModalType] = useState(); // 模态类型
   const [form] = Form.useForm();
   useEffect(() => {
     if (visible) {
@@ -59,13 +61,13 @@ const LoadGroupNew = props => {
     {
       title: '字段名',
       dataIndex: 'Name',
-      width: 150,
+      width: 250,
       key: 'Name',
     },
     {
       title: '形态',
       dataIndex: 'Shape',
-      width: 150,
+      width: 120,
       key: 'Shape',
     },
   ];
@@ -129,9 +131,12 @@ const LoadGroupNew = props => {
     return arr;
   };
   // 拖拽表格
-  const moveRow = (dragIndex, hoverIndex, tableType) => {
-    console.log(dragIndex, hoverIndex, tableType);
+  const moveRow = (dragIndex, hoverIndex, tableType, dragTypes) => {
+    // console.log(dragIndex, hoverIndex, tableType, dragTypes);
+    if (dragTypes === 'field') {
+      // 拖拽体为字段
       if (tableType === 'field') {
+        // 字段换位
         setGroupData(val => {
           let newData = JSON.parse(JSON.stringify(val));
           newData[pickIndex].fieldData = moveInArray(
@@ -142,6 +147,7 @@ const LoadGroupNew = props => {
           return newData;
         });
       } else {
+        // 字段拖拽到组
         if (hoverIndex === pickIndex) {
           return;
         }
@@ -152,12 +158,27 @@ const LoadGroupNew = props => {
           return newData;
         });
       }
+    } else {
+      // 组拖拽
+      setGroupData(val => {
+        let newData = JSON.parse(JSON.stringify(val));
+        newData = moveInArray(newData, dragIndex, hoverIndex);
+        return newData;
+      });
+      setPickIndex(hoverIndex);
+    }
   };
   // 点击行添加样式
   const setRowClassName = (record, index) => (index === pickIndex ? styles.clickRowStyle : '');
   // 新增分组
-  const addGroup = () => {
+  const addGroup = type => {
+    setModalType(type);
+    if (type === 'add') {
       form.resetFields();
+    } else {
+      form.setFieldsValue({ groupName: groupData[pickIndex].text });
+    }
+
     setIsModalVisible(true);
   };
 
@@ -186,18 +207,14 @@ const LoadGroupNew = props => {
   };
   // 保存新建分组
   const handleOk = () => {
-    let obj = {
-      text: form.getFieldsValue().groupName,
-      fieldData: [],
-    };
-    // if (form.getFieldsValue().groupName.length > 9) {
-    //   notification.error({
-    //     message: '提示',
-    //     duration: 3,
-    //     description: '组名请在10个字以内',
-    //   });
-    //   return;
-    // }
+    if (!form.getFieldsValue().groupName) {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '请填写组名',
+      });
+      return;
+    }
     // 判断是否有重复的组名
     let isRepeat = groupData.some(item => item.text === form.getFieldsValue().groupName);
     if (isRepeat) {
@@ -208,14 +225,24 @@ const LoadGroupNew = props => {
       });
       return;
     }
-    setIsModalVisible(false);
-    if (form.getFieldsValue().groupName) {
+    if (modalType === 'add') {
+      let obj = {
+        text: form.getFieldsValue().groupName,
+        fieldData: [],
+      };
       setGroupData(val => {
         let newData = JSON.parse(JSON.stringify(val));
         newData.push(obj);
         return newData;
       });
+    } else {
+      setGroupData(val => {
+        let newData = JSON.parse(JSON.stringify(val));
+        newData[pickIndex].text = form.getFieldsValue().groupName;
+        return newData;
+      });
     }
+    setIsModalVisible(false);
   };
   return (
     <div>
@@ -226,7 +253,7 @@ const LoadGroupNew = props => {
         onCancel={onCancel}
         maskClosable={false}
         destroyOnClose
-        width="580px"
+        width="680px"
       >
         <div
           className="button_content"
@@ -238,7 +265,7 @@ const LoadGroupNew = props => {
           }}
         >
           <Button
-            onClick={addGroup}
+            onClick={() => addGroup('add')}
             style={{
               display: 'flex',
               alignItems: 'center',
@@ -248,7 +275,26 @@ const LoadGroupNew = props => {
             添加分组
             <PlusOutlined />
           </Button>
-          <Button danger onClick={delGroup} style={{ display: 'flex', alignItems: 'center' }}>
+          <Button
+            disabled={pickIndex === 0}
+            type="primary"
+            ghost
+            onClick={() => addGroup('edit')}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              marginRight: '1rem',
+            }}
+          >
+            编辑分组
+            <EditOutlined />
+          </Button>
+          <Button
+            danger
+            disabled={pickIndex === 0}
+            onClick={delGroup}
+            style={{ display: 'flex', alignItems: 'center' }}
+          >
             删除分组
             <DeleteOutlined />
           </Button>{' '}
@@ -269,7 +315,7 @@ const LoadGroupNew = props => {
                 <Table
                   bordered
                   rowKey={record => record.text}
-                  style={{ width: '150px' }}
+                  style={{ width: '200px' }}
                   columns={columnsGroup}
                   dataSource={groupData}
                   components={components}
@@ -280,6 +326,11 @@ const LoadGroupNew = props => {
                   onRow={(record, index) => ({
                     tableType: 'group',
                     index,
+                    pickIndex,
+                    dragType,
+                    onMouseEnter: event => {
+                      setDragType('group');
+                    }, // 点击行
                     moveRow,
                     onClick: event => {
                       event.stopPropagation();
@@ -299,7 +350,7 @@ const LoadGroupNew = props => {
                 <Table
                   bordered
                   columns={columns}
-                  style={{ width: '330px' }}
+                  style={{ width: '400px' }}
                   rowKey={record => record.Name}
                   dataSource={groupData[pickIndex].fieldData}
                   components={components}
@@ -308,7 +359,12 @@ const LoadGroupNew = props => {
                   scroll={{ y: 510 }}
                   onRow={(record, index) => ({
                     tableType: 'field',
+                    pickIndex,
+                    dragType,
                     index,
+                    onMouseEnter: event => {
+                      setDragType('field');
+                    }, // 点击行
                     moveRow,
                   })}
                 />
@@ -318,7 +374,7 @@ const LoadGroupNew = props => {
         </Spin>
         {/* 添加分组弹窗 */}
         <Modal
-          title="添加分组"
+          title={modalType === 'add' ? '添加分组' : '编辑分组'}
           style={{ top: '200px' }}
           visible={isModalVisible}
           maskClosable={false}

src/pages/bsmanager/base/tablemanager/index.jsx

@@ -328,6 +328,7 @@ const TableManager = props => {
       dataIndex: 'tableStyle',
       key: 'tableStyle',
       align: 'center',
+      width: 80,
       render: text => <div>{text || '大'}</div>,
     },
     {
@@ -335,12 +336,14 @@ const TableManager = props => {
       dataIndex: 'fieldCount',
       key: 'fieldCount',
       align: 'center',
+      width: 80,
     },
     {
       title: '缺少字段',
       dataIndex: 'missingFieldCount',
       key: 'missingFieldCount',
       align: 'center',
+      width: 80,
       render: text => (
         <div
           className={classnames({
@@ -356,19 +359,21 @@ const TableManager = props => {
       dataIndex: 'extraFieldCount',
       key: 'extraFieldCount',
       align: 'center',
+      width: 80,
     },
     {
       title: '分组数量',
       dataIndex: 'groupCount',
       key: 'groupCount',
       align: 'center',
+      width: 80,
     },
     {
       title: '操作',
       ellipsis: true,
       key: 'tableID',
       align: 'center',
-      width: 300,
+      width: 100,
       render: (text, record) => (
         <Space>
           <Tooltip title="修改">

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx

@@ -28,6 +28,7 @@ const FlowChart = props => {
   }); // 组件内得流程图数据
   const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
   const [newSerialNo, setNewSerialNo] = useState(0);
+  const [nodeLength, setNodeLength] = useState();
   const objGo = go.GraphObject.make;
   // 监听删除，给删除数组里添加删除id
   useEffect(() => {
@@ -166,7 +167,6 @@ const FlowChart = props => {
           new go.Binding('height', 'NodeType', v => (v === '0' ? 75 : 105)),
           new go.Binding('figure', 'NodeType', v => (v === '0' ? 'RoundedRectangle' : 'Ellipse')),
           new go.Binding('strokeWidth', 'NodeType', v => (v === '0' ? 1 : 15)),
-
           new go.Binding('stroke', 'NodeType', v => {
             // 普通节点
             if (v === '0') {
@@ -221,10 +221,10 @@ const FlowChart = props => {
         new go.Binding('margin', 'NodeType', v => (v === '0' ? 5 : 17)),
       ),
       // 我们的小命名端口，每侧一个：
-      makePort('T', go.Spot.Top, true, true),
-      makePort('L', go.Spot.Left, true, true),
-      makePort('R', go.Spot.Right, true, true),
-      makePort('B', go.Spot.Bottom, true, true),
+      makePort('T', go.Spot.Top),
+      makePort('L', go.Spot.Left),
+      makePort('R', go.Spot.Right),
+      makePort('B', go.Spot.Bottom),
       {
         // 处理鼠标进入/离开事件以显示/隐藏端口
         mouseEnter(e, node) {
@@ -277,9 +277,12 @@ const FlowChart = props => {
     });
   };
   // 创建节点端口
-  const makePort = (name, spot, output, input) =>
+  const makePort = (name, spot) =>
     // 端口基本上只是一个小的透明方块
-    objGo(go.Shape, 'Circle', {
+    objGo(
+      go.Shape,
+      'Circle',
+      {
         fill: null, // 默认情况下不可见； 由 showSmallPorts 设置为半透明灰色，定义如下
         stroke: null,
         desiredSize: new go.Size(8, 8),
@@ -288,10 +291,11 @@ const FlowChart = props => {
         portId: name, // 将此对象声明为“端口”
         fromSpot: spot,
         toSpot: spot, // 声明链接可以在此端口连接的位置
-      fromLinkable: output, // 是否允许用户绘制的链接到这里
-      toLinkable: input, // 声明用户是否可以从这里绘制链接
         cursor: 'pointer', // 显示不同的光标以指示潜在的链接点
-    });
+      },
+      new go.Binding('fromLinkable', 'NodeType', v => v !== '2'), // 是否允许用户绘制的链接到这里
+      new go.Binding('toLinkable', 'NodeType', v => v !== '1'), // 声明用户是否可以从这里绘制链接
+    );
   // 双击节点
   const handlerDC = (e, node) => {
     setNodeKey(node.part.data.key);
@@ -311,7 +315,7 @@ const FlowChart = props => {
     } else {
       newNum = 1;
     }
-
+    setNodeLength(list.length);
     console.log(newNum);
     setNewSerialNo(newNum);
     setModalType('add');
@@ -480,6 +484,7 @@ const FlowChart = props => {
         visible={visible}
         editMsg={editMsg}
         newSerialNo={newSerialNo}
+        nodeNum={nodeLength}
         modalType={modalType}
         handleCancel={() => setVisible(false)}
         onSubumit={obj => nodeCallBack(obj)}

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

@@ -19,7 +19,7 @@ import Undertaker from './nodeModalComponents/Undertaker';
 const { Option } = Select;
 
 const NodeModal = props => {
-  const { onSubumit, handleCancel, visible, modalType, editMsg, newSerialNo } = props;
+  const { onSubumit, handleCancel, visible, modalType, editMsg, newSerialNo, nodeNum } = props;
   const [form] = Form.useForm();
   const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
   const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
@@ -37,8 +37,15 @@ const NodeModal = props => {
       if (modalType === 'edit') {
         getFormData();
       } else {
-        setNodeMsg({ ...nodeMsg, newSerialNo, roleList: [] });
-        form.setFieldsValue({ SerialNo: newSerialNo });
+        console.log(nodeNum, 'nodeNum');
+        let type;
+        if (nodeNum > 0) {
+          type = '0';
+        } else {
+          type = '1';
+        }
+        setNodeMsg({ ...nodeMsg, newSerialNo, NodeType: type, roleList: [] });
+        form.setFieldsValue({ SerialNo: newSerialNo, NodeType: type });
       }
     }
   }, [visible]);
@@ -255,7 +262,7 @@ const NodeModal = props => {
           rowKey={record => record.roleId}
           bordered
           size="small"
-          scroll={{ y: 'calc(100vh - 480px)' }}
+          scroll={{ y: 'calc(100vh - 515px)' }}
           onRow={(record, index) => ({
             onDoubleClick: () => {
               toEdit(record, index);