@hw-component/table 1.9.93 → 1.9.95

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;
@@ -156,24 +154,29 @@ export interface HDiaLogTableInstance {
   hide: () => void;
   params: any;
 }
-export interface DwTableProps extends DrawerProps {
+export interface DwTableProps<T = HTableProps["configData"]>
+  extends DrawerProps {
   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;
+  editTableProps?: Omit<EditTableProps, "configData" | "request">;
+  dataSource?: any[];
 }
 
-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 +186,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 { HDwEditTable, 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>
+      <HDwEditTable
+        title="编辑"
+        dataSource={cuData}
+        editTableProps={{
+          onAdd: async (data) => {
+            console.log("addd");
+            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]);
+          },
+        }}
+        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;