fix: 工作流编辑器支持拖拽

src/components/RuleConfig/index.jsx

@@ -2,7 +2,7 @@
  * @Author: dengchao 754083046@qq.com
  * @Date: 2022-11-02 14:37:53
  * @LastEditors: dengchao 754083046@qq.com
- * @LastEditTime: 2022-11-07 17:32:35
+ * @LastEditTime: 2022-11-09 15:36:19
  * @FilePath: \maintenance\src\components\RuleConfig\index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -60,10 +60,10 @@ const RuleConfig = props => {
   return (
     <div>
       <Modal
-        title="节点流转规则配置"
+        title="规则配置"
         visible={visible}
         onOk={onSave}
-        width="860px"
+        width="740px"
         onCancel={handleCancel}
         maskClosable={false}
         destroyOnClose
@@ -95,7 +95,7 @@ const RuleConfig = props => {
               <li>
                 <p>请从左侧面板选择字段或选项</p>
                 <p>
-                  {'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）及函数'}
+                  {'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）'}
                 </p>
               </li>
 
@@ -103,8 +103,10 @@ const RuleConfig = props => {
                 <>
                   <li>
                     <p>参考场景：</p>
-                    <p>当报销金额大于10000时，才能进入所选节点，则可将流转条件设置为：</p>
-                    <p>{'报销金额>10000'}</p>
+                    <p>当报销金额大于1000时，才能进入所选节点，则可将流转条件设置为：</p>
+                    <p>
+                      <em>{'报销金额 > 1000'}</em>
+                    </p>
                   </li>
                 </>
               ) : (

src/components/RuleConfig/index.less

 .configContent {
-  height: 600px;
+  height: 500px;
   display: flex;
 
   .leftTree {
-    width: 250px;
+    width: 180px;
     height: 100%;
     margin-right: 10px;
     overflow-y: scroll;
@@ -12,28 +12,40 @@
   .rightContent {
     .title {
       width: 100%;
-      background-color: #80C3FF;
-      font-size: 18px;
-      font-weight: 700;
+      background-color: #E6F3FF;
+      color: #1890FF;
+      font-size: 14px;
       padding: 5px 10px;
+      border: 1px solid #EEF6FE;
     }
 
     .textAreaBox {
       // height: 400px;
       // overflow-y: scroll;
 
-      .textArea {
-        min-height: 400px;
-        border: 1px solid #ccc;
+      textArea {
+        // min-height: 200px;
+        max-height: 360px !important;
+        min-height: 360px !important;
+        border: 1px solid transparent;
+        background-color: #F0F2F6;
       }
     }
 
     .tipBox {
+      padding-top: 12px;
+      padding-left: 25px;
+
       li {
         list-style: disc;
         color: #AEAEAE;
       }
 
+      em {
+        font-style: normal;
+        color: #1890FF;
+      }
+
       i {
         font-style: normal;
         color: red;

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

@@ -41,7 +41,6 @@ const NodeModal = props => {
     modalType,
     editMsg,
     newSerialNo,
-    nodeNum,
     flowID,
   } = props;
   const [form] = Form.useForm();
@@ -434,7 +433,11 @@ const NodeModal = props => {
               />
             </Tooltip>
             <Tooltip title="删除角色或机构">
-              <Popconfirm
+              <DeleteOutlined
+                onClick={() => delUser(record, index)}
+                style={{ fontSize: '16px', color: '#e86060' }}
+              />
+              {/* <Popconfirm
                 title="是否删除该角色或机构?"
                 onConfirm={() => delUser(record, index)}
                 onCancel={() => message.error('取消删除')}
@@ -442,7 +445,7 @@ const NodeModal = props => {
                 cancelText="否"
               >
                 <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
-              </Popconfirm>
+              </Popconfirm> */}
             </Tooltip>
           </Space>
         </>
@@ -676,7 +679,7 @@ const NodeModal = props => {
                   </div>
                 </div>
                 <div className={styles.formBox}>
-                  <div className={styles.label}>设置规则条件，需要流转到节点：</div>
+                  <div className={styles.label}>设置规则条件，可以流转到节点：</div>
                   <div className={styles.item}>
                     <Select
                       style={{ width: '100%' }}

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

@@ -103,30 +103,55 @@
     background-color: #fff;
 
     .chartBox {
+      position: relative;
       height: calc(100% - 62px);
+
+      .myOverviewDiv {
+        position: absolute;
+        height: 150px;
+        width: 300px;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        z-index: 9;
+
+      }
     }
 
     .control {
       display: flex;
       justify-content: space-between;
+      height: 60px;
       align-items: center;
       padding: 0 10px;
 
       .nodeList {
         display: flex;
+        align-items: center;
+
+        .myPaletteDiv {
+          margin-right: 20px;
+          height: 60px;
+          width: 380px;
+
+          canvas {
+            height: 100%;
+            width: 1000px;
+          }
+        }
 
         .lineBox {
-          height: 40px;
+          height: 50px;
           width: 1px;
           background-color: #ccc;
-          margin-right: 10px;
+          // margin-right: 10px;
         }
 
         .nodeBox {
           display: flex;
           align-items: center;
           justify-content: center;
-          height: 40px;
+          height: 60px;
 
           padding: 0 10px;
           border-radius: 10px;