From 40cbfb5f891dbc0d4e2ea332919d85ad1c4c670a Mon Sep 17 00:00:00 2001
From: gnomeshgh <18153063927@163.com>
Date: Fri, 3 Jul 2026 18:52:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(bpm)=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5=E6=A8=A1=E5=9E=8B=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/bpm/model/index.ts    |  11 ++
 apps/web-antd/src/views/bpm/model/index.vue | 142 +++++++++++++++++++-
 2 files changed, 151 insertions(+), 2 deletions(-)

diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index e0c033a44..90a815be5 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -96,6 +96,17 @@ export async function createModel(data: BpmModelApi.Model) {
   return requestClient.post('/bpm/model/create', data);
 }
 
+/** 导入流程模型 */
+export async function importModel(file: File, key?: string, name?: string) {
+  const formData = new FormData();
+  formData.append('file', file);
+  if (key) formData.append('key', key);
+  if (name) formData.append('name', name);
+  return requestClient.post<string>('/bpm/model/import', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+}
+
 /** 删除流程模型 */
 export async function deleteModel(id: number) {
   return requestClient.delete(`/bpm/model/delete?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 91c504f9e..6bea668d9 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -8,13 +8,23 @@ import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { useSortable } from '@vueuse/integrations/useSortable';
-import { Button, Card, Dropdown, Input, Menu, message } from 'ant-design-vue';
+import {
+  Alert,
+  Button,
+  Card,
+  Dropdown,
+  Form,
+  Input,
+  Menu,
+  message,
+  Upload,
+} from 'ant-design-vue';
 
 import {
   getCategorySimpleList,
   updateCategorySortBatch,
 } from '#/api/bpm/category';
-import { getModelList } from '#/api/bpm/model';
+import { getModelList, importModel as importModelApi } from '#/api/bpm/model';
 import { router } from '#/router';
 
 import CategoryForm from '../category/modules/form.vue';
@@ -35,6 +45,70 @@ const sortable = useTemplateRef<HTMLElement>('categoryGroupRef'); // 可以排
 const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
 const isCategorySorting = ref(false); // 分类排序状态
 
+// ========== 导入弹窗相关 ==========
+const importFile = ref<File | null>(null); // 导入文件（用于最终提交）
+const importFileList = ref<any[]>([]); // 上传组件的文件列表
+const importFormRef = ref();
+const importForm = reactive({
+  key: '',
+  name: '',
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  async onConfirm() {
+    if (!importFile.value) {
+      message.warning('请上传流程模型文件');
+      return;
+    }
+    await importFormRef.value?.validate();
+    importModalApi.lock();
+    try {
+      await importModelApi(importFile.value, importForm.key, importForm.name);
+      message.success('导入成功');
+      await importModalApi.close();
+      await getList();
+    } catch {
+      // 全局 request 拦截器已处理错误提示
+    } finally {
+      importModalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      importFile.value = null;
+      importFileList.value = [];
+      importForm.key = '';
+      importForm.name = '';
+    }
+  },
+});
+
+/** 上传前校验 + 读取文件自动填充字段 */
+function beforeUpload(file: File) {
+  const isJson =
+    file.type === 'application/json' || file.name.endsWith('.json');
+  if (!isJson) {
+    message.error('仅支持上传 JSON 格式的流程模型文件');
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  file.text().then((text) => {
+    try {
+      const json = JSON.parse(text);
+      importForm.key = json.key || '';
+      importForm.name = json.name || '';
+    } catch {
+      message.error('JSON 文件格式不正确');
+    }
+  });
+  return false; // 阻止默认上传，不显示上传动画
+}
+
+/** 点击导入按钮 */
+function handleImportClick() {
+  importModalApi.open();
+}
+
 const queryParams = reactive({
   name: '',
 }); // 查询参数
@@ -161,6 +235,9 @@ async function handleCategorySortSubmit() {
           <Button class="ml-2" type="primary" @click="createModel">
             <IconifyIcon icon="lucide:plus" /> 新建模型
           </Button>
+          <Button class="ml-2" @click="handleImportClick">
+            <IconifyIcon icon="lucide:upload" /> 导入模型
+          </Button>
           <Dropdown class="ml-2" placement="bottomRight" arrow>
             <Button>
               <template #icon>
@@ -214,5 +291,66 @@ async function handleCategorySortSubmit() {
         />
       </div>
     </Card>
+
+    <!-- 导入流程模型弹窗 -->
+    <ImportModal title="导入流程模型" class="w-[640px]">
+      <div class="mx-4 my-2">
+        <Alert
+          message="跨租户导入说明"
+          description="导入文件由【导出】功能生成。导入后将在当前租户下新建流程模型，审批人、可发起人、流程管理员等数据无法跨租户复用，仅保留审批节点结构，请在导入后重新配置审批人再发布。"
+          type="info"
+          show-icon
+          class="!mb-4"
+        />
+        <Form ref="importFormRef" :model="importForm">
+          <!-- 1. 流程模型文件 -->
+          <Form.Item label="流程模型文件" name="file">
+            <Upload.Dragger
+              v-model:file-list="importFileList"
+              :before-upload="beforeUpload"
+              :max-count="1"
+              accept=".json"
+              :show-upload-list="{ showRemoveIcon: true }"
+            >
+              <p class="ant-upload-drag-icon flex justify-center">
+                <IconifyIcon icon="lucide:cloud-upload" class="text-3xl" />
+              </p>
+              <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
+              <p class="ant-upload-hint">
+                仅支持上传单个 JSON 格式的流程模型文件
+              </p>
+            </Upload.Dragger>
+          </Form.Item>
+
+          <!-- 2. 流程标识 -->
+          <Form.Item
+            label="流程标识"
+            name="key"
+            :rules="[{ required: true, message: '请输入流程标识' }]"
+          >
+            <Input
+              v-model:value="importForm.key"
+              placeholder="请输入流程标识"
+            />
+            <div class="text-xs text-gray-400">
+              同租户导入时，若标识已存在请修改后再导入
+            </div>
+          </Form.Item>
+
+          <!-- 3. 流程名称 -->
+          <Form.Item
+            label="流程名称"
+            name="name"
+            :rules="[{ required: true, message: '请输入流程名称' }]"
+          >
+            <Input
+              v-model:value="importForm.name"
+              placeholder="请输入流程名称"
+            />
+            <div class="text-xs text-gray-400">必填，请填写流程名称</div>
+          </Form.Item>
+        </Form>
+      </div>
+    </ImportModal>
   </Page>
 </template>

From fa2aed89f523fc4c7051c8e6be91209ee2f6677a Mon Sep 17 00:00:00 2001
From: gnomeshgh <18153063927@163.com>
Date: Fri, 3 Jul 2026 23:17:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(bpm)=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E6=A8=A1=E5=9E=8B=E6=93=8D=E4=BD=9C=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E6=A8=A1=E5=9E=8Bjson=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/bpm/model/index.ts      |  5 ++++
 .../modules/category-draggable-model.vue      | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index 90a815be5..9cce9be8e 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -107,6 +107,11 @@ export async function importModel(file: File, key?: string, name?: string) {
   });
 }
 
+/** 导出流程模型 */
+export async function exportModel(id: number) {
+  return requestClient.get<BpmModelApi.Model>(`/bpm/model/export?id=${id}`);
+}
+
 /** 删除流程模型 */
 export async function deleteModel(id: number) {
   return requestClient.delete(`/bpm/model/delete?id=${id}`);
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 b93cf3458..8f0926d26 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
@@ -31,6 +31,7 @@ import {
   cleanModel,
   deleteModel,
   deployModel,
+  exportModel,
   updateModelSortBatch,
   updateModelState,
 } from '#/api/bpm/model';
@@ -315,6 +316,10 @@ function handleModelCommand(command: string, row: any) {
       handleDelete(row);
       break;
     }
+    case 'handleExport': {
+      handleExportModel(row);
+      break;
+    }
     case 'handleReport': {
       handleReport(row);
       break;
@@ -325,6 +330,26 @@ function handleModelCommand(command: string, row: any) {
   }
 }
 
+/** 导出模型 */
+async function handleExportModel(row: any) {
+  const hideLoading = message.loading({ content: '正在导出...', duration: 0 });
+  try {
+    const data = await exportModel(row.id);
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${row.key || row.name || 'model'}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    message.success('导出成功');
+  } finally {
+    hideLoading();
+  }
+}
+
 /** 更新状态操作 */
 async function handleChangeState(row: any) {
   const state = row.processDefinition.suspensionState;
@@ -691,6 +716,7 @@ function handleRenameSuccess() {
                       @click="(e) => handleModelCommand(e.key as string, row)"
                     >
                       <Menu.Item key="handleCopy"> 复制 </Menu.Item>
+                      <Menu.Item key="handleExport"> 导出 </Menu.Item>
                       <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
 
                       <Menu.Item