!137 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !137 from Jason/dev

apps/web-antd/src/router/routes/modules/bpm.ts

@@ -86,6 +86,18 @@ const routes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: 'manager/definition',
+        component: () => import('#/views/bpm/model/definition/index.vue'),
+        name: 'BpmProcessDefinition',
+        meta: {
+          title: '流程定义',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-modeler',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
     ],
   },
 ];

apps/web-antd/src/views/bpm/model/definition/data.ts

@@ -0,0 +1,65 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinitionVO>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '定义编号',
+      minWidth: 250,
+    },
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 150,
+    },
+    {
+      field: 'icon',
+      title: '流程图标',
+      minWidth: 100,
+      slots: { default: 'icon' },
+    },
+    {
+      field: 'startUsers',
+      title: '可见范围',
+      minWidth: 100,
+      slots: { default: 'startUsers' },
+    },
+    {
+      field: 'modelType',
+      title: '流程类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_MODEL_TYPE },
+      },
+    },
+    {
+      field: 'formType',
+      title: '表单信息',
+      minWidth: 150,
+      slots: { default: 'formInfo' },
+    },
+    {
+      field: 'version',
+      title: '流程版本',
+      minWidth: 80,
+      slots: { default: 'version' },
+    },
+    {
+      field: 'deploymentTime',
+      title: '部署时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-antd/src/views/bpm/model/definition/index.vue

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, Tag, Tooltip } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinitionPage } from '#/api/bpm/definition';
+import { DocAlert } from '#/components/doc-alert';
+import { BpmModelFormType } from '#/utils/constants';
+
+// 导入 FormCreate 表单详情
+import FormCreateDetail from '../../form/modules/detail.vue';
+import { useGridColumns } from './data';
+
+defineOptions({ name: 'BpmProcessDefinition' });
+
+const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
+  connectedComponent: FormCreateDetail,
+  destroyOnClose: true,
+});
+
+/** 查看表单详情 */
+function handleFormDetail(row: any) {
+  if (row.formType === BpmModelFormType.NORMAL) {
+    const data = {
+      id: row.formId,
+    };
+    formCreateDetailModalApi.setData(data).open();
+  } else {
+    // TODO 待实现
+    console.warn('业务表单待实现', row);
+  }
+}
+
+const router = useRouter();
+/** 恢复流程模型 */
+async function openModelForm(id?: number) {
+  await router.push({
+    name: 'BpmModelUpdate',
+    params: { id, type: 'definition' },
+  });
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const route = useRoute();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const params = {
+            pageNo: page?.currentPage,
+            pageSize: page?.pageSize,
+            key: route.query.key,
+          };
+          return await getProcessDefinitionPage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 初始化 */
+onMounted(() => {
+  onRefresh();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+    <Grid table-title="流程定义列表">
+      <template #icon="{ row }">
+        <Image
+          v-if="row.icon"
+          :src="row.icon"
+          :width="24"
+          :height="24"
+          class="rounded"
+        />
+        <span v-else> 无图标 </span>
+      </template>
+      <template #startUsers="{ row }">
+        <template v-if="!row.startUsers?.length">全部可见</template>
+        <template v-else-if="row.startUsers.length === 1">
+          {{ row.startUsers[0].nickname }}
+        </template>
+        <template v-else>
+          <Tooltip
+            placement="top"
+            :title="row.startUsers.map((user: any) => user.nickname).join(',')"
+          >
+            {{ row.startUsers[0].nickname }}等
+            {{ row.startUsers.length }} 人可见
+          </Tooltip>
+        </template>
+      </template>
+      <template #formInfo="{ row }">
+        <Button
+          v-if="row.formType === BpmModelFormType.NORMAL"
+          type="link"
+          @click="handleFormDetail(row)"
+        >
+          <span>{{ row.formName }}</span>
+        </Button>
+        <Button
+          v-else-if="row.formType === BpmModelFormType.CUSTOM"
+          type="link"
+          @click="handleFormDetail(row)"
+        >
+          <span>{{ row.formCustomCreatePath }}</span>
+        </Button>
+        <span v-else>暂无表单</span>
+      </template>
+      <template #version="{ row }">
+        <Tag>v{{ row.version }}</Tag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '恢复',
+              type: 'link',
+              auth: ['bpm:model:update'],
+              onClick: openModelForm.bind(null, row.id),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <FormCreateDetailModal />
+  </Page>
+</template>

apps/web-antd/src/views/bpm/model/index.vue

@@ -178,13 +178,13 @@ async function handleCategorySortSubmit() {
           <template #overlay>
             <Menu @click="(e) => handleCommand(e.key as string)">
               <Menu.Item key="handleCategoryAdd">
-                <div class="flex items-center">
+                <div class="flex items-center gap-1">
                   <IconifyIcon icon="lucide:plus" />
                   新建分类
                 </div>
               </Menu.Item>
               <Menu.Item key="handleCategorySort">
-                <div class="flex items-center">
+                <div class="flex items-center gap-1">
                   <IconifyIcon icon="lucide:align-start-vertical" />
                   分类排序
                 </div>

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -4,7 +4,7 @@ import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
 import { computed, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { confirm, useVbenModal } from '@vben/common-ui';
+import { confirm, EllipsisText, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
@@ -33,10 +33,12 @@ import {
 } from '#/api/bpm/model';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
-import { DICT_TYPE } from '#/utils';
+import { BpmModelFormType, DICT_TYPE } from '#/utils';
 
 // 导入重命名表单
 import CategoryRenameForm from '../../category/modules/rename-form.vue';
+// 导入 FormCreate 表单详情
+import FormCreateDetail from '../../form/modules/detail.vue';
 
 const props = defineProps<{
   categoryInfo: ModelCategoryInfo;
@@ -45,12 +47,18 @@ const props = defineProps<{
 
 const emit = defineEmits(['success']);
 
-// 重命名分类对话框
+/** 重命名分类对话框 */
 const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
   connectedComponent: CategoryRenameForm,
   destroyOnClose: true,
 });
 
+/** 流程表单详情对话框 */
+const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
+  connectedComponent: FormCreateDetail,
+  destroyOnClose: true,
+});
+
 const router = useRouter();
 // 获取当前登录用户Id
 const userStore = useUserStore();
@@ -73,8 +81,7 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
     align: 'left' as const,
-    ellipsis: true,
+    width: 250,
-    width: 230,
   },
   {
     title: '可见范围',
@@ -193,8 +200,15 @@ async function handleDeleteCategory() {
 
 /** 处理表单详情点击 */
 function handleFormDetail(row: any) {
-  // TODO 待实现
+  if (row.formType === BpmModelFormType.NORMAL) {
-  console.warn('待实现', row);
+    const data = {
+      id: row.formId,
+    };
+    formCreateDetailModalApi.setData(data).open();
+  } else {
+    // TODO 待实现
+    console.warn('业务表单待实现', row);
+  }
 }
 
 /** 判断是否是流程管理员 */
@@ -243,7 +257,7 @@ function handleModelCommand(command: string, row: any) {
       break;
     }
     case 'handleDefinitionList': {
-      console.warn('历史待实现', row);
+      handleDefinitionList(row);
       break;
     }
     case 'handleDelete': {
@@ -317,6 +331,16 @@ function handleDelete(row: any) {
   });
 }
 
+/** 跳转到指定流程定义列表 */
+function handleDefinitionList(row: any) {
+  router.push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key,
+    },
+  });
+}
+
 /** 更新 modelList 模型列表 */
 const updateModelList = useDebounceFn(() => {
   const newModelList = props.categoryInfo.modelList;
@@ -486,7 +510,9 @@ const handleRenameSuccess = () => {
                     class="mr-2.5 h-9 w-9 rounded"
                     alt="图标"
                   />
-                  {{ record.name }}
+                  <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
+                    {{ record.name }}
+                  </EllipsisText>
                 </div>
               </template>
 
@@ -543,7 +569,7 @@ const handleRenameSuccess = () => {
               <template v-else-if="column.key === 'formType'">
                 <!-- TODO BpmModelFormType.NORMAL -->
                 <Button
-                  v-if="record.formType === 10"
+                  v-if="record.formType === BpmModelFormType.NORMAL"
                   type="link"
                   @click="handleFormDetail(record)"
                 >
@@ -551,7 +577,7 @@ const handleRenameSuccess = () => {
                 </Button>
                 <!-- TODO BpmModelFormType.CUSTOM -->
                 <Button
-                  v-else-if="record.formType === 20"
+                  v-else-if="record.formType === BpmModelFormType.CUSTOM"
                   type="link"
                   @click="handleFormDetail(record)"
                 >
@@ -604,7 +630,6 @@ const handleRenameSuccess = () => {
                   </Button>
                   <Dropdown placement="bottomRight" arrow>
                     <Button type="link" size="small" class="px-1">更多</Button>
-                    <!-- TODO 待实现 -->
                     <template #overlay>
                       <Menu
                         @click="
@@ -613,12 +638,14 @@ const handleRenameSuccess = () => {
                       >
                         <Menu.Item key="handleCopy"> 复制 </Menu.Item>
                         <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
+
+                        <!-- TODO 待实现报表
                         <Menu.Item
                           key="handleReport"
                           :disabled="!isManagerUser(record)"
                         >
                           报表
-                        </Menu.Item>
+                        </Menu.Item> -->
                         <Menu.Item
                           key="handleChangeState"
                           v-if="record.processDefinition"
@@ -657,6 +684,8 @@ const handleRenameSuccess = () => {
 
     <!-- 重命名分类弹窗 -->
     <CategoryRenameModal @success="handleRenameSuccess" />
+    <!-- 流程表单详情对话框 -->
+    <FormCreateDetailModal />
   </div>
 </template>