feat: 工作流新增任务详情抽屉

.env

@@ -4,6 +4,8 @@ VITE_APP_DESC=A flexible, reliable, and fast platform for distributed task retry
 
 VITE_APP_VERSION=1.0.0-beta2
 
+VITE_APP_DEFAULT_TOKEN=SJ_Wyz3dmsdbDOkDujOTSSoBjGQP1BMsVnj
+
 # the prefix of the icon name
 VITE_ICON_PREFIX=icon
 
@@ -46,3 +48,5 @@ VITE_SOURCE_MAP=N
 
 # Used to differentiate storage across different domains
 VITE_STORAGE_PREFIX=
+
+

.env.test

@@ -1,7 +1,7 @@
 VITE_BASE_URL=/
 
 # backend service base url, test environment
-VITE_SERVICE_BASE_URL=http://localhost:8080/snail-job
+VITE_SERVICE_BASE_URL=http://preview.easyretry.com/snail-job
 
 # other backend service base url, test environment
 VITE_OTHER_SERVICE_BASE_URL= `{

packages/work-flow/src/api/index.ts

@@ -53,3 +53,10 @@ export function fetchWorkflowInfo(id: string) {
     method: 'get'
   });
 }
+
+export function fetchWorkflowBatchInfo(id: string) {
+  return request<Flow.NodeDataType>({
+    url: `/workflow/batch/${id}`,
+    method: 'get'
+  });
+}

packages/work-flow/src/components/start-node.vue

@@ -76,8 +76,8 @@ const show = () => {
 <template>
   <div class="node-wrap">
     <div
-      :class="disabled ? 'start-node-disabled' : 'node-wrap-box-hover'"
+      :class="`${disabled ? 'start-node-disabled' : 'node-wrap-box-hover'} ${store.type === 2 ? 'node-error-success' : ''}`"
-      class="node-wrap-box node-error-success start-node"
+      class="node-wrap-box start-node"
       @click="show"
     >
       <div class="title">
@@ -102,15 +102,13 @@ const show = () => {
       <div v-else class="content min-h-85px">
         <span class="placeholder">{{ $t('snail.form.workflowTip') }}</span>
       </div>
-      <NTooltip v-if="store.type === 2" trigger="hover">
+      <NTooltip v-if="store.type === 2">
-        <template #trigger>{{ taskBatchStatusEnum[3].title }}</template>
+        <template #trigger>
-        <SvgIcon
+          <div class="error-tip text-24px" :style="{ color: taskBatchStatusEnum[3].color }">
-          class="error-tip"
+            <SvgIcon :icon="taskBatchStatusEnum[3].icon" />
-          :color="taskBatchStatusEnum[3].color"
+          </div>
-          size="24px"
+        </template>
-          :icon="taskBatchStatusEnum[3].icon"
+        {{ taskBatchStatusEnum[3].title }}
-          @click.stop="() => {}"
-        />
       </NTooltip>
     </div>
     <AddNode v-model="nodeData.nodeConfig!" :disabled="disabled"></AddNode>

packages/work-flow/src/components/task-node.vue

@@ -6,6 +6,7 @@ import { useFlowStore } from '../stores';
 import { $t } from '../locales';
 import { failStrategyRecord, taskBatchStatusEnum } from '../constants/business';
 import TaskDrawer from '../drawer/task-drawer.vue';
+import TaskDetail from '../detail/task-detail.vue';
 import AddNode from './add-node.vue';
 
 defineOptions({
@@ -31,7 +32,6 @@ const emit = defineEmits<Emits>();
 const store = useFlowStore();
 const message = useMessage();
 const nodeConfig = ref<Flow.NodeModelType>({});
-const popoverVisible = ref<Record<number, boolean>>({});
 
 watch(
   () => props.modelValue,
@@ -186,15 +186,13 @@ const isStop = (taskBatchStatus: number) => {
       <div v-for="(item, i) in nodeConfig.conditionNodes" :key="i" class="col-box">
         <div class="condition-node">
           <div class="condition-node-box">
-            <NPopover
+            <NPopover :disabled="store.type !== 2">
-              :show="popoverVisible[i] && store.type === 2"
-              @update:show="(visible: boolean) => (popoverVisible[i] = visible)"
-            >
               <div class="popover">
-                <NDivider v-if="isRetry(item.taskBatchStatus!)" vertical />
+                <NButton v-if="isRetry(item.taskBatchStatus!)" text @click="retry(item!)">
-                <NButton v-if="isRetry(item.taskBatchStatus!)" text class="popover-item" @click="retry(item!)">
+                  <span class="popover-item">
-                  <icon-ant-design:redo-outlined />
+                    <icon-ant-design:redo-outlined class="mb-3px text-24px font-bold" />
-                  <span>{{ $t('snail.retry') }}</span>
+                    {{ $t('snail.retry') }}
+                  </span>
                 </NButton>
                 <NDivider v-if="isStop(item.taskBatchStatus!)" vertical />
                 <NButton v-if="isStop(item.taskBatchStatus!)" text class="popover-item" @click="stop(item!)">
@@ -238,19 +236,20 @@ const isStop = (taskBatchStatus: number) => {
                   >
                     <icon-ant-design:right-outlined />
                   </div>
-                  <NTooltip v-if="store.type === 2 && item.taskBatchStatus" trigger="hover">
-                    <template #trigger>{{ taskBatchStatusEnum[item.taskBatchStatus].title }}</template>
-                    <SvgIcon
-                      class="error-tip"
-                      :color="taskBatchStatusEnum[item.taskBatchStatus].color"
-                      size="24px"
-                      :icon="taskBatchStatusEnum[item.taskBatchStatus].icon"
-                      @click.stop="() => {}"
-                    />
-                  </NTooltip>
                 </div>
               </template>
             </NPopover>
+            <NTooltip v-if="store.type === 2 && item.taskBatchStatus">
+              <template #trigger>
+                <div
+                  class="task-error-tip text-24px"
+                  :style="{ color: taskBatchStatusEnum[item.taskBatchStatus!].color }"
+                >
+                  <SvgIcon :icon="taskBatchStatusEnum[item.taskBatchStatus!].icon" />
+                </div>
+              </template>
+              {{ taskBatchStatusEnum[item.taskBatchStatus!].title }}
+            </NTooltip>
             <AddNode v-model="item.childNode!" :disabled="disabled"></AddNode>
           </div>
         </div>
@@ -259,13 +258,8 @@ const isStop = (taskBatchStatus: number) => {
         <div v-if="i == 0" class="bottom-left-cover-line"></div>
         <div v-if="i == nodeConfig.conditionNodes!.length - 1" class="top-right-cover-line"></div>
         <div v-if="i == nodeConfig.conditionNodes!.length - 1" class="bottom-right-cover-line"></div>
-        <!--
+
- <TaskDetail
+        <TaskDetail v-if="store.type !== 0" v-model:open="detailDrawer[i]" v-model="nodeConfig.conditionNodes![i]" />
-          v-if="store.type !== 0 && detailDrawer[i]"
-          v-model:open="detailDrawer[i]"
-          v-model="nodeConfig.conditionNodes![i]"
-        />
--->
       </div>
     </div>
     <AddNode v-if="nodeConfig.conditionNodes!.length > 1" v-model="nodeConfig.childNode!" :disabled="disabled" />
@@ -282,6 +276,14 @@ const isStop = (taskBatchStatus: number) => {
 </template>
 
 <style scoped lang="scss">
+.task-error-tip {
+  cursor: default;
+  position: absolute;
+  top: 63px;
+  left: 291px;
+  font-size: 24px;
+}
+
 .popover {
   display: flex;
   align-items: center;

packages/work-flow/src/constants/business.ts

@@ -36,14 +36,14 @@ export const contentTypeRecord: Record<Flow.ContentType, string> = {
   2: 'application/x-www-form-urlencoded'
 };
 
-export const triggerTypeRecord: Record<Flow.TriggerType, string> = {
+export const triggerTypeRecord: Record<Flow.TriggerType, FlowI18n.I18nKey> = {
-  2: '固定时间',
+  2: 'snail.enum.triggerType.time',
-  3: 'CRON表达式'
+  3: 'snail.enum.triggerType.cron'
 };
 
 export const triggerTypeOptions = transformRecordToOption(triggerTypeRecord);
 
-export const workFlowNodeStatusRecord: Record<Flow.WorkFlowNodeStatus, string> = {
+export const workFlowNodeStatusRecord: Record<Flow.WorkFlowNodeStatus, FlowI18n.I18nKey> = {
   0: 'snail.enum.workFlowNodeStatus.close',
   1: 'snail.enum.workFlowNodeStatus.open'
 };

packages/work-flow/src/detail/start-detail.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
+import { $t } from '../locales';
 import { blockStrategyRecord, triggerTypeRecord, workFlowNodeStatusRecord } from '../constants/business';
 
 defineOptions({
@@ -38,19 +39,19 @@ const onClose = () => {
 </script>
 
 <template>
-  <NDrawer v-model:open="visible" placement="right" :width="500" display-directive="if" @close="onClose">
+  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
     <NDrawerContent title="工作流详情">
       <NDescriptions :column="1" bordered :label-style="{ width: '120px' }">
         <NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem>
         <NDescriptionsItem label="组名称">{{ modelValue.groupName }}</NDescriptionsItem>
-        <NDescriptionsItem label="触发类型">{{ triggerTypeRecord[modelValue.triggerType!] }}</NDescriptionsItem>
+        <NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
         <NDescriptionsItem label="触发间隔">
           {{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }}
         </NDescriptionsItem>
         <NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
         <NDescriptionsItem label="阻塞策略">{{ blockStrategyRecord[modelValue.blockStrategy!] }}</NDescriptionsItem>
         <NDescriptionsItem label="工作流状态">
-          {{ workFlowNodeStatusRecord[modelValue.workflowStatus!] }}
+          {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
         </NDescriptionsItem>
       </NDescriptions>
     </NDrawerContent>

packages/work-flow/src/detail/task-detail.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { $t } from '../locales';
+import { useFlowStore } from '../stores';
+import { failStrategyRecord, workFlowNodeStatusRecord } from '../constants/business';
+
+defineOptions({
+  name: 'TaskDetail'
+});
+
+interface Props {
+  modelValue?: Flow.ConditionNodeType;
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  modelValue: () => ({})
+});
+
+interface Emits {
+  (e: 'update:open', open: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const store = useFlowStore();
+const visible = ref(false);
+
+watch(
+  () => props.open,
+  val => {
+    visible.value = val;
+  },
+  { immediate: true }
+);
+
+const onClose = () => {
+  emit('update:open', false);
+};
+
+const getTaskName = (id: string) => {
+  const jobList: { id?: string; jobName?: string }[] = store.jobList;
+  return jobList.find(item => item.id === id)?.jobName;
+};
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
+    <NDrawerContent title="工作流详情">
+      <NDescriptions :column="1" bordered :label-style="{ width: '120px' }">
+        <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
+        <NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem>
+        <NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem>
+        <NDescriptionsItem label="失败策略">
+          {{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="工作流状态">
+          {{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }} 秒
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped lang="scss"></style>

packages/work-flow/src/stores/index.ts

@@ -34,7 +34,9 @@ export const useFlowStore = defineStore('workflow', () => {
     if (!error) {
       jobList.value = data;
     }
+    const workflow = localStg.get('workflow');
     localStg.set('workflow', {
+      ...workflow,
       groupName: value,
       jobList: data!
     });

packages/work-flow/src/styles/index.scss

@@ -53,10 +53,11 @@
     border-color: rgb(202, 202, 202) transparent transparent;
   }
 
+  .node-error,
   .start-node-disabled {
     // cursor: default;
-    border: 1px solid #00000036;
+    border: 1px solid #00000036 !important;
-    box-shadow: 0 2px 5px #00000036;
+    box-shadow: 0 2px 5px #00000036 !important;
   }
 
   .node-wrap-box.start-node:before {
@@ -521,8 +522,8 @@
     cursor: default;
     position: absolute;
     top: 0;
-    right: 0;
+    left: 0;
-    transform: translate(150%);
+    transform: translate(960%);
     font-size: 24px;
   }
 }

pnpm-lock.yaml

@@ -41,9 +41,6 @@ importers:
       '@sa/utils':
         specifier: workspace:*
         version: link:packages/utils
-      '@sa/workflow':
-        specifier: workspace:*
-        version: link:packages/work-flow
       '@vueuse/core':
         specifier: 10.9.0
         version: 10.9.0(vue@3.4.26(typescript@5.4.5))
@@ -158,7 +155,7 @@ importers:
         version: 5.4.5
       unplugin-icons:
         specifier: 0.19.0
-        version: 0.19.0(@vue/compiler-sfc@3.4.26)(vue-template-compiler@2.7.16)
+        version: 0.19.0(@vue/compiler-sfc@3.4.25)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.27.0
         version: 0.27.0(@babel/parser@7.24.4)(rollup@4.17.0)(vue@3.4.26(typescript@5.4.5))
@@ -294,8 +291,6 @@ importers:
         specifier: 4.2.2
         version: 4.2.2
 
-  packages/work-flow: {}
-
 packages:
 
   '@ampproject/remapping@2.3.0':
@@ -9770,7 +9765,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-icons@0.19.0(@vue/compiler-sfc@3.4.26)(vue-template-compiler@2.7.16):
+  unplugin-icons@0.19.0(@vue/compiler-sfc@3.4.25)(vue-template-compiler@2.7.16):
     dependencies:
       '@antfu/install-pkg': 0.3.3
       '@antfu/utils': 0.7.7
@@ -9780,7 +9775,7 @@ snapshots:
       local-pkg: 0.5.0
       unplugin: 1.10.1
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.26
+      '@vue/compiler-sfc': 3.4.25
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
       - supports-color

src/views/workflow/form/add/index.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import Workflow, { flowFetch, flowStores } from '@sa/workflow';
 import { useRouter } from 'vue-router';
+import Workflow, { flowFetch, flowStores } from '@sa/workflow';
 import { $t } from '@/locales';
 
 const store = flowStores.useFlowStore();
 const router = useRouter();
 
-const spinning = ref(false);
-const disabled = ref(false);
-
 onMounted(() => {
   store.clear();
   store.setType(0);
-  disabled.value = false;
 });
 
 const node = ref<Flow.NodeDataType>({
@@ -38,7 +34,7 @@ const cancel = () => {
 </script>
 
 <template>
-  <Workflow v-model="node" :spinning="spinning" :disabled="disabled" @save="save" @cancel="cancel" />
+  <Workflow v-model="node" @save="save" @cancel="cancel" />
 </template>
 
 <style scoped></style>

src/views/workflow/form/batch/index.vue

@@ -1,17 +1,35 @@
 <script setup lang="ts">
-import WorkFlowIframe from '../modules/workflow-iframe.vue';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import Workflow, { flowFetch, flowStores } from '@sa/workflow';
+const store = flowStores.useFlowStore();
+const route = useRoute();
 
-defineOptions({
+const spinning = ref(false);
-  name: 'WorkFlowDetail'
+
+const id: string = String(route.query.id);
+
+const node = ref<Flow.NodeDataType>({});
+
+const getBatchDetail = async () => {
+  spinning.value = true;
+  const { data, error } = await flowFetch.fetchWorkflowBatchInfo(id);
+  if (!error) {
+    node.value = data;
+  }
+  spinning.value = false;
+};
+
+onMounted(() => {
+  store.clear();
+  store.setType(2);
+  store.setId(id);
+  getBatchDetail();
 });
 </script>
 
 <template>
-  <div class="iframe"><WorkFlowIframe value="xkjIc2ZHZ0" /></div>
+  <Workflow v-model="node" :spinning="spinning" disabled />
 </template>
 
-<style scoped>
+<style scoped></style>
-.iframe {
-  padding: 0 !important;
-}
-</style>

src/views/workflow/form/copy/index.vue

@@ -1,17 +1,55 @@
 <script setup lang="ts">
-import WorkFlowIframe from '../modules/workflow-iframe.vue';
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Workflow, { flowFetch, flowStores } from '@sa/workflow';
+import { $t } from '@/locales';
 
-defineOptions({
+const store = flowStores.useFlowStore();
-  name: 'WorkFlowCopy'
+const route = useRoute();
+const router = useRouter();
+
+const spinning = ref(false);
+
+const id: string = String(route.query.id);
+
+const node = ref<Flow.NodeDataType>({
+  workflowName: `Workflow ${new Date().getTime()}`,
+  workflowStatus: 1,
+  blockStrategy: 1,
+  description: undefined,
+  executorTimeout: 60
 });
+
+const getDetail = async () => {
+  spinning.value = true;
+  const { data, error } = await flowFetch.fetchWorkflowInfo(id);
+  if (!error) {
+    node.value = data;
+  }
+  spinning.value = false;
+};
+
+onMounted(() => {
+  store.clear();
+  store.setType(0);
+  getDetail();
+});
+
+const save = async () => {
+  const { error } = await flowFetch.fetchAddWorkflow(node.value);
+  if (!error) {
+    window.$message?.info($t('common.addSuccess'));
+    router.push('/workflow/task');
+  }
+};
+
+const cancel = () => {
+  router.push('/workflow/task');
+};
 </script>
 
 <template>
-  <div class="iframe"><WorkFlowIframe value="wA4wN1nZ" /></div>
+  <Workflow v-model="node" :spinning="spinning" @save="save" @cancel="cancel" />
 </template>
 
-<style scoped>
+<style scoped></style>
-.iframe {
-  padding: 0 !important;
-}
-</style>

src/views/workflow/form/detail/index.vue

@@ -1,17 +1,36 @@
 <script setup lang="ts">
-import WorkFlowIframe from '../modules/workflow-iframe.vue';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import Workflow, { flowFetch, flowStores } from '@sa/workflow';
 
-defineOptions({
+const store = flowStores.useFlowStore();
-  name: 'WorkFlowDetail'
+const route = useRoute();
+
+const spinning = ref(false);
+
+const id: string = String(route.query.id);
+
+const node = ref<Flow.NodeDataType>({});
+
+const getDetail = async () => {
+  spinning.value = true;
+  const { data, error } = await flowFetch.fetchWorkflowInfo(id);
+  if (!error) {
+    node.value = data;
+  }
+  spinning.value = false;
+};
+
+onMounted(() => {
+  store.clear();
+  store.setType(1);
+  store.setId(id);
+  getDetail();
 });
 </script>
 
 <template>
-  <div class="iframe"><WorkFlowIframe value="kaxC8Iml" /></div>
+  <Workflow v-model="node" :spinning="spinning" disabled />
 </template>
 
-<style scoped>
+<style scoped></style>
-.iframe {
-  padding: 0 !important;
-}
-</style>

src/views/workflow/form/edit/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import Workflow, { flowFetch, flowStores } from '@sa/workflow';
 import { useRoute, useRouter } from 'vue-router';
+import Workflow, { flowFetch, flowStores } from '@sa/workflow';
 import { $t } from '@/locales';
 
 const store = flowStores.useFlowStore();
@@ -9,7 +9,6 @@ const route = useRoute();
 const router = useRouter();
 
 const spinning = ref(false);
-const disabled = ref(false);
 
 const id: string = String(route.query.id);
 
@@ -29,7 +28,6 @@ onMounted(() => {
   store.setType(0);
   store.setId(id);
   getDetail();
-  disabled.value = false;
 });
 
 const update = async () => {
@@ -46,7 +44,7 @@ const cancel = () => {
 </script>
 
 <template>
-  <Workflow v-model="node" :spinning="spinning" :disabled="disabled" @save="update" @cancel="cancel" />
+  <Workflow v-model="node" :spinning="spinning" @save="update" @cancel="cancel" />
 </template>
 
 <style scoped></style>