mirror of
https://gitee.com/yudaocode/yudao-ui-admin-vben.git
synced 2025-12-30 10:32:25 +00:00
feat:【antd】bpm category 的代码风格统一
This commit is contained in:
@@ -10,7 +10,7 @@ export namespace BpmCategoryApi {
|
||||
code: string;
|
||||
status: number;
|
||||
description?: string;
|
||||
sort: number; // 分类排序
|
||||
sort: number;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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: '创建时间',
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user