From 7a9984f392a24575d58a11d0df3ffbae895b6aa7 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 26 Feb 2025 18:09:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B7=B2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=8A=A8=E4=BD=9C=E6=95=B0=E8=AE=A1=E7=AE=97=E5=92=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/WorkflowTaskCard.vue | 83 +++++++++++++----------
 src/views/workflow/WorkflowListView.vue   | 10 ++-
 2 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/src/components/cards/WorkflowTaskCard.vue b/src/components/cards/WorkflowTaskCard.vue
index 534208ef..876bf32d 100644
--- a/src/components/cards/WorkflowTaskCard.vue
+++ b/src/components/cards/WorkflowTaskCard.vue
@@ -33,6 +33,11 @@ function handleEdit(item: Workflow) {
   editDialog.value = true
 }
 
+// 计算已完成的动作数
+function resolveDoneActions(item: Workflow) {
+  return item.current_action?.split(',').length || 0
+}
+
 // 编辑完成
 function editDone() {
   editDialog.value = false
@@ -117,8 +122,8 @@ const resolveStatusVariant = (status: string | undefined) => {
   if (status === 'S') return { color: 'success', text: '成功' }
   else if (status === 'R') return { color: 'primary', text: '运行中' }
   else if (status === 'F') return { color: 'error', text: '失败' }
-  else if (status === 'P') return { color: 'warning', text: '暂停' }
-  else return { color: 'secondary', text: '等待' }
+  else if (status === 'P') return { color: 'secondary', text: '暂停' }
+  else return { color: 'info', text: '等待' }
 }
 
 // 计算当前动作占比
@@ -129,39 +134,35 @@ const resolveProgress = (item: Workflow) => {
 </script>
 <template>
   <div>
-    <VCard class="mx-auto" @click="handleEdit(props.workflow)">
-      <VCardItem class="py-3">
+    <VCard class="mx-auto" @click="handleEdit(workflow)">
+      <VCardItem class="py-3" :class="`bg-${resolveStatusVariant(workflow?.state).color}`">
         <template #prepend>
-          <VBadge v-if="props.workflow?.state" dot inline :color="resolveStatusVariant(props.workflow?.state).color" />
-        </template>
-        <VCardTitle>
-          {{ props.workflow?.name }}
-        </VCardTitle>
-        <VCardSubtitle>{{ props.workflow?.description }}</VCardSubtitle>
-        <template #append>
-          <IconBtn v-if="props.workflow?.state === 'P'">
-            <VIcon color="success" icon="mdi-play" @click.stop="handleEnable(props.workflow)" />
+          <IconBtn v-if="workflow?.state === 'P'">
+            <VIcon color="success" icon="mdi-play" @click.stop="handleEnable(workflow)" />
           </IconBtn>
           <IconBtn v-else>
-            <VIcon color="warning" icon="mdi-pause" @click.stop="handlePause(props.workflow)" />
+            <VIcon color="warning" icon="mdi-pause" @click.stop="handlePause(workflow)" />
+          </IconBtn>
+        </template>
+        <VCardTitle>
+          {{ workflow?.name }}
+        </VCardTitle>
+        <VCardSubtitle>{{ workflow?.description }}</VCardSubtitle>
+        <template #append>
+          <IconBtn>
+            <VIcon icon="mdi-edit" @click.stop="handleEdit(workflow)" />
           </IconBtn>
           <IconBtn>
             <VIcon icon="mdi-dots-vertical" />
             <VMenu activator="parent" close-on-content-click>
               <VList>
-                <VListItem variant="plain" base-color="primary" @click="handleEdit(props.workflow)">
-                  <template #prepend>
-                    <VIcon icon="mdi-pencil" />
-                  </template>
-                  <VListItemTitle>编辑流程</VListItemTitle>
-                </VListItem>
-                <VListItem variant="plain" base-color="info" @click="handleRun(props.workflow)">
+                <VListItem variant="plain" base-color="primary" @click="handleRun(workflow)">
                   <template #prepend>
                     <VIcon icon="mdi-run" />
                   </template>
                   <VListItemTitle>立即执行</VListItemTitle>
                 </VListItem>
-                <VListItem variant="plain" base-color="error" @click="handleDelete(props.workflow)">
+                <VListItem variant="plain" base-color="error" @click="handleDelete(workflow)">
                   <template #prepend>
                     <VIcon icon="mdi-delete" />
                   </template>
@@ -174,40 +175,50 @@ const resolveProgress = (item: Workflow) => {
       </VCardItem>
       <VDivider />
       <VCardText>
-        <div class="d-flex flex-column gap-y-6">
-          <div class="d-flex flex-wrap gap-y-4">
+        <div class="d-flex flex-column gap-y-4">
+          <div class="d-flex flex-wrap gap-x-6">
             <div class="flex-1">
               <div class="mb-1">定时</div>
-              <h5 class="text-h6">{{ props.workflow?.timer }}</h5>
+              <h5 class="text-h6">{{ workflow?.timer }}</h5>
             </div>
             <div class="flex-1">
               <div class="mb-1">状态</div>
-              <h5 class="text-h6" :class="`text-${resolveStatusVariant(props.workflow?.state).color}`">
-                {{ resolveStatusVariant(props.workflow?.state).text }}
+              <h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
+                {{ resolveStatusVariant(workflow?.state).text }}
               </h5>
             </div>
           </div>
-          <div class="d-flex flex-wrap gap-y-4">
+          <div class="d-flex flex-wrap gap-x-6">
             <div class="flex-1">
-              <div class="mb-1">执行结果</div>
-              <h5 class="text-h6">{{ props.workflow?.result || '无' }}</h5>
+              <div class="mb-1">动作数</div>
+              <div>
+                <VAvatar size="32" color="primary" variant="tonal">
+                  <span class="text-sm">{{ workflow?.actions?.length }}</span>
+                </VAvatar>
+              </div>
             </div>
             <div class="flex-1">
               <div class="mb-1">已执行次数</div>
-              <h5 class="text-h6">{{ props.workflow?.run_count }}</h5>
+              <h5 class="text-h6">{{ workflow?.run_count }}</h5>
             </div>
           </div>
-          <div class="d-flex flex-wrap gap-y-4">
-            <div class="w-full">
+          <div class="d-flex flex-wrap gap-x-6">
+            <div class="flex-1">
               <div class="mb-1">进度</div>
               <div class="d-flex align-center gap-5">
                 <div class="flex-grow-1">
-                  <VProgressLinear rounded :value="resolveProgress(props.workflow)" color="primary" height="10" />
+                  <VProgressLinear rounded :value="resolveProgress(workflow)" height="10" />
                 </div>
-                <span>75%</span>
+                <span> {{ (resolveDoneActions(workflow) * 100) / (workflow.actions?.length || 1) }}% </span>
               </div>
             </div>
           </div>
+          <div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
+            <div class="flex-1">
+              <div class="mb-1">错误信息</div>
+              <div class="text-error">{{ workflow?.result }}</div>
+            </div>
+          </div>
         </div>
       </VCardText>
     </VCard>
@@ -217,7 +228,7 @@ const resolveProgress = (item: Workflow) => {
       v-model="editDialog"
       @close="editDialog = false"
       @save="editDone"
-      :workflow="props.workflow"
+      :workflow="workflow"
     />
   </div>
 </template>
diff --git a/src/views/workflow/WorkflowListView.vue b/src/views/workflow/WorkflowListView.vue
index ac36d4d0..1fd412af 100644
--- a/src/views/workflow/WorkflowListView.vue
+++ b/src/views/workflow/WorkflowListView.vue
@@ -29,6 +29,12 @@ async function fetchData() {
   }
 }
 
+// 新增完成
+function addDone() {
+  addDialog.value = false
+  fetchData()
+}
+
 onMounted(() => {
   fetchData()
 })
@@ -42,7 +48,7 @@ onActivated(() => {
   <div>
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
     <VRow v-if="workflowList.length > 0">
-      <VCol cols="12" md="6" v-for="item in workflowList" :key="item.id">
+      <VCol cols="12" md="6" lg="4" v-for="item in workflowList" :key="item.id">
         <WorkflowTaskCard :workflow="item" @refresh="fetchData" />
       </VCol>
     </VRow>
@@ -67,5 +73,5 @@ onActivated(() => {
     @click="addDialog = true"
   />
   <!-- 新增对话框 -->
-  <WorkflowAddDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="fetchData" />
+  <WorkflowAddDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" />
 </template>