!134 fix: [BPM 工作流] - 流程设计页面的步骤条问题

Merge pull request !134 from Jason/dev

apps/web-antd/src/router/routes/modules/bpm.ts

@@ -74,6 +74,18 @@ const routes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: 'manager/model/:type/:id',
+        component: () => import('#/views/bpm/model/form/index.vue'),
+        name: 'BpmModelUpdate',
+        meta: {
+          title: '修改流程',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-connection',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
     ],
   },
 ];

apps/web-antd/src/views/bpm/model/form/index.vue

@@ -305,7 +305,7 @@ async function handleSave() {
 
     // 返回列表页（排除更新的情况）
     if (actionType !== 'update') {
-      await router.push({ name: 'BpmModel' });
+      router.push({ path: '/bpm/manager/model' });
     }
   } catch (error: any) {
     console.error('保存失败:', error);
@@ -339,8 +339,7 @@ async function handleDeploy() {
     // 发布
     await deployModel(formData.value.id);
     message.success('发布成功');
-    // TODO 返回列表页
-    await router.push({ name: 'BpmModel' });
+    await router.push({ path: '/bpm/manager/model' });
   } catch (error: any) {
     console.error('发布失败:', error);
     message.warning(error.message || '发布失败');
@@ -398,9 +397,11 @@ onBeforeUnmount(() => {
 
 <template>
   <Page auto-content-height>
-    <!-- 主体内容 -->
-    <Card class="mb-4">
-      <template #title>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <div
+        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
+      >
         <!-- 左侧标题 -->
         <div class="flex w-[200px] items-center overflow-hidden">
           <ArrowLeft
@@ -414,82 +415,88 @@ onBeforeUnmount(() => {
             {{ formData.name || '创建流程' }}
           </span>
         </div>
-      </template>
-      <template #extra>
-        <Button
-          v-if="actionType === 'update'"
-          type="primary"
-          @click="handleDeploy"
-        >
-          发 布
-        </Button>
-        <Button type="primary" @click="handleSave">
-          <span v-if="actionType === 'definition'">恢 复</span>
-          <span v-else>保 存</span>
-        </Button>
-      </template>
-      <!-- 步骤条 -->
-      <div class="flex h-full flex-1 items-center justify-center">
-        <div class="flex h-full w-[400px] items-center justify-between">
-          <div
-            v-for="(step, index) in steps"
-            :key="index"
-            class="relative mx-[15px] flex h-full cursor-pointer items-center"
-            :class="[
-              currentStep === index
-                ? 'border-b-2 border-solid border-blue-500 text-blue-500'
-                : 'text-gray-500',
-            ]"
-            @click="handleStepClick(index)"
-          >
+
+        <!-- 步骤条 -->
+        <div class="flex h-full flex-1 items-center justify-center">
+          <div class="flex h-full w-auto items-center justify-center">
             <div
-              class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
+              v-for="(step, index) in steps"
+              :key="index"
+              class="relative mx-6 flex h-full cursor-pointer items-center"
               :class="[
                 currentStep === index
-                  ? 'border-blue-500 bg-blue-500 text-white'
-                  : 'border-gray-300 bg-white text-gray-500',
+                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  : 'text-gray-500',
               ]"
+              @click="handleStepClick(index)"
             >
-              {{ index + 1 }}
+              <div
+                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
+                :class="[
+                  currentStep === index
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-gray-300 bg-white text-gray-500',
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="whitespace-nowrap text-base font-bold">{{
+                step.title
+              }}</span>
             </div>
-            <span class="whitespace-nowrap text-base font-bold">{{
-              step.title
-            }}</span>
           </div>
         </div>
-      </div>
-      <div class="mt-[50px]">
-        <!-- 第一步：基本信息 -->
-        <div v-if="currentStep === 0" class="mx-auto w-4/6">
-          <BasicInfo
-            v-model="formData"
-            :category-list="categoryList"
-            :user-list="userList"
-            :dept-list="deptList"
-            ref="basicInfoRef"
-          />
-        </div>
-        <!-- 第二步：表单设计  -->
-        <div v-if="currentStep === 1" class="mx-auto w-4/6">
-          <FormDesign
-            v-model="formData"
-            :form-list="formList"
-            ref="formDesignRef"
-          />
-        </div>
 
-        <!-- 第三步：流程设计 -->
-        <ProcessDesign
-          v-if="currentStep === 2"
-          v-model="formData"
-          ref="processDesignRef"
-        />
-
-        <!-- 第四步：更多设置 -->
-        <div v-if="currentStep === 3" class="mx-auto w-4/6">
-          <ExtraSetting v-model="formData" ref="extraSettingRef" />
+        <!-- 右侧按钮 -->
+        <div class="flex w-[200px] items-center justify-end gap-2">
+          <Button
+            v-if="actionType === 'update'"
+            type="primary"
+            @click="handleDeploy"
+          >
+            发 布
+          </Button>
+          <Button type="primary" @click="handleSave">
+            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-else>保 存</span>
+          </Button>
         </div>
       </div>
-    </Card>
+      <!-- 主体内容 -->
+      <Card :body-style="{ padding: '10px' }" class="mb-4">
+        <div class="mt-[50px]">
+          <!-- 第一步：基本信息 -->
+          <div v-if="currentStep === 0" class="mx-auto w-4/6">
+            <BasicInfo
+              v-model="formData"
+              :category-list="categoryList"
+              :user-list="userList"
+              :dept-list="deptList"
+              ref="basicInfoRef"
+            />
+          </div>
+          <!-- 第二步：表单设计  -->
+          <div v-if="currentStep === 1" class="mx-auto w-4/6">
+            <FormDesign
+              v-model="formData"
+              :form-list="formList"
+              ref="formDesignRef"
+            />
+          </div>
+
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
+
+          <!-- 第四步：更多设置 -->
+          <div v-if="currentStep === 3" class="mx-auto w-4/6">
+            <ExtraSetting v-model="formData" ref="extraSettingRef" />
+          </div>
+        </div>
+      </Card>
+    </div>
   </Page>
 </template>

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -326,12 +326,12 @@ defineExpose({ validate });
         </Select>
         <div
           v-if="modelData.startUserType === 1"
-          class="mt-2 flex flex-wrap gap-2"
+          class="mt-2 flex flex-wrap gap-1"
         >
           <div
             v-for="user in selectedStartUsers"
             :key="user.id"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200"
           >
             <Avatar
               class="m-1"
@@ -344,7 +344,7 @@ defineExpose({ validate });
             </Avatar>
             {{ user.nickname }}
             <X
-              class="ml-2 size-4 cursor-pointer"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
               @click="handleRemoveStartUser(user)"
             />
           </div>
@@ -364,17 +364,17 @@ defineExpose({ validate });
         </div>
         <div
           v-if="modelData.startUserType === 2"
-          class="mt-2 flex flex-wrap gap-2"
+          class="mt-2 flex flex-wrap gap-1"
         >
           <div
             v-for="dept in selectedStartDepts"
             :key="dept.id"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2 shadow-sm"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200"
           >
             <IconifyIcon icon="ep:office-building" class="size-6 px-1" />
             {{ dept.name }}
             <X
-              class="ml-2 size-4 cursor-pointer"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
               @click="handleRemoveStartDept(dept)"
             />
           </div>
@@ -395,7 +395,7 @@ defineExpose({ validate });
           <div
             v-for="user in selectedManagerUsers"
             :key="user.id"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200"
           >
             <Avatar
               class="m-1"
@@ -408,7 +408,7 @@ defineExpose({ validate });
             </Avatar>
             {{ user.nickname }}
             <X
-              class="ml-2 size-4 cursor-pointer"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
               @click="handleRemoveManagerUser(user)"
             />
           </div>

apps/web-antd/src/views/bpm/model/form/modules/form-design.vue

@@ -91,8 +91,8 @@ defineExpose({ validate });
     ref="formRef"
     :model="modelData"
     :rules="rules"
-    :label-col="{ span: 4 }"
-    :wrapper-col="{ span: 20 }"
+    :label-col="{ span: 3 }"
+    :wrapper-col="{ span: 21 }"
     class="mt-5"
   >
     <FormItem label="表单类型" name="formType" class="mb-5">

apps/web-antd/src/views/bpm/model/index.vue

@@ -152,7 +152,7 @@ async function handleCategorySortSubmit() {
     <CategoryFormModal @success="getList" />
     <Card
       :body-style="{ padding: '10px' }"
-      class="mb-4 h-[98%]"
+      class="mb-4"
       title="流程模型"
       v-spinning="modelListSpinning"
     >

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -2,9 +2,11 @@
 import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
 
 import { computed, ref, watchEffect } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -22,7 +24,7 @@ import {
 } from 'ant-design-vue';
 
 import { deleteCategory } from '#/api/bpm/category';
-import { updateModelSortBatch } from '#/api/bpm/model';
+import { deployModel, updateModelSortBatch } from '#/api/bpm/model';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 import { DICT_TYPE } from '#/utils';
@@ -43,6 +45,10 @@ const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+const router = useRouter();
+// 获取当前登录用户Id
+const userStore = useUserStore();
+const userId = userStore.userInfo?.id;
 const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.ModelVO[]>([]);
 const modelList = ref<BpmModelApi.ModelVO[]>([]);
@@ -62,7 +68,7 @@ const columns = [
     key: 'name',
     align: 'left' as const,
     ellipsis: true,
-    width: 250,
+    width: 230,
   },
   {
     title: '可见范围',
@@ -78,7 +84,7 @@ const columns = [
     key: 'type',
     align: 'center' as const,
     ellipsis: true,
-    width: 120,
+    width: 150,
   },
   {
     title: '表单信息',
@@ -185,6 +191,68 @@ function handleFormDetail(row: any) {
   console.warn('待实现', row);
 }
 
+/** 判断是否是流程管理员 */
+function isManagerUser(row: any) {
+  return row.managerUserIds && row.managerUserIds.includes(userId);
+}
+
+async function modelOperation(type: string, id: number) {
+  await router.push({
+    name: 'BpmModelUpdate',
+    params: { id, type },
+  });
+}
+
+/** 发布流程 */
+async function handleDeploy(row: any) {
+  confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起部署
+      await deployModel(row.id);
+      return true;
+    },
+    content: `确认要发布[${row.name}]流程吗？`,
+    icon: 'question',
+  }).then(async () => {
+    message.success(`发布[${row.name}]流程成功`);
+    // 刷新列表
+    emit('success');
+  });
+}
+
+/** '更多'操作按钮 */
+function handleModelCommand(command: string, row: any) {
+  switch (command) {
+    case 'handleChangeState': {
+      console.warn('停用/启用待实现', row);
+      break;
+    }
+    case 'handleClean': {
+      console.warn('清理待实现', row);
+      break;
+    }
+    case 'handleCopy': {
+      modelOperation('copy', row.id);
+      break;
+    }
+    case 'handleDefinitionList': {
+      console.warn('历史待实现', row);
+      break;
+    }
+    case 'handleDelete': {
+      console.warn('删除待实现', row);
+      break;
+    }
+    case 'handleReport': {
+      console.warn('报表待实现', row);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
 /** 更新 modelList 模型列表 */
 const updateModelList = useDebounceFn(() => {
   const newModelList = props.categoryInfo.modelList;
@@ -450,7 +518,72 @@ const handleRenameSuccess = () => {
               </template>
               <!-- 操作列 -->
               <template v-else-if="column.key === 'operation'">
-                <div class="flex items-center justify-center">待实现</div>
+                <div class="flex items-center space-x-0">
+                  <!-- TODO 权限校验-->
+                  <Button
+                    type="link"
+                    size="small"
+                    class="px-1"
+                    @click="modelOperation('update', record.id)"
+                    :disabled="!isManagerUser(record)"
+                  >
+                    修改
+                  </Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    class="px-1"
+                    @click="handleDeploy(record)"
+                    :disabled="!isManagerUser(record)"
+                  >
+                    发布
+                  </Button>
+                  <Dropdown placement="bottomRight" arrow>
+                    <Button type="link" size="small" class="px-1">更多</Button>
+                    <!-- TODO 待实现 -->
+                    <template #overlay>
+                      <Menu
+                        @click="
+                          (e) => handleModelCommand(e.key as string, record)
+                        "
+                      >
+                        <Menu.Item key="handleCopy"> 复制 </Menu.Item>
+                        <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
+                        <Menu.Item
+                          key="handleReport"
+                          :disabled="!isManagerUser(record)"
+                        >
+                          报表
+                        </Menu.Item>
+                        <Menu.Item
+                          key="handleChangeState"
+                          v-if="record.processDefinition"
+                          :disabled="!isManagerUser(record)"
+                        >
+                          {{
+                            record.processDefinition.suspensionState === 1
+                              ? '停用'
+                              : '启用'
+                          }}
+                        </Menu.Item>
+                        <Menu.Item
+                          danger
+                          key="handleClean"
+                          :disabled="!isManagerUser(record)"
+                        >
+                          清理
+                        </Menu.Item>
+                        <Menu.Item
+                          danger
+                          key="handleDelete"
+                          :disabled="!isManagerUser(record)"
+                        >
+                          删除
+                        </Menu.Item>
+                      </Menu>
+                    </template>
+                  </Dropdown>
+                </div>
               </template>
             </template>
           </Table>