@aplus-frontend/ui
Version:
190 lines (189 loc) • 6.72 kB
TypeScript
import { ColumnType, TableProps } from '@aplus-frontend/antdv/es/table';
import { ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, FieldPropsType, ValueEnum } from '../ap-table';
import { NamePath, ValidateOptions } from '@aplus-frontend/antdv/es/form/interface';
import { DataIndex } from '@aplus-frontend/antdv/es/vc-table/interface';
import { VNode } from 'vue';
import { EllipsisConfig } from '@aplus-frontend/antdv/es/typography/Base';
import { StandardBehaviorOptions } from '../../node_modules/scroll-into-view-if-needed';
import { Recordable } from '../type';
import { ApFormItemProps } from '../ap-form';
import { Key } from '@aplus-frontend/antdv/es/_util/type';
export type EditableColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ColumnType<RecordType>, 'children' | 'customRender' | 'ellipsis'> & {
children?: EditableColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
/**
* 在title之后展示一个icon并触发tooltip
*/
tooltip?: any;
/**
* 是否可以复制（不可编辑模式下可用）
*/
copyable?: boolean;
/**
* 是否省略自动溢出，自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等
*/
ellipsis?: boolean | EllipsisConfig;
/**
* 是否渲染必填标记（只渲染标记不生成校验规则）
*/
markRequired?: boolean;
/**
* 是否可编辑
*/
editable?: boolean | ((text: any, record: RecordType, index: number) => boolean);
/**
* 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select等组件的选项）
*/
valueEnum?: ValueEnum;
/**
* 自定义表单，适用于内置`valueType`不满足的情况下使用
*/
customRenderFormItem?: (config: EditableColumnType<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: ColumnType<RecordType>;
editable?: boolean;
originalNode?: VNode;
}) => any;
} : never;
export type EditableTableProps<RecordType = any> = Omit<TableProps<RecordType>, 'columns' | 'dataSource' | 'onChange'> & {
/**
* 列配置
*/
columns?: EditableColumnType<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 EditableTableFormItemProps<RecordType = any> = Omit<EditableTableProps<RecordType>, 'name'> & {
label?: string;
/**
* FormItem的name
*/
name: NamePath;
/**
* 额外的表单项配置属性
*/
formItem?: Partial<Omit<ApFormItemProps, 'name' | 'label'>>;
};
export type EditableTableExpose<ModelType = any, RecordType = any> = {
/**
* 重设可编辑表格数据
* @param name
* @returns
*/
resetFields: (name?: NamePath) => void;
/**
* 作为单独的表单使用时，校验表格数据
* @param nameList
* @param options
* @returns
*/
validateFields: (nameList?: NamePath[] | string, options?: ValidateOptions) => Promise<Partial<ModelType>> | undefined;
/**
* 添加单条数据
* @param defaultValue 默认值，如果需要设置`insertIndex`，可以设置`defaultValue`为`{}`
* @param insertIndex 数据插入的位置
*/
add: (defaultValue?: Partial<RecordType>, insertIndex?: number) => void;
/**
* 添加多条数据
* @param list 添加的条数或数据
* @param insetIn 插入的位置（前/后）
*/
addMultiple: (list: number | Partial<RecordType>[], insetIn?: 'prefix' | 'suffix') => void;
/**
* 删除一行数据
* @param index
* @returns
*/
remove: (index: number | number[]) => void;
/**
* 通过key删除数据
* @param key
* @returns
*/
removeByKey: (key: Key | Key[]) => void;
/**
* 清空所有数据
* @returns
*/
clear: () => void;
/**
* 获取所有行的数据
* @returns
*/
getRowsData: () => RecordType[];
/**
* 获取指定行的数据
* @returns
*/
getRowData: (index: number) => RecordType | undefined;
/**
* 设置表格行数据
* @param index
* @param data
* @param merge 是否进行数据的浅层合并（默认为true）
* @returns
*/
setRowData: (index: number, data: Partial<RecordType>, merge?: boolean) => void;
/**
* 滚动到表格的某行
* @param index
* @param options
* @returns
*/
scrollTo: (index: number | 'end', options?: StandardBehaviorOptions) => void;
/**
* 设置表格数据
* @param nextTableData
* @returns
*/
setTableData: (nextTableData: RecordType[]) => void;
};
/**
* 可编辑表格作为表单项暴露的实例
* @description 作为Form表单使用时不再暴露表单相关的API
*/
export type EditableTableFormItemExpose<ModelType = any, RecordType = any> = Omit<EditableTableExpose<ModelType, RecordType>, 'resetFields' | 'validateFields'>;