From 4c0f2038af62f25dae74a075ee4b8774828bac8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wit=E3=80=86=E8=8B=97=E5=A4=A7?= <454690789@qq.com>
Date: Fri, 10 Feb 2023 07:42:59 +0800
Subject: [PATCH] =?UTF-8?q?perf(vxetable):=20=E5=B0=81=E8=A3=85=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E4=B8=AD=E5=8A=A0=E5=85=A5=E5=8F=AF=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=92=8C=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=96=B9=E6=B3=95=E5=90=8D=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E5=9C=A8demo=E4=B8=AD=E5=A2=9E=E5=8A=A0=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=92=8C=E5=88=A0=E9=99=A4=E6=96=B9=E6=B3=95=E8=B0=83=E7=94=A8?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=20(#2532)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf(vxetable): 封装方法中加入可编辑表格相关方法名，并在demo中增加新增和删除方法调用实现

* perf(vxetable): 封装方法中加入表单验证方法名

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
---
 src/components/VxeTable/src/VxeBasicTable.tsx | 13 ++++++--
 src/components/VxeTable/src/methods.ts        | 33 +++++++++++++++++--
 src/views/demo/table/VxeTable.vue             | 30 +++++++++++++----
 3 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/src/components/VxeTable/src/VxeBasicTable.tsx b/src/components/VxeTable/src/VxeBasicTable.tsx
index 17af5a49..a1e0c403 100644
--- a/src/components/VxeTable/src/VxeBasicTable.tsx
+++ b/src/components/VxeTable/src/VxeBasicTable.tsx
@@ -5,7 +5,14 @@ import { basicProps } from './props';
 import { ignorePropKeys } from './const';
 import { basicEmits } from './emits';
 import XEUtils from 'xe-utils';
-import type { VxeGridInstance, VxeGridEventProps, GridMethods, TableMethods } from 'vxe-table';
+import type {
+  VxeGridInstance,
+  VxeGridEventProps,
+  GridMethods,
+  TableMethods,
+  TableEditMethods,
+  TableValidatorMethods,
+} from 'vxe-table';
 import { Grid as VxeGrid } from 'vxe-table';
 
 import { extendSlots } from '/@/utils/helper/tsxHelper';
@@ -35,7 +42,9 @@ export default defineComponent({
     };
 
     const gridExtendTableMethods = extendTableMethods(gridComponentMethodKeys) as GridMethods &
-      TableMethods;
+      TableMethods &
+      TableEditMethods &
+      TableValidatorMethods;
 
     basicEmits.forEach((name) => {
       const type = XEUtils.camelCase(`on-${name}`) as keyof VxeGridEventProps;
diff --git a/src/components/VxeTable/src/methods.ts b/src/components/VxeTable/src/methods.ts
index 2dd1c5f4..78a81c26 100644
--- a/src/components/VxeTable/src/methods.ts
+++ b/src/components/VxeTable/src/methods.ts
@@ -1,6 +1,11 @@
-import { GridMethods, TableMethods } from 'vxe-table';
+import { GridMethods, TableMethods, TableEditMethods, TableValidatorMethods } from 'vxe-table';
 
-export const gridComponentMethodKeys: (keyof GridMethods | keyof TableMethods)[] = [
+export const gridComponentMethodKeys: (
+  | keyof GridMethods
+  | keyof TableMethods
+  | keyof TableEditMethods
+  | keyof TableValidatorMethods
+)[] = [
   // vxe-grid 部分
   'dispatchEvent',
   'commitProxy',
@@ -126,6 +131,30 @@ export const gridComponentMethodKeys: (keyof GridMethods | keyof TableMethods)[]
   'blur',
   'connect',
 
+  // vxe-table-edit部分
+  'insert',
+  'insertAt',
+  'remove',
+  'removeCheckboxRow',
+  'removeRadioRow',
+  'removeCurrentRow',
+  'getRecordset',
+  'getInsertRecords',
+  'getRemoveRecords',
+  'getUpdateRecords',
+  'getEditRecord',
+  'getSelectedCell',
+  'clearSelected',
+  'isEditByRow',
+  'setEditRow',
+  'setEditCell',
+  'setSelectCell',
+
+  // vxe-table-validator
+  'clearValidate',
+  'fullValidate',
+  'validate',
+
   //... 如有缺少在此处追加
   // xxx
 ];
diff --git a/src/views/demo/table/VxeTable.vue b/src/views/demo/table/VxeTable.vue
index 6f51be68..b4a2954b 100644
--- a/src/views/demo/table/VxeTable.vue
+++ b/src/views/demo/table/VxeTable.vue
@@ -14,11 +14,11 @@
 </template>
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
-  import { TableAction, ActionItem } from '/@/components/Table';
+  import { ActionItem, TableAction } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { vxeTableColumns, vxeTableFormSchema } from './tableData';
-  import { VxeBasicTable, BasicTableProps, VxeGridInstance } from '/@/components/VxeTable';
+  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
   import { demoListApi } from '/@/api/demo/table';
 
   const { createMessage } = useMessage();
@@ -32,7 +32,7 @@
     toolbarConfig: {
       buttons: [
         {
-          content: '自定义按钮',
+          content: '在第一行新增',
           buttonRender: {
             name: 'AButton',
             props: {
@@ -40,7 +40,22 @@
             },
             events: {
               click: () => {
-                createMessage.success('点击了自定义按钮');
+                tableRef.value?.insert({ name: '新增的' });
+                createMessage.success('新增成功');
+              },
+            },
+          },
+        },
+        {
+          content: '在最后一行新增',
+          buttonRender: {
+            name: 'AButton',
+            props: {
+              type: 'warning',
+            },
+            events: {
+              click: () => {
+                tableRef.value?.insertAt({ name: '新增的' }, -1);
               },
             },
           },
@@ -62,8 +77,7 @@
           });
         },
         queryAll: async ({ form }) => {
-          const data = await demoListApi(form);
-          return data;
+          return await demoListApi(form);
         },
       },
     },
@@ -87,7 +101,9 @@
         color: 'error',
         popConfirm: {
           title: '是否确认删除',
-          confirm: () => {},
+          confirm: () => {
+            tableRef.value?.remove(record);
+          },
         },
       },
     ];