@yibozhang/pro-table 0.0.4 → 0.0.5

package/fesm2015/yibozhang-pro-table.js

@@ -2113,59 +2113,75 @@ AntdFormService.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-/**
- * 数组型数据收集基础服务
- *
- * 功能：
- * 1. 支持通过 ngModel 绑定对应行的数据源
- * 2. 自动为数组数据添加 isEdit 和 uid 字段
- * 3. 支持每个字段的自定义校验方法，返回 'success' | 'warning' | 'error'
- * 4. 提供公共方法支持删除、新增、编辑等操作
- */
+/** 数组型数据收集基础服务 */
 class ArrayFormService {
     constructor() {
         this.formStore = {};
     }
-    /**
-     * 初始化数组数据
-     * 为现有数据添加 uid 和 isEdit 字段
-     *
-     * @param data 原始数据数组
-     * @param config 表单配置
-     * @returns 初始化后的数据数组
-     */
+    /** 深度克隆值 */
+    cloneValue(value) {
+        if (value === null || value === undefined) {
+            return value;
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => this.cloneValue(item));
+        }
+        if (typeof value === "object") {
+            const cloned = {};
+            for (const key of Object.keys(value)) {
+                cloned[key] = this.cloneValue(value[key]);
+            }
+            return cloned;
+        }
+        return value;
+    }
+    /** 比较两个值是否相等 */
+    isEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a === null || b === null)
+            return a === b;
+        if (a === undefined || b === undefined)
+            return a === b;
+        if (typeof a !== typeof b)
+            return false;
+        if (Array.isArray(a) && Array.isArray(b)) {
+            if (a.length !== b.length)
+                return false;
+            return a.every((item, index) => this.isEqual(item, b[index]));
+        }
+        if (typeof a === "object" && typeof b === "object") {
+            const keysA = Object.keys(a);
+            const keysB = Object.keys(b);
+            if (keysA.length !== keysB.length)
+                return false;
+            return keysA.every((key) => this.isEqual(a[key], b[key]));
+        }
+        return false;
+    }
+    /** 创建行的初始值快照 */
+    createRowSnapshot(row, fields) {
+        const snapshot = {};
+        fields.forEach((field) => {
+            snapshot[field.name] = this.cloneValue(row[field.name]);
+        });
+        return snapshot;
+    }
+    /** 初始化数组数据，添加 uid 和 isEdit 字段 */
     initializeData(data) {
         return data.map((item) => this.enrichRow(item));
     }
-    /**
-     * 为单行数据添加 uid 和 isEdit 字段
-     *
-     * @param row 原始行数据
-     * @returns 增强后的行数据
-     */
+    /** 为单行数据添加 uid 和 isEdit 字段 */
     enrichRow(row) {
-        return Object.assign(Object.assign({}, row), { uid: row.uid || v4(), isEdit: row.isEdit !== undefined ? row.isEdit : false });
+        return Object.assign(Object.assign({}, row), { uid: row.uid || v4(), isEdit: row.isEdit !== undefined ? row.isEdit : false, disabled: row.disabled !== undefined ? row.disabled : false });
     }
-    /**
-     * 新增一行数据
-     *
-     * @param data 数据数组引用
-     * @param defaultValues 默认值
-     * @returns 新增的行数据
-     */
+    /** 新增一行数据 */
     addRow(data, defaultValues) {
-        const newRow = Object.assign(Object.assign({}, defaultValues), { uid: v4(), isEdit: true, isAdd: true });
+        const newRow = Object.assign(Object.assign({}, defaultValues), { uid: v4(), isEdit: true, isAdd: true, disabled: false });
         data.push(newRow);
         return newRow;
     }
-    /**
-     * 校验单个字段
-     *
-     * @param row 行数据
-     * @param fieldName 字段名
-     * @param config 表单配置
-     * @returns 校验结果
-     */
+    /** 校验单个字段 */
     validateField(row, fieldName, config) {
         const fieldConfig = config.fields.find((f) => f.name === fieldName);
         if (!fieldConfig) {
@@ -2176,13 +2192,7 @@ class ArrayFormService {
         }
         return "";
     }
-    /**
-     * 校验整行数据
-     *
-     * @param row 行数据
-     * @param config 表单配置
-     * @returns 校验结果对象，key为字段名，value为校验结果
-     */
+    /** 校验整行数据 */
     validateRow(row, config) {
         const results = {};
         config.fields.forEach((fieldConfig) => {
@@ -2190,13 +2200,7 @@ class ArrayFormService {
         });
         return results;
     }
-    /**
-     * 校验整个数组
-     *
-     * @param data 数据数组
-     * @param config 表单配置
-     * @returns 校验结果对象，key为行的uid，value为该行的校验结果
-     */
+    /** 校验整个数组 */
     validateData(data, config) {
         const results = {};
         data.forEach((row) => {
@@ -2204,90 +2208,126 @@ class ArrayFormService {
         });
         return results;
     }
-    /**
-     * 注册表单到存储
-     * 如果表单已存在，则更新其配置
-     *
-     * @param formName 表单名称
-     * @param data 数据数组
-     * @param config 表单配置
-     */
+    /** 注册表单到存储 */
     registerForm(formName, data, config) {
+        const initializedData = this.initializeData(data);
+        // 记录初始值快照
+        const initialSnapshot = {};
+        initializedData.forEach((row) => {
+            initialSnapshot[row.uid] = this.createRowSnapshot(row, config.fields);
+        });
         this.formStore[formName] = {
-            data: this.initializeData(data),
+            data: initializedData,
             config,
             validationResults: {},
+            initialSnapshot,
+            editingSnapshot: {},
+            allTouched: false,
+            rowTouched: {},
         };
         // 如果配置了自动更新，立即更新一次
         this.autoUpdateArrayReference(formName);
     }
-    /**
-     * 从存储中获取表单
-     *
-     * @param formName 表单名称
-     * @returns 表单存储项或undefined
-     */
+    /** 从存储中获取表单 */
     getForm(formName) {
         return this.formStore[formName];
     }
-    /**
-     * 向表单添加行
-     *
-     * @param formName 表单名称
-     * @param defaultValues 默认值
-     * @returns 新增的行数据或undefined
-     */
+    /** 从存储中获取表单数据 */
+    getFormData(formName) {
+        const form = this.formStore[formName];
+        if (!form) {
+            return undefined;
+        }
+        return form.data.map((item) => {
+            delete item.isEdit;
+            delete item.isAdd;
+            delete item.uid;
+            return item;
+        });
+    }
+    /** 向表单添加行 */
     addRowToForm(formName, defaultValues) {
         const form = this.formStore[formName];
         if (!form) {
             return undefined;
         }
         const newRow = this.addRow(form.data, defaultValues);
+        // 为新行记录初始值快照
+        form.initialSnapshot[newRow.uid] = this.createRowSnapshot(newRow, form.config.fields);
         // 自动更新外部数组引用
         this.autoUpdateArrayReference(formName);
         return newRow;
     }
-    /**
-     * 校验表单
-     *
-     * @param formName 表单名称
-     * @returns 校验结果或undefined
-     */
+    /** 校验表单，自动标记所有字段为已触碰 */
     validateForm(formName) {
         const form = this.formStore[formName];
         if (!form) {
-            return undefined;
+            return true;
         }
+        // 标记所有字段为已触碰
+        form.allTouched = true;
         const results = this.validateData(form.data, form.config);
         form.validationResults = results;
-        return results;
+        // 检查是否有任何错误
+        for (const uid of Object.keys(results)) {
+            for (const fieldName of Object.keys(results[uid])) {
+                if (results[uid][fieldName]) {
+                    return false;
+                }
+            }
+        }
+        return true;
     }
-    /**
-     * 开启指定行的编辑模式
-     *
-     * @param row 行数据
-     */
-    enableEdit(row) {
+    /** 开启编辑模式，保存快照用于取消恢复 */
+    enableEdit(formName, row) {
+        const form = this.formStore[formName];
+        if (form && row.uid) {
+            // 保存编辑前的快照
+            form.editingSnapshot[row.uid] = this.createRowSnapshot(row, form.config.fields);
+        }
         row.isEdit = true;
     }
-    /**
-     * 关闭指定行的编辑模式
-     *
-     * @param row 行数据
-     */
-    disableEdit(row) {
+    /** 取消编辑，恢复到编辑前的数据 */
+    disableEdit(formName, row) {
+        const form = this.formStore[formName];
+        if (form && row.uid && form.editingSnapshot[row.uid]) {
+            // 恢复编辑前的数据
+            const snapshot = form.editingSnapshot[row.uid];
+            form.config.fields.forEach((field) => {
+                row[field.name] = this.cloneValue(snapshot[field.name]);
+            });
+            // 更新初始快照为恢复后的值，消除 touched 状态
+            form.initialSnapshot[row.uid] = this.cloneValue(snapshot);
+            // 清理编辑快照和 touched 状态
+            delete form.editingSnapshot[row.uid];
+            delete form.rowTouched[row.uid];
+            // 清理该行的校验结果
+            if (form.validationResults) {
+                delete form.validationResults[row.uid];
+            }
+        }
         row.isEdit = false;
     }
-    /**
-     * 从表单中删除指定行
-     *
-     * @param formName 表单名称
-     * @param row 行的uid
-     * @returns 是否删除成功
-     */
+    /** 确认编辑，保留修改后的数据 */
+    confirmEdit(formName, row) {
+        const form = this.formStore[formName];
+        if (form && row.uid) {
+            // 清理编辑快照（保留当前数据）
+            if (form.editingSnapshot[row.uid]) {
+                delete form.editingSnapshot[row.uid];
+            }
+            // 更新初始快照为当前值（用于后续 touched 检测）
+            form.initialSnapshot[row.uid] = this.createRowSnapshot(row, form.config.fields);
+            // 清除 touched 状态，基于新的 initialSnapshot 重新判断
+            delete form.rowTouched[row.uid];
+        }
+        row.isEdit = false;
+        row.isAdd = false;
+    }
+    /** 从表单中删除指定行 */
     deleteRowFromForm(formName, row) {
         const form = this.formStore[formName];
-        if (!form) {
+        if (!form || !row.uid) {
             return false;
         }
         const index = form.data.findIndex((item) => item.uid === row.uid);
@@ -2295,31 +2335,44 @@ class ArrayFormService {
             return false;
         }
         form.data.splice(index, 1);
-        if (form.validationResults && form.validationResults[row.uid]) {
+        // 清理该行的所有快照、touched 状态和校验结果
+        delete form.initialSnapshot[row.uid];
+        delete form.editingSnapshot[row.uid];
+        delete form.rowTouched[row.uid];
+        if (form.validationResults) {
             delete form.validationResults[row.uid];
         }
         // 自动更新外部数组引用
         this.autoUpdateArrayReference(formName);
         return true;
     }
-    /**
-     * 校验指定行的指定字段并返回校验结果
-     * 实时执行校验，用于模板中的实时校验显示
-     *
-     * @param formName 表单名称
-     * @param row 行数据
-     * @param fieldName 字段名
-     * @returns 校验结果
-     */
+    /** 检测字段是否已被触碰 */
+    isFieldTouched(form, row, fieldName) {
+        var _a;
+        // 整个表单已 touched（整个表单提交时）
+        if (form.allTouched) {
+            return true;
+        }
+        // 当前行已 touched（单行保存时）
+        if (form.rowTouched[row.uid]) {
+            return true;
+        }
+        // 检测当前值与初始值是否不同
+        const initialValue = (_a = form.initialSnapshot[row.uid]) === null || _a === void 0 ? void 0 : _a[fieldName];
+        const currentValue = row[fieldName];
+        return !this.isEqual(initialValue, currentValue);
+    }
+    /** 校验指定行的指定字段，未修改时不显示校验状态 */
     validateFieldInRow(formName, row, fieldName) {
         const form = this.formStore[formName];
         if (!form) {
-            return "success";
+            return "";
         }
         const fieldConfig = form.config.fields.find((f) => f.name === fieldName);
         if (!fieldConfig) {
-            return "success";
+            return "";
         }
+        // 执行校验
         let result = "";
         if (fieldConfig.validator) {
             result = fieldConfig.validator(row[fieldName], row, fieldName);
@@ -2332,20 +2385,35 @@ class ArrayFormService {
             form.validationResults[row.uid] = {};
         }
         form.validationResults[row.uid][fieldName] = result;
+        // 如果字段未被触碰，不显示校验状态
+        if (!this.isFieldTouched(form, row, fieldName)) {
+            return "";
+        }
         return result ? "error" : "success";
     }
-    /**
-     * 校验指定行的所有字段
-     *
-     * @param formName 表单名称
-     * @param row 行数据
-     * @returns 是否所有字段都通过校验
-     */
+    /** 获取指定行指定字段的校验错误信息 */
+    getFieldErrorMessage(formName, row, fieldName) {
+        var _a, _b;
+        const form = this.formStore[formName];
+        if (!form || !row.uid) {
+            return "";
+        }
+        // 如果字段未被触碰，不显示错误信息
+        if (!this.isFieldTouched(form, row, fieldName)) {
+            return "";
+        }
+        return ((_b = (_a = form.validationResults) === null || _a === void 0 ? void 0 : _a[row.uid]) === null || _b === void 0 ? void 0 : _b[fieldName]) || "";
+    }
+    /** 校验指定行的所有字段 */
     validateRowAllFields(formName, row) {
         const form = this.formStore[formName];
-        if (!form) {
+        if (!form || !row.uid) {
             return true;
         }
+        // 更新初始快照为当前值
+        form.initialSnapshot[row.uid] = this.createRowSnapshot(row, form.config.fields);
+        // 标记当前行为 touched（只影响当前行，不影响其他行）
+        form.rowTouched[row.uid] = true;
         let hasError = false;
         form.config.fields.forEach((fieldConfig) => {
             const result = this.validateFieldInRow(formName, row, fieldConfig.name);
@@ -2355,12 +2423,7 @@ class ArrayFormService {
         });
         return !hasError;
     }
-    /**
-     * 自动更新外部数组引用（如果配置了）
-     * 私有方法，在数据变化时自动调用
-     *
-     * @param formName 表单名称
-     */
+    /** 自动更新外部数组引用 */
     autoUpdateArrayReference(formName) {
         const form = this.formStore[formName];
         if (!form || !form.config.targetObject || !form.config.arrayPropertyName) {
@@ -2370,6 +2433,14 @@ class ArrayFormService {
         // 更新目标对象的数组属性为新数组引用
         form.config.targetObject[form.config.arrayPropertyName] = newArray;
     }
+    /** 是否有正在编辑的行 */
+    hasEditingRow(formName) {
+        const form = this.formStore[formName];
+        if (!form) {
+            return false;
+        }
+        return form.data.some((item) => item.isEdit);
+    }
 }
 ArrayFormService.ɵprov = ɵɵdefineInjectable({ factory: function ArrayFormService_Factory() { return new ArrayFormService(); }, token: ArrayFormService, providedIn: "root" });
 ArrayFormService.decorators = [