@hw-component/table 1.10.25 → 1.10.26

package/lib/modal.d.ts

@@ -10,7 +10,7 @@ import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody/modal";
 import type { DrawerProps } from "antd";
 import type { IPaginationProps } from "./HTablePagination";
-import { HEditTableProps } from "./EditTable/modal";
+import { EditTableInstance, HEditTableProps } from "./EditTable/modal";
 export interface RowObj {
     keys?: React.Key[];
     rowData?: any[];
@@ -124,9 +124,15 @@ export interface HDiaLogTableInstance {
     hide: () => void;
     params: any;
 }
+export interface HDiaLogEditTableInstance extends EditTableInstance {
+    show: (params?: DialogParamsModal) => void;
+    hide: () => void;
+    params: any;
+}
 export interface DwTableProps<T = HTableProps["configData"]> extends DrawerProps {
     tableProps?: Omit<HTableProps, "configData" | "request">;
     dialogTable?: HDiaLogTableInstance;
+    editDialogTable?: HDiaLogEditTableInstance;
     params?: Record<string, any>;
     configData?: T;
     request?: HTableProps["request"];
@@ -137,6 +143,7 @@ export interface DwTableProps<T = HTableProps["configData"]> extends DrawerProps
 export interface ModalTableProps<T = HTableProps["configData"]> extends Omit<ModalProps, "onOk"> {
     tableProps?: Omit<HTableProps, "configData" | "request">;
     dialogTable?: HDiaLogTableInstance;
+    editDialogTable?: HDiaLogEditTableInstance;
     params?: Record<string, any>;
     configData?: T;
     request?: HTableProps["request"];

package/lib/render/Text.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.10.25",
+  "version": "1.10.26",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/DialogTable/Content.tsx

@@ -30,10 +30,12 @@ export const EditTableContent = ({
   request,
   contentRender,
   dataSource,
+  editDialogTable,
 }: ModalTableProps<ProColumns[]>) => {
   const node = (
     <EditTable
       {...editTableProps}
+      table={editDialogTable}
       configData={configData || []}
       request={request}
       pagination={{

package/src/components/DialogTable/DwEditTable.tsx

@@ -1,6 +1,11 @@
 import { Drawer } from "antd";
 import type { DwTableProps } from "../modal";
-import { useCurrentTable, useTableProps, useVisible } from "./hooks";
+import {
+  useCurrentTable,
+  useEditCurrentTable,
+  useTableProps,
+  useVisible,
+} from "./hooks";
 import { EditTableContent } from "./Content";
 import { CloseOutlined } from "@ant-design/icons";
 import { useClassName } from "../hooks";
@@ -10,7 +15,7 @@ export default ({
   configData: configDataProps,
   request: requestProps,
   editTableProps = {},
-  dialogTable,
+  editDialogTable,
   visible = false,
   bodyStyle = {},
   onClose,
@@ -27,7 +32,7 @@ export default ({
     configData: configDataProps,
     request: requestProps,
   });
-  const currentTable = useCurrentTable({
+  const currentTable = useEditCurrentTable({
     show: (showParams) => {
       if (showParams) {
         setModalTableParams((oldParams) => {
@@ -60,7 +65,7 @@ export default ({
     hide: () => {
       setModalVisible(false);
     },
-    dialogTable,
+    editDialogTable,
   });
   const { configData, request, dataSource, title, params } = modalTableParams;
   const req = request
@@ -91,18 +96,13 @@ export default ({
       }
       width={width}
       bodyStyle={{ padding: 0, paddingBottom: 12, ...bodyStyle }}
-      afterVisibleChange={(changeVisible) => {
-        if (!changeVisible) {
-          currentTable.form.resetFields();
-        }
-        afterVisibleChange?.(changeVisible);
-      }}
+      afterVisibleChange={afterVisibleChange}
     >
       <EditTableContent
         contentRender={contentRender}
         editTableProps={editTableProps}
         configData={configData || []}
-        dialogTable={currentTable}
+        editDialogTable={currentTable}
         request={req}
         dataSource={dataSource}
       />

package/src/components/DialogTable/ModalEditTable.tsx

@@ -1,6 +1,6 @@
 import { Modal } from "antd";
 import type { ModalTableProps } from "../modal";
-import { useCurrentTable, useTableProps, useVisible } from "./hooks";
+import { useEditCurrentTable, useTableProps, useVisible } from "./hooks";
 import { EditTableContent } from "./Content";
 import { ProColumns } from "@ant-design/pro-table/lib/typing";
 
@@ -8,7 +8,7 @@ export default ({
   configData: configDataProps,
   request: requestProps,
   editTableProps = {},
-  dialogTable,
+  editDialogTable,
   visible = false,
   onCancel,
   bodyStyle = {},
@@ -26,7 +26,7 @@ export default ({
       request: requestProps,
     }
   );
-  const currentTable = useCurrentTable({
+  const currentTable = useEditCurrentTable({
     show: (showParams) => {
       if (showParams) {
         setModalTableParams((oldParams) => {
@@ -59,7 +59,7 @@ export default ({
     hide: () => {
       setModalVisible(false);
     },
-    dialogTable,
+    editDialogTable,
   });
 
   const { configData, dataSource, request, title, params } = modalTableParams;
@@ -81,16 +81,13 @@ export default ({
       title={title}
       width={width}
       bodyStyle={{ padding: "0px 0px 12px", ...bodyStyle }}
-      afterClose={() => {
-        currentTable.form.resetFields();
-        afterClose?.();
-      }}
+      afterClose={afterClose}
     >
       <EditTableContent
         contentRender={contentRender}
         editTableProps={editTableProps}
         configData={configData || []}
-        dialogTable={currentTable}
+        editDialogTable={currentTable}
         request={req}
         dataSource={dataSource}
       />

package/src/components/DialogTable/hooks.ts

@@ -1,11 +1,13 @@
 import useHTable from "../hooks/useHTable";
-import type {
+import {
   HDiaLogTableInstance,
   HOnDiaLogTableInstance,
   ModalTableProps,
   DialogParamsModal,
+  HDiaLogEditTableInstance,
 } from "../modal";
 import { useEffect, useMemo, useState } from "react";
+import { useEditTable } from "../EditTable/hooks";
 
 export const useHDialogTable = () => {
   const tableInstance = useHTable();
@@ -18,10 +20,27 @@ export const useHDialogTable = () => {
     } as HDiaLogTableInstance;
   }, []);
 };
+
+export const useHDialogEditTable = () => {
+  const editTable = useEditTable();
+  return useMemo(() => {
+    return {
+      ...editTable,
+      show: (params: DialogParamsModal) => {},
+      hide: () => {},
+      params: {},
+    } as HDiaLogEditTableInstance;
+  }, []);
+};
+
 interface ParamsModal extends HOnDiaLogTableInstance {
   dialogTable?: HDiaLogTableInstance;
 }
 
+interface EditParamsModal extends HOnDiaLogTableInstance {
+  editDialogTable?: HDiaLogEditTableInstance;
+}
+
 type TablePropsModal<T> = Omit<ModalTableProps<T>, "tableProps">;
 
 export function useTableProps<T>({
@@ -70,6 +89,19 @@ export const useCurrentTable = ({ show, hide, dialogTable }: ParamsModal) => {
   }, []);
   return dialogTableInstance;
 };
+export const useEditCurrentTable = ({
+  show,
+  hide,
+  editDialogTable,
+}: EditParamsModal) => {
+  const cuDialogTableInstance = useHDialogEditTable();
+  const dialogTableInstance = editDialogTable || cuDialogTableInstance;
+  useEffect(() => {
+    dialogTableInstance.show = show;
+    dialogTableInstance.hide = hide;
+  }, []);
+  return dialogTableInstance;
+};
 
 export const useVisible = (visible: boolean) => {
   const [modalVisible, setModalVisible] = useState(false);

package/src/components/EditTable/hooks.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "ahooks";
-import {EditTableInstance, HEditTableProps} from "./modal";
-import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
+import { EditTableInstance, HEditTableProps } from "./modal";
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
 import type { ActionType } from "@ant-design/pro-table";
 import { EditableFormInstance } from "@ant-design/pro-table/lib/components/EditableTable";
 import config from "../render/config";
@@ -61,53 +61,45 @@ export const useListRequest = ({
   };
 };
 
-export const useCuRef = ({ actionRef, editableFormRef }: HEditTableProps) => {
-  const defaultActionRef = useRef<ActionType>();
-  const defaultTableRef = useRef<EditableFormInstance>();
-  const cuActionRef = (actionRef ||
-    defaultActionRef) as MutableRefObject<ActionType>;
-  const cuEditableFormRef = (editableFormRef ||
-    defaultTableRef) as MutableRefObject<EditableFormInstance>;
+export const useEditTable = (): EditTableInstance => {
   return {
-    cuActionRef,
-    cuEditableFormRef,
+    reload: () => {
+      return Promise.resolve();
+    },
+    editableForm: {},
+    action: {},
   };
 };
-
-export const useEditTable = ():EditTableInstance => {
-    return {
-         reload:()=>{
-           return Promise.resolve();
-         },
-       editableForm:{},
-      action:{}
-    }
-}
-export const useCuEditTable=({table}:HEditTableProps)=>{
-   const cuTable=useEditTable();
-   return table||cuTable;
-}
+export const useCuEditTable = ({ table }: HEditTableProps) => {
+  const cuTable = useEditTable();
+  return table || cuTable;
+};
 
 interface EditTableInitParams {
-  table:EditTableInstance;
-  actionRef:MutableRefObject<ActionType | undefined>;
-  editableFormRef:MutableRefObject<EditableFormInstance | undefined>;
-  request:VoidFunction;
+  table: EditTableInstance;
+  actionRef: MutableRefObject<ActionType | undefined>;
+  editableFormRef: MutableRefObject<EditableFormInstance | undefined>;
+  request: VoidFunction;
 }
 
-export const useEditTableInit = ({table,actionRef, editableFormRef,request }:EditTableInitParams) => {
-    useEffect(() => {
-        if (!table) {
-          return;
-        }
+export const useEditTableInit = ({
+  table,
+  actionRef,
+  editableFormRef,
+  request,
+}: EditTableInitParams) => {
+  useEffect(() => {
+    if (!table) {
+      return;
+    }
 
-        table.editableForm=editableFormRef?.current||{};
-        table.reload=()=>{
-           request();
-        }
-        table.action=actionRef?.current||{};
-    },[actionRef,editableFormRef,table])
-}
+    table.editableForm = editableFormRef?.current || {};
+    table.reload = () => {
+      request();
+    };
+    table.action = actionRef?.current || {};
+  }, [actionRef, editableFormRef, table]);
+};
 
 interface ColProps extends HEditTableProps {
   reload: VoidFunction;

package/src/components/EditTable/index.tsx

@@ -1,4 +1,4 @@
-import {type ActionType, EditableProTable} from "@ant-design/pro-table";
+import { type ActionType, EditableProTable } from "@ant-design/pro-table";
 import { HEditTableProps } from "./modal";
 import { useClassName } from "../hooks";
 import HTablePagination from "../HTablePagination";
@@ -8,9 +8,14 @@ import {
   errorDefaultRender,
 } from "../HTableBody/defaultRender";
 import { useHTableConfigContext } from "../TableConfig";
-import {useColsMk, useCuEditTable, useEditTableInit, useListRequest} from "./hooks";
-import React, {useRef} from "react";
-import {EditableFormInstance} from "@ant-design/pro-table/lib/components/EditableTable";
+import {
+  useColsMk,
+  useCuEditTable,
+  useEditTableInit,
+  useListRequest,
+} from "./hooks";
+import React, { useRef } from "react";
+import { EditableFormInstance } from "@ant-design/pro-table/lib/components/EditableTable";
 
 export default ({
   configData,
@@ -31,7 +36,7 @@ export default ({
   table,
   ...props
 }: HEditTableProps) => {
-  const cuTable=useCuEditTable({table});
+  const cuTable = useCuEditTable({ table });
   const tableBody = useClassName("hw-table-body");
   const { loading, data, error, run } = useListRequest({
     request,
@@ -46,11 +51,11 @@ export default ({
   const defaultEditableFormRef = useRef<EditableFormInstance>();
 
   useEditTableInit({
-     actionRef:defaultActionRef,
-    editableFormRef:defaultEditableFormRef,
-    table:cuTable,
-    request:run
-  })
+    actionRef: defaultActionRef,
+    editableFormRef: defaultEditableFormRef,
+    table: cuTable,
+    request: run,
+  });
   const columns = useColsMk({ configData, reload: run });
   return (
     <div className={tableBody} style={style}>

package/src/components/EditTable/modal.ts

@@ -1,13 +1,16 @@
-import {EditableFormInstance, EditableProTableProps} from "@ant-design/pro-table/lib/components/EditableTable";
+import {
+  EditableFormInstance,
+  EditableProTableProps,
+} from "@ant-design/pro-table/lib/components/EditableTable";
 import { ParamsType } from "@ant-design/pro-provider";
 import { IPaginationProps } from "../HTablePagination";
 import { EmptyPageRender, ErrorPageRender } from "../modal";
-import {ActionType, ProColumns} from "@ant-design/pro-table/lib/typing";
+import { ActionType, ProColumns } from "@ant-design/pro-table/lib/typing";
 
 export interface EditTableInstance {
-  editableForm:EditableFormInstance|{};
-  action:ActionType|{};
-  reload:()=>void;
+  editableForm: EditableFormInstance | {};
+  action: ActionType | {};
+  reload: () => void;
 }
 
 export interface HEditTableProps<T = any>
@@ -21,7 +24,7 @@ export interface HEditTableProps<T = any>
     EditableProTableProps<T, ParamsType>["recordCreatorProps"]
   >;
   dataSource?: any[];
-  request?: (params?: Record<string, any>) => Promise<T>;
+  request?: (params: Record<string, any>) => Promise<T>;
   pagination?: IPaginationProps | false;
   manual?: boolean;
   emptyRender?: EmptyPageRender;
@@ -29,5 +32,5 @@ export interface HEditTableProps<T = any>
   onAdd?: (data: T) => Promise<void>;
   onEdit?: (data: T) => Promise<void>;
   configData?: ProColumns<T>[];
-  table?:EditTableInstance;
+  table?: EditTableInstance;
 }

package/src/components/modal.ts

@@ -13,7 +13,7 @@ import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody/modal";
 import type { DrawerProps } from "antd";
 import type { IPaginationProps } from "./HTablePagination";
-import { HEditTableProps } from "./EditTable/modal";
+import { EditTableInstance, HEditTableProps } from "./EditTable/modal";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -161,10 +161,16 @@ export interface HDiaLogTableInstance {
   hide: () => void;
   params: any;
 }
+export interface HDiaLogEditTableInstance extends EditTableInstance {
+  show: (params?: DialogParamsModal) => void;
+  hide: () => void;
+  params: any;
+}
 export interface DwTableProps<T = HTableProps["configData"]>
   extends DrawerProps {
   tableProps?: Omit<HTableProps, "configData" | "request">;
   dialogTable?: HDiaLogTableInstance;
+  editDialogTable?: HDiaLogEditTableInstance;
   params?: Record<string, any>;
   configData?: T;
   request?: HTableProps["request"];
@@ -177,6 +183,7 @@ export interface ModalTableProps<T = HTableProps["configData"]>
   extends Omit<ModalProps, "onOk"> {
   tableProps?: Omit<HTableProps, "configData" | "request">;
   dialogTable?: HDiaLogTableInstance;
+  editDialogTable?: HDiaLogEditTableInstance;
   params?: Record<string, any>;
   configData?: T;
   request?: HTableProps["request"];

package/src/pages/EditTable/index.tsx

@@ -1,4 +1,4 @@
-import { HEditTable ,useEditTable} from "@/components";
+import { HEditTable, useEditTable } from "@/components";
 import { useRef, useState } from "react";
 import type { ActionType } from "@ant-design/pro-table";
 
@@ -11,12 +11,16 @@ const dataSource = [
 ];
 export default () => {
   const [cuData, setCuData] = useState(dataSource);
-  const editTableInstance=useEditTable();
+  const editTableInstance = useEditTable();
   return (
     <div>
-      <div onClick={() => {
-          editTableInstance.reload()
-      }}>刷新</div>
+      <div
+        onClick={() => {
+          editTableInstance.reload();
+        }}
+      >
+        刷新
+      </div>
       <HEditTable
         table={editTableInstance}
         onAdd={async (data) => {
@@ -28,11 +32,9 @@ export default () => {
           setCuData(newData);
         }}
         onEdit={async (data) => {}}
-        request={()=>{
-            console.log("fffff")
-            return {
-
-            }
+        request={() => {
+          console.log("fffff");
+          return {};
         }}
         configData={[
           { title: "标题", dataIndex: "title" },

package/src/pages/ModalEditTable/index.tsx

@@ -1,5 +1,6 @@
 import { HDwEditTable, useHDialogTable } from "@/components";
 import { useState } from "react";
+import { useHDialogEditTable } from "@/components/DialogTable/hooks";
 
 const dataSource = [
   {
@@ -26,7 +27,7 @@ const dataSource = [
 ];
 
 export default () => {
-  const dialogTable = useHDialogTable();
+  const dialogTable = useHDialogEditTable();
   const [cuData, setCuData] = useState(dataSource);
 
   return (
@@ -40,6 +41,20 @@ export default () => {
       </div>
       <HDwEditTable
         title="编辑"
+        contentRender={(node) => {
+          return (
+            <>
+              <div
+                onClick={() => {
+                  dialogTable.reload();
+                }}
+              >
+                点我
+              </div>
+              {node}
+            </>
+          );
+        }}
         request={() => {
           return new Promise((resolve) => {
             setTimeout(() => {
@@ -61,7 +76,7 @@ export default () => {
           onAdd: async (data) => {},
           onEdit: async (data) => {},
         }}
-        dialogTable={dialogTable}
+        editDialogTable={dialogTable}
         configData={[
           { title: "标题", dataIndex: "title" },
           { title: "标题2", dataIndex: "time", valueType: "date" },