feat：【antd】bpm category 的代码风格统一

apps/web-antd/src/api/bpm/category/index.ts

@@ -10,7 +10,7 @@ export namespace BpmCategoryApi {
     code: string;
     status: number;
     description?: string;
-    sort: number; // 分类排序
+    sort: number;
   }
 }
 

apps/web-antd/src/views/bpm/category/data.ts

@@ -68,6 +68,21 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 重命名的表单 */
+export function useRenameFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -143,6 +158,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
+    {
+      field: 'sort',
+      title: '分类排序',
+      minWidth: 100,
+    },
     {
       field: 'createTime',
       title: '创建时间',

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

@@ -36,16 +36,14 @@ function handleEdit(row: BpmCategoryApi.Category) {
 /** 删除流程分类 */
 async function handleDelete(row: BpmCategoryApi.Category) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.code]),
+    content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
     await deleteCategory(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.code]),
-    });
     handleRefresh();
-  } catch {
+  } finally {
     hideLoading();
   }
 }
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,

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

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -73,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-antd/src/views/bpm/category/modules/rename-form.vue

@@ -11,50 +11,36 @@ import { useVbenForm } from '#/adapter/form';
 import { getCategory, updateCategory } from '#/api/bpm/category';
 import { $t } from '#/locales';
 
+import { useRenameFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 const formData = ref<BpmCategoryApi.Category>();
 
-// 定义表单结构
-const formSchema = [
-  {
-    fieldName: 'name',
-    label: '分类名',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入分类名',
-    },
-    rules: 'required',
-  },
-];
-
-// 创建表单
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
-  schema: formSchema,
+  schema: useRenameFormSchema(),
   showDefaultActions: false,
 });
 
-// 创建模态窗
 const [Modal, modalApi] = useVbenModal({
-  // 保存按钮回调
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     modalApi.lock();
-
+    // 提交表单
-    // 提交表单，只更新流程分类名
-    const formValues = await formApi.getValues();
     const data = {
-      id: formData.value?.id,
+      ...formData.value,
-      name: formValues.name, // 只更新流程分类名
+      ...(await formApi.getValues()),
-      code: formData.value?.code,
-      status: formData.value?.status,
-      description: formData.value?.description,
-      sort: formData.value?.sort,
     } as BpmCategoryApi.Category;
-
     try {
       await updateCategory(data);
       // 关闭并提示
@@ -65,29 +51,21 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-
-  // 打开/关闭弹窗回调
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     const data = modalApi.getData<BpmCategoryApi.Category>();
-
     if (!data || !data.id) {
       return;
     }
-
     modalApi.lock();
     try {
-      // 获取流程分类数据
       formData.value = await getCategory(data.id);
-      // 仅设置 name 字段
+      // 设置到 values
-      await formApi.setValues({
+      await formApi.setValues(formData.value);
-        name: formData.value.name,
-      });
     } finally {
       modalApi.unlock();
     }
@@ -96,7 +74,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal title="重命名流程分类">
+  <Modal title="重命名流程分类" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -70,7 +70,7 @@ const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.Model[]>([]);
 const modelList = ref<BpmModelApi.Model[]>([]);
 // 根据是否为第一个分类, 来设置初始展开状态
-const isExpand = ref(!!props.isFirst);
+const isExpand = ref(props.isFirst);
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {