feat(@vben/web-antd): 验证样式

- 添加 isValidating 状态管理,用于控制验证过程
- 在表格列定义中增加验证错误样式
- 实现必填字段错误提示功能
- 优化表格渲染逻辑,确保验证错误及时显示
- 新增相关 CSS 样式,定义验证错误的视觉效果
This commit is contained in:
nehc
2025-08-02 21:21:51 +08:00
parent 9d80b9fc71
commit 5f56b14733
3 changed files with 67 additions and 2 deletions

View File

@@ -98,7 +98,9 @@ export function useFormSchema(): VbenFormSchema[] {
}
/** 入库产品清单表格列定义 */
export function useStockInItemTableColumns(): VxeTableGridOptions['columns'] {
export function useStockInItemTableColumns(
isValidating?: any,
): VxeTableGridOptions['columns'] {
return [
{ type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
{
@@ -106,12 +108,22 @@ export function useStockInItemTableColumns(): VxeTableGridOptions['columns'] {
title: '仓库名称',
minWidth: 150,
slots: { default: 'warehouseId' },
className: ({ row }: { row: any }) => {
return isValidating?.value && !row.warehouseId
? 'required-field-error'
: '';
},
},
{
field: 'productId',
title: '产品名称',
minWidth: 200,
slots: { default: 'productId' },
className: ({ row }: { row: any }) => {
return isValidating?.value && !row.productId
? 'required-field-error'
: '';
},
},
{
field: 'stockCount',
@@ -133,6 +145,11 @@ export function useStockInItemTableColumns(): VxeTableGridOptions['columns'] {
title: '数量',
minWidth: 120,
slots: { default: 'count' },
className: ({ row }: { row: any }) => {
return isValidating?.value && (!row.count || row.count <= 0)
? 'required-field-error'
: '';
},
},
{
field: 'productPrice',