@hw-component/table 1.9.93 → 1.9.94

package/src/components/HTableBody/defaultRender.tsx

@@ -10,19 +10,29 @@ const pubProps = {
 export const emptyDefaultRender = () => {
   return <Empty image={empty_bg} description="暂无数据~" {...pubProps} />;
 };
-export const errorDefaultRender = (
-  tableInstance: HTableInstance,
-  error: Error
-) => {
+interface errorDefaultRenderParams {
+  reload?: () => void;
+  error: Error;
+  tableInstance?: HTableInstance;
+}
+export const errorDefaultRender = ({
+  error,
+  tableInstance,
+  reload,
+}: errorDefaultRenderParams) => {
+  const pageReload = () => {
+    if (tableInstance) {
+      return tableInstance.table.reloadWithParams();
+    }
+    return reload?.();
+  };
   return (
     <Empty image={errorBg} description={error.message} {...pubProps}>
       <Button
         type={"primary"}
         ghost
         style={{ borderRadius: 16 }}
-        onClick={() => {
-          tableInstance.table.reloadWithParams();
-        }}
+        onClick={pageReload}
       >
         刷新
       </Button>

package/src/components/HTableBody/index.tsx

@@ -129,7 +129,7 @@ export default (bodyProps: HTableBodyProps) => {
         <ConfigProvider
           renderEmpty={() => {
             if (error) {
-              return tableErrorRender?.(tableInstance, error);
+              return tableErrorRender?.({ tableInstance, error });
             }
             return tableEmptyRender?.(tableInstance);
           }}

package/src/components/HTableBody/modal.ts

@@ -2,13 +2,15 @@ import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar"
 import type { Key } from "react";
 import type React from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
-import type {
+import {
   ActionRenderFn,
   ConfigDataModal,
+  EmptyPageRender,
+  ErrorPageRender,
   HRowSelection,
   HTableInstance,
   ParamsModal,
-} from "@/components/modal";
+} from "../modal";
 import type { AffixProps } from "antd/lib/affix";
 import type { IPaginationProps } from "@/components/HTablePagination";
 
@@ -22,11 +24,8 @@ export interface HTableBodyProps
   > {
   configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
-  emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
-  errorRender?: (
-    tableInstance: HTableInstance,
-    error: Error
-  ) => React.ReactNode;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
   tableStyle?: React.CSSProperties;
   paginationStyle?: React.CSSProperties;
   actionRender?: ActionRenderFn;

package/src/components/HTablePagination/index.tsx

@@ -7,6 +7,7 @@ import React, { useState } from "react";
 import type { AffixProps } from "antd/lib/affix";
 import GoTop from "../GoTop";
 import { useHTableConfigContext } from "@/components/TableConfig";
+
 export interface IPaginationProps extends Omit<PaginationProps, "showTotal"> {
   onPageChange?: (params: ParamsModal) => void;
   paginationStyle?: React.CSSProperties;
@@ -15,6 +16,7 @@ export interface IPaginationProps extends Omit<PaginationProps, "showTotal"> {
   actionRender?: (tableInstance: HTableInstance) => React.ReactNode;
   table?: HTableInstance;
   showTotal?: false | PaginationProps["showTotal"];
+  data?: Record<string, any>;
 }
 const defaultShowTotal = (totalNum: number, [showCurrent, showCurrentEnd]) => {
   return `第${showCurrent}-${showCurrentEnd}/总共${totalNum}条`;
@@ -27,26 +29,28 @@ export default ({
   actionRender,
   table,
   showTotal = defaultShowTotal,
+  data,
   ...props
 }: IPaginationProps) => {
   const {
     onPageChange: contextOnPageChange,
-    data,
+    data: contextData,
     tableInstance: contextTableInstance,
   } = useHTableContext();
   const { paginationStyle: defaultPaginationStyle } = useHTableConfigContext({
     paginationStyle,
   });
+  const cuData = data || contextData;
   const tableInstance = table || contextTableInstance;
   const tableOnPageChange = onPageChange || contextOnPageChange;
-  const { size, current, total } = data || {};
+  const { size, current, total } = cuData || {};
   const pageCurrent = Number.parseInt(current || "1", 10);
   const pageSize = Number.parseInt(size || "10", 10);
   const pageTotal = Number.parseInt(total || "0", 10);
   const className = useClassName("hw-table-pagination");
   const [style, setStyle] = useState({});
   const cuShowTotal = showTotal === false ? undefined : showTotal;
-  if (!data) {
+  if (!cuData) {
     return <></>;
   }
   if (affixProps === false) {

package/src/components/Table.tsx

@@ -8,6 +8,7 @@ import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import { useState } from "react";
 import { useClassName } from "./hooks";
+
 export default ({
   request,
   configData,

package/src/components/TableConfig.tsx

@@ -1,9 +1,13 @@
 import React, { useContext } from "react";
-import type { HTableInstance, ValueTypeConfigModal } from "./modal";
+import {
+  EmptyPageRender,
+  ErrorPageRender,
+  ValueTypeConfigModal,
+} from "./modal";
 
 interface HTableConfigContextModal {
-  emptyRender?: (table: HTableInstance) => React.ReactNode;
-  errorRender?: (table: HTableInstance, error: Error) => React.ReactNode;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
   headerStyle?: React.CSSProperties;
   tableStyle?: React.CSSProperties;
   paginationStyle?: React.CSSProperties;

package/src/components/index.tsx

@@ -12,3 +12,5 @@ export { default as HModalTable } from "./DialogTable/ModalTable";
 export { useHDialogTable } from "./DialogTable/hooks";
 export { default as HDwTable } from "./DialogTable/DwTable";
 export { DefaultSubComponent as HTableHeaderSubBtn } from "./HTableHeader/defaultSubComponent";
+export { default as EditTable } from "./EditTable";
+export { default as ModalEditTable } from "./DialogTable/ModalEditTable";

package/src/components/modal.ts

@@ -12,7 +12,8 @@ import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody/modal";
 import type { DrawerProps } from "antd";
-import type { IPaginationProps } from "@/components/HTablePagination";
+import type { IPaginationProps } from "./HTablePagination";
+import { EditTableProps } from "./EditTable/modal";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -89,11 +90,8 @@ export interface HTableProps
   searchSpan?: ColProps;
   table?: HTableInstance;
   actionRender?: ActionRenderFn;
-  emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
-  errorRender?: (
-    tableInstance: HTableInstance,
-    error: Error
-  ) => React.ReactNode;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
   hideHeader?: boolean;
   action?: Record<string, actionFn>;
   headerStyle?: React.CSSProperties;
@@ -165,15 +163,17 @@ export interface DwTableProps extends DrawerProps {
   contentRender?: (node: React.ReactNode) => React.ReactNode;
 }
 
-export interface ModalTableProps extends Omit<ModalProps, "onOk"> {
+export interface ModalTableProps<T = HTableProps["configData"]>
+  extends Omit<ModalProps, "onOk"> {
   tableProps?: Omit<HTableProps, "configData" | "request">;
   dialogTable?: HDiaLogTableInstance;
   params?: Record<string, any>;
-  configData?: HTableProps["configData"];
+  configData?: T;
   request?: HTableProps["request"];
   contentRender?: (node: React.ReactNode) => React.ReactNode;
   dataSource?: any[];
   onOk?: (e?: React.MouseEvent<HTMLElement>) => void;
+  editTableProps?: Omit<EditTableProps, "configData" | "request">;
 }
 
 export type ValueTypeConfigRenderFn = (
@@ -183,3 +183,14 @@ export type ValueTypeConfigRenderFn = (
   tableInstance: HTableInstance
 ) => React.ReactNode;
 export type ValueTypeConfigModal = Record<string, ValueTypeConfigRenderFn>;
+
+interface ErrorRenderParams {
+  error: Error;
+  tableInstance?: HTableInstance;
+  reload?: VoidFunction;
+}
+
+export type ErrorPageRender = (params: ErrorRenderParams) => React.ReactNode;
+export type EmptyPageRender = (
+  tableInstance?: HTableInstance
+) => React.ReactNode;

package/src/components/render/index.tsx

@@ -2,6 +2,7 @@ import type { ConfigItemModal, HTableInstance } from "@/components/modal";
 import type React from "react";
 import config from "./config";
 import type { ValueTypeConfigModal } from "../modal";
+
 export default (
   item: ConfigItemModal,
   tableInstance: HTableInstance,

package/src/pages/DwTable/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "antd";
 import { HDwTable, HModalTable, HTable, useHDialogTable } from "@/components";
+
 const configData = [
   {
     title: "座位",

package/src/pages/EditTable/index.tsx

@@ -0,0 +1,70 @@
+import { EditTable } from "@/components";
+import { useRef, useState } from "react";
+import type { ActionType } from "@ant-design/pro-table";
+
+const dataSource = [
+  {
+    id: 1,
+    title: "1",
+  },
+  {
+    id: 2,
+    title: "2",
+  },
+  {
+    id: 3,
+    title: "3",
+  },
+  {
+    id: 4,
+    title: "4",
+  },
+  {
+    id: 5,
+    title: "5",
+  },
+];
+export default () => {
+  const defaultActionRef = useRef<ActionType>();
+  const [cuData, setCuData] = useState(dataSource);
+  return (
+    <EditTable
+      actionRef={defaultActionRef}
+      onAdd={async (data) => {
+        const newData = [...cuData];
+        newData.push({
+          id: newData.length + 1,
+          ...data,
+        });
+        setCuData(newData);
+      }}
+      onEdit={async (data) => {
+        const index = cuData.findIndex((e) => e.id === data.id);
+        cuData[index] = data;
+        setCuData([...cuData]);
+      }}
+      dataSource={cuData}
+      configData={[
+        { title: "标题", dataIndex: "title" },
+        { title: "标题2", dataIndex: "title1" },
+        {
+          title: "操作",
+          valueType: "option",
+          align: "center",
+          render: (text: any, record: any, _: any, action: any) => [
+            <a
+              key="editable"
+              type={"link"}
+              onClick={() => {
+                console.log(action);
+                action?.startEditable?.(record.id);
+              }}
+            >
+              编辑
+            </a>,
+          ],
+        },
+      ]}
+    />
+  );
+};

package/src/pages/ModalEditTable/index.tsx

@@ -0,0 +1,84 @@
+import { ModalEditTable, useHDialogTable } from "@/components";
+import { useState } from "react";
+
+const dataSource = [
+  {
+    id: 1,
+    title: "1",
+  },
+  {
+    id: 2,
+    title: "2",
+  },
+  {
+    id: 3,
+    title: "3",
+  },
+  {
+    id: 4,
+    title: "4",
+  },
+  {
+    id: 5,
+    title: "5",
+  },
+];
+
+export default () => {
+  const dialogTable = useHDialogTable();
+  const [cuData, setCuData] = useState(dataSource);
+
+  return (
+    <div>
+      <div
+        onClick={() => {
+          dialogTable.show();
+        }}
+      >
+        点我
+      </div>
+      <ModalEditTable
+        title="编辑"
+        dataSource={cuData}
+        editTableProps={{
+          onAdd: (data) => {
+            console.log("addd");
+            const newData = [...cuData];
+            newData.push({
+              id: newData.length + 1,
+              ...data,
+            });
+            setCuData(newData);
+          },
+          onEdit: (data) => {
+            const index = cuData.findIndex((e) => e.id === data.id);
+            cuData[index] = data;
+            setCuData([...cuData]);
+          },
+        }}
+        dialogTable={dialogTable}
+        configData={[
+          { title: "标题", dataIndex: "title" },
+          { title: "标题2", dataIndex: "title1" },
+          {
+            title: "操作",
+            valueType: "option",
+            align: "center",
+            render: (text: any, record: any, _: any, action: any) => [
+              <a
+                key="editable"
+                type={"link"}
+                onClick={() => {
+                  console.log(action);
+                  action?.startEditable?.(record.id);
+                }}
+              >
+                编辑
+              </a>,
+            ],
+          },
+        ]}
+      />
+    </div>
+  );
+};

package/src/pages/Table/index.tsx

@@ -52,24 +52,24 @@ const Testd = (props) => {
 };
 export const configData = [
   {
-    title: '订单编号',
-    dataIndex: 'childOrderNo',
+    title: "订单编号",
+    dataIndex: "childOrderNo",
     showSearch: true,
-    valueType: 'copy',
+    valueType: "copy",
     width: 120,
-    searchType: 'selectInput',
-    name: 'selectInput',
+    searchType: "selectInput",
+    name: "selectInput",
     itemProps: {
-      placeholder: '请输入',
+      placeholder: "请输入",
       selectProps: {
-        options:[
+        options: [
           {
-            label: '订单编号',
-            value: 'orderNo',
+            label: "订单编号",
+            value: "orderNo",
           },
           {
-            label: '用户id',
-            value: 'userId',
+            label: "用户id",
+            value: "userId",
           },
         ],
         style: { width: 88 },
@@ -213,12 +213,11 @@ export default () => {
               persistenceType: "localStorage",
             }}
             formInitValues={{
-              select: 'orderNo',
+              select: "orderNo",
             }}
-
             dataSource={[{}, {}, {}]}
-            request={(params)=>{
-               console.log(params)
+            request={(params) => {
+              console.log(params);
               return Promise.resolve({});
             }}
             headerTitle={

package/src/routes.tsx

@@ -4,6 +4,8 @@ import Table from "./pages/Table";
 import ModalTable from "./pages/ModalTable";
 import TableCustomize from "./pages/TableCustomize";
 import DwTable from "./pages/DwTable";
+import EditTable from "./pages/EditTable";
+import ModalEditTable from "./pages/ModalEditTable";
 
 export interface RouteModal {
   path?: string;
@@ -39,6 +41,16 @@ const routes: RouteModal[] = [
     name: "dwTable",
     element: <DwTable />,
   },
+  {
+    path: "/editTable",
+    name: "editTable",
+    element: <EditTable />,
+  },
+  {
+    path: "/modalEditTable",
+    name: "modalEditTable",
+    element: <ModalEditTable />,
+  },
 ];
 
 export default routes;