From 6a029ad7a07ba1cc2096e95f7196189ccdf3e7d0 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 7 May 2025 16:28:57 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=88=97=E8=A1=A8=2070%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/bpm/category/index.ts   |   1 +
 apps/web-antd/src/views/bpm/category/data.ts  |   1 +
 .../bpm/category/modules/rename-form.vue      | 102 ++++++++++++++++++
 apps/web-antd/src/views/bpm/model/index.vue   |  21 +++-
 .../modules/category-draggable-model.vue      |  77 ++++++++++++-
 5 files changed, 195 insertions(+), 7 deletions(-)
 create mode 100644 apps/web-antd/src/views/bpm/category/modules/rename-form.vue

diff --git a/apps/web-antd/src/api/bpm/category/index.ts b/apps/web-antd/src/api/bpm/category/index.ts
index 0a558f6d..767f3c40 100644
--- a/apps/web-antd/src/api/bpm/category/index.ts
+++ b/apps/web-antd/src/api/bpm/category/index.ts
@@ -11,6 +11,7 @@ export namespace BpmCategoryApi {
     name: string;
     code: string;
     status: number;
+    description?: string;
     sort: number; // 分类排序
   }
 
diff --git a/apps/web-antd/src/views/bpm/category/data.ts b/apps/web-antd/src/views/bpm/category/data.ts
index db53d57e..1df6ba2d 100644
--- a/apps/web-antd/src/views/bpm/category/data.ts
+++ b/apps/web-antd/src/views/bpm/category/data.ts
@@ -64,6 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         controlsPosition: 'right',
         placeholder: '请输入分类排序',
+        class: 'w-full',
       },
     },
   ];
diff --git a/apps/web-antd/src/views/bpm/category/modules/rename-form.vue b/apps/web-antd/src/views/bpm/category/modules/rename-form.vue
new file mode 100644
index 00000000..ba68a44e
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/category/modules/rename-form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getCategory, updateCategory } from '#/api/bpm/category';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmCategoryApi.CategoryVO>();
+
+// 定义表单结构
+const formSchema = [
+  {
+    fieldName: 'name',
+    label: '分类名',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入分类名',
+    },
+    rules: 'required',
+  },
+];
+
+// 创建表单
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: formSchema,
+  showDefaultActions: false,
+});
+
+// 创建模态窗
+const [Modal, modalApi] = useVbenModal({
+  // 保存按钮回调
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+
+    // 提交表单，只更新流程分类名
+    const formValues = await formApi.getValues();
+    const data = {
+      id: formData.value?.id,
+      name: formValues.name, // 只更新流程分类名
+      code: formData.value?.code,
+      status: formData.value?.status,
+      description: formData.value?.description,
+      sort: formData.value?.sort,
+    } as BpmCategoryApi.CategoryVO;
+
+    try {
+      await updateCategory(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+
+  // 打开/关闭弹窗回调
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+
+    // 加载数据
+    const data = modalApi.getData<BpmCategoryApi.CategoryVO>();
+
+    if (!data || !data.id) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      // 获取流程分类数据
+      formData.value = await getCategory(data.id as number);
+      // 仅设置 name 字段
+      await formApi.setValues({
+        name: formData.value.name,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="重命名流程分类">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index c40c53e8..00c2ac1f 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -3,7 +3,7 @@ import type { BpmModelApi } from '#/api/bpm/model';
 
 import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus, Search, Settings } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
@@ -26,7 +26,16 @@ import {
 } from '#/api/bpm/category';
 import { getModelList } from '#/api/bpm/model';
 
+// 流程分类对话框
+import CategoryForm from '../category/modules/form.vue';
 import CategoryDraggableModel from './modules/category-draggable-model.vue';
+
+// 新建流程分类对话框
+const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
+  connectedComponent: CategoryForm,
+  destroyOnClose: true,
+});
+
 // 模型列表加载状态
 const modelListSpinning = refAutoReset(false, 3000);
 // 保存排序状态
@@ -100,7 +109,8 @@ const createModel = () => {
 /** 处理下拉菜单命令 */
 const handleCommand = (command: string) => {
   if (command === 'handleCategoryAdd') {
-    //  TODO 新建分类逻辑
+    // 打开新建流程分类弹窗
+    categoryFormModalApi.open();
   } else if (command === 'handleCategorySort') {
     originalData.value = cloneDeep(categoryGroup.value);
     isCategorySorting.value = true;
@@ -152,7 +162,7 @@ const handleCategorySortSubmit = async () => {
   <Page auto-content-height>
     <Card
       :body-style="{ padding: '10px' }"
-      class="mb-4 h-[89vh]"
+      class="mb-4"
       v-spinning="modelListSpinning"
     >
       <div class="flex h-full items-center justify-between pl-5">
@@ -184,7 +194,7 @@ const handleCategorySortSubmit = async () => {
             </Button>
           </Form.Item>
           <Form.Item>
-            <Dropdown placement="bottomRight">
+            <Dropdown placement="bottomRight" arrow>
               <Button>
                 <template #icon>
                   <Settings class="size-4" />
@@ -239,4 +249,7 @@ const handleCategorySortSubmit = async () => {
       </div>
     </Card>
   </Page>
+
+  <!-- 流程分类表单弹窗 -->
+  <CategoryFormModal @success="getList" />
 </template>
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index 08443f1e..b061df44 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -4,6 +4,7 @@ import type { BpmModelApi } from '#/api/bpm/model';
 
 import { computed, ref, watchEffect } from 'vue';
 
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -12,16 +13,23 @@ import {
   Button,
   Card,
   Collapse,
+  Dropdown,
+  Menu,
   message,
   Table,
   Tag,
   Tooltip,
 } from 'ant-design-vue';
 
+import { deleteCategory } from '#/api/bpm/category';
 import { updateModelSortBatch } from '#/api/bpm/model';
 import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
 import { DICT_TYPE } from '#/utils';
 
+// 导入重命名表单
+import CategoryRenameForm from '../../category/modules/rename-form.vue';
+
 const props = defineProps<{
   categoryInfo: BpmCategoryApi.ModelCategoryInfo;
   isCategorySorting: boolean;
@@ -131,6 +139,36 @@ const handleModelSortCancel = () => {
   }
 };
 
+/** 处理下拉菜单命令 */
+const handleCommand = (command: string) => {
+  if (command === 'renameCategory') {
+    // 打开重命名分类对话框
+    categoryRenameModalApi.setData(props.categoryInfo).open();
+  } else if (command === 'deleteCategory') {
+    handleDeleteCategory();
+  }
+};
+
+/** 删除流程分类 */
+const handleDeleteCategory = async () => {
+  if (props.categoryInfo.modelList.length > 0) {
+    message.warning('该分类下仍有流程定义,不允许删除');
+    return;
+  }
+
+  confirm({
+    content: `确定要删除[${props.categoryInfo.name}]吗？`,
+  }).then(async () => {
+    // 发起删除
+    await deleteCategory(props.categoryInfo.id);
+    message.success(
+      $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
+    );
+    // 刷新列表
+    emit('success');
+  });
+};
+
 /** 处理表单详情点击 */
 const handleFormDetail = (row: any) => {
   // TODO 待实现
@@ -169,6 +207,17 @@ const customRow = (_record: any) => {
     class: isModelSorting.value ? 'cursor-move' : '',
   };
 };
+
+// 重命名分类对话框
+const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
+  connectedComponent: CategoryRenameForm,
+  destroyOnClose: true,
+});
+
+// 处理重命名成功
+const handleRenameSuccess = () => {
+  emit('success');
+};
 </script>
 
 <template>
@@ -205,20 +254,39 @@ const customRow = (_record: any) => {
 
         <div
           class="ml-auto flex items-center"
-          :class="isModelSorting ? 'mr-4' : 'mr-12'"
+          :class="isModelSorting ? 'mr-4' : 'mr-8'"
         >
           <template v-if="!isModelSorting">
             <Button
               v-if="categoryInfo.modelList.length > 0"
               type="link"
-              class="mr-5 flex items-center text-[14px]"
+              size="small"
+              class="flex items-center text-[14px]"
               @click.stop="handleModelSort"
             >
               <template #icon>
-                <span class="icon-[fa--sort-amount-desc] mr-1"></span>
+                <span class="icon-[fa--sort-amount-desc]"></span>
               </template>
               排序
             </Button>
+            <Dropdown placement="bottom" arrow>
+              <Button
+                type="link"
+                size="small"
+                class="flex items-center text-[14px]"
+              >
+                <template #icon>
+                  <span class="icon-[ant-design--setting-outlined]"></span>
+                </template>
+                分类
+              </Button>
+              <template #overlay>
+                <Menu @click="(e) => handleCommand(e.key as string)">
+                  <Menu.Item key="renameCategory"> 重命名 </Menu.Item>
+                  <Menu.Item key="deleteCategory"> 删除分类 </Menu.Item>
+                </Menu>
+              </template>
+            </Dropdown>
           </template>
 
           <template v-else>
@@ -370,6 +438,9 @@ const customRow = (_record: any) => {
       </Collapse.Panel>
     </Collapse>
   </Card>
+
+  <!-- 重命名分类弹窗 -->
+  <CategoryRenameModal @success="handleRenameSuccess" />
 </template>
 
 <style lang="scss" scoped>

From 9f7761f832912a8573878efda5d5b5d83f77bc00 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 7 May 2025 16:36:17 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=20review=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/bpm/category/index.ts          | 10 ----------
 apps/web-antd/src/api/bpm/model/index.ts             | 12 ++++++------
 apps/web-antd/src/views/bpm/model/index.vue          |  6 +++---
 .../bpm/model/modules/category-draggable-model.vue   |  5 ++---
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/apps/web-antd/src/api/bpm/category/index.ts b/apps/web-antd/src/api/bpm/category/index.ts
index 767f3c40..4b509d29 100644
--- a/apps/web-antd/src/api/bpm/category/index.ts
+++ b/apps/web-antd/src/api/bpm/category/index.ts
@@ -1,7 +1,5 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { BpmModelApi } from '#/api/bpm/model';
-
 import { requestClient } from '#/api/request';
 
 export namespace BpmCategoryApi {
@@ -14,14 +12,6 @@ export namespace BpmCategoryApi {
     description?: string;
     sort: number; // 分类排序
   }
-
-  /** 模型分类信息 */
-  // TODO @jason：这个应该非 api 的，可以考虑抽到页面里哈。
-  export interface ModelCategoryInfo {
-    id: number;
-    name: string;
-    modelList: BpmModelApi.ModelVO[];
-  }
 }
 
 /** 查询流程分类分页 */
diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index 72ae8e9f..4f9a51c1 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -40,13 +40,13 @@ export namespace BpmModelApi {
     bpmnXml: string;
     startUsers?: UserInfo[];
   }
+}
 
-  /** 模型分类信息 */
-  export interface ModelCategoryInfo {
-    id: number;
-    name: string;
-    modelList: ModelVO[];
-  }
+/** 模型分类信息 */
+export interface ModelCategoryInfo {
+  id: number;
+  name: string;
+  modelList: BpmModelApi.ModelVO[];
 }
 
 /** 获取流程模型列表 */
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index 00c2ac1f..118b27b9 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { BpmModelApi } from '#/api/bpm/model';
+import type { ModelCategoryInfo } from '#/api/bpm/model';
 
 import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
 
@@ -41,9 +41,9 @@ const modelListSpinning = refAutoReset(false, 3000);
 // 保存排序状态
 const saveSortLoading = ref(false);
 // 按照 category 分组的数据
-const categoryGroup = ref<BpmModelApi.ModelCategoryInfo[]>([]);
+const categoryGroup = ref<ModelCategoryInfo[]>([]);
 // 未排序前的原始数据
-const originalData = ref<BpmModelApi.ModelCategoryInfo[]>([]);
+const originalData = ref<ModelCategoryInfo[]>([]);
 // 可以排序元素的容器
 const sortable = useTemplateRef<HTMLElement>('categoryGroupRef');
 // 排序引用，以便后续启用或禁用排序
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index b061df44..7b005fcf 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { BpmCategoryApi } from '#/api/bpm/category';
-import type { BpmModelApi } from '#/api/bpm/model';
+import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
 
 import { computed, ref, watchEffect } from 'vue';
 
@@ -31,7 +30,7 @@ import { DICT_TYPE } from '#/utils';
 import CategoryRenameForm from '../../category/modules/rename-form.vue';
 
 const props = defineProps<{
-  categoryInfo: BpmCategoryApi.ModelCategoryInfo;
+  categoryInfo: ModelCategoryInfo;
   isCategorySorting: boolean;
 }>();