chore: 流程定义(未完成)

apps/web-antd/src/components/table/index.ts

@@ -1 +1,2 @@
+export { default as OptionsTag } from './src/options-tag.vue';
 export { default as TableSwitch } from './src/table-switch.vue';

apps/web-antd/src/components/table/src/options-tag.vue

@@ -0,0 +1,21 @@
+<script setup lang="tsx">
+import { computed } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+defineOptions({ name: 'OptionsTag' });
+
+const props = defineProps<{
+  options: { color?: string; label: string; value: number | string }[];
+  value: number | string;
+}>();
+
+const found = computed(() =>
+  props.options.find((item) => item.value === props.value),
+);
+</script>
+
+<template>
+  <Tag v-if="found" :color="found.color">{{ found.label }}</Tag>
+  <span v-else>未知</span>
+</template>

apps/web-antd/src/views/workflow/processDefinition/constant.ts

@@ -0,0 +1,35 @@
+import { optionsToEnum } from '@vben/utils';
+
+export const activityStatusOptions = [
+  {
+    label: '激活',
+    value: 1,
+    color: 'success',
+    enumName: 'Active',
+  },
+  {
+    label: '挂起',
+    value: 0,
+    color: 'error',
+    enumName: 'Suspended',
+  },
+] as const;
+
+export const ActivityStatusEnum = optionsToEnum(activityStatusOptions);
+
+export const publishStatusOptions = [
+  {
+    label: '已发布',
+    value: 1,
+    color: 'success',
+    enumName: 'Published',
+  },
+  {
+    label: '未发布',
+    value: 0,
+    color: 'error',
+    enumName: 'Unpublished',
+  },
+] as const;
+
+export const PublishStatusEnum = optionsToEnum(publishStatusOptions);

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

@@ -1,10 +1,9 @@
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { DictEnum } from '@vben/constants';
-import { getPopupContainer } from '@vben/utils';
+import { type FormSchemaGetter } from '#/adapter/form';
+import { OptionsTag } from '#/components/table';
 
-import { type FormSchemaGetter, z } from '#/adapter/form';
-import { getDictOptions } from '#/utils/dict';
+import { activityStatusOptions, publishStatusOptions } from './constant';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -41,11 +40,30 @@ export const columns: VxeGridProps['columns'] = [
     field: 'activityStatus',
     title: '状态',
     minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        const cellValue = row.activityStatus;
+        return (
+          <OptionsTag
+            options={activityStatusOptions as any}
+            value={cellValue}
+          />
+        );
+      },
+    },
   },
   {
     field: 'isPublish',
     title: '发布状态',
     minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        const cellValue = row.isPublish;
+        return (
+          <OptionsTag options={publishStatusOptions as any} value={cellValue} />
+        );
+      },
+    },
   },
   {
     field: 'action',
@@ -53,121 +71,6 @@ export const columns: VxeGridProps['columns'] = [
     slots: { default: 'action' },
     title: '操作',
     resizable: false,
-    width: 180,
-  },
-];
-
-export const drawerSchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-    fieldName: 'userId',
-  },
-  {
-    component: 'Input',
-    fieldName: 'userName',
-    label: '用户账号',
-    rules: 'required',
-  },
-  {
-    component: 'InputPassword',
-    fieldName: 'password',
-    label: '用户密码',
-    rules: 'required',
-  },
-  {
-    component: 'Input',
-    fieldName: 'nickName',
-    label: '用户昵称',
-    rules: 'required',
-  },
-  {
-    component: 'TreeSelect',
-    // 在drawer里更新 这里不需要默认的componentProps
-    defaultValue: undefined,
-    fieldName: 'deptId',
-    label: '所属部门',
-    rules: 'selectRequired',
-  },
-  {
-    component: 'Input',
-    fieldName: 'phonenumber',
-    label: '手机号码',
-    defaultValue: undefined,
-    rules: z
-      .string()
-      .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
-      .optional()
-      .or(z.literal('')),
-  },
-  {
-    component: 'Input',
-    fieldName: 'email',
-    defaultValue: undefined,
-    label: '邮箱',
-    /**
-     * z.literal 是 Zod 中的一种类型，用于定义一个特定的字面量值。
-     * 它可以用于确保输入的值与指定的字面量完全匹配。
-     * 例如，你可以使用 z.literal 来确保某个字段的值只能是特定的字符串、数字、布尔值等。
-     * 即空字符串也可通过校验
-     */
-    rules: z.string().email('请输入正确的邮箱').optional().or(z.literal('')),
-  },
-  {
-    component: 'RadioGroup',
-    componentProps: {
-      buttonStyle: 'solid',
-      options: getDictOptions(DictEnum.SYS_USER_SEX),
-      optionType: 'button',
-    },
-    defaultValue: '0',
-    fieldName: 'sex',
-    formItemClass: 'col-span-2 lg:col-span-1',
-    label: '性别',
-  },
-  {
-    component: 'RadioGroup',
-    componentProps: {
-      buttonStyle: 'solid',
-      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
-      optionType: 'button',
-    },
-    defaultValue: '0',
-    fieldName: 'status',
-    formItemClass: 'col-span-2 lg:col-span-1',
-    label: '状态',
-  },
-  {
-    component: 'Select',
-    componentProps: {
-      getPopupContainer,
-      mode: 'multiple',
-      optionFilterProp: 'label',
-      optionLabelProp: 'label',
-      placeholder: '请先选择部门',
-    },
-    fieldName: 'postIds',
-    help: '选择部门后, 将自动加载该部门下所有的岗位',
-    label: '岗位',
-  },
-  {
-    component: 'Select',
-    componentProps: {
-      getPopupContainer,
-      mode: 'multiple',
-      optionFilterProp: 'title',
-      optionLabelProp: 'title',
-    },
-    fieldName: 'roleIds',
-    label: '角色',
-  },
-  {
-    component: 'Textarea',
-    fieldName: 'remark',
-    formItemClass: 'items-baseline',
-    label: '备注',
+    width: 360,
   },
 ];

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

@@ -4,21 +4,22 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { useAccess } from '@vben/access';
 import { Page, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { preferences } from '@vben/preferences';
 import { getVxePopupContainer } from '@vben/utils';
 
-import { Avatar, Modal, Popconfirm, Space } from 'ant-design-vue';
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import { vxeCheckboxChecked } from '#/adapter/vxe-table';
-import { userRemove, userStatusChange } from '#/api/system/user';
-import { workflowDefinitionList } from '#/api/workflow/definition';
-import { TableSwitch } from '#/components/table';
+import {
+  workflowDefinitionActive,
+  workflowDefinitionDelete,
+  workflowDefinitionList,
+} from '#/api/workflow/definition';
 
 import CategoryTree from './category-tree.vue';
+import { ActivityStatusEnum } from './constant';
 import { columns, querySchema } from './data';
 
 // 左边部门用
@@ -42,14 +43,6 @@ const formOptions: VbenFormProps = {
     formApi.setLatestSubmissionValues(formValues);
     await reload(formValues);
   },
-  // 日期选择格式化
-  fieldMappingTime: [
-    [
-      'createTime',
-      ['params[beginTime]', 'params[endTime]'],
-      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-    ],
-  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -86,7 +79,7 @@ const gridOptions: VxeGridProps = {
   rowConfig: {
     isHover: true,
     keyField: 'id',
-    height: 48,
+    height: 66,
   },
   id: 'workflow-definition-index',
 };
@@ -97,7 +90,7 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 });
 
 async function handleDelete(row: Recordable<any>) {
-  await userRemove(row.id);
+  await workflowDefinitionDelete(row.id);
   await tableApi.query();
 }
 
@@ -109,22 +102,29 @@ function handleMultiDelete() {
     okType: 'danger',
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
-      await userRemove(ids);
+      await workflowDefinitionDelete(ids);
       await tableApi.query();
     },
   });
 }
 
-const { hasAccessByCodes } = useAccess();
-
 const router = useRouter();
-function handlePreview(row: any) {
+function handleDesign(row: any) {
   console.log(row);
   router.push({
     path: '/workflow/designer',
     query: { definitionId: row.id, disabled: 'true' },
   });
 }
+
+/**
+ * 激活/挂起流程
+ * @param row row
+ */
+async function handleActive(row: any) {
+  await workflowDefinitionActive(row.id, row.activityStatus);
+  await tableApi.query();
+}
 </script>
 
 <template>
@@ -153,43 +153,46 @@ function handlePreview(row: any) {
             </a-button>
           </Space>
         </template>
-        <template #avatar="{ row }">
-          <!-- 可能要判断空字符串情况 所以没有使用?? -->
-          <Avatar :src="row.avatar || preferences.app.defaultAvatar" />
-        </template>
-        <template #status="{ row }">
-          <TableSwitch
-            v-model="row.status"
-            :api="() => userStatusChange(row)"
-            :disabled="
-              row.userId === 1 || !hasAccessByCodes(['system:user:edit'])
-            "
-            :reload="() => tableApi.query()"
-          />
-        </template>
         <template #action="{ row }">
-          <Space>
-            <ghost-button v-access:code="['system:user:edit']">
-              {{ $t('pages.common.edit') }}
-            </ghost-button>
-            <a-button size="small" type="link" @click="handlePreview(row)">
-              查看流程
-            </a-button>
-            <Popconfirm
-              :get-popup-container="getVxePopupContainer"
-              placement="left"
-              title="确认删除？"
-              @confirm="handleDelete(row)"
-            >
-              <ghost-button
-                danger
-                v-access:code="['system:user:remove']"
-                @click.stop=""
+          <div class="flex flex-col items-baseline gap-1">
+            <div>
+              <a-button
+                v-if="row.activityStatus === ActivityStatusEnum.Active"
+                size="small"
+                type="link"
+                @click="() => handleActive(row)"
               >
-                {{ $t('pages.common.delete') }}
-              </ghost-button>
-            </Popconfirm>
-          </Space>
+                挂起流程
+              </a-button>
+              <a-button
+                v-if="row.activityStatus === ActivityStatusEnum.Suspended"
+                size="small"
+                type="link"
+                @click="() => handleActive(row)"
+              >
+                激活流程
+              </a-button>
+              <a-button size="small" type="link"> 历史版本 </a-button>
+              <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"> 绑定业务 </a-button>
+              <a-button size="small" type="link" @click="handleDesign(row)">
+                查看流程
+              </a-button>
+              <a-button size="small" type="link"> 发布流程 </a-button>
+              <a-button size="small" type="link"> 复制流程 </a-button>
+            </div>
+          </div>
         </template>
       </BasicTable>
     </div>