提交

web-admin/src/views/system/workflow/process/index.vue

@@ -2,11 +2,6 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
   <div class="page-container">
-    <header class="page-head">
-      <h1>流程管理</h1>
-      <p class="page-desc">管理审批流程定义，支持图形化设计、版本发布与启停控制。</p>
-    </header>
-
     <section class="panel">
       <div class="panel-top">
         <h2>流程列表</h2>
@@ -115,21 +110,32 @@
           />
           <el-table-column
             label="操作"
-            min-width="400"
+            min-width="160"
             fixed="right"
             align="center"
             header-align="center"
           >
             <template #default="{ row }">
-              <el-button class="btn-op-item primary" @click="handleDesign(row)"
-                ><el-icon><SetUp /></el-icon>流程设计</el-button
-              >
-              <el-button class="btn-op-item" @click="handleEdit(row)"
-                ><el-icon><Edit /></el-icon>编辑</el-button
-              >
-              <el-button class="btn-op-item" @click="handleDelete(row)"
-                ><el-icon><Delete /></el-icon>删除</el-button
-              >
+              <div style="display: flex; justify-content: center; gap: 8px">
+                <el-button class="btn-op-item primary" @click="handleDesign(row)">
+                  <el-icon><SetUp /></el-icon>流程设计
+                </el-button>
+                <el-dropdown trigger="hover" @command="(cmd: string) => handleDropdownCommand(cmd, row)">
+                  <el-button class="btn-op-item">
+                    <el-icon><More /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="edit">
+                        <el-icon><Edit /></el-icon>编辑
+                      </el-dropdown-item>
+                      <el-dropdown-item command="delete" divided>
+                        <el-icon><Delete /></el-icon>删除
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -209,7 +215,8 @@
     RefreshLeft,
     Delete,
     SetUp,
-    Edit
+    Edit,
+    More
   } from '@element-plus/icons-vue'
   import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
   import {
@@ -344,6 +351,13 @@
     await loadData()
   }
 
+  function handleDropdownCommand(command: string, row: Api.Workflow.ProcessDefItem) {
+    switch (command) {
+      case 'edit': handleEdit(row); break
+      case 'delete': handleDelete(row); break
+    }
+  }
+
   async function handleDelete(row: Api.Workflow.ProcessDefItem) {
     await ElMessageBox.confirm('确定要删除该流程吗？', '提示', { type: 'warning' })
     await fetchDeleteProcessDef(row.id)