@aplus-frontend/ui 0.0.12 → 0.0.13

package/es/src/editable-table/interface.d.ts

@@ -1,6 +1,8 @@
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
 import { ApTableValueFields, ValueEnum } from '../ap-table';
-import { InternalNamePath, NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
+import { NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
+import { DataIndex } from 'ant-design-vue/es/vc-table/interface';
+import { FormItemProps } from 'ant-design-vue';
 
 export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'text', RecordType = any> = Omit<ColumnType<RecordType>, 'children'> & {
     /**
@@ -21,6 +23,7 @@ export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'tex
     valueEnum?: ValueEnum;
     /**
      * 自定义表单
+     * @deprecated 未实现，请使用`customRender`
      */
     customRenderFormItem?: (config: EditableColumnType<ValueType, RecordType>) => any;
     /**
@@ -45,9 +48,13 @@ export type EditableTableProps<RecordType = any> = Omit<TableProps<RecordType>,
      */
     columns?: EditableColumnType<any, RecordType>[];
     /**
-     * 同dataSource，传入的数组数据将作为表单的初始数据
+     * 表格数据v-model
      */
     value?: RecordType[];
+    /**
+     * 表格数据默认值（只生效一次，如果是异步数据，请使用`v-model`）
+     */
+    defaultValue?: RecordType[];
     'onUpdate:value'?: (value: RecordType[]) => void;
     /**
      * 数据修改时触发onChange（也包含数据的删除）
@@ -60,14 +67,72 @@ export type EditableTableProps<RecordType = any> = Omit<TableProps<RecordType>,
      */
     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: string;
+    /**
+     * 额外的表单项配置属性
+     */
+    formItem?: Partial<Omit<FormItemProps, 'name' | 'label'>>;
 };
-export type EditableTableExpose<ModelType = any> = {
+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;
-    getFieldsValue: (nameList?: true | InternalNamePath[]) => Partial<ModelType> | undefined;
-    add: (defaultValue?: any) => void;
+    /**
+     * 添加一行数据
+     * @param defaultValue
+     * @returns
+     */
+    add: (defaultValue?: Partial<RecordType>) => void;
+    /**
+     * 删除一行数据
+     * @param index
+     * @returns
+     */
     remove: (index: number) => void;
+    /**
+     * 获取所有行的数据
+     * @returns
+     */
+    getRowsData: () => RecordType[];
+    /**
+     * 获取指定行的数据
+     * @returns
+     */
+    getRowData: (index: number) => RecordType | undefined;
+    /**
+     * 设置表格行数据（数据会进行浅层合并）
+     * @param index
+     * @param data
+     * @returns
+     */
+    setRowData: (index: number, data: Partial<RecordType>) => void;
 };
+/**
+ * 可编辑表格作为表单项暴露的实例
+ * @description 作为Form表单使用时不再暴露表单相关的API
+ */
+export type EditableTableFormItemExpose<ModelType = any, RecordType = any> = Omit<EditableTableExpose<ModelType, RecordType>, 'resetFields' | 'validateFields'>;

package/es/src/editable-table/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/editable-table/style/index.css

@@ -5,7 +5,42 @@
 .aplus-editable-table .ant-form-item {
   margin-bottom: 20px;
 }
+.aplus-editable-table .ant-form-item-explain-error {
+  line-height: 20px;
+}
 .aplus-editable-table__header-cell--required {
   color: #FF4D4F;
   padding-right: 2px;
 }
+.aplus-editable-table .ant-pagination {
+  margin-bottom: 0 !important;
+}
+.aplus-editable-table .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}
+.aplus-editable-table tr > th.ant-table-cell {
+  background-color: #F2F6F9;
+  border-bottom-color: #E9EDF3;
+}
+.aplus-editable-table tr > th.ant-table-cell::before {
+  display: none;
+}
+.aplus-editable-table tr > td.ant-table-cell {
+  border-top-color: #E9EDF3;
+}
+.aplus-editable-table-admin .ant-pagination {
+  margin-bottom: 0 !important;
+}
+.aplus-editable-table-admin .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}
+.aplus-editable-table-admin tr > th.ant-table-cell {
+  background-color: #FAFAFA;
+  border-bottom-color: #E9E9E9;
+}
+.aplus-editable-table-admin tr > th.ant-table-cell::before {
+  display: none;
+}
+.aplus-editable-table-admin tr > td.ant-table-cell {
+  border-top-color: #E9E9E9;
+}

package/es/src/editable-table/utils.mjs

@@ -0,0 +1,10 @@
+import { apTableFormItemMap as o } from "../ap-table/constants.mjs";
+function r(e) {
+  const n = o[e];
+  return n || console.warn(
+    `${e} can not render because of no default renderer, use customRender instead.`
+  ), n;
+}
+export {
+  r as getEditableComponent
+};

package/es/src/index.d.ts

@@ -26,4 +26,6 @@ export * from './ap-tag';
 export * from './ap-layout';
 export * from './ap-upload';
 export * from './ap-download';
+export * from './business';
 export * from './ap-table';
+export * from './editable-table';