chore: 删除历史流程 改为tab切换

apps/web-antd/src/api/workflow/definition/index.ts

@@ -4,6 +4,11 @@ import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
 import { requestClient } from '#/api/request';
 
+/**
+ * 全部的流程定义
+ * @param params 查询参数
+ * @returns 分页
+ */
 export function workflowDefinitionList(params?: PageQuery) {
   return requestClient.get<PageResult<ProcessDefinition>>(
     '/workflow/definition/list',
@@ -11,6 +16,18 @@ export function workflowDefinitionList(params?: PageQuery) {
   );
 }
 
+/**
+ * 未发布的流程定义
+ * @param params 查询参数
+ * @returns 分页
+ */
+export function unPublishList(params?: PageQuery) {
+  return requestClient.get<PageResult<ProcessDefinition>>(
+    '/workflow/definition/unPublishList',
+    { params },
+  );
+}
+
 /**
  * 获取历史流程定义列表
  * @param flowCode

apps/web-antd/src/views/workflow/processDefinition/data.tsx

@@ -63,7 +63,7 @@ export const columns: VxeGridProps['columns'] = [
     slots: { default: 'action' },
     title: '操作',
     resizable: false,
-    width: 280,
+    width: 200,
   },
 ];
 

apps/web-antd/src/views/workflow/processDefinition/index.vue

@@ -1,18 +1,28 @@
+<!-- eslint-disable no-use-before-define -->
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { getVxePopupContainer } from '@vben/utils';
 
-import { message, Modal, Popconfirm, Space, Switch } from 'ant-design-vue';
+import {
+  message,
+  Modal,
+  Popconfirm,
+  type RadioChangeEvent,
+  RadioGroup,
+  Space,
+  Switch,
+} from 'ant-design-vue';
 
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import { vxeCheckboxChecked } from '#/adapter/vxe-table';
 import {
+  unPublishList,
   workflowDefinitionActive,
   workflowDefinitionCopy,
   workflowDefinitionDelete,
@@ -25,7 +35,6 @@ import { downloadByData } from '#/utils/file/download';
 import CategoryTree from './category-tree.vue';
 import { columns, querySchema } from './data';
 import processDefinitionDeployModal from './process-definition-deploy-modal.vue';
-import processDefinitionHistoryModal from './process-definition-history-modal.vue';
 import processDefinitionModal from './process-definition-modal.vue';
 
 // 左边部门用
@@ -42,7 +51,6 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   handleReset: async () => {
     selectedCode.value = [];
-    // eslint-disable-next-line no-use-before-define
     const { formApi, reload } = tableApi;
     await formApi.resetForm();
     const formValues = formApi.form.values;
@@ -74,7 +82,7 @@ const gridOptions: VxeGridProps = {
           Reflect.deleteProperty(formValues, 'category');
         }
 
-        return await workflowDefinitionList({
+        return await currentTableApi.value({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
           ...formValues,
@@ -95,6 +103,23 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
+// 左边的切换
+const statusOptions = [
+  { label: '全部流程', value: 1 },
+  { label: '未发布流程', value: 0 },
+];
+const currentStatus = ref(1);
+const currentTableApi = computed(() => {
+  if (currentStatus.value === 1) {
+    return workflowDefinitionList;
+  }
+  return unPublishList;
+});
+async function handleStatusChange(e: RadioChangeEvent) {
+  currentStatus.value = e.target.value as number;
+  await tableApi.reload();
+}
+
 async function handleDelete(row: Recordable<any>) {
   await workflowDefinitionDelete(row.id);
   await tableApi.query();
@@ -142,18 +167,6 @@ async function handleActive(row: any, status: boolean | number | string) {
   }
 }
 
-const [ProcessDefinitionHistoryModal, historyModalApi] = useVbenModal({
-  connectedComponent: processDefinitionHistoryModal,
-});
-/**
- * 历史版本
- * @param row row
- */
-function handleHistory(row: any) {
-  historyModalApi.setData({ flowCode: row.flowCode, currentId: row.id });
-  historyModalApi.open();
-}
-
 /**
  * 发布流程
  * @param row row
@@ -239,7 +252,16 @@ function handleDeploy() {
         @reload="() => tableApi.reload()"
         @select="() => tableApi.reload()"
       />
-      <BasicTable class="flex-1 overflow-hidden" table-title="流程定义列表">
+      <BasicTable class="flex-1 overflow-hidden">
+        <template #toolbar-actions>
+          <RadioGroup
+            v-model:value="currentStatus"
+            :options="statusOptions"
+            button-style="solid"
+            option-type="button"
+            @change="handleStatusChange"
+          />
+        </template>
         <template #toolbar-tools>
           <Space>
             <a-button
@@ -276,8 +298,8 @@ function handleDeploy() {
         <template #action="{ row }">
           <div class="flex flex-col gap-1">
             <div>
-              <a-button size="small" type="link" @click="handleHistory(row)">
-                历史版本
+              <a-button size="small" type="link" @click="handleEdit(row)">
+                编辑信息
               </a-button>
               <Popconfirm
                 :get-popup-container="getVxePopupContainer"
@@ -308,6 +330,8 @@ function handleDeploy() {
                   发布流程
                 </a-button>
               </Popconfirm>
+            </div>
+            <div>
               <Popconfirm
                 :get-popup-container="getVxePopupContainer"
                 :title="`确认复制流程[${row.flowName}]?`"
@@ -316,11 +340,6 @@ function handleDeploy() {
               >
                 <a-button size="small" type="link"> 复制流程 </a-button>
               </Popconfirm>
-            </div>
-            <div>
-              <a-button size="small" type="link" @click="handleEdit(row)">
-                编辑信息
-              </a-button>
               <a-button size="small" type="link" @click="handleExportXml(row)">
                 导出流程
               </a-button>
@@ -331,6 +350,5 @@ function handleDeploy() {
     </div>
     <ProcessDefinitionModal @reload="() => tableApi.reload()" />
     <ProcessDefinitionDeployModal @reload="() => tableApi.reload()" />
-    <ProcessDefinitionHistoryModal />
   </Page>
 </template>

apps/web-antd/src/views/workflow/processDefinition/process-definition-history-modal.vue

@@ -1,184 +0,0 @@
-<script setup lang="ts">
-import type { Recordable } from '@vben/types';
-
-import { useRouter } from 'vue-router';
-
-import { useVbenModal } from '@vben/common-ui';
-import { useVbenVxeGrid, type VxeGridProps } from '@vben/plugins/vxe-table';
-import { getVxePopupContainer } from '@vben/utils';
-
-import { Popconfirm, Switch } from 'ant-design-vue';
-
-import {
-  getHisListByKey,
-  workflowDefinitionActive,
-  workflowDefinitionCopy,
-  workflowDefinitionDelete,
-  workflowDefinitionPublish,
-} from '#/api/workflow/definition';
-
-import { columns } from './data';
-
-const [BasicModal, modalApi] = useVbenModal({
-  title: '历史版本',
-  class: 'w-[1000px]',
-  footer: false,
-  async onOpenChange(isOpen) {
-    if (!isOpen) {
-      return null;
-    }
-    const { flowCode, currentId } = modalApi.getData() as {
-      currentId: string;
-      flowCode: string;
-    };
-    const resp = await getHisListByKey(flowCode);
-    const omitCurrentList = resp.filter((item) => item.id !== currentId);
-    // eslint-disable-next-line no-use-before-define
-    await tableApi.grid.loadData(omitCurrentList);
-  },
-});
-
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    trigger: 'default',
-  },
-  columns: columns?.filter((item) => item.type !== 'checkbox'),
-  height: 600,
-  keepSource: true,
-  pagerConfig: {
-    enabled: false,
-  },
-  rowConfig: {
-    isHover: true,
-    keyField: 'id',
-    height: 100,
-  },
-  toolbarConfig: {
-    custom: false,
-    zoom: false,
-    refresh: false,
-  },
-  id: 'workflow-definition-history',
-};
-
-const [BasicTable, tableApi] = useVbenVxeGrid({
-  gridOptions,
-});
-
-/**
- * 发布流程
- * @param row row
- */
-async function handlePublish(row: any) {
-  await workflowDefinitionPublish(row.id);
-  await tableApi.query();
-}
-
-const router = useRouter();
-/**
- * 流程设计/预览
- * @param row row
- * @param disabled true为预览，false为设计
- */
-function handleDesign(row: any, disabled: boolean) {
-  router.push({
-    path: '/workflow/designer',
-    query: { definitionId: row.id, disabled: String(disabled) },
-  });
-}
-
-async function handleDelete(row: Recordable<any>) {
-  await workflowDefinitionDelete(row.id);
-  await tableApi.query();
-}
-
-/**
- * 复制流程
- * @param row row
- */
-async function handleCopy(row: any) {
-  await workflowDefinitionCopy(row.id);
-  await tableApi.query();
-}
-
-/**
- * 激活/挂起流程
- * @param row row
- */
-async function handleActive(row: any, status: boolean | number | string) {
-  const lastStatus = status === 1 ? 0 : 1;
-  try {
-    await workflowDefinitionActive(row.id, !!status);
-    await tableApi.query();
-  } catch (error) {
-    row.activityStatus = lastStatus;
-    console.error(error);
-  }
-}
-</script>
-
-<template>
-  <BasicModal>
-    <!-- TODO: 添加操作列 -->
-    <BasicTable>
-      <template #activityStatus="{ row }">
-        <Switch
-          v-model:checked="row.activityStatus"
-          :checked-value="1"
-          :unchecked-value="0"
-          checked-children="激活"
-          un-checked-children="挂起"
-          @change="(status) => handleActive(row, status)"
-        />
-      </template>
-      <template #action="{ row }">
-        <div class="flex flex-col gap-1">
-          <div>
-            <Popconfirm
-              :get-popup-container="getVxePopupContainer"
-              placement="left"
-              title="确认删除？"
-              @confirm="handleDelete(row)"
-            >
-              <a-button danger size="small" type="link" @click.stop="">
-                删除流程
-              </a-button>
-            </Popconfirm>
-          </div>
-          <div>
-            <a-button
-              size="small"
-              type="link"
-              @click="handleDesign(row, !!row.isPublish)"
-            >
-              {{ row.isPublish ? '查看流程' : '设计流程' }}
-            </a-button>
-            <Popconfirm
-              :get-popup-container="getVxePopupContainer"
-              :title="`确认发布流程[${row.flowName}]?`"
-              placement="left"
-              @confirm="handlePublish(row)"
-            >
-              <a-button v-if="!row.isPublish" size="small" type="link">
-                发布流程
-              </a-button>
-            </Popconfirm>
-            <Popconfirm
-              :get-popup-container="getVxePopupContainer"
-              :title="`确认复制流程[${row.flowName}]?`"
-              placement="left"
-              @confirm="handleCopy(row)"
-            >
-              <a-button size="small" type="link"> 复制流程 </a-button>
-            </Popconfirm>
-          </div>
-        </div>
-      </template>
-    </BasicTable>
-  </BasicModal>
-</template>