工作流节点

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { $t } from '@/locales';
+import { useWorkflowStore } from '@/store/modules/workflow';
+import { failStrategyRecord, workFlowNodeStatusRecord } from '@/constants/business';
+
+defineOptions({
+  name: 'WorkflowDetail'
+});
+
+interface Props {
+  modelValue?: Workflow.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 = useWorkflowStore();
+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>
+  <DetailDrawer v-model="visible" title="工作流详情" :width="['500px', '90%']" @after-leave="onClose">
+    <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
+      <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
+      <NDescriptionsItem label="工作流 ID">{{ modelValue.subWorkflow?.id }}</NDescriptionsItem>
+      <NDescriptionsItem label="工作流名称">{{ modelValue.subWorkflow?.name }}</NDescriptionsItem>
+      <NDescriptionsItem label="失败策略">
+        {{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="任务状态">
+        {{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </DetailDrawer>
+</template>
+
+<style scoped lang="scss"></style>

src/components/workflow/modules/nodes/workflow-node.vue

@@ -267,7 +267,7 @@ const isShow = (taskBatchStatus: number) => {
         <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
+        <WorkflowDetail
           v-if="store.type !== 0"
           v-model:open="detailDrawer[i]"
           :model-value="nodeConfig.conditionNodes![i]"

src/components/workflow/workflow.vue

@@ -271,7 +271,7 @@ const onDragstop = () => {
 </template>
 
 <style lang="scss">
-@import './styles/index';
+@use './styles/index';
 
 .workflow {
   padding: 0 !important;