From 7b2c857f6d3174f6f9ff7f90c03126179ded7d2f Mon Sep 17 00:00:00 2001
From: AN <1983933789@qq.com>
Date: Wed, 11 Jun 2025 23:32:59 +0800
Subject: [PATCH] =?UTF-8?q?feat-wip(projects):=20=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9A=E4=B9=89=E5=8A=9F=E8=83=BDing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/api/workflow/definition.ts        |   8 +
 src/typings/api/workflow.api.d.ts             |   2 +
 .../workflow/process-definition/index.vue     | 154 +++++++++++++-----
 src/views/workflow/process-instance/index.vue |  85 ++++++----
 4 files changed, 170 insertions(+), 79 deletions(-)

diff --git a/src/service/api/workflow/definition.ts b/src/service/api/workflow/definition.ts
index e891c437..c5c7c348 100644
--- a/src/service/api/workflow/definition.ts
+++ b/src/service/api/workflow/definition.ts
@@ -54,3 +54,11 @@ export function fetchActiveDefinition(id: CommonType.IdType, active: boolean) {
     }
   });
 }
+
+/** 发布流程定义 */
+export function fetchPublishDefinition(id: CommonType.IdType) {
+  return request<boolean>({
+    url: `/workflow/definition/publish/${id}`,
+    method: 'put'
+  });
+}
diff --git a/src/typings/api/workflow.api.d.ts b/src/typings/api/workflow.api.d.ts
index e288bd9e..9adc137d 100644
--- a/src/typings/api/workflow.api.d.ts
+++ b/src/typings/api/workflow.api.d.ts
@@ -90,6 +90,8 @@ declare namespace Api {
       flowName: string;
       /** 流程类别 */
       category: string;
+      /** 流程分类名称 */
+      categoryName: string;
       /** 流程版本 */
       version: string;
       /** 是否发布（0未发布 1已发布 9失效） */
diff --git a/src/views/workflow/process-definition/index.vue b/src/views/workflow/process-definition/index.vue
index 207a2109..ed6db26e 100644
--- a/src/views/workflow/process-definition/index.vue
+++ b/src/views/workflow/process-definition/index.vue
@@ -1,13 +1,16 @@
 <script setup lang="tsx">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { NDivider, NSwitch, NTag } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
+import { type TableDataWithIndex } from '@sa/hooks';
 import { workflowPublishStatusRecord } from '@/constants/workflow';
 import {
   fetchActiveDefinition,
   fetchBatchDeleteDefinition,
   fetchGetCategoryTree,
-  fetchGetUnPublishDefinitionList
+  fetchGetDefinitionList,
+  fetchGetUnPublishDefinitionList,
+  fetchPublishDefinition
 } from '@/service/api/workflow';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -23,12 +26,28 @@ defineOptions({
   name: 'DefinitionList'
 });
 
+interface IsPublishOption {
+  label: string;
+  value: boolean;
+}
+
 const appStore = useAppStore();
 const { download } = useDownload();
 const { hasAuth } = useAuth();
 
 const { bool: importVisible, setTrue: showImportModal } = useBoolean();
 
+const isPublish = ref<boolean>(true);
+const isPublishOptions = ref<IsPublishOption[]>([
+  {
+    label: '已发布',
+    value: true
+  },
+  {
+    label: '未发布',
+    value: false
+  }
+]);
 const {
   columns,
   columnChecks,
@@ -38,9 +57,10 @@ const {
   loading,
   mobilePagination,
   searchParams,
-  resetSearchParams
+  resetSearchParams,
+  updateApiFn
 } = useTable({
-  apiFn: fetchGetUnPublishDefinitionList,
+  apiFn: fetchGetDefinitionList,
   apiParams: {
     pageNum: 1,
     pageSize: 10,
@@ -70,7 +90,7 @@ const {
       minWidth: 120
     },
     {
-      key: 'category',
+      key: 'categoryName',
       title: '流程分类',
       align: 'center',
       minWidth: 120
@@ -79,7 +99,10 @@ const {
       key: 'version',
       title: '版本号',
       align: 'center',
-      minWidth: 120
+      minWidth: 120,
+      render(row) {
+        return <NTag type="info">v{row.version}.0</NTag>;
+      }
     },
     {
       key: 'activityStatus',
@@ -136,13 +159,11 @@ const {
         if (row.isPublish === null) {
           return null;
         }
-
         const tagMap: Record<Api.Workflow.WorkflowPublishStatus, NaiveUI.ThemeColor> = {
           0: 'warning',
           1: 'success',
           9: 'error'
         };
-
         return <NTag type={tagMap[row.isPublish]}>{workflowPublishStatusRecord[row.isPublish]}</NTag>;
       }
     },
@@ -150,51 +171,76 @@ const {
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 130,
+      width: 150,
+      fixed: 'right',
       render: row => {
-        const divider = () => {
-          if (!hasAuth('workflow:definition:edit') || !hasAuth('workflow:definition:remove')) {
-            return null;
-          }
-          return <NDivider vertical />;
-        };
+        const Divider = <NDivider vertical />;
 
-        const editBtn = () => {
-          if (!hasAuth('workflow:definition:edit')) {
-            return null;
-          }
-          return (
+        const buttons = {
+          edit: (
             <ButtonIcon
               text
               type="primary"
               icon="material-symbols:drive-file-rename-outline-outline"
               tooltipContent={$t('common.edit')}
-              onClick={() => edit(row.id!)}
+              onClick={() => edit(row.id)}
             />
-          );
-        };
-
-        const deleteBtn = () => {
-          if (!hasAuth('workflow:definition:remove')) {
-            return null;
-          }
-          return (
+          ),
+          delete: (
             <ButtonIcon
               text
               type="error"
               icon="material-symbols:delete-outline"
               tooltipContent={$t('common.delete')}
               popconfirmContent={$t('common.confirmDelete')}
-              onPositiveClick={() => handleDelete(row.id!)}
+              onPositiveClick={() => handleDelete(row.id)}
             />
-          );
+          ),
+          design: <ButtonIcon text type="primary" icon="material-symbols:design-services" tooltipContent="流程设计" />,
+          preview: (
+            <ButtonIcon text type="primary" icon="material-symbols:visibility-outline" tooltipContent="查看流程" />
+          ),
+          publish: (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:publish"
+              tooltipContent="发布流程"
+              onClick={() => handlePublish(row.id)}
+            />
+          ),
+          copy: <ButtonIcon text type="primary" icon="material-symbols:content-copy" tooltipContent="复制流程" />,
+          export: (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:file-export"
+              tooltipContent="导出流程"
+              onClick={() => handleExport(row)}
+            />
+          )
         };
 
         return (
-          <div class="flex-center gap-8px">
-            {editBtn()}
-            {divider()}
-            {deleteBtn()}
+          <div class="flex-col">
+            <div class="h-[24px] flex-center gap-4px">
+              {buttons.edit}
+              {Divider}
+              {buttons.delete}
+              {Divider}
+              {buttons.copy}
+            </div>
+            <div class="h-[24px] flex-center gap-4px">
+              {buttons.export}
+              {Divider}
+              {isPublish.value ? buttons.preview : buttons.design}
+              {!isPublish.value && (
+                <>
+                  {Divider}
+                  {buttons.publish}
+                </>
+              )}
+            </div>
           </div>
         );
       }
@@ -202,6 +248,13 @@ const {
   ]
 });
 
+// 监听运行状态变化
+watch(isPublish, async () => {
+  const newApiFn = isPublish.value ? fetchGetDefinitionList : fetchGetUnPublishDefinitionList;
+  updateApiFn(newApiFn);
+  await getDataByPage();
+});
+
 const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
   useTableOperate(data, getData);
 
@@ -223,14 +276,20 @@ function edit(id: CommonType.IdType) {
   handleEdit('id', id);
 }
 
-function handleExport() {
-  download('/workflow/definition/export', searchParams, `流程定义_${new Date().getTime()}.xlsx`);
-}
-
 function handleDeploy() {
   showImportModal();
 }
 
+async function handlePublish(id: CommonType.IdType) {
+  const { error } = await fetchPublishDefinition(id);
+  if (error) return;
+  window.$message?.success('发布成功');
+  getDataByPage();
+}
+
+function handleExport(row: TableDataWithIndex<Api.Workflow.Definition>) {
+  download(`/workflow/definition/exportDef/${row.id}`, {}, `${row.flowCode}.json`);
+}
 const { loading: categoryLoading, startLoading: startCategoryLoading, endLoading: endCategoryLoading } = useLoading();
 const categoryPattern = ref<string>();
 const categoryData = ref<Api.Common.CommonTreeRecord>([]);
@@ -300,18 +359,27 @@ const selectable = computed(() => {
     </template>
     <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
       <DefinitionSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-      <NCard title="流程定义列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <NCard :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+        <template #header>
+          <NSpace>
+            <NRadioGroup v-model:value="isPublish" on-up size="small">
+              <NRadioButton
+                v-for="(status, index) in isPublishOptions"
+                :key="index"
+                :value="status.value"
+                :label="status.label"
+              />
+            </NRadioGroup>
+          </NSpace>
+        </template>
         <template #header-extra>
           <TableHeaderOperation
             v-model:columns="columnChecks"
             :disabled-delete="checkedRowKeys.length === 0"
             :loading="loading"
-            :show-add="hasAuth('workflow:definition:add')"
             :show-delete="hasAuth('workflow:definition:remove')"
-            :show-export="hasAuth('workflow:definition:export')"
             @add="handleAdd"
             @delete="handleBatchDelete"
-            @export="handleExport"
             @refresh="getData"
           >
             <template #prefix>
diff --git a/src/views/workflow/process-instance/index.vue b/src/views/workflow/process-instance/index.vue
index 1a8d0c3e..8fd5c044 100644
--- a/src/views/workflow/process-instance/index.vue
+++ b/src/views/workflow/process-instance/index.vue
@@ -151,45 +151,58 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
     fixed: 'right',
     width: 155,
     render: row => {
-      const showAll = runningStatus.value;
       const id = row.id;
+      const showAll = runningStatus.value;
+      const Divider = <NDivider vertical />;
+
+      const cancelBtn = (
+        <ButtonIcon
+          text
+          type="error"
+          showPopconfirmIcon={false}
+          icon="material-symbols:cancel-outline-rounded"
+          tooltipContent="作废流程"
+          popconfirmContent={
+            <NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
+          }
+          onPositiveClick={() => handleCancel(id)}
+        />
+      );
+
+      const deleteBtn = (
+        <ButtonIcon
+          text
+          type="error"
+          icon="material-symbols:delete-outline"
+          tooltipContent={$t('common.delete')}
+          popconfirmContent={$t('common.confirmDelete')}
+          onPositiveClick={() => handleDelete(id)}
+        />
+      );
+
+      const previewBtn = (
+        <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
+      );
+
+      const variableBtn = (
+        <ButtonIcon
+          text
+          type="info"
+          icon="material-symbols:variable-insert"
+          tooltipContent="流程变量"
+          onClick={() => handleShowVariable(id)}
+        />
+      );
+
       return (
         <div class="flex-center gap-1px">
-          {showAll && [
-            <ButtonIcon
-              key="cancel"
-              text
-              type="error"
-              showPopconfirmIcon={false}
-              icon="material-symbols:cancel-outline-rounded"
-              tooltipContent="作废流程"
-              popconfirmContent={
-                <NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
-              }
-              onPositiveClick={() => handleCancel(id)}
-            />,
-            <NDivider key="div1" vertical />,
-            <ButtonIcon
-              key="delete"
-              text
-              type="error"
-              icon="material-symbols:delete-outline"
-              tooltipContent={$t('common.delete')}
-              popconfirmContent={$t('common.confirmDelete')}
-              onPositiveClick={() => handleDelete(id)}
-            />,
-            <NDivider key="div2" vertical />
-          ]}
-          <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
-          <NDivider vertical />
-          <ButtonIcon
-            key=""
-            text
-            type="info"
-            icon="material-symbols:variable-insert"
-            tooltipContent="流程变量"
-            onClick={() => handleShowVariable(id)}
-          />
+          {showAll && cancelBtn}
+          {showAll && Divider}
+          {showAll && deleteBtn}
+          {showAll && Divider}
+          {previewBtn}
+          {Divider}
+          {variableBtn}
         </div>
       );
     }