@aplus-frontend/ui
Version:
100 lines (99 loc) • 4.27 kB
TypeScript
import { Recordable } from '../../type';
import { ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, FieldPropsType } from '../../ap-table/interface';
import { ApGridColumnType, ApGridProps } from '../interface';
import { VNode } from 'vue';
import { DataIndex } from '@aplus-frontend/antdv/es/vc-table/interface';
import { EditableTableExpose } from '../../editable-table';
import { NamePath } from '@aplus-frontend/antdv/es/form/interface';
import { ApFormItemProps } from '../../ap-form';
export type EditableGridColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ApGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>, 'children' | 'customRender' | 'hideInSearch' | 'tooltip' | 'customRenderFormItem' | 'fieldProps'> & {
children?: EditableGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
/**
* 在title之后展示一个icon并触发tooltip
*/
tooltip?: any;
/**
* 是否可编辑
*/
editable?: boolean | ((text: any, record: RecordType, index: number) => boolean);
/**
* 自定义表单，适用于内置`valueType`不满足的情况下使用
*/
customRenderFormItem?: (config: EditableGridColumnType<RecordType>, fieldProps: Recordable, editable: boolean, record: RecordType) => any;
/**
* 指定值类型（将会用于普通列和可编辑表格的渲染）
*/
valueType?: MergedValueType;
/**
* 值类型额外配置的参数（支持函数）
*/
fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>;
/**
* 自定义渲染，添加了`editable`以及`originalNode`
* @param opt
* @returns
*/
customRender?: (opt: {
value: any;
text: any;
record: RecordType;
index: number;
renderIndex: number;
column: ApGridColumnType<RecordType>;
editable?: boolean;
originalNode?: VNode;
}) => any;
/**
* 是否渲染必填标记（只渲染标记不生成校验规则）
*/
markRequired?: boolean;
} : never;
export type EditableGridProps<RecordType = any> = Omit<ApGridProps<RecordType>, 'columns' | 'dataSource' | 'onChange' | 'card' | 'request' | 'params' | 'defaultData' | 'searchForm' | 'beforeSearchSubmit' | 'manual'> & {
/**
* 列配置
*/
columns?: EditableGridColumnType<RecordType, any>[];
/**
* 表格数据v-model
*/
value?: RecordType[];
/**
* 表格数据默认值（只生效一次，如果是异步数据，请使用`v-model`）
*/
defaultValue?: RecordType[];
'onUpdate:value'?: (value: RecordType[]) => void;
/**
* 数据修改时触发onChange（也包含数据的删除）
* @param value
* @returns
*/
onChange?: (value: RecordType[]) => void;
/**
* 表格最大行数，超过行后将无法调用相关API新增
*/
maxLength?: number;
/**
* 设置可编辑表格的名字，如果不传，将会使用默认值
*/
name?: any;
/**
* 当字段值变更的时候触发（注意，向表单设置值并不会触发）
* @returns
*/
onFieldChange?: (rowIndex: number, fieldName: DataIndex, newValue: any) => void;
};
export type EditableGridExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableTableExpose<ModelType, RecordType>, 'scrollTo'> & {
scrollTo: (index: number | 'end') => void;
};
export type EditableGridFormItemExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableGridExpose<RecordType, ModelType>, 'resetFields' | 'validateFields'>;
export type EditableGridFormItemProps<RecordType = any> = Omit<EditableGridProps<RecordType>, 'name'> & {
label?: string;
/**
* FormItem的name
*/
name: NamePath;
/**
* 额外的表单项配置属性
*/
formItem?: Partial<Omit<ApFormItemProps, 'name' | 'label'>>;
};