feat: 重构工作流对话框，合并添加和编辑功能，新增流程操作对话框

src/components/cards/WorkflowTaskCard.vue

@@ -2,7 +2,8 @@
 import { Workflow } from '@/api/types'
 import { useToast } from 'vue-toast-notification'
 import { useConfirm } from 'vuetify-use-dialog'
-import WorkflowEditDialog from '@/components/dialog/WorkflowEditDialog.vue'
+import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
+import WorkflowActionsDialog from '@/components/dialog/WorkflowActionsDialog.vue'
 import api from '@/api'
 
 // 定义输入参数
@@ -22,9 +23,12 @@ const $toast = useToast()
 // 确认框
 const createConfirm = useConfirm()
 
-// 流程编辑对话框
+// 编辑对话框
 const editDialog = ref(false)
 
+// 流程对话框
+const flowDialog = ref(false)
+
 // 加载中
 const loading = ref(false)
 
@@ -33,6 +37,11 @@ function handleEdit(item: Workflow) {
   editDialog.value = true
 }
 
+// 编辑流程
+function handleFlow(item: Workflow) {
+  flowDialog.value = true
+}
+
 // 计算已完成的动作数
 function resolveDoneActions(item: Workflow) {
   return item.current_action?.split(',').length || 0
@@ -41,6 +50,7 @@ function resolveDoneActions(item: Workflow) {
 // 编辑完成
 function editDone() {
   editDialog.value = false
+  flowDialog.value = false
   emit('refresh')
 }
 
@@ -134,7 +144,7 @@ const resolveProgress = (item: Workflow) => {
 </script>
 <template>
   <div>
-    <VCard class="mx-auto" @click="handleEdit(workflow)">
+    <VCard class="mx-auto" @click="handleFlow(workflow)">
       <VCardItem class="py-3" :class="`bg-${resolveStatusVariant(workflow?.state).color}`">
         <template #prepend>
           <IconBtn v-if="workflow?.state === 'P'">
@@ -150,13 +160,19 @@ const resolveProgress = (item: Workflow) => {
         <VCardSubtitle>{{ workflow?.description }}</VCardSubtitle>
         <template #append>
           <IconBtn>
-            <VIcon icon="mdi-edit" @click.stop="handleEdit(workflow)" />
+            <VIcon icon="mdi-vector-polyline-edit" @click.stop="handleFlow(workflow)" />
           </IconBtn>
           <IconBtn>
             <VIcon icon="mdi-dots-vertical" />
             <VMenu activator="parent" close-on-content-click>
               <VList>
-                <VListItem variant="plain" base-color="primary" @click="handleRun(workflow)">
+                <VListItem variant="plain" base-color="primary" @click="handleEdit(workflow)">
+                  <template #prepend>
+                    <VIcon icon="mdi-note-edit" />
+                  </template>
+                  <VListItemTitle>编辑任务</VListItemTitle>
+                </VListItem>
+                <VListItem variant="plain" base-color="info" @click="handleRun(workflow)">
                   <template #prepend>
                     <VIcon icon="mdi-run" />
                   </template>
@@ -222,8 +238,16 @@ const resolveProgress = (item: Workflow) => {
         </div>
       </VCardText>
     </VCard>
+    <!-- 流程对话框 -->
+    <WorkflowActionsDialog
+      v-if="flowDialog"
+      v-model="flowDialog"
+      @close="flowDialog = false"
+      @save="editDone"
+      :workflow="workflow"
+    />
     <!-- 编辑对话框 -->
-    <WorkflowEditDialog
+    <WorkflowAddEditDialog
       v-if="editDialog"
       v-model="editDialog"
       @close="editDialog = false"

src/components/dialog/WorkflowAddEditDialog.vue

@@ -6,6 +6,15 @@ import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import { useDisplay } from 'vuetify'
 
+// 输入参数
+const props = defineProps({
+  // 任务信息
+  workflow: Object as PropType<Workflow>,
+})
+
+// 新增或修改字样
+const title = computed(() => (props.workflow ? '编辑' : '创建'))
+
 // 显示器宽度
 const display = useDisplay()
 
@@ -13,13 +22,15 @@ const display = useDisplay()
 const emit = defineEmits(['save', 'remove', 'close'])
 
 // 站点编辑表单数据
-const workflowForm = ref<Workflow>({
+const workflowForm = ref<Workflow>(
-  name: undefined,
+  props.workflow || {
-  timer: undefined,
+    name: undefined,
-  description: undefined,
+    timer: undefined,
-  state: 'P',
+    description: undefined,
-  run_count: 0,
+    state: 'P',
-})
+    run_count: 0,
+  },
+)
 
 // 提示框
 const $toast = useToast()
@@ -34,10 +45,31 @@ async function addWorkflow() {
   try {
     const result: { [key: string]: string } = await api.post('workflow/', workflowForm.value)
     if (result.success) {
-      $toast.success('新增任务成功，请编辑流程！')
+      $toast.success(`创建任务成功，请编辑流程！`)
       emit('save')
     } else {
-      $toast.error(`新增任务失败：${result.message}`)
+      $toast.error(`创建任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  doneNProgress()
+}
+
+// 调用API 编辑任务
+async function editWorkflow() {
+  if (!workflowForm.value.name || !workflowForm.value.timer) {
+    $toast.error('请填写完整信息！')
+    return
+  }
+  startNProgress()
+  try {
+    const result: { [key: string]: string } = await api.put(`workflow/${workflowForm.value.id}`, workflowForm.value)
+    if (result.success) {
+      $toast.success(`修改任务成功！`)
+      emit('save')
+    } else {
+      $toast.error(`修改任务失败：${result.message}`)
     }
   } catch (error) {
     console.error(error)
@@ -48,7 +80,7 @@ async function addWorkflow() {
 
 <template>
   <VDialog scrollable :close-on-back="false" persistent eager max-width="30rem" :fullscreen="!display.mdAndUp.value">
-    <VCard title="新建任务" class="rounded-t">
+    <VCard :title="`${title}任务`" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
       <VDivider />
       <VCardText>
@@ -81,8 +113,19 @@ async function addWorkflow() {
       </VCardText>
       <VCardActions class="pt-3">
         <VSpacer />
-        <VBtn block color="primary" variant="elevated" @click="addWorkflow" prepend-icon="mdi-plus" class="px-5">
+        <VBtn
-          新增
+          v-if="workflow"
+          block
+          color="primary"
+          variant="elevated"
+          @click="editWorkflow"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
+          保存
+        </VBtn>
+        <VBtn v-else block color="primary" variant="elevated" @click="addWorkflow" prepend-icon="mdi-plus" class="px-5">
+          创建
         </VBtn>
       </VCardActions>
     </VCard>

src/views/workflow/WorkflowListView.vue

@@ -2,7 +2,7 @@
 import api from '@/api'
 import { Workflow } from '@/api/types'
 import { useDisplay } from 'vuetify'
-import WorkflowAddDialog from '@/components/dialog/WorkflowAddDialog.vue'
+import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
 import WorkflowTaskCard from '@/components/cards/WorkflowTaskCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 
@@ -83,5 +83,5 @@ onActivated(() => {
     @click="addDialog = true"
   />
   <!-- 新增对话框 -->
-  <WorkflowAddDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" />
+  <WorkflowAddEditDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" />
 </template>