feat(@vben/web-antd): vxe-table)新增表单验证功能
- 在 vxe-table.ts 中添加 createRequiredValidation函数 - 在 data.ts 中使用 createRequiredValidation 替代原有的 className 函数 - 在 vxe-table 插件中添加 validation 相关的工具函数 - 优化表格列的验证逻辑,提高代码复用性和可维护性pull/188/head
parent
5f56b14733
commit
c64be886b4
|
@ -7,6 +7,7 @@ import { IconifyIcon } from '@vben/icons';
|
|||
import { $te } from '@vben/locales';
|
||||
import {
|
||||
AsyncComponents,
|
||||
createRequiredValidation,
|
||||
setupVbenVxeTable,
|
||||
useVbenVxeGrid,
|
||||
} from '@vben/plugins/vxe-table';
|
||||
|
@ -354,7 +355,7 @@ setupVbenVxeTable({
|
|||
useVbenForm,
|
||||
});
|
||||
|
||||
export { useVbenVxeGrid };
|
||||
export { createRequiredValidation, useVbenVxeGrid };
|
||||
|
||||
const [VxeTable, VxeColumn, VxeToolbar] = AsyncComponents;
|
||||
export { VxeColumn, VxeTable, VxeToolbar };
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { createRequiredValidation } from '#/adapter/vxe-table';
|
||||
import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils';
|
||||
|
@ -108,22 +109,14 @@ export function useStockInItemTableColumns(
|
|||
title: '仓库名称',
|
||||
minWidth: 150,
|
||||
slots: { default: 'warehouseId' },
|
||||
className: ({ row }: { row: any }) => {
|
||||
return isValidating?.value && !row.warehouseId
|
||||
? 'required-field-error'
|
||||
: '';
|
||||
},
|
||||
className: createRequiredValidation(isValidating, 'warehouseId'),
|
||||
},
|
||||
{
|
||||
field: 'productId',
|
||||
title: '产品名称',
|
||||
minWidth: 200,
|
||||
slots: { default: 'productId' },
|
||||
className: ({ row }: { row: any }) => {
|
||||
return isValidating?.value && !row.productId
|
||||
? 'required-field-error'
|
||||
: '';
|
||||
},
|
||||
className: createRequiredValidation(isValidating, 'productId'),
|
||||
},
|
||||
{
|
||||
field: 'stockCount',
|
||||
|
@ -145,11 +138,7 @@ export function useStockInItemTableColumns(
|
|||
title: '数量',
|
||||
minWidth: 120,
|
||||
slots: { default: 'count' },
|
||||
className: ({ row }: { row: any }) => {
|
||||
return isValidating?.value && (!row.count || row.count <= 0)
|
||||
? 'required-field-error'
|
||||
: '';
|
||||
},
|
||||
className: createRequiredValidation(isValidating, 'count'),
|
||||
},
|
||||
{
|
||||
field: 'productPrice',
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
export { AsyncComponents, setupVbenVxeTable } from './init';
|
||||
export type { VxeTableGridOptions } from './types';
|
||||
export * from './use-vxe-grid';
|
||||
|
||||
export { default as VbenVxeGrid } from './use-vxe-grid.vue';
|
||||
|
||||
export * from './validation';
|
||||
export type {
|
||||
VxeGridListeners,
|
||||
VxeGridProps,
|
||||
|
|
|
@ -0,0 +1,61 @@
|
|||
/**
|
||||
* 创建验证类名的工具函数
|
||||
* @param isValidating 验证状态
|
||||
* @param fieldName 字段名
|
||||
* @param validationRules 验证规则,可以是字符串或自定义函数
|
||||
* @returns 返回 className 函数
|
||||
*/
|
||||
function createValidationClassName(
|
||||
isValidating: any,
|
||||
fieldName: string,
|
||||
validationRules: ((row: any) => boolean) | string,
|
||||
) {
|
||||
return ({ row }: { row: any }) => {
|
||||
if (!isValidating?.value) return '';
|
||||
|
||||
let isValid = true;
|
||||
if (typeof validationRules === 'string') {
|
||||
// 处理简单的验证规则
|
||||
if (validationRules === 'required') {
|
||||
isValid =
|
||||
fieldName === 'count'
|
||||
? row[fieldName] && row[fieldName] > 0
|
||||
: !!row[fieldName];
|
||||
}
|
||||
} else if (typeof validationRules === 'function') {
|
||||
// 处理自定义验证函数
|
||||
isValid = validationRules(row);
|
||||
}
|
||||
|
||||
return isValid ? '' : 'required-field-error';
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建必填字段验证
|
||||
* @param isValidating 验证状态
|
||||
* @param fieldName 字段名
|
||||
* @returns 返回 className 函数
|
||||
*/
|
||||
function createRequiredValidation(isValidating: any, fieldName: string) {
|
||||
return createValidationClassName(isValidating, fieldName, 'required');
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建自定义验证
|
||||
* @param isValidating 验证状态
|
||||
* @param validationFn 自定义验证函数
|
||||
* @returns 返回 className 函数
|
||||
*/
|
||||
function createCustomValidation(
|
||||
isValidating: any,
|
||||
validationFn: (row: any) => boolean,
|
||||
) {
|
||||
return createValidationClassName(isValidating, '', validationFn);
|
||||
}
|
||||
|
||||
export {
|
||||
createCustomValidation,
|
||||
createRequiredValidation,
|
||||
createValidationClassName,
|
||||
};
|
Loading…
Reference in New Issue