feat(sj_map_reduce): 工作流新增拖拽功能

package.json

@@ -68,6 +68,7 @@
     "ts-md5": "1.3.1",
     "vue": "3.4.27",
     "vue-codemirror6": "^1.3.0",
+    "vue-drag-resize": "^1.5.4",
     "vue-draggable-plus": "0.5.0",
     "vue-i18n": "9.13.1",
     "vue-router": "4.3.2"

pnpm-lock.yaml

@@ -77,6 +77,9 @@ importers:
       vue-codemirror6:
         specifier: ^1.3.0
         version: 1.3.0(@lezer/common@1.2.1)(vue@3.4.27(typescript@5.4.5))
+      vue-drag-resize:
+        specifier: ^1.5.4
+        version: 1.5.4
       vue-draggable-plus:
         specifier: 0.5.0
         version: 0.5.0(@types/sortablejs@1.15.8)
@@ -4621,6 +4624,10 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-drag-resize@1.5.4:
+    resolution: {integrity: sha512-SR3U7n6TAZEBgP7zw7bR9mjtAlYBjqIoaWTDPz5HXN/nYhOxKSA31aD7p71fmq1jtyt9reAnCx62valNL9ZAcg==}
+    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
+
   vue-draggable-plus@0.5.0:
     resolution: {integrity: sha512-A5TT5+M5JceROSjPO9aDZTsrSN1TetEs419czPlboomarSiGIBIxTp2WD7XH53EHMrbO7Qo+leRiHWV/rMlyjA==}
     peerDependencies:
@@ -9704,6 +9711,8 @@ snapshots:
     dependencies:
       vue: 3.4.27(typescript@5.4.5)
 
+  vue-drag-resize@1.5.4: {}
+
   vue-draggable-plus@0.5.0(@types/sortablejs@1.15.8):
     dependencies:
       '@types/sortablejs': 1.15.8

src/components/workflow/modules/common/detail-card.vue

@@ -13,7 +13,6 @@ import { useWorkflowStore } from '@/store/modules/workflow';
 import { $t } from '@/locales';
 import { isNotNull } from '@/utils/common';
 import { fetchGetJobBatchDetail, fetchGetJobDetail, fetchGetJobTaskList, fetchWorkflowNodeRetry } from '@/service/api';
-import LogDrawer from '../common/log-drawer.vue';
 
 defineOptions({
   name: 'DetailCard'
@@ -362,7 +361,7 @@ const onUpdatePage = (page: number) => {
       </template>
     </NDrawerContent>
   </NDrawer>
-  <LogDrawer v-model:show="logOpen" title="日志详情" :task-data="record" />
+  <FlowLogDrawer v-model:show="logOpen" title="日志详情" :task-data="record" />
 </template>
 
 <style scoped lang="scss">

src/components/workflow/modules/common/flow-log-drawer.vue

@@ -5,7 +5,7 @@ import { $t } from '@/locales';
 import { fetchJobLogList } from '@/service/api/log';
 
 defineOptions({
-  name: 'WorkflowLogDrawer'
+  name: 'FlowLogDrawer'
 });
 
 interface Props {

src/components/workflow/modules/drawer/branch-drawer.vue

@@ -6,7 +6,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { javascript } from '@codemirror/lang-javascript';
 import EditableInput from '@/components/common/editable-input.vue';
 import { fetchCheckNodeExpression } from '@/service/api';
-import { expressionOptions, logicalConditionOptions } from '@/constants/business';
+import { expressionOptions } from '@/constants/business';
 
 defineOptions({
   name: 'BranchDrawer'
@@ -131,18 +131,6 @@ const rules: FormRules = {
       </template>
 
       <NForm ref="formRef" :rules="rules" :model="form" label-align="left" label-width="100px">
-        <NFormItem path="decision.logicalCondition" label="判定逻辑">
-          <NRadioGroup v-model:value="form.decision!.logicalCondition">
-            <NSpace>
-              <NRadio
-                v-for="logical in logicalConditionOptions"
-                :key="logical.value"
-                :label="logical.label"
-                :value="logical.value"
-              />
-            </NSpace>
-          </NRadioGroup>
-        </NFormItem>
         <NFormItem path="decision.expressionType" label="表达式类型">
           <NRadioGroup v-model:value="form.decision!.expressionType">
             <NSpace>

src/components/workflow/workflow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
+import VueDragResize from 'vue-drag-resize/src';
 import { $t } from '@/locales';
 import NodeWrap from './modules/nodes/node-wrap.vue';
 import StartNode from './modules/nodes/start-node.vue';
@@ -99,6 +100,20 @@ onMounted(() => {
     workflowDom.onwheel = (ev: WheelEvent) => handleWeel(ev);
   }
 });
+
+const onDragging = () => {
+  const workflowBodyDom: HTMLDivElement | null = document.querySelector('.workflow-design');
+  if (workflowBodyDom) {
+    workflowBodyDom.setAttribute('style', `cursor: grabbing; transform: scale(${zoom.value / 100})`);
+  }
+};
+
+const onDragstop = () => {
+  const workflowBodyDom: HTMLDivElement | null = document.querySelector('.workflow-design');
+  if (workflowBodyDom) {
+    workflowBodyDom.setAttribute('style', `cursor: grab; transform: scale(${zoom.value / 100})`);
+  }
+};
 </script>
 
 <template>
@@ -133,16 +148,24 @@ onMounted(() => {
       </NAffix>
       <div class="workflow-body">
         <NSpin :show="spinning">
-          <div class="workflow-design" :style="`transform: scale(${zoom / 100})`">
+          <VueDragResize
-            <div class="box-scale">
+            class="vue-drag"
-              <StartNode v-model="nodeData" :disabled="disabled" />
+            :is-draggable="true"
-              <NodeWrap v-if="nodeData.nodeConfig" v-model="nodeData.nodeConfig" :disabled="disabled" />
+            :is-resizable="false"
-              <div class="end-node">
+            @dragging="onDragging"
-                <div class="end-node-circle"></div>
+            @dragstop="onDragstop"
-                <div class="end-node-text">{{ $t('workflow.node.endNode') }}</div>
+          >
+            <div class="workflow-design" :style="`transform: scale(${zoom / 100})`">
+              <div class="box-scale">
+                <StartNode v-model="nodeData" :disabled="disabled" />
+                <NodeWrap v-if="nodeData.nodeConfig" v-model="nodeData.nodeConfig" :disabled="disabled" />
+                <div class="end-node">
+                  <div class="end-node-circle"></div>
+                  <div class="end-node-text">{{ $t('workflow.node.endNode') }}</div>
+                </div>
               </div>
             </div>
-          </div>
+          </VueDragResize>
         </NSpin>
       </div>
     </div>
@@ -168,13 +191,31 @@ onMounted(() => {
   }
 
   &-body {
-    overflow: auto;
+    overflow: hidden;
-    height: calc(100vh - 198px);
+    min-height: calc(100vh - 198px);
+
+    .active:before {
+      outline: none !important;
+    }
+
+    .vue-drag,
+    .content-container {
+      min-width: 100%;
+    }
+
+    .vue-drag .content-container {
+      width: unset !important;
+      height: unset !important;
+    }
   }
 
   &-design {
-    margin-top: 16px;
+    cursor: grab;
     transform-origin: 0 0 !important;
+    min-height: calc(100vh - 198px);
+    min-width: 100%;
+    padding: 16px;
+    outline: 1px dashed #d6d6d6;
   }
 }
 

src/typings/workflow.d.ts

@@ -189,3 +189,5 @@ declare namespace Workflow {
     };
   };
 }
+
+declare module 'vue-drag-resize/src';