From 16140848b16d9d316994e672133acfad6d86f559 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Apr 2025 15:30:19 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=2050%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |   5 +-
 apps/web-antd/src/api/bpm/category/index.ts   |  30 +-
 apps/web-antd/src/api/bpm/model/index.ts      | 107 +++++
 apps/web-antd/src/views/bpm/model/index.vue   | 254 ++++++++++-
 .../modules/category-draggable-model.vue      | 398 ++++++++++++++++++
 pnpm-lock.yaml                                |   3 +
 6 files changed, 772 insertions(+), 25 deletions(-)
 create mode 100644 apps/web-antd/src/api/bpm/model/index.ts
 create mode 100644 apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 164d7449a..ece23c22b 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -44,8 +44,8 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "catalog:",
+    "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
-    "vxe-table": "catalog:",
     "cropperjs": "catalog:",
     "crypto-js": "catalog:",
     "dayjs": "catalog:",
@@ -53,7 +53,8 @@
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vxe-table": "catalog:"
   },
   "devDependencies": {
     "@types/crypto-js": "catalog:"
diff --git a/apps/web-antd/src/api/bpm/category/index.ts b/apps/web-antd/src/api/bpm/category/index.ts
index 852b2a868..1519c758c 100644
--- a/apps/web-antd/src/api/bpm/category/index.ts
+++ b/apps/web-antd/src/api/bpm/category/index.ts
@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmModelApi } from '#/api/bpm/model';
+
 import { requestClient } from '#/api/request';
 
 export namespace BpmCategoryApi {
@@ -11,6 +13,13 @@ export namespace BpmCategoryApi {
     status: number;
     sort: number; // 分类排序
   }
+
+  /** 模型分类信息 */
+  export interface ModelCategoryInfo {
+    id: number;
+    name: string;
+    modelList: BpmModelApi.ModelVO[];
+  }
 }
 
 /** 查询流程分类分页 */
@@ -30,15 +39,30 @@ export async function getCategory(id: number) {
 
 /** 新增流程分类 */
 export async function createCategory(data: BpmCategoryApi.CategoryVO) {
-  return requestClient.post('/bpm/category/create', data);
+  return requestClient.post<number>('/bpm/category/create', data);
 }
 
 /** 修改流程分类 */
 export async function updateCategory(data: BpmCategoryApi.CategoryVO) {
-  return requestClient.put('/bpm/category/update', data);
+  return requestClient.put<boolean>('/bpm/category/update', data);
 }
 
 /** 删除流程分类 */
 export async function deleteCategory(id: number) {
-  return requestClient.delete(`/bpm/category/delete?id=${id}`);
+  return requestClient.delete<boolean>(`/bpm/category/delete?id=${id}`);
+}
+
+/** 查询流程分类列表 */
+export async function getCategorySimpleList() {
+  return requestClient.get<BpmCategoryApi.CategoryVO[]>(
+    `/bpm/category/simple-list`,
+  );
+}
+
+/** 批量修改流程分类的排序 */
+export async function updateCategorySortBatch(ids: number[]) {
+  const params = ids.join(',');
+  return requestClient.put<boolean>(
+    `/bpm/category/update-sort-batch?ids=${params}`,
+  );
 }
diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
new file mode 100644
index 000000000..06c444e04
--- /dev/null
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -0,0 +1,107 @@
+import { requestClient } from '#/api/request';
+
+export namespace BpmModelApi {
+  /** 用户信息 TODO 这个是不是可以抽取出来定义在公共模块 */
+  export interface UserInfo {
+    id: number;
+    nickname: string;
+    avatar?: string;
+    deptId?: number;
+    deptName?: string;
+  }
+  /** 流程定义 VO */
+  export interface ProcessDefinitionVO {
+    id: string;
+    version: number;
+    deploymentTime: number;
+    suspensionState: number;
+    formType?: number;
+  }
+
+  /** 流程模型 VO */
+  export interface ModelVO {
+    id: number;
+    key: string;
+    name: string;
+    icon?: string;
+    description: string;
+    category: string;
+    formName: string;
+    formType: number;
+    formId: number;
+    formCustomCreatePath: string;
+    formCustomViewPath: string;
+    processDefinition: ProcessDefinitionVO;
+    status: number;
+    remark: string;
+    createTime: string;
+    bpmnXml: string;
+    startUsers?: UserInfo[];
+  }
+
+  /** 模型分类信息 */
+  export interface ModelCategoryInfo {
+    id: number;
+    name: string;
+    modelList: ModelVO[];
+  }
+}
+
+/** 获取流程模型列表 */
+export async function getModelList(name: string | undefined) {
+  return requestClient.get<BpmModelApi.ModelVO[]>('/bpm/model/list', {
+    params: { name },
+  });
+}
+
+/** 获取流程模型详情 */
+export async function getModel(id: string) {
+  return requestClient.get<BpmModelApi.ModelVO>(`/bpm/model/get?id=${id}`);
+}
+
+/** 更新流程模型 */
+export async function updateModel(data: BpmModelApi.ModelVO) {
+  return requestClient.put('/bpm/model/update', data);
+}
+
+/** 批量修改流程模型排序 */
+export async function updateModelSortBatch(ids: number[]) {
+  const params = ids.join(',');
+  return requestClient.put<boolean>(
+    `/bpm/model/update-sort-batch?ids=${params}`,
+  );
+}
+
+/** 更新流程模型的 BPMN XML */
+export async function updateModelBpmn(data: BpmModelApi.ModelVO) {
+  return requestClient.put('/bpm/model/update-bpmn', data);
+}
+
+/** 更新流程模型状态 */
+export async function updateModelState(id: number, state: number) {
+  const data = {
+    id,
+    state,
+  };
+  return requestClient.put('/bpm/model/update-state', data);
+}
+
+/** 创建流程模型 */
+export async function createModel(data: BpmModelApi.ModelVO) {
+  return requestClient.post('/bpm/model/create', data);
+}
+
+/** 删除流程模型 */
+export async function deleteModel(id: number) {
+  return requestClient.delete(`/bpm/model/delete?id=${id}`);
+}
+
+/** 部署流程模型 */
+export async function deployModel(id: number) {
+  return requestClient.post(`/bpm/model/deploy?id=${id}`);
+}
+
+/** 清理流程模型 */
+export async function cleanModel(id: number) {
+  return requestClient.delete(`/bpm/model/clean?id=${id}`);
+}
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index c7d4938c1..c51782e24 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -1,28 +1,242 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { BpmModelApi } from '#/api/bpm/model';
 
-import { Button } from 'ant-design-vue';
+import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { Plus, Search, Settings } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { refAutoReset } from '@vueuse/core';
+import { useSortable } from '@vueuse/integrations/useSortable';
+import {
+  Button,
+  Card,
+  Divider,
+  Dropdown,
+  Form,
+  Input,
+  Menu,
+  message,
+} from 'ant-design-vue';
+
+import {
+  getCategorySimpleList,
+  updateCategorySortBatch,
+} from '#/api/bpm/category';
+import { getModelList } from '#/api/bpm/model';
+
+import CategoryDraggableModel from './modules/category-draggable-model.vue';
+// 模型列表加载状态
+const modelListSpinning = refAutoReset(false, 3000);
+// 保存排序状态
+const saveSortLoading = ref(false);
+// 按照 category 分组的数据
+const categoryGroup = ref<BpmModelApi.ModelCategoryInfo[]>([]);
+// 未排序前的原始数据
+const originalData = ref<BpmModelApi.ModelCategoryInfo[]>([]);
+// 可以排序元素的容器
+const sortable = useTemplateRef<HTMLElement>('categoryGroupRef');
+// 排序引用，以便后续启用或禁用排序
+const sortableInstance = ref<any>(null);
+// 分类排序状态
+const isCategorySorting = ref(false);
+// 查询参数
+const queryParams = reactive({
+  name: '',
+});
+
+// 监听分类排序模式切换
+watch(
+  () => isCategorySorting.value,
+  (newValue) => {
+    if (sortableInstance.value) {
+      if (newValue) {
+        // 启用排序功能
+        sortableInstance.value.option('disabled', false);
+      } else {
+        // 禁用排序功能
+        sortableInstance.value.option('disabled', true);
+      }
+    }
+  },
+);
+
+/** 加载数据 */
+const getList = async () => {
+  modelListSpinning.value = true;
+  try {
+    const modelList = await getModelList(queryParams.name);
+    const categoryList = await getCategorySimpleList();
+    // 按照 category 聚合
+    categoryGroup.value = categoryList.map((category: any) => ({
+      ...category,
+      modelList: modelList.filter(
+        (model: any) => model.categoryName === category.name,
+      ),
+    }));
+    // 重置排序实例
+    sortableInstance.value = null;
+  } finally {
+    modelListSpinning.value = false;
+  }
+};
+
+/** 初始化 */
+onActivated(() => {
+  getList();
+});
+
+/** 查询方法 */
+const handleQuery = () => {
+  getList();
+};
+
+/** 新增模型 */
+const createModel = () => {
+  // TODO 新增模型
+};
+
+/** 处理下拉菜单命令 */
+const handleCommand = (command: string) => {
+  if (command === 'handleCategoryAdd') {
+    //  TODO 新建分类逻辑
+  } else if (command === 'handleCategorySort') {
+    originalData.value = cloneDeep(categoryGroup.value);
+    isCategorySorting.value = true;
+    // 如果排序实例不存在，则初始化
+    if (sortableInstance.value) {
+      // 已存在实例，则启用排序功能
+      sortableInstance.value.option('disabled', false);
+    } else {
+      sortableInstance.value = useSortable(sortable, categoryGroup, {
+        disabled: false, // 启用排序
+      });
+    }
+  }
+};
+
+/** 取消分类排序 */
+const handleCategorySortCancel = () => {
+  // 恢复初始数据
+  categoryGroup.value = cloneDeep(originalData.value);
+  isCategorySorting.value = false;
+  // 直接禁用排序功能
+  if (sortableInstance.value) {
+    sortableInstance.value.option('disabled', true);
+  }
+};
+
+/** 提交分类排序 */
+const handleCategorySortSubmit = async () => {
+  saveSortLoading.value = true;
+  try {
+    // 保存排序逻辑
+    const ids = categoryGroup.value.map((item: any) => item.id);
+    await updateCategorySortBatch(ids);
+  } finally {
+    saveSortLoading.value = false;
+  }
+  message.success('分类排序成功');
+  isCategorySorting.value = false;
+  // 刷新列表
+  await getList();
+  // 禁用排序功能
+  if (sortableInstance.value) {
+    sortableInstance.value.option('disabled', true);
+  }
+};
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+  <Page auto-content-height>
+    <Card
+      :body-style="{ padding: '10px' }"
+      class="mb-4"
+      v-spinning="modelListSpinning"
     >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index
-      代码，pull request 贡献给我们！
-    </Button>
+      <div class="flex items-center justify-between pl-5">
+        <span class="-mb-4 text-lg font-extrabold">流程模型</span>
+        <!-- 搜索工作栏 -->
+        <Form
+          v-if="!isCategorySorting"
+          class="-mb-4 mr-2.5 flex"
+          :model="queryParams"
+          layout="inline"
+        >
+          <Form.Item name="name" class="ml-auto">
+            <Input
+              v-model:value="queryParams.name"
+              placeholder="搜索流程"
+              allow-clear
+              @press-enter="handleQuery"
+              class="!w-60"
+            >
+              <template #prefix>
+                <Search class="mx-2.5" />
+              </template>
+            </Input>
+          </Form.Item>
+          <!-- 右上角：新建模型、更多操作 -->
+          <Form.Item>
+            <Button type="primary" @click="createModel">
+              <Plus class="size-5" /> 新建模型
+            </Button>
+          </Form.Item>
+          <Form.Item>
+            <Dropdown placement="bottomRight">
+              <Button>
+                <template #icon>
+                  <Settings class="size-4" />
+                </template>
+              </Button>
+              <template #overlay>
+                <Menu @click="(e) => handleCommand(e.key as string)">
+                  <Menu.Item key="handleCategoryAdd">
+                    <div class="flex items-center">
+                      <span
+                        class="icon-[ant-design--plus-outlined] mr-1.5 text-[18px]"
+                      ></span>
+                      新建分类
+                    </div>
+                  </Menu.Item>
+                  <Menu.Item key="handleCategorySort">
+                    <div class="flex items-center">
+                      <span class="icon-[fa--sort-amount-desc] mr-1.5"></span>
+                      分类排序
+                    </div>
+                  </Menu.Item>
+                </Menu>
+              </template>
+            </Dropdown>
+          </Form.Item>
+        </Form>
+        <div class="-mb-4 mr-6" v-else>
+          <Button @click="handleCategorySortCancel" class="mr-3">
+            取 消
+          </Button>
+          <Button
+            type="primary"
+            :loading="saveSortLoading"
+            @click="handleCategorySortSubmit"
+          >
+            保存排序
+          </Button>
+        </div>
+      </div>
+
+      <Divider />
+      <!-- 按照分类，展示其所属的模型列表 -->
+      <div class="px-5" ref="categoryGroupRef">
+        <CategoryDraggableModel
+          v-for="element in categoryGroup"
+          :class="isCategorySorting ? 'cursor-move' : ''"
+          :key="element.id"
+          :category-info="element"
+          :is-category-sorting="isCategorySorting"
+          @success="getList"
+        />
+      </div>
+    </Card>
   </Page>
 </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
new file mode 100644
index 000000000..5ebcee1f7
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -0,0 +1,398 @@
+<script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { BpmModelApi } from '#/api/bpm/model';
+
+import { computed, ref, watchEffect } from 'vue';
+
+import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
+
+import { useDebounceFn } from '@vueuse/core';
+import { useSortable } from '@vueuse/integrations/useSortable';
+import {
+  Button,
+  Card,
+  Collapse,
+  message,
+  Table,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { updateModelSortBatch } from '#/api/bpm/model';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils/dict';
+
+const props = defineProps<{
+  categoryInfo: BpmCategoryApi.ModelCategoryInfo;
+  isCategorySorting: boolean;
+}>();
+
+const emit = defineEmits(['success']);
+
+const isModelSorting = ref(false);
+const originalData = ref<BpmModelApi.ModelVO[]>([]);
+const modelList = ref<BpmModelApi.ModelVO[]>([]);
+const isExpand = ref(false);
+const tableRef = ref();
+
+// 排序引用，以便后续启用或禁用排序
+const sortableInstance = ref<any>(null);
+/** 解决 v-model 问题，使用计算属性 */
+const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
+
+// 表格列配置
+const columns = [
+  {
+    title: '流程名',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'left' as const,
+    minWidth: 250,
+  },
+  {
+    title: '可见范围',
+    dataIndex: 'startUserIds',
+    key: 'startUserIds',
+    align: 'center' as const,
+    minWidth: 150,
+  },
+  {
+    title: '流程类型',
+    dataIndex: 'type',
+    key: 'type',
+    align: 'center' as const,
+    minWidth: 120,
+  },
+  {
+    title: '表单信息',
+    dataIndex: 'formType',
+    key: 'formType',
+    align: 'center' as const,
+    minWidth: 150,
+  },
+  {
+    title: '最后发布',
+    dataIndex: 'deploymentTime',
+    key: 'deploymentTime',
+    align: 'center' as const,
+    minWidth: 250,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    align: 'center' as const,
+    fixed: 'right' as const,
+    width: 150,
+  },
+];
+
+/** 处理模型的排序 */
+const handleModelSort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(props.categoryInfo.modelList);
+  // 展开数据
+  isExpand.value = true;
+  isModelSorting.value = true;
+  // 如果排序实例不存在，则初始化
+  if (sortableInstance.value) {
+    // 已存在实例，则启用排序功能
+    sortableInstance.value.option('disabled', false);
+  } else {
+    const sortableClass = `.category-${props.categoryInfo.id} .ant-table .ant-table-tbody`;
+    sortableInstance.value = useSortable(sortableClass, modelList, {
+      disabled: false, // 启用排序
+    });
+  }
+};
+
+/** 处理模型的排序提交 */
+const handleModelSortSubmit = async () => {
+  try {
+    // 保存排序
+    const ids = modelList.value.map((item) => item.id);
+    await updateModelSortBatch(ids);
+    // 刷新列表
+    isModelSorting.value = false;
+    message.success('排序模型成功');
+    emit('success');
+  } catch (error) {
+    console.error('排序保存失败', error);
+  }
+};
+
+/** 处理模型的排序取消 */
+const handleModelSortCancel = () => {
+  // 恢复初始数据
+  modelList.value = cloneDeep(originalData.value);
+  isModelSorting.value = false;
+  // 禁用排序功能
+  if (sortableInstance.value) {
+    sortableInstance.value.option('disabled', true);
+  }
+};
+
+/** 处理表单详情点击 */
+const handleFormDetail = (row: any) => {
+  // TODO 待实现
+  console.warn('待实现', row);
+};
+
+/** 更新 modelList 模型列表 */
+const updateModelList = useDebounceFn(() => {
+  const newModelList = props.categoryInfo.modelList;
+  if (!isEqual(modelList.value, newModelList)) {
+    modelList.value = cloneDeep(newModelList);
+    if (newModelList?.length > 0) {
+      isExpand.value = true;
+    }
+    // 关闭排序
+    isModelSorting.value = false;
+    // 重置排序实例
+    sortableInstance.value = null;
+  }
+}, 100);
+
+/** 监听分类信息和排序状态变化 */
+watchEffect(() => {
+  if (props.categoryInfo?.modelList) {
+    updateModelList();
+  }
+
+  if (props.isCategorySorting) {
+    isExpand.value = false;
+  }
+});
+
+/** 自定义表格行渲染 */
+const customRow = (_record: any) => {
+  return {
+    class: isModelSorting.value ? 'cursor-move' : '',
+  };
+};
+</script>
+
+<template>
+  <Card
+    :body-style="{ padding: 0 }"
+    class="category-draggable-model mb-5 rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+  >
+    <div class="flex h-12 items-center">
+      <!-- 头部：分类名 -->
+      <div class="flex items-center">
+        <Tooltip v-if="isCategorySorting" title="拖动排序">
+          <span
+            class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
+          ></span>
+        </Tooltip>
+        <div class="ml-4 mr-2 text-lg font-medium">{{ categoryInfo.name }}</div>
+        <div class="text-gray-500">
+          ({{ categoryInfo.modelList?.length || 0 }})
+        </div>
+      </div>
+
+      <!-- 头部：操作 -->
+      <div class="flex flex-1 items-center" v-show="!isCategorySorting">
+        <div
+          v-if="categoryInfo.modelList.length > 0"
+          class="ml-3 flex cursor-pointer items-center transition-transform duration-300"
+          :class="isExpand ? 'rotate-180' : 'rotate-0'"
+          @click="isExpand = !isExpand"
+        >
+          <span
+            class="icon-[ic--round-expand-more] text-3xl text-gray-400"
+          ></span>
+        </div>
+
+        <div
+          class="ml-auto flex items-center"
+          :class="isModelSorting ? 'mr-4' : 'mr-12'"
+        >
+          <template v-if="!isModelSorting">
+            <Button
+              v-if="categoryInfo.modelList.length > 0"
+              type="link"
+              class="mr-5 flex items-center text-[14px]"
+              @click.stop="handleModelSort"
+            >
+              <template #icon>
+                <span class="icon-[fa--sort-amount-desc] mr-1"></span>
+              </template>
+              排序
+            </Button>
+          </template>
+
+          <template v-else>
+            <Button @click.stop="handleModelSortCancel" class="mr-2">
+              取 消
+            </Button>
+            <Button type="primary" @click.stop="handleModelSortSubmit">
+              保存排序
+            </Button>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 模型列表 -->
+    <Collapse :active-key="expandKeys" :bordered="false" class="bg-transparent">
+      <Collapse.Panel
+        key="1"
+        :show-arrow="false"
+        class="border-0 bg-transparent p-0"
+        v-show="isExpand"
+      >
+        <Table
+          v-if="modelList && modelList.length > 0"
+          :class="`category-${categoryInfo.id}`"
+          ref="tableRef"
+          :data-source="modelList"
+          :columns="columns"
+          :pagination="false"
+          :custom-row="customRow"
+          row-key="id"
+        >
+          <template #bodyCell="{ column, record }">
+            <!-- 流程名 -->
+            <template v-if="column.key === 'name'">
+              <div class="flex items-center">
+                <Tooltip v-if="isModelSorting" title="拖动排序">
+                  <span
+                    class="icon-[ic--round-drag-indicator] mr-2.5 cursor-move text-2xl text-gray-500"
+                  ></span>
+                </Tooltip>
+                <div
+                  v-if="!record.icon"
+                  class="mr-2.5 flex h-9 w-9 items-center justify-center rounded bg-blue-500 text-white"
+                >
+                  <span style="font-size: 12px">{{
+                    record.name.substring(0, 2)
+                  }}</span>
+                </div>
+                <img
+                  v-else
+                  :src="record.icon"
+                  class="mr-2.5 h-9 w-9 rounded"
+                  alt="图标"
+                />
+                {{ record.name }}
+              </div>
+            </template>
+
+            <!-- 可见范围列-->
+            <template v-else-if="column.key === 'startUserIds'">
+              <span
+                v-if="!record.startUsers?.length && !record.startDepts?.length"
+              >
+                全部可见
+              </span>
+              <span v-else-if="record.startUsers?.length === 1">
+                {{ record.startUsers[0].nickname }}
+              </span>
+              <span v-else-if="record.startDepts?.length === 1">
+                {{ record.startDepts[0].name }}
+              </span>
+              <span v-else-if="record.startDepts?.length > 1">
+                <Tooltip
+                  placement="top"
+                  :title="
+                    record.startDepts.map((dept: any) => dept.name).join('、')
+                  "
+                >
+                  {{ record.startDepts[0].name }}等
+                  {{ record.startDepts.length }} 个部门可见
+                </Tooltip>
+              </span>
+              <span v-else-if="record.startUsers?.length > 1">
+                <Tooltip
+                  placement="top"
+                  :title="
+                    record.startUsers
+                      .map((user: any) => user.nickname)
+                      .join('、')
+                  "
+                >
+                  {{ record.startUsers[0].nickname }}等
+                  {{ record.startUsers.length }} 人可见
+                </Tooltip>
+              </span>
+            </template>
+            <!-- 流程类型列 -->
+            <template v-else-if="column.key === 'type'">
+              <!-- <DictTag :value="record.type" :type="DICT_TYPE.BPM_MODEL_TYPE" /> -->
+              <!-- <Tag>{{ record.type }}</Tag> -->
+              <DictTag :type="DICT_TYPE.BPM_MODEL_TYPE" :value="record.type" />
+            </template>
+            <!-- 表单信息列 -->
+            <template v-else-if="column.key === 'formType'">
+              <!-- TODO BpmModelFormType.NORMAL -->
+              <Button
+                v-if="record.formType === 10"
+                type="link"
+                @click="handleFormDetail(record)"
+              >
+                {{ record.formName }}
+              </Button>
+              <!-- TODO BpmModelFormType.CUSTOM -->
+              <Button
+                v-else-if="record.formType === 20"
+                type="link"
+                @click="handleFormDetail(record)"
+              >
+                {{ record.formCustomCreatePath }}
+              </Button>
+              <span v-else>暂无表单</span>
+            </template>
+            <!-- 最后发布列 -->
+            <template v-else-if="column.key === 'deploymentTime'">
+              <div class="flex items-center justify-center">
+                <span v-if="record.processDefinition" class="w-[150px]">
+                  {{ formatDateTime(record.processDefinition.deploymentTime) }}
+                </span>
+                <Tag v-if="record.processDefinition">
+                  v{{ record.processDefinition.version }}
+                </Tag>
+                <Tag v-else color="warning">未部署</Tag>
+                <Tag
+                  v-if="record.processDefinition?.suspensionState === 2"
+                  color="warning"
+                  class="ml-[10px]"
+                >
+                  已停用
+                </Tag>
+              </div>
+            </template>
+            <!-- 操作列 -->
+            <template v-else-if="column.key === 'operation'">
+              <div class="flex items-center justify-center">待实现</div>
+            </template>
+          </template>
+        </Table>
+      </Collapse.Panel>
+    </Collapse>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.category-draggable-model {
+  // ant-table-tbody 自定义样式
+  :deep(.ant-table-tbody > tr > td) {
+    overflow: hidden;
+    border-bottom: none;
+  }
+  // ant-collapse-header 自定义样式
+  :deep(.ant-collapse-header) {
+    padding: 0;
+  }
+
+  // 优化表格渲染性能
+  :deep(.ant-table-tbody) {
+    transform: translateZ(0);
+    will-change: transform;
+  }
+
+  // 折叠面板样式
+  :deep(.ant-collapse-content-box) {
+    padding: 0;
+  }
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f698b3f9..d67bda69d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -728,6 +728,9 @@ importers:
       '@vueuse/core':
         specifier: 'catalog:'
         version: 12.8.2(typescript@5.8.3)
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 12.8.2(async-validator@4.2.5)(axios@1.8.4)(focus-trap@7.6.4)(jwt-decode@4.0.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.3)
       ant-design-vue:
         specifier: 'catalog:'
         version: 4.2.6(vue@3.5.13(typescript@5.8.3))

From 3d2f803dd8f9ba77947eb511903a526a27382938 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Apr 2025 15:57:14 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=86=B2=E7=AA=81=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3bacd048e..2ca8fa031 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -733,7 +733,7 @@ importers:
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
       '@vueuse/integrations':
         specifier: 'catalog:'
-        version: 12.8.2(async-validator@4.2.5)(axios@1.8.4)(focus-trap@7.6.4)(jwt-decode@4.0.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.3)
+        version: 13.1.0(async-validator@4.2.5)(axios@1.9.0)(focus-trap@7.6.4)(jwt-decode@4.0.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.13(typescript@5.8.3))
       ant-design-vue:
         specifier: 'catalog:'
         version: 4.2.6(vue@3.5.13(typescript@5.8.3))