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

This commit is contained in:
YunaiV
2025-10-20 19:59:32 +08:00
parent 1b869a1e3a
commit 2cd4bc127d
6 changed files with 50 additions and 46 deletions

View File

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

View File

@@ -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: '创建时间',

View File

@@ -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({
content: $t('ui.actionMessage.deleteSuccess', [row.code]),
});
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} catch {
} finally {
hideLoading();
}
}
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,

View File

@@ -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>

View File

@@ -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,
name: formValues.name, // 只更新流程分类名
code: formData.value?.code,
status: formData.value?.status,
description: formData.value?.description,
sort: formData.value?.sort,
...formData.value,
...(await formApi.getValues()),
} 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 字段
await formApi.setValues({
name: formData.value.name,
});
// 设置到 values
await formApi.setValues(formData.value);
} 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>

View File

@@ -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: {