feat(table): add `onValid` for editRow

为table的可编辑行添加校验方法

feat(table): add `onValid` for editRow
为table的可编辑行添加校验方法
无木
1 parent a36825a6
Showing 4 changed files with 40 additions and 11 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/components/editable/EditableCell.vue
src/components/Table/src/components/editable/index.ts
src/views/demo/table/EditRowTable.vue
 ### ✨ Features
 - **BasicForm** 表单组件新增`Divider`，用于较长表单的区域分割
-- **BasicTable** 单元格编辑新增提交回调，将根据回调函数返回的结果来决定是否将数据提交到表格
+- **BasicTable**
+  - 单元格编辑新增提交回调，将根据回调函数返回的结果来决定是否将数据提交到表格
+  - 行编辑添加校验方法，允许只校验而不提交值，以便异步保存数据成功后才提交倒表格
 ### 🐛 Bug Fixes
@@ -364,13 +364,7 @@
         /* eslint-disable */
         props.record.onSubmitEdit = async () => {
           if (isArray(props.record?.submitCbs)) {
-            const validFns = (props.record?.validCbs || []).map((fn) => fn());
-
-            const res = await Promise.all(validFns);
-
-            const pass = res.every((item) => !!item);
-
-            if (!pass) return;
+            if (!props.record?.onValid?.()) return;
             const submitFns = props.record?.submitCbs || [];
             submitFns.forEach((fn) => fn(false, false));
             table.emit?.('edit-row-end');
@@ -3,6 +3,7 @@ import type { BasicColumn } from &#39;/@/components/Table/src/types/table&#39;;
 import { h, Ref } from 'vue';
 import EditableCell from './EditableCell.vue';
+import { isArray } from '/@/utils/is';
 interface Params {
   text: string;
@@ -12,12 +13,23 @@ interface Params {
 export function renderEditCell(column: BasicColumn) {
   return ({ text: value, record, index }: Params) => {
+    record.onValid = async () => {
+      if (isArray(record?.validCbs)) {
+        const validFns = (record?.validCbs || []).map((fn) => fn());
+        const res = await Promise.all(validFns);
+        return res.every((item) => !!item);
+      } else {
+        return false;
+      }
+    };
+
     record.onEdit = async (edit: boolean, submit = false) => {
       if (!submit) {
         record.editable = edit;
       }
       if (!edit && submit) {
+        if (!(await record.onValid())) return false;
         const res = await record.onSubmitEdit?.();
         if (res) {
           record.editable = false;
@@ -44,6 +56,7 @@ export function renderEditCell(column: BasicColumn) {
 export type EditRecordRow<T = Recordable> = Partial<
   {
     onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    onValid: () => Promise<boolean>;
     editable: boolean;
     onCancel: Fn;
     onSubmit: Fn;
@@ -21,6 +21,8 @@
   import { demoListApi } from '/@/api/demo/table';
   import { treeOptionsListApi } from '/@/api/demo/tree';
+  import { cloneDeep } from 'lodash-es';
+  import { useMessage } from '/@/hooks/web/useMessage';
   const columns: BasicColumn[] = [
     {
@@ -162,6 +164,7 @@
   export default defineComponent({
     components: { BasicTable, TableAction },
     setup() {
+      const { createMessage: msg } = useMessage();
       const currentEditKeyRef = ref('');
       const [registerTable] = useTable({
         title: '可编辑行示例',
@@ -192,9 +195,26 @@
       }
       async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
+        // 校验
+        msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
+        const valid = await record.onValid?.();
+        if (valid) {
+          try {
+            const data = cloneDeep(record.editValueRefs);
+            console.log(data);
+            //TODO 此处将数据提交给服务器保存
+            // ...
+            // 保存之后提交编辑状态
+            const pass = await record.onEdit?.(false, true);
+            if (pass) {
+              currentEditKeyRef.value = '';
+            }
+            msg.success({ content: '数据已保存', key: 'saving' });
+          } catch (error) {
+            msg.error({ content: '保存失败', key: 'saving' });
+          }
+        } else {
+          msg.error({ content: '请填写正确的数据', key: 'saving' });
         }
       }