@hw-component/table 1.10.13 → 1.10.16

package/package.json

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

package/src/components/DialogTable/Content.tsx

@@ -1,6 +1,6 @@
-import Table from "@/components/Table";
+import Table from "../Table";
 import type { ModalTableProps } from "../modal";
-import { HEditTable } from "@/components";
+import  EditTable from "../EditTable";
 import { ProColumns } from "@ant-design/pro-table/lib/typing";
 
 export const TableContent = ({
@@ -32,7 +32,7 @@ export const EditTableContent = ({
   dataSource,
 }: ModalTableProps<ProColumns[]>) => {
   const node = (
-    <HEditTable
+    <EditTable
       {...editTableProps}
       configData={configData || []}
       request={request}

package/src/components/EditTable/hooks.ts

@@ -1,12 +1,22 @@
 import { useRequest } from "ahooks";
 import { HEditTableProps } from "./modal";
-import {MutableRefObject, useEffect, useMemo, useRef} from "react";
+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";
+import {ResultModal} from "../modal";
 
-export const useListRequest = ({ request, dataSource ,manual}: HEditTableProps) => {
-  const relManual=request?manual:false;
+export const useListRequest = ({
+  request,
+  dataSource,
+  manual,
+}: HEditTableProps) => {
+  const [tableDataSource,setTableDataSource]=useState<ResultModal>({
+    records:[],
+    total:"0",
+    size:"10",
+    current:"1"
+  });
   const saveParams = useMemo(() => {
     return {
       params: {
@@ -15,7 +25,7 @@ export const useListRequest = ({ request, dataSource ,manual}: HEditTableProps)
       },
     };
   }, []);
-  return  useRequest(
+  const {loading,error,run}=useRequest(
     async (params = {}) => {
       const newParams = {
         ...saveParams.params,
@@ -23,15 +33,32 @@ export const useListRequest = ({ request, dataSource ,manual}: HEditTableProps)
       };
       saveParams.params = newParams;
       if (request) {
-        return request(newParams);
+       const result=await request(newParams);
+       setTableDataSource(result);
+       return ;
       }
       if (Array.isArray(dataSource)) {
-        return dataSource;
+        setTableDataSource({
+          ...tableDataSource,
+          records:dataSource,
+        })
+        return ;
       }
-      return dataSource;
+      return setTableDataSource(dataSource||tableDataSource);
     },
-    { manual: relManual,refreshDeps:[dataSource]}
+    { manual:true}
   );
+  useEffect(() => {
+     if (!manual){
+       run();
+     }
+  }, [dataSource]);
+  return {
+    loading,
+    error,
+    run,
+    data:tableDataSource
+  }
 };
 
 export const useCuRef = ({ actionRef, editableFormRef }: HEditTableProps) => {
@@ -46,23 +73,34 @@ export const useCuRef = ({ actionRef, editableFormRef }: HEditTableProps) => {
     cuEditableFormRef,
   };
 };
+interface ColProps extends HEditTableProps{
+  reload:VoidFunction;
+}
 
-export const useColsMk = ({ configData }: HEditTableProps) => {
+export const useColsMk = ({ configData,reload }: ColProps) => {
   return configData?.map((item) => {
     const { valueType, render } = item;
     const configType = valueType as string;
-    if (!config[configType]) {
-      return item;
+    if (config[configType]) {
+       return {
+        ...item,
+        render: (dom, entity, index, action, schema) => {
+          const node = config[configType](item, entity, index);
+          if (render) {
+            return render(node, entity, index, {...action,reload}, schema);
+          }
+          return node;
+        },
+      };
     }
-    return {
-      ...item,
-      render: (dom, entity, index, action, schema) => {
-        const node = config[configType](item, entity, index);
-        if (render) {
-          return render(node, entity, index, action, schema);
-        }
-        return node;
-      },
-    };
+    if (render){
+      return {
+        ...item,
+        render: (dom, entity, index, action, schema) => {
+          return render(dom, entity, index, {...action,reload}, schema);
+        },
+      };
+    }
+    return item;
   });
 };

package/src/components/EditTable/index.tsx

@@ -41,20 +41,18 @@ export default ({
     errorRender: tableErrorRender = errorDefaultRender,
   } = useHTableConfigContext({ emptyRender, errorRender });
 
-  const isLocalData = Array.isArray(data);
-  const values = isLocalData ? data : data?.records;
   const { cuActionRef, cuEditableFormRef } = useCuRef({
     actionRef,
     editableFormRef,
   });
-  const columns = useColsMk({ configData });
+  const columns = useColsMk({ configData,reload:run});
   return (
     <div className={tableBody}>
       <ConfigProvider
         renderEmpty={() => {
           if (error) {
             return tableErrorRender?.({
-              reload: cuActionRef.current.reload,
+              reload: run,
               error,
             });
           }
@@ -66,10 +64,8 @@ export default ({
           loading={loading}
           rowKey={rowKey}
           editableFormRef={cuEditableFormRef}
-          manualRequest={true}
-          request={run}
           actionRef={cuActionRef}
-          value={values}
+          value={data?.records}
           recordCreatorProps={{
             position: "bottom",
             record: () => ({ id: "add", ...defaultRecordValue }),
@@ -89,7 +85,7 @@ export default ({
               if (key === "add") {
                 await onAdd?.(oRow);
                 cuEditableFormRef.current?.resetFields(["add"]);
-                cuActionRef.current?.reload();
+                run();
                 return;
               }
               await onEdit?.({
@@ -97,23 +93,23 @@ export default ({
                 ...oRow,
               });
               cuEditableFormRef.current?.resetFields([key]);
-              cuActionRef.current?.reload();
+              run();
             },
             ...editable,
           }}
           {...props}
         />
       </ConfigProvider>
-      <HTablePagination
-        data={isLocalData ? null : data}
-        {...pagination}
-        onChange={(page, pageSize) => {
-          run({
-            size: pageSize,
-            current: page,
-          });
-        }}
-      />
+      {pagination===false?null:<HTablePagination
+          data={data}
+          {...pagination}
+          onChange={(page, pageSize) => {
+            run({
+              size: pageSize,
+              current: page,
+            });
+          }}
+      />}
     </div>
   );
 };

package/src/components/EditTable/modal.ts

@@ -16,7 +16,7 @@ export interface HEditTableProps<T = any>
   >;
   dataSource?: any[];
   request?: (params: Record<string, any>) => Promise<T>;
-  pagination?: IPaginationProps;
+  pagination?: IPaginationProps|false;
   manual?: boolean;
   emptyRender?: EmptyPageRender;
   errorRender?: ErrorPageRender;

package/src/pages/EditTable/index.tsx

@@ -7,60 +7,64 @@ const dataSource = [
     id: 1,
     title: "1",
     time: "1757574280",
-  }
+  },
 ];
 export default () => {
   const defaultActionRef = useRef<ActionType>();
   const [cuData, setCuData] = useState(dataSource);
-  console.log(defaultActionRef,"defaultActionRef")
+  console.log(defaultActionRef, "defaultActionRef");
   return (
     <div>
-        <div onClick={()=>{
-            defaultActionRef.current?.reload();
-        }}>刷新</div>
-        <HEditTable
-            actionRef={defaultActionRef}
-            manual
-            onAdd={async (data) => {
-                const newData = [...cuData];
-                newData.push({
-                    id:new Date().valueOf(),
-                    ...data
-                });
-                setCuData(newData);
-            }}
-            onEdit={async (data) => {}}
-            request={()=>{
-                console.log("rrrrr")
-                return {
-                    records:[{
-                        id: 1,
-                        title: "1",
-                        time: "1757574280",
-                    }]
-                }
-            }}
-            configData={[
-                { title: "标题", dataIndex: "title" },
-                { title: "标题2", dataIndex: "time", valueType: "date" },
-                {
-                    title: "操作",
-                    valueType: "option",
-                    align: "center",
-                    render: (text: any, record: any, index: any, action: any) => [
-                        <a
-                            key="editable"
-                            type={"link"}
-                            onClick={() => {
-                                action?.startEditable?.(record.id);
-                            }}
-                        >
-                            编辑
-                        </a>
-                    ],
-                },
-            ]}
-        />
+      <div
+        onClick={() => {
+
+        }}
+      >
+        刷新
+      </div>
+      <HEditTable
+        manual
+        onAdd={async (data) => {
+          const newData = [...cuData];
+          newData.push({
+            id: new Date().valueOf(),
+            ...data,
+          });
+          setCuData(newData);
+        }}
+        onEdit={async (data) => {}}
+        request={() => {
+          return {
+            records: [
+              {
+                id: 1,
+                title: "1",
+                time: "1757574280",
+              },
+            ],
+          };
+        }}
+        configData={[
+          { title: "标题", dataIndex: "title" },
+          { title: "标题2", dataIndex: "time", valueType: "date" },
+          {
+            title: "操作",
+            valueType: "option",
+            align: "center",
+            render: (text: any, record: any, index: any, action: any) => [
+              <a
+                key="editable"
+                type={"link"}
+                onClick={() => {
+                  action?.startEditable?.(record.id);
+                }}
+              >
+                编辑
+              </a>,
+            ],
+          },
+        ]}
+      />
     </div>
   );
 };

package/src/pages/ModalEditTable/index.tsx

@@ -40,25 +40,26 @@ export default () => {
       </div>
       <HDwEditTable
         title="编辑"
-        request={async () => {
-          return {
-            records: [
-              {
-                id: "213213",
-                title: "100",
-              },
-            ],
-            current: "1",
-            size: "10",
-            total: "10",
-          };
+        request={() => {
+          return new Promise(resolve => {
+            setTimeout(() => {
+               resolve( {
+                 records: [
+                   {
+                     id: "213213",
+                     title: "100",
+                   },
+                 ],
+                 current: "1",
+                 size: "10",
+                 total: "10",
+               })
+            },2000)
+          })
         }}
         editTableProps={{
           onAdd: async (data) => {},
           onEdit: async (data) => {},
-          defaultRecordValue: {
-            title: "21312",
-          },
         }}
         dialogTable={dialogTable}
         configData={[
@@ -68,17 +69,28 @@ export default () => {
             title: "操作",
             valueType: "option",
             align: "center",
-            render: (text: any, record: any, _: any, action: any) => [
-              <a
-                key="editable"
-                type={"link"}
-                onClick={() => {
-                  action?.startEditable?.(record.id);
-                }}
-              >
-                编辑
-              </a>,
-            ],
+            render: (text: any, record: any, _: any, action: any) =>{
+              return <>
+                <a
+                    key="editable"
+                    type={"link"}
+                    onClick={() => {
+                      action?.startEditable?.(record.id);
+                    }}
+                >
+                  编辑
+                </a>
+                <a
+                    key="editable"
+                    type={"link"}
+                    onClick={() => {
+                      action.reload()
+                    }}
+                >
+                  刷新
+                </a>
+              </>
+            }
           },
         ]}
       />