plain-design 1.0.0-beta.4 → 1.0.0-beta.6

package/src/packages/components/AutoTable/use/useTableOption.methods.tsx

@@ -1,510 +1,510 @@
-import {createUrlUtils, iUrlResponseData} from "../utils/TableOption.url";
-import {nextTick, toRaw, useAsyncMethods} from 'plain-design-composition';
-import {iHttpRequestConfig} from "../../createHttp/http.utils";
-import {iTableNode} from "../../Table/table/utils/table.utils";
-import {eTableOptionStatus} from "./useTableOption.confirm";
-import {$notice} from "../../$notice";
-import {$dialog} from "../../$dialog";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {$message} from "../../$message";
-import {PlainObject} from "plain-utils/utils/event";
-import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
-import {defer} from "plain-utils/utils/defer";
-import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {iFilterQueryParam} from "../../FilterService/utils/filter.service.utils";
-import {tPlcData} from "../../Table/plc/formatPlcList";
-
-import '../utils/TableOption.space';
-import {eTableOptionEditType} from "../utils/TableOption.utils";
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      methods: ReturnType<typeof useTableOptionMethods>;
-    }
-  }
-}
-
-export const useTableOptionMethods = AutoModule.createRegistration((
-  {
-    state,
-    hooks,
-    config,
-    confirm,
-    check,
-    loading,
-    permission,
-  }
-) => {
-
-  const urlUtils = createUrlUtils(config);
-
-  const utils = {
-    getPageState: () => {
-      return hooks.onGetPageState.exec(undefined as any);
-    },
-    getChangeNode: (node: iTableNode) => {
-      const { state: { editRow }, data } = node;
-      const changeKey = Object.keys({ ...editRow, ...data }).find(key => editRow[key] !== data[key]);
-      /*if (!!changeKey) {console.log(editRow[changeKey], data[changeKey])}*/
-      return !!changeKey ? node : null;
-    },
-    selectCurrent: async (key: string | null | undefined) => {
-      const table = state.getTable();
-      await table?.current.update(!key ? null : state.list.find(i => i[config.keyField] == key)!);
-    },
-    getCurrentNode: async (): Promise<iTableNode> => {
-      if (!!state.currentNode) {
-        return state.currentNode;
-      }
-      if (state.list.length > 0) {
-        await utils.selectCurrent(state.list[0][config.keyField]);
-        return state.currentNode!;
-      }
-      $notice.error(i18n('table.pleaseSelectOneRecord').d('请选中一条数据'));
-      throw new Error('no current node');
-    },
-    ...(() => {
-      const dfd = defer<void>();
-      let sourceFlatPlcList: tPlc[] | undefined = undefined;
-      let plcData: tPlcData | undefined = undefined;
-
-      hooks.onCollectPlcData.use(val => {
-        plcData = val;
-        sourceFlatPlcList = val.sourceFlatPlcList;
-        dfd.resolve();
-        state.getSourceFlatPlcList = () => val.sourceFlatPlcList;
-      });
-
-      return {
-        getPlcData: async () => {
-          await dfd.promise;
-          return plcData!;
-        },
-        getSourceFlatPlcList: async () => {
-          await dfd.promise;
-          return sourceFlatPlcList!;
-        }
-      };
-    })()
-  };
-
-  const pageMethods = (() => {
-
-    const getLoadQueryParam = async () => {
-      const initParam = !config.param ? null : (typeof config.param === "function" ? await config.param() : config.param);
-      const list = await Promise.all(
-        hooks.onQueryParam.state.innerHandlers.map(handler => handler(null))
-      );
-      !!initParam && list.push(initParam);
-      return mergeQueryParam(...list);
-    };
-
-    const mergeQueryParamToRequestData = (requestData: PlainObject, queryParam: iFilterQueryParam) => {
-      const { queries, expression, ...left } = queryParam;
-      if (!!queries && !!queries.length) {
-        requestData.filters = queries;
-        !!expression && !!expression.length && (requestData.filterExpression = expression);
-      }
-      Object.assign(requestData, left);
-    };
-
-    const load = async (
-      loadParam?: {
-        page?: number,
-        size?: number,
-        awaitInit?: boolean,
-        onBeforeLoad?: (requestConfig: iHttpRequestConfig<iUrlResponseData['query']>) => any,
-        onAfterLoad?: (responseData: iUrlResponseData["query"]) => any,
-        onLoaded?: (responseData: iUrlResponseData["query"]) => any,
-      }) => {
-      const closeLoading = loading.loading({ message: i18n('base.loading').d('加载中') });
-      try {
-        await editMethods.save();
-        if (!loadParam || loadParam.awaitInit !== false) {
-          await hooks.onBeginLoad.exec(undefined);
-        }
-        const pageState = utils.getPageState();
-        const requestPageData = {
-          page: loadParam?.page || pageState.page,
-          size: loadParam?.size || pageState.size
-        };
-        const queryParam = await getLoadQueryParam();
-        const responseData = await urlUtils.request({
-          type: 'query',
-          processRequestData: (requestData) => {
-            requestData.page = Number(requestPageData.page) - 1;
-            requestData.size = Number(requestPageData.size);
-            mergeQueryParamToRequestData(requestData, queryParam);
-            const sortData = state.sortData.map(({ field, desc }) => ({ field, desc }));
-            sortData.length > 0 && (requestData.orders = sortData);
-          },
-          beforeRequest: async (requestConfig) => {
-            await loadParam?.onBeforeLoad?.(requestConfig);
-            await hooks.onBeforeLoad.exec(requestConfig);
-          },
-        });
-        responseData.list = await Promise.all(responseData.list.map(i => hooks.onFormatRow.exec(i)));
-        await hooks.onAfterLoad.exec(responseData);
-        await loadParam?.onAfterLoad?.(responseData);
-        if (!(state.list.length === 0 && responseData.list.length === 0)) {
-          state.list = responseData.list;
-        }
-        hooks.onPageDataChange.exec({ ...requestPageData, ...responseData });
-        await hooks.onLoaded.exec(responseData);
-        await loadParam?.onLoaded?.(responseData);
-        return responseData;
-      } finally {
-        await closeLoading();
-      }
-    };
-    const reload = async (reloadParam?: { size?: number }) => {
-      await load({
-        page: 1,
-        size: reloadParam?.size,
-        onBeforeLoad: async (requestConfig) => await hooks.onBeforeReload.exec(requestConfig),
-        onAfterLoad: async (responseData) => await hooks.onAfterReload.exec(responseData),
-        onLoaded: async (responseData) => await hooks.onReloaded.exec(responseData),
-      });
-    };
-    const queryCount = async (): Promise<number> => {
-      const closeLoading = loading.loading({ message: i18n('table.queryTotal').d('查询总数') });
-      try {
-        const queryParam = await getLoadQueryParam();
-        const responseData = await urlUtils.request({
-          type: 'queryCount',
-          processRequestData: (requestData) => {mergeQueryParamToRequestData(requestData, queryParam);},
-          beforeRequest: async (requestConfig) => {await hooks.onBeforeLoad.exec(requestConfig);},
-        });
-        await hooks.onQueryCount.exec(responseData);
-        return responseData.total;
-      } finally {
-        await closeLoading();
-      }
-    };
-    return useAsyncMethods({
-      getLoadQueryParam,
-      queryCount,
-      load,
-      reload,
-    });
-  })();
-
-  const editMethods = (() => {
-
-    const loadingMethods = useAsyncMethods((() => {
-      const cancel = async () => {await confirm.close.cancel();};
-      const save = async () => {
-        if (
-          confirm.state.status === eTableOptionStatus.insert ||
-          confirm.state.status === eTableOptionStatus.batchInsert ||
-          confirm.state.status === eTableOptionStatus.update ||
-          confirm.state.status === eTableOptionStatus.batchUpdate
-        ) {
-          await confirm.close.confirm();
-        }
-      };
-      const _delete = async (node?: iTableNode | null) => {
-        await loadingMethods.save();
-        node = node || await utils.getCurrentNode();
-        if (!node) {
-          return $notice.warn(i18n('table.selectRowToDelete').d('请选中一行要删除的数据'));
-        }
-        const { page, size } = utils.getPageState();
-        const { data, state: { index } } = node;
-        await $dialog.confirm({
-          size: config.size,
-          render: () => (
-            <div style={{ minWidth: '300px', minHeight: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              {i18n('table.areYouSureYouWantToDeleteTheData', { index: (page - 1) * size + index + 1 }).d(`确定要删除第${(page - 1) * size + index + 1}条数据吗？`)}
-            </div>
-          )
-        });
-
-        const closeLoading = loading.loading({ message: '正在删除' });
-        try {
-          const deleteResult = await urlUtils.request({
-            type: 'delete',
-            processRequestData: requestData => Object.assign(requestData, deepcopy(data)),
-            beforeRequest: async requestConfig => {
-              await hooks.onBeforeDelete.exec(requestConfig);
-            }
-          });
-          if (!!deleteResult.message) {
-            return $notice.error(`${i18n('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
-          }
-          await pageMethods.load();
-        } finally {
-          await closeLoading();
-        }
-      };
-      return { save, cancel, delete: _delete };
-    })());
-
-    const saveInsert = async (editRow: any) => {
-      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
-      try {
-        const saveRowPrev = await hooks.onBeforeSaveRow.exec(editRow);
-        const newRowResult = await urlUtils.request({
-          type: 'insert',
-          processRequestData: requestData => {requestData.row = deepcopy(saveRowPrev); },
-          beforeRequest: async requestConfig => {await hooks.onBeforeInsert.exec(requestConfig);}
-        });
-        let saveRowNext = await hooks.onAfterSaveRow.exec(newRowResult.result);
-        saveRowNext = await hooks.onFormatRow.exec(saveRowNext);
-        return saveRowNext;
-      } finally {
-        await closeLoading();
-      }
-    };
-
-    const insert = async (newRow?: Record<string, any>, editType?: typeof eTableOptionEditType.TYPE) => {
-
-      let newRowData = deepcopy(newRow || (!config.defaultNewRow ? {} : (typeof config.defaultNewRow === "function" ? config.defaultNewRow() : config.defaultNewRow)));
-      newRowData = await hooks.onHandleNewRow.exec(newRowData);
-      const table = state.getTable()!;
-
-      const editInline = async () => {
-        if (!confirm.checkEditable(eTableOptionStatus.insert)) {await confirm.close.confirm();}
-        state.editingWhenAddRow = true;
-        /*适配 plain-ui*/
-        await nextTick();
-        state.list.unshift(newRowData);
-        await nextTick();
-        const newNode = table.bodyNodes.value.find(i => toRaw(i.data) === newRowData)!;
-        state.editingWhenAddRow = false;
-        await confirm.open(eTableOptionStatus.insert, {
-          data: newRowData,
-          onConfirm: async () => {
-            const validateResult = await newNode.validate();
-            if (!!validateResult) {
-              const { validateResultData, node: { state: { index } } } = validateResult;
-              $message.error(`${i18n('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
-              return Promise.reject(validateResult);
-            }
-            const saveRow = await saveInsert(newNode.state.editRow);
-            await newNode.saveEdit(saveRow);
-            newNode.closeEdit();
-            await utils.selectCurrent(saveRow[config.keyField]);
-          },
-          onCancel: async () => {
-            state.list = state.list.filter(i => toRaw(i) !== toRaw(newRowData));
-            await utils.selectCurrent(!state.list[0] ? undefined : state.list[0][config.keyField]);
-          },
-        });
-      };
-      const editForm = async () => {
-        await table.formEditor.methods.edit({
-          node: table.methods.createTableNode(newRowData, 0),
-          title: i18n('base.edit.edit').d('编辑'),
-          onConfirm: async (newNode) => {
-            const saveRow = await saveInsert(newNode.state.editRow);
-            state.list.unshift(saveRow);
-            await utils.selectCurrent(saveRow[config.keyField]);
-          }
-        });
-      };
-      await ((editType || config.editType) === eTableOptionEditType.inline ? editInline() : editForm());
-    };
-
-    const copy = async (row?: Record<string, any>) => {
-      if (!row) {
-        const node = await utils.getCurrentNode();
-        row = deepcopy(node.data);
-      } else {
-        row = deepcopy(row);
-      }
-      const excludeKeys = [...config.copyDefaultExcludeKeys, ...config.copyExcludeKeys || []];
-      excludeKeys.forEach(key => delete row![key]);
-      return insert(row);
-    };
-
-    const batchInsert = async (batchInsertConfig?: { rows: any[] }) => {
-      let newRows = batchInsertConfig?.rows || await (async () => {
-        const num = await new Promise<number>((resolve, reject) => {
-          $dialog({
-            title: i18n('table.pleaseEnterTheNumberOfRowsToCreate').d('请输入要新建的行数'),
-            size: config.size,
-            editRequired: true,
-            editType: 'number',
-            editValue: 10,
-            handleConfirm: val => resolve(Number(val.editValue || 0)),
-            handleCancel: reject,
-            confirmButton: true,
-            cancelButton: true,
-          });
-        });
-        return new Array(num).fill(null).map(() => deepcopy((!config.defaultNewRow ? {} : (typeof config.defaultNewRow === "function" ? config.defaultNewRow() : config.defaultNewRow))));
-      })();
-      if (!confirm.checkEditable(eTableOptionStatus.insert)) {await confirm.close.confirm();}
-      newRows.forEach(newRow => insert(newRow));
-    };
-
-    const saveUpdate = async (editRow: any) => {
-      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
-      try {
-        const saveRowPrev = await hooks.onBeforeSaveRow.exec(editRow);
-        const newRowResult = await urlUtils.request({
-          type: 'update',
-          processRequestData: requestData => {requestData.row = deepcopy(saveRowPrev); },
-          beforeRequest: async requestConfig => {await hooks.onBeforeUpdate.exec(requestConfig);}
-        });
-        let saveRowNext = await hooks.onAfterSaveRow.exec(newRowResult.result);
-        saveRowNext = await hooks.onFormatRow.exec(saveRowNext);
-        return saveRowNext;
-      } finally {
-        await closeLoading();
-      }
-    };
-
-    const update = async (updateNode?: iTableNode, editType?: typeof eTableOptionEditType.TYPE) => {
-      const node: iTableNode | null | undefined = updateNode || await utils.getCurrentNode();
-
-      const editInline = async () => {
-        if (node.state.edit) {return;}
-        if (!confirm.checkEditable(eTableOptionStatus.update)) {await confirm.close.confirm();}
-        node.enableEdit();
-        await confirm.open(eTableOptionStatus.update, {
-          data: node.data,
-          onConfirm: async () => {
-            const validateResult = await node.validate();
-            if (!!validateResult) {
-              const { validateResultData, node: { state: { index } } } = validateResult;
-              $message.error(`${i18n('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
-              return Promise.reject(validateResult);
-            }
-            const changeNode = utils.getChangeNode(node);
-            if (!changeNode) {
-              // 没有改变任何字段
-              node.closeEdit();
-              await utils.selectCurrent(node.state.editRow[config.keyField]);
-              return;
-            }
-            const saveRow = await saveUpdate(node.state.editRow);
-            await node.saveEdit(saveRow);
-            await node.closeEdit();
-            await utils.selectCurrent(saveRow[config.keyField]);
-          },
-          onCancel: async () => {
-            node.cancelEdit();
-          },
-        });
-      };
-
-      const editForm = async () => {
-        await state.getTable()!.formEditor.methods.edit({
-          node,
-          title: i18n('base.edit.edit').d('编辑'),
-          onConfirm: async (updateNode) => {
-            const saveRow = await saveUpdate(updateNode.state.editRow);
-            await node.saveEdit(saveRow);
-            await utils.selectCurrent(saveRow[config.keyField]);
-          }
-        });
-      };
-
-      await ((editType || config.editType) === eTableOptionEditType.inline ? editInline() : editForm());
-    };
-
-    const batchUpdate = async () => state.getTable()?.bodyNodes.value.map(node => {update(node);});
-
-    const batchModify = async () => {
-      const rows = await check.openToCheck();
-      const table = state.getTable()!;
-      const editRow = await new Promise<PlainObject>((resolve, reject) => {
-        table.modifyEditor.methods.open({
-          onConfirm: (editRow) => resolve(editRow),
-          onCancel: reject,
-        });
-      });
-      if (!Object.keys(editRow).length) {return;}
-      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
-      try {
-        await urlUtils.request({
-          type: 'batchUpdate',
-          processRequestData: requestData => {
-            requestData.rows = deepcopy(rows.map(row => ({
-              id: row.id,
-              ...editRow,
-            })));
-            requestData.updateFields = Object.keys(editRow);
-          },
-          beforeRequest: async requestConfig => {await hooks.onBeforeBatchUpdate.exec(requestConfig);}
-        });
-        confirm.close.clear();
-        await pageMethods.load();
-      } finally {
-        await closeLoading();
-      }
-    };
-
-    const batchDelete = async () => {
-      const rows = await check.openToCheck();
-      const closeLoading = loading.loading({ message: i18n('table.deleting').d('正在删除') });
-      try {
-        const deleteResult = await urlUtils.request({
-          type: 'batchDelete',
-          processRequestData: requestData => {
-            requestData.id = rows.map(row => row.id);
-          },
-          beforeRequest: async requestConfig => {await hooks.onBeforeDelete.exec(requestConfig);}
-        });
-        if (!!deleteResult.message) {
-          return $notice.error(`${i18n('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
-        }
-        $notice.success(i18n('table.deleteSucceed').d('删除成功'));
-        confirm.close.clear();
-        await pageMethods.load();
-      } finally {
-        await closeLoading();
-      }
-    };
-
-    hooks.onClickNodeSaveOperation.use((node) => {
-      const handlers = confirm.state.handlers.filter(i => toRaw(i.data) == toRaw(node.data));
-      confirm.close.confirm(handlers);
-    });
-    hooks.onClickNodeCancelOperation.use((node) => {
-      const handlers = confirm.state.handlers.filter(i => toRaw(i.data) == toRaw(node.data));
-      confirm.close.cancel(handlers);
-    });
-    hooks.onTriggerInsert.use((newRow) => {permission.permit.value.show.insert && !permission.permit.value.disabled.insert && insert(newRow);});
-    hooks.onTriggerUpdate.use((node) => {permission.permit.value.show.update && !permission.permit.value.disabled.update && update(node);});
-    hooks.onTriggerDelete.use((node) => {permission.permit.value.show.delete && !permission.permit.value.disabled.delete && loadingMethods.delete(node);});
-    hooks.onDblclickRow.use(({ node }) => {hooks.onTriggerUpdate.exec(node);});
-
-    return {
-      ...loadingMethods,
-      update,
-      insert,
-      copy,
-      batchDelete,
-      batchInsert,
-      batchUpdate,
-      batchModify,
-    };
-  })();
-
-  hooks.onTableSetup.use(() => {
-    if (config.loadOnStart !== false) {pageMethods.reload();}
-  });
-
-  hooks.onLoaded.use(() => {
-    const firstData = state.list[0];
-    utils.selectCurrent(firstData?.[config.keyField]);
-  });
-
-
-  return {
-    utils,
-    urlUtils,
-    pageMethods,
-    editMethods,
-    getSourceFlatPlcList: utils.getSourceFlatPlcList,
-    getPlcData: utils.getPlcData,
-  };
-});
-
-export type iTableOptionMethods = ReturnType<typeof useTableOptionMethods>
+import {createUrlUtils, iUrlResponseData} from "../utils/TableOption.url";
+import {nextTick, toRaw, useAsyncMethods} from 'plain-design-composition';
+import {iHttpRequestConfig} from "../../createHttp/http.utils";
+import {iTableNode} from "../../Table/table/utils/table.utils";
+import {eTableOptionStatus} from "./useTableOption.confirm";
+import {$notice} from "../../$notice";
+import {$dialog} from "../../$dialog";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {$message} from "../../$message";
+import {PlainObject} from "plain-utils/utils/event";
+import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
+import {defer} from "plain-utils/utils/defer";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {iFilterQueryParam} from "../../FilterService/utils/filter.service.utils";
+import {tPlcData} from "../../Table/plc/formatPlcList";
+
+import '../utils/TableOption.space';
+import {eTableOptionEditType} from "../utils/TableOption.utils";
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      methods: ReturnType<typeof useTableOptionMethods>;
+    }
+  }
+}
+
+export const useTableOptionMethods = AutoModule.createRegistration((
+  {
+    state,
+    hooks,
+    config,
+    confirm,
+    check,
+    loading,
+    permission,
+  }
+) => {
+
+  const urlUtils = createUrlUtils(config);
+
+  const utils = {
+    getPageState: () => {
+      return hooks.onGetPageState.exec(undefined as any);
+    },
+    getChangeNode: (node: iTableNode) => {
+      const { state: { editRow }, data } = node;
+      const changeKey = Object.keys({ ...editRow, ...data }).find(key => editRow[key] !== data[key]);
+      /*if (!!changeKey) {console.log(editRow[changeKey], data[changeKey])}*/
+      return !!changeKey ? node : null;
+    },
+    selectCurrent: async (key: string | null | undefined) => {
+      const table = state.getTable();
+      await table?.current.update(!key ? null : state.list.find(i => i[config.keyField] == key)!);
+    },
+    getCurrentNode: async (): Promise<iTableNode> => {
+      if (!!state.currentNode) {
+        return state.currentNode;
+      }
+      if (state.list.length > 0) {
+        await utils.selectCurrent(state.list[0][config.keyField]);
+        return state.currentNode!;
+      }
+      $notice.error(i18n('table.pleaseSelectOneRecord').d('请选中一条数据'));
+      throw new Error('no current node');
+    },
+    ...(() => {
+      const dfd = defer<void>();
+      let sourceFlatPlcList: tPlc[] | undefined = undefined;
+      let plcData: tPlcData | undefined = undefined;
+
+      hooks.onCollectPlcData.use(val => {
+        plcData = val;
+        sourceFlatPlcList = val.sourceFlatPlcList;
+        dfd.resolve();
+        state.getSourceFlatPlcList = () => val.sourceFlatPlcList;
+      });
+
+      return {
+        getPlcData: async () => {
+          await dfd.promise;
+          return plcData!;
+        },
+        getSourceFlatPlcList: async () => {
+          await dfd.promise;
+          return sourceFlatPlcList!;
+        }
+      };
+    })()
+  };
+
+  const pageMethods = (() => {
+
+    const getLoadQueryParam = async () => {
+      const initParam = !config.param ? null : (typeof config.param === "function" ? await config.param() : config.param);
+      const list = await Promise.all(
+        hooks.onQueryParam.state.innerHandlers.map(handler => handler(null))
+      );
+      !!initParam && list.push(initParam);
+      return mergeQueryParam(...list);
+    };
+
+    const mergeQueryParamToRequestData = (requestData: PlainObject, queryParam: iFilterQueryParam) => {
+      const { queries, expression, ...left } = queryParam;
+      if (!!queries && !!queries.length) {
+        requestData.filters = queries;
+        !!expression && !!expression.length && (requestData.filterExpression = expression);
+      }
+      Object.assign(requestData, left);
+    };
+
+    const load = async (
+      loadParam?: {
+        page?: number,
+        size?: number,
+        awaitInit?: boolean,
+        onBeforeLoad?: (requestConfig: iHttpRequestConfig<iUrlResponseData['query']>) => any,
+        onAfterLoad?: (responseData: iUrlResponseData["query"]) => any,
+        onLoaded?: (responseData: iUrlResponseData["query"]) => any,
+      }) => {
+      const closeLoading = loading.loading({ message: i18n('base.loading').d('加载中') });
+      try {
+        await editMethods.save();
+        if (!loadParam || loadParam.awaitInit !== false) {
+          await hooks.onBeginLoad.exec(undefined);
+        }
+        const pageState = utils.getPageState();
+        const requestPageData = {
+          page: loadParam?.page || pageState.page,
+          size: loadParam?.size || pageState.size
+        };
+        const queryParam = await getLoadQueryParam();
+        const responseData = await urlUtils.request({
+          type: 'query',
+          processRequestData: (requestData) => {
+            requestData.page = Number(requestPageData.page) - 1;
+            requestData.size = Number(requestPageData.size);
+            mergeQueryParamToRequestData(requestData, queryParam);
+            const sortData = state.sortData.map(({ field, desc }) => ({ field, desc }));
+            sortData.length > 0 && (requestData.orders = sortData);
+          },
+          beforeRequest: async (requestConfig) => {
+            await loadParam?.onBeforeLoad?.(requestConfig);
+            await hooks.onBeforeLoad.exec(requestConfig);
+          },
+        });
+        responseData.list = await Promise.all(responseData.list.map(i => hooks.onFormatRow.exec(i)));
+        await hooks.onAfterLoad.exec(responseData);
+        await loadParam?.onAfterLoad?.(responseData);
+        if (!(state.list.length === 0 && responseData.list.length === 0)) {
+          state.list = responseData.list;
+        }
+        hooks.onPageDataChange.exec({ ...requestPageData, ...responseData });
+        await hooks.onLoaded.exec(responseData);
+        await loadParam?.onLoaded?.(responseData);
+        return responseData;
+      } finally {
+        await closeLoading();
+      }
+    };
+    const reload = async (reloadParam?: { size?: number }) => {
+      await load({
+        page: 1,
+        size: reloadParam?.size,
+        onBeforeLoad: async (requestConfig) => await hooks.onBeforeReload.exec(requestConfig),
+        onAfterLoad: async (responseData) => await hooks.onAfterReload.exec(responseData),
+        onLoaded: async (responseData) => await hooks.onReloaded.exec(responseData),
+      });
+    };
+    const queryCount = async (): Promise<number> => {
+      const closeLoading = loading.loading({ message: i18n('table.queryTotal').d('查询总数') });
+      try {
+        const queryParam = await getLoadQueryParam();
+        const responseData = await urlUtils.request({
+          type: 'queryCount',
+          processRequestData: (requestData) => {mergeQueryParamToRequestData(requestData, queryParam);},
+          beforeRequest: async (requestConfig) => {await hooks.onBeforeLoad.exec(requestConfig);},
+        });
+        await hooks.onQueryCount.exec(responseData);
+        return responseData.total;
+      } finally {
+        await closeLoading();
+      }
+    };
+    return useAsyncMethods({
+      getLoadQueryParam,
+      queryCount,
+      load,
+      reload,
+    });
+  })();
+
+  const editMethods = (() => {
+
+    const loadingMethods = useAsyncMethods((() => {
+      const cancel = async () => {await confirm.close.cancel();};
+      const save = async () => {
+        if (
+          confirm.state.status === eTableOptionStatus.insert ||
+          confirm.state.status === eTableOptionStatus.batchInsert ||
+          confirm.state.status === eTableOptionStatus.update ||
+          confirm.state.status === eTableOptionStatus.batchUpdate
+        ) {
+          await confirm.close.confirm();
+        }
+      };
+      const _delete = async (node?: iTableNode | null) => {
+        await loadingMethods.save();
+        node = node || await utils.getCurrentNode();
+        if (!node) {
+          return $notice.warn(i18n('table.selectRowToDelete').d('请选中一行要删除的数据'));
+        }
+        const { page, size } = utils.getPageState();
+        const { data, state: { index } } = node;
+        await $dialog.confirm({
+          size: config.size,
+          render: () => (
+            <div style={{ minWidth: '300px', minHeight: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              {i18n('table.areYouSureYouWantToDeleteTheData', { index: (page - 1) * size + index + 1 }).d(`确定要删除第${(page - 1) * size + index + 1}条数据吗？`)}
+            </div>
+          )
+        });
+
+        const closeLoading = loading.loading({ message: '正在删除' });
+        try {
+          const deleteResult = await urlUtils.request({
+            type: 'delete',
+            processRequestData: requestData => Object.assign(requestData, deepcopy(data)),
+            beforeRequest: async requestConfig => {
+              await hooks.onBeforeDelete.exec(requestConfig);
+            }
+          });
+          if (!!deleteResult.message) {
+            return $notice.error(`${i18n('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
+          }
+          await pageMethods.load();
+        } finally {
+          await closeLoading();
+        }
+      };
+      return { save, cancel, delete: _delete };
+    })());
+
+    const saveInsert = async (editRow: any) => {
+      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
+      try {
+        const saveRowPrev = await hooks.onBeforeSaveRow.exec(editRow);
+        const newRowResult = await urlUtils.request({
+          type: 'insert',
+          processRequestData: requestData => {requestData.row = deepcopy(saveRowPrev); },
+          beforeRequest: async requestConfig => {await hooks.onBeforeInsert.exec(requestConfig);}
+        });
+        let saveRowNext = await hooks.onAfterSaveRow.exec(newRowResult.result);
+        saveRowNext = await hooks.onFormatRow.exec(saveRowNext);
+        return saveRowNext;
+      } finally {
+        await closeLoading();
+      }
+    };
+
+    const insert = async (newRow?: Record<string, any>, editType?: typeof eTableOptionEditType.TYPE) => {
+
+      let newRowData = deepcopy(newRow || (!config.defaultNewRow ? {} : (typeof config.defaultNewRow === "function" ? config.defaultNewRow() : config.defaultNewRow)));
+      newRowData = await hooks.onHandleNewRow.exec(newRowData);
+      const table = state.getTable()!;
+
+      const editInline = async () => {
+        if (!confirm.checkEditable(eTableOptionStatus.insert)) {await confirm.close.confirm();}
+        state.editingWhenAddRow = true;
+        /*适配 plain-ui*/
+        await nextTick();
+        state.list.unshift(newRowData);
+        await nextTick();
+        const newNode = table.bodyNodes.value.find(i => toRaw(i.data) === newRowData)!;
+        state.editingWhenAddRow = false;
+        await confirm.open(eTableOptionStatus.insert, {
+          data: newRowData,
+          onConfirm: async () => {
+            const validateResult = await newNode.validate();
+            if (!!validateResult) {
+              const { validateResultData, node: { state: { index } } } = validateResult;
+              $message.error(`${i18n('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
+              return Promise.reject(validateResult);
+            }
+            const saveRow = await saveInsert(newNode.state.editRow);
+            await newNode.saveEdit(saveRow);
+            newNode.closeEdit();
+            await utils.selectCurrent(saveRow[config.keyField]);
+          },
+          onCancel: async () => {
+            state.list = state.list.filter(i => toRaw(i) !== toRaw(newRowData));
+            await utils.selectCurrent(!state.list[0] ? undefined : state.list[0][config.keyField]);
+          },
+        });
+      };
+      const editForm = async () => {
+        await table.formEditor.methods.edit({
+          node: table.methods.createTableNode(newRowData, 0),
+          title: i18n('base.edit.edit').d('编辑'),
+          onConfirm: async (newNode) => {
+            const saveRow = await saveInsert(newNode.state.editRow);
+            state.list.unshift(saveRow);
+            await utils.selectCurrent(saveRow[config.keyField]);
+          }
+        });
+      };
+      await ((editType || config.editType) === eTableOptionEditType.inline ? editInline() : editForm());
+    };
+
+    const copy = async (row?: Record<string, any>) => {
+      if (!row) {
+        const node = await utils.getCurrentNode();
+        row = deepcopy(node.data);
+      } else {
+        row = deepcopy(row);
+      }
+      const excludeKeys = [...config.copyDefaultExcludeKeys, ...config.copyExcludeKeys || []];
+      excludeKeys.forEach(key => delete row![key]);
+      return insert(row);
+    };
+
+    const batchInsert = async (batchInsertConfig?: { rows: any[] }) => {
+      let newRows = batchInsertConfig?.rows || await (async () => {
+        const num = await new Promise<number>((resolve, reject) => {
+          $dialog({
+            title: i18n('table.pleaseEnterTheNumberOfRowsToCreate').d('请输入要新建的行数'),
+            size: config.size,
+            editRequired: true,
+            editType: 'number',
+            editValue: 10,
+            handleConfirm: val => resolve(Number(val.editValue || 0)),
+            handleCancel: reject,
+            confirmButton: true,
+            cancelButton: true,
+          });
+        });
+        return new Array(num).fill(null).map(() => deepcopy((!config.defaultNewRow ? {} : (typeof config.defaultNewRow === "function" ? config.defaultNewRow() : config.defaultNewRow))));
+      })();
+      if (!confirm.checkEditable(eTableOptionStatus.insert)) {await confirm.close.confirm();}
+      newRows.forEach(newRow => insert(newRow));
+    };
+
+    const saveUpdate = async (editRow: any) => {
+      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
+      try {
+        const saveRowPrev = await hooks.onBeforeSaveRow.exec(editRow);
+        const newRowResult = await urlUtils.request({
+          type: 'update',
+          processRequestData: requestData => {requestData.row = deepcopy(saveRowPrev); },
+          beforeRequest: async requestConfig => {await hooks.onBeforeUpdate.exec(requestConfig);}
+        });
+        let saveRowNext = await hooks.onAfterSaveRow.exec(newRowResult.result);
+        saveRowNext = await hooks.onFormatRow.exec(saveRowNext);
+        return saveRowNext;
+      } finally {
+        await closeLoading();
+      }
+    };
+
+    const update = async (updateNode?: iTableNode, editType?: typeof eTableOptionEditType.TYPE) => {
+      const node: iTableNode | null | undefined = updateNode || await utils.getCurrentNode();
+
+      const editInline = async () => {
+        if (node.state.edit) {return;}
+        if (!confirm.checkEditable(eTableOptionStatus.update)) {await confirm.close.confirm();}
+        node.enableEdit();
+        await confirm.open(eTableOptionStatus.update, {
+          data: node.data,
+          onConfirm: async () => {
+            const validateResult = await node.validate();
+            if (!!validateResult) {
+              const { validateResultData, node: { state: { index } } } = validateResult;
+              $message.error(`${i18n('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
+              return Promise.reject(validateResult);
+            }
+            const changeNode = utils.getChangeNode(node);
+            if (!changeNode) {
+              // 没有改变任何字段
+              node.closeEdit();
+              await utils.selectCurrent(node.state.editRow[config.keyField]);
+              return;
+            }
+            const saveRow = await saveUpdate(node.state.editRow);
+            await node.saveEdit(saveRow);
+            await node.closeEdit();
+            await utils.selectCurrent(saveRow[config.keyField]);
+          },
+          onCancel: async () => {
+            node.cancelEdit();
+          },
+        });
+      };
+
+      const editForm = async () => {
+        await state.getTable()!.formEditor.methods.edit({
+          node,
+          title: i18n('base.edit.edit').d('编辑'),
+          onConfirm: async (updateNode) => {
+            const saveRow = await saveUpdate(updateNode.state.editRow);
+            await node.saveEdit(saveRow);
+            await utils.selectCurrent(saveRow[config.keyField]);
+          }
+        });
+      };
+
+      await ((editType || config.editType) === eTableOptionEditType.inline ? editInline() : editForm());
+    };
+
+    const batchUpdate = async () => state.getTable()?.bodyNodes.value.map(node => {update(node);});
+
+    const batchModify = async () => {
+      const rows = await check.openToCheck();
+      const table = state.getTable()!;
+      const editRow = await new Promise<PlainObject>((resolve, reject) => {
+        table.modifyEditor.methods.open({
+          onConfirm: (editRow) => resolve(editRow),
+          onCancel: reject,
+        });
+      });
+      if (!Object.keys(editRow).length) {return;}
+      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
+      try {
+        await urlUtils.request({
+          type: 'batchUpdate',
+          processRequestData: requestData => {
+            requestData.rows = deepcopy(rows.map(row => ({
+              id: row.id,
+              ...editRow,
+            })));
+            requestData.updateFields = Object.keys(editRow);
+          },
+          beforeRequest: async requestConfig => {await hooks.onBeforeBatchUpdate.exec(requestConfig);}
+        });
+        confirm.close.clear();
+        await pageMethods.load();
+      } finally {
+        await closeLoading();
+      }
+    };
+
+    const batchDelete = async () => {
+      const rows = await check.openToCheck();
+      const closeLoading = loading.loading({ message: i18n('table.deleting').d('正在删除') });
+      try {
+        const deleteResult = await urlUtils.request({
+          type: 'batchDelete',
+          processRequestData: requestData => {
+            requestData.id = rows.map(row => row.id);
+          },
+          beforeRequest: async requestConfig => {await hooks.onBeforeDelete.exec(requestConfig);}
+        });
+        if (!!deleteResult.message) {
+          return $notice.error(`${i18n('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
+        }
+        $notice.success(i18n('table.deleteSucceed').d('删除成功'));
+        confirm.close.clear();
+        await pageMethods.load();
+      } finally {
+        await closeLoading();
+      }
+    };
+
+    hooks.onClickNodeSaveOperation.use((node) => {
+      const handlers = confirm.state.handlers.filter(i => toRaw(i.data) == toRaw(node.data));
+      confirm.close.confirm(handlers);
+    });
+    hooks.onClickNodeCancelOperation.use((node) => {
+      const handlers = confirm.state.handlers.filter(i => toRaw(i.data) == toRaw(node.data));
+      confirm.close.cancel(handlers);
+    });
+    hooks.onTriggerInsert.use((newRow) => {permission.permit.value.show.insert && !permission.permit.value.disabled.insert && insert(newRow);});
+    hooks.onTriggerUpdate.use((node) => {permission.permit.value.show.update && !permission.permit.value.disabled.update && update(node);});
+    hooks.onTriggerDelete.use((node) => {permission.permit.value.show.delete && !permission.permit.value.disabled.delete && loadingMethods.delete(node);});
+    hooks.onDblclickRow.use(({ node }) => {hooks.onTriggerUpdate.exec(node);});
+
+    return {
+      ...loadingMethods,
+      update,
+      insert,
+      copy,
+      batchDelete,
+      batchInsert,
+      batchUpdate,
+      batchModify,
+    };
+  })();
+
+  hooks.onTableSetup.use(() => {
+    if (config.loadOnStart !== false) {pageMethods.reload();}
+  });
+
+  hooks.onLoaded.use(() => {
+    const firstData = state.list[0];
+    utils.selectCurrent(firstData?.[config.keyField]);
+  });
+
+
+  return {
+    utils,
+    urlUtils,
+    pageMethods,
+    editMethods,
+    getSourceFlatPlcList: utils.getSourceFlatPlcList,
+    getPlcData: utils.getPlcData,
+  };
+});
+
+export type iTableOptionMethods = ReturnType<typeof useTableOptionMethods>