feat: 添加流程实例功能

packages/hooks/src/use-table.ts

@@ -64,7 +64,10 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
   const { loading, startLoading, endLoading } = useLoading();
   const { bool: empty, setBool: setEmpty } = useBoolean();
 
-  const { apiFn, apiParams, transformer, immediate = true, getColumnChecks, getColumns } = config;
+  const { transformer, immediate = true, getColumnChecks, getColumns } = config;
+
+  let currentApiFn = config.apiFn;
+  const apiParams = config.apiParams;
 
   const searchParams: NonNullable<Parameters<A>[0]> = reactive(jsonClone({ ...apiParams }));
 
@@ -94,7 +97,7 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
 
     const formattedParams = formatSearchParams(searchParams);
 
-    const response = await apiFn(formattedParams);
+    const response = await currentApiFn(formattedParams);
 
     const transformed = transformer(response as Awaited<ReturnType<A>>);
 
@@ -119,6 +122,10 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
     return formattedParams;
   }
 
+  function updateApiFn(newApiFn: A) {
+    currentApiFn = newApiFn;
+  }
+
   /**
    * update search params
    *
@@ -148,6 +155,7 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
     getData,
     searchParams,
     updateSearchParams,
-    resetSearchParams
+    resetSearchParams,
+    updateApiFn
   };
 }

src/constants/workflow.ts

@@ -8,3 +8,22 @@ export const workflowPublishStatusRecord: Record<Api.Workflow.WorkflowPublishSta
 };
 
 export const workflowPublishStatusOptions = transformRecordToOption(workflowPublishStatusRecord);
+
+/** node type */
+export const workflowNodeTypeRecord: Record<Api.Workflow.WorkflowNodeType, string> = {
+  0: '开始节点',
+  1: '中间节点',
+  2: '结束节点',
+  3: '互斥网关',
+  4: '并行网关'
+};
+
+export const workflowNodeTypeOptions = transformRecordToOption(workflowNodeTypeRecord);
+
+/** activity status */
+export const workflowActivityStatusRecord: Record<Api.Workflow.WorkflowActivityStatus, string> = {
+  0: '挂起',
+  1: '激活'
+};
+
+export const workflowActivityStatusOptions = transformRecordToOption(workflowActivityStatusRecord);

src/hooks/common/table.ts

@@ -32,7 +32,8 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
     getData,
     searchParams,
     updateSearchParams,
-    resetSearchParams
+    resetSearchParams,
+    updateApiFn
   } = useHookTable<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>({
     apiFn,
     apiParams,
@@ -212,7 +213,8 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
     getDataByPage,
     searchParams,
     updateSearchParams,
-    resetSearchParams
+    resetSearchParams,
+    updateApiFn
   };
 }
 

src/locales/langs/en-us.ts

@@ -218,7 +218,8 @@ const local: App.I18n.Schema = {
     exception_403: '403',
     exception_404: '404',
     exception_500: '500',
-    'workflow_process-definition': 'Process Definition'
+    'workflow_process-definition': 'Process Definition',
+    'workflow_process-instance': 'Process Instance'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -218,7 +218,8 @@ const local: App.I18n.Schema = {
     exception_403: '403',
     exception_404: '404',
     exception_500: '500',
-    'workflow_process-definition': '流程定义'
+    'workflow_process-definition': '流程定义',
+    'workflow_process-instance': '流程实例'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -45,4 +45,5 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   tool_gen: () => import("@/views/tool/gen/index.vue"),
   workflow_category: () => import("@/views/workflow/category/index.vue"),
   "workflow_process-definition": () => import("@/views/workflow/process-definition/index.vue"),
+  "workflow_process-instance": () => import("@/views/workflow/process-instance/index.vue"),
 };

src/router/elegant/routes.ts

@@ -358,6 +358,15 @@ export const generatedRoutes: GeneratedRoute[] = [
           title: 'workflow_process-definition',
           i18nKey: 'route.workflow_process-definition'
         }
+      },
+      {
+        name: 'workflow_process-instance',
+        path: '/workflow/process-instance',
+        component: 'view.workflow_process-instance',
+        meta: {
+          title: 'workflow_process-instance',
+          i18nKey: 'route.workflow_process-instance'
+        }
       }
     ]
   }

src/router/elegant/transform.ts

@@ -201,7 +201,8 @@ const routeMap: RouteMap = {
   "user-center": "/user-center",
   "workflow": "/workflow",
   "workflow_category": "/workflow/category",
-  "workflow_process-definition": "/workflow/process-definition"
+  "workflow_process-definition": "/workflow/process-definition",
+  "workflow_process-instance": "/workflow/process-instance"
 };
 
 /**

src/service/api/workflow/instance.ts

@@ -0,0 +1,35 @@
+import { request } from '@/service/request';
+
+/** 查询正在运行的流程实例列表 */
+export function fetchGetRunningProcessInstanceList(params: Api.Workflow.ProcessInstanceSearchParams) {
+  return request<Api.Workflow.ProcessInstanceList>({
+    url: '/workflow/instance/pageByRunning',
+    method: 'get',
+    params
+  });
+}
+
+/** 查询正在运行的流程实例列表 */
+export function fetchGetFinishProcessInstanceList(params: Api.Workflow.ProcessInstanceSearchParams) {
+  return request<Api.Workflow.ProcessInstanceList>({
+    url: '/workflow/instance/pageByFinish',
+    method: 'get',
+    params
+  });
+}
+/** 查询已结束的流程实例列表 */
+export function fetchGetFinishedProcessInstanceList(params: Api.Workflow.ProcessInstanceSearchParams) {
+  return request<Api.Workflow.ProcessInstanceList>({
+    url: '/workflow/instance/pageByFinish',
+    method: 'get',
+    params
+  });
+}
+
+/** 按照实例id删除流程实例 */
+export function fetchBatchDeleteProcessInstance(instanceIds: CommonType.IdType[]) {
+  return request<boolean>({
+    url: `/workflow/deleteByInstanceIds/${instanceIds.join(',')}`,
+    method: 'delete'
+  });
+}

src/typings/api/workflow.api.d.ts

@@ -86,5 +86,75 @@ declare namespace Api {
 
     /** definition list */
     type DefinitionList = Api.Common.PaginatingQueryRecord<Definition>;
+
+    /** 节点类型 */
+    type WorkflowNodeType = 0 | 1 | 2 | 3 | 4;
+
+    /** 流程激活状态 */
+    type WorkflowActivityStatus = 0 | 1;
+
+    /** 流程实例 */
+    type ProcessInstance = Common.CommonRecord<{
+      /** 主键 */
+      id: CommonType.IdType;
+      /** 租户编号 */
+      tenantId: CommonType.IdType;
+      /** 分类ID */
+      category: CommonType.IdType;
+      /** 分类名称 */
+      categoryName: string;
+      /** 流程定义ID */
+      definitionId: CommonType.IdType;
+      /** 流程定义名称 */
+      flowName: string;
+      /** 流程定义编码 */
+      flowCode: string;
+      /** 业务ID */
+      businessId: CommonType.IdType;
+      /** 节点类型 */
+      nodeType: WorkflowNodeType;
+      /** 节点编码 */
+      nodeCode: string;
+      /** 节点名称 */
+      nodeName: string;
+      /** 变量 */
+      variable: string;
+      /** 流程状态 */
+      flowStatus: string;
+      /** 流程状态名称 */
+      flowStatusName: string;
+      /** 流程激活状态 */
+      activityStatus: WorkflowActivityStatus;
+      /** 审批表单是否自定义 */
+      formCustom: Api.Common.YesOrNoStatus;
+      /** 审批表单路径 */
+      formPath: string;
+      /** 扩展字段 */
+      ext: string;
+      /** 流程定义版本 */
+      version: string;
+      /** 创建者 */
+      createBy: string;
+      /** 创建者名称 */
+      createByName: string;
+      /** 创建时间 */
+      createTime: string;
+
+      /** 更新时间 */
+      updateTime: string;
+      /** 删除标志 */
+      delFlag: number;
+    }>;
+
+    /** 流程实例搜索参数 */
+    type ProcessInstanceSearchParams = CommonType.RecordNullable<
+      Pick<ProcessInstance, 'flowName' | 'flowCode' | 'businessId' | 'category' | 'nodeName'> &
+        Api.Common.CommonSearchParams & {
+          startUserId: CommonType.IdType;
+          createByIds: CommonType.IdType[];
+        }
+    >;
+    /** 流程实例列表 */
+    type ProcessInstanceList = Common.PaginatingQueryRecord<ProcessInstance>;
   }
 }

src/typings/elegant-router.d.ts

@@ -56,6 +56,7 @@ declare module "@elegant-router/types" {
     "workflow": "/workflow";
     "workflow_category": "/workflow/category";
     "workflow_process-definition": "/workflow/process-definition";
+    "workflow_process-instance": "/workflow/process-instance";
   };
 
   /**
@@ -151,6 +152,7 @@ declare module "@elegant-router/types" {
     | "tool_gen"
     | "workflow_category"
     | "workflow_process-definition"
+    | "workflow_process-instance"
   >;
 
   /**

src/views/workflow/process-definition/index.vue

@@ -258,7 +258,7 @@ function handleResetTreeData() {
   getTreeData();
 }
 
-const expandedKeys = ref<CommonType.IdType[]>([100]);
+const expandedKeys = ref<CommonType.IdType[]>(['100']);
 
 const selectable = computed(() => {
   return !loading.value;

src/views/workflow/process-instance/index.vue

@@ -0,0 +1,407 @@
+<script setup lang="tsx">
+import { computed, ref, watch } from 'vue';
+import { NButton, NDivider, NEmpty, NInput, NRadioButton, NRadioGroup, NSpin, NTag } from 'naive-ui';
+import { workflowActivityStatusRecord } from '@/constants/workflow';
+import { fetchGetCategoryTree } from '@/service/api/workflow/category';
+import {
+  fetchBatchDeleteProcessInstance,
+  fetchGetFinishProcessInstanceList,
+  fetchGetRunningProcessInstanceList
+} from '@/service/api/workflow/instance';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import useLoading from '@/hooks/common/loading';
+import DictTag from '@/components/custom/dict-tag.vue';
+import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import ProcessInstanceSearch from './modules/process-instance-search.vue';
+
+interface RunningStatusOption {
+  label: string;
+  value: boolean;
+}
+
+defineOptions({
+  name: 'ProcessInstanceList'
+});
+
+useDict('wf_business_status');
+const appStore = useAppStore();
+
+const runningStatus = ref<boolean>(true);
+const runningStatusOptions = ref<RunningStatusOption[]>([
+  {
+    label: '运行中',
+    value: true
+  },
+  {
+    label: '已完成',
+    value: false
+  }
+]);
+
+// 基础列
+const baseColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>([
+  {
+    type: 'selection',
+    align: 'center',
+    width: 48
+  },
+  {
+    key: 'flowName',
+    title: '流程定义名称',
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'nodeName',
+    title: '任务名称',
+    align: 'center',
+    minWidth: 120
+  },
+  {
+    key: 'flowCode',
+    title: '流程定义编码',
+    align: 'center',
+    minWidth: 120
+  },
+  {
+    key: 'categoryName',
+    title: '流程分类',
+    align: 'center',
+    minWidth: 120
+  },
+  {
+    key: 'createByName',
+    title: '申请人',
+    align: 'center',
+    minWidth: 120
+  },
+  {
+    key: 'version',
+    title: '版本号',
+    align: 'center',
+    width: 80
+  },
+  {
+    key: 'activityStatus',
+    title: '状态',
+    align: 'center',
+    minWidth: 100,
+    render(row) {
+      return (
+        <NTag type={row.activityStatus === 0 ? 'warning' : 'success'}>
+          {workflowActivityStatusRecord[row.activityStatus]}
+        </NTag>
+      );
+    }
+  },
+  {
+    key: 'flowStatus',
+    title: '流程状态',
+    align: 'center',
+    minWidth: 100,
+    render(row) {
+      return <DictTag value={row.flowStatus} dictCode="wf_business_status" />;
+    }
+  },
+  {
+    key: 'createTime',
+    title: '启动时间',
+    align: 'center',
+    minWidth: 150
+  }
+]);
+
+// 完成列
+const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>([
+  {
+    key: 'updateTime',
+    title: '结束时间',
+    align: 'center',
+    minWidth: 150
+  }
+]);
+
+// 操作列
+const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>([
+  {
+    key: 'operate',
+    title: $t('common.operate'),
+    align: 'center',
+    fixed: 'right',
+    width: 150,
+    render: row => {
+      const showAll = runningStatus.value;
+
+      return (
+        <div class="flex-center gap-1px">
+          {showAll && (
+            <>
+              <ButtonIcon
+                text
+                type="error"
+                icon="material-symbols:cancel-outline-rounded"
+                tooltipContent="作废流程"
+                onClick={() => edit(row.id!)}
+              />
+              <NDivider vertical />
+              <ButtonIcon
+                text
+                type="error"
+                icon="material-symbols:delete-outline"
+                tooltipContent={$t('common.delete')}
+                popconfirmContent={$t('common.confirmDelete')}
+                onPositiveClick={() => handleDelete(row.id!)}
+              />
+              <NDivider vertical />
+            </>
+          )}
+          <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
+          <NDivider vertical />
+          <ButtonIcon text type="info" icon="material-symbols:variable-insert" tooltipContent="流程变量" />
+        </div>
+      );
+    }
+  }
+]);
+
+const {
+  columns,
+  columnChecks,
+  reloadColumns,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams,
+  updateApiFn
+} = useTable({
+  apiFn: fetchGetRunningProcessInstanceList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    category: null,
+    flowName: null,
+    flowCode: null,
+    nodeName: null,
+    createByIds: null
+  },
+  columns: () =>
+    runningStatus.value
+      ? [...baseColumns.value, ...operateColumns.value]
+      : [...baseColumns.value, ...finishColumns.value, ...operateColumns.value]
+});
+
+const { handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
+// 监听运行状态变化
+watch(runningStatus, async () => {
+  const newApiFn = runningStatus.value ? fetchGetRunningProcessInstanceList : fetchGetFinishProcessInstanceList;
+  updateApiFn(newApiFn);
+  reloadColumns();
+  await getDataByPage();
+});
+
+const { loading: treeLoading, startLoading: startTreeLoading, endLoading: endTreeLoading } = useLoading();
+const categoryPattern = ref<string>();
+const categoryData = ref<Api.Common.CommonTreeRecord>([]);
+const selectedKeys = ref<string[]>([]);
+const expandedKeys = ref<CommonType.IdType[]>(['100']);
+
+const selectable = computed(() => {
+  return !loading.value;
+});
+
+async function getTreeData() {
+  startTreeLoading();
+  const { data: tree, error } = await fetchGetCategoryTree();
+  if (!error) {
+    categoryData.value = tree;
+  }
+  endTreeLoading();
+}
+
+getTreeData();
+
+function handleClickTree(keys: string[]) {
+  searchParams.category = keys.length ? keys[0] : null;
+  checkedRowKeys.value = [];
+  getDataByPage();
+}
+
+function handleResetTreeData() {
+  categoryPattern.value = undefined;
+  getTreeData();
+}
+
+function handleResetSearch() {
+  resetSearchParams();
+  selectedKeys.value = [];
+}
+
+async function handleBatchDelete() {
+  // request
+  const { error } = await fetchBatchDeleteProcessInstance(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+async function handleDelete(instanceId: CommonType.IdType) {
+  // request
+  const { error } = await fetchBatchDeleteProcessInstance([instanceId]);
+  if (error) return;
+  onDeleted();
+}
+
+async function edit(instanceId: CommonType.IdType) {
+  handleEdit('id', instanceId);
+}
+</script>
+
+<template>
+  <TableSiderLayout sider-title="流程分类列表">
+    <template #header-extra>
+      <NButton size="small" text class="h-18px" @click.stop="() => handleResetTreeData()">
+        <template #icon>
+          <SvgIcon icon="ic:round-refresh" />
+        </template>
+      </NButton>
+    </template>
+    <template #sider>
+      <NInput v-model:value="categoryPattern" clearable :placeholder="$t('common.keywordSearch')" />
+      <NSpin class="category-tree" :show="treeLoading">
+        <NTree
+          v-model:selected-keys="selectedKeys"
+          v-model:expanded-keys="expandedKeys"
+          block-node
+          show-line
+          :data="categoryData as []"
+          :show-irrelevant-nodes="false"
+          :pattern="categoryPattern"
+          class="infinite-scroll h-full min-h-200px py-3"
+          key-field="id"
+          label-field="label"
+          virtual-scroll
+          :selectable="selectable"
+          @update:selected-keys="handleClickTree"
+        >
+          <template #empty>
+            <NEmpty description="暂无分类信息" class="h-full min-h-200px justify-center" />
+          </template>
+        </NTree>
+      </NSpin>
+    </template>
+    <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
+      <ProcessInstanceSearch v-model:model="searchParams" @reset="handleResetSearch" @search="getDataByPage" />
+      <NCard :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+        <template #header>
+          <NSpace>
+            <NRadioGroup v-model:value="runningStatus" on-up size="small">
+              <NRadioButton
+                v-for="(status, index) in runningStatusOptions"
+                :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="false"
+            :show-delete="true"
+            :show-export="false"
+            @delete="handleBatchDelete"
+            @refresh="getData"
+          >
+            <template #prefix></template>
+          </TableHeaderOperation>
+        </template>
+        <NDataTable
+          v-model:checked-row-keys="checkedRowKeys"
+          :columns="columns"
+          :data="data"
+          size="small"
+          :flex-height="!appStore.isMobile"
+          :scroll-x="1078"
+          :loading="loading"
+          remote
+          :row-key="row => row.id"
+          :pagination="mobilePagination"
+          class="sm:h-full"
+        />
+      </NCard>
+    </div>
+  </TableSiderLayout>
+</template>
+
+<style scoped lang="scss">
+.category-tree {
+  .n-button {
+    --n-padding: 8px !important;
+  }
+
+  :deep(.n-tree__empty) {
+    height: 100%;
+    justify-content: center;
+  }
+
+  :deep(.n-spin-content) {
+    height: 100%;
+  }
+
+  :deep(.infinite-scroll) {
+    height: calc(100vh - 228px - var(--calc-footer-height, 0px)) !important;
+    max-height: calc(100vh - 228px - var(--calc-footer-height, 0px)) !important;
+  }
+
+  @media screen and (max-width: 1024px) {
+    :deep(.infinite-scroll) {
+      height: calc(100vh - 227px - var(--calc-footer-height, 0px)) !important;
+      max-height: calc(100vh - 227px - var(--calc-footer-height, 0px)) !important;
+    }
+  }
+
+  :deep(.n-tree-node) {
+    height: 25px;
+  }
+
+  :deep(.n-tree-node-switcher) {
+    height: 25px;
+  }
+
+  :deep(.n-tree-node-switcher__icon) {
+    font-size: 16px !important;
+    height: 16px !important;
+    width: 16px !important;
+  }
+}
+
+:deep(.n-data-table-wrapper),
+:deep(.n-data-table-base-table),
+:deep(.n-data-table-base-table-body) {
+  height: 100%;
+}
+
+@media screen and (max-width: 800px) {
+  :deep(.n-data-table-base-table-body) {
+    max-height: calc(100vh - 400px - var(--calc-footer-height, 0px));
+  }
+}
+
+@media screen and (max-width: 802px) {
+  :deep(.n-data-table-base-table-body) {
+    max-height: calc(100vh - 473px - var(--calc-footer-height, 0px));
+  }
+}
+
+:deep(.n-card-header__main) {
+  min-width: 69px !important;
+}
+</style>

src/views/workflow/process-instance/modules/process-instance-search.vue

@@ -0,0 +1,63 @@
+<script setup lang="tsx">
+import { useNaiveForm } from '@/hooks/common/form';
+defineOptions({
+  name: 'WorkflowProcessInstanceSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const model = defineModel<Api.Workflow.ProcessInstanceSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="100">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="6 s:12 m:6" label="任务名称" path="nodeName" class="pr-24px">
+              <NInput v-model:value="model.nodeName" placeholder="请输入任务名称" />
+            </NFormItemGi>
+            <NFormItemGi span="6 s:12 m:6" label="流程定义名称" path="bucketName" class="pr-24px">
+              <NInput v-model:value="model.flowName" placeholder="请输入流程定义名称" />
+            </NFormItemGi>
+            <NFormItemGi span="6 s:12 m:6" label="流程定义编码" path="flowCode" class="pr-24px">
+              <NInput v-model:value="model.flowCode" placeholder="流程定义编码" />
+            </NFormItemGi>
+            <NFormItemGi span="6" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>