@hw-component/table 1.9.92 → 1.9.94

package/src/components/DialogTable/hooks.ts

@@ -21,14 +21,17 @@ export const useHDialogTable = () => {
 interface ParamsModal extends HOnDiaLogTableInstance {
   dialogTable?: HDiaLogTableInstance;
 }
-export const useTableProps = ({
+
+type TablePropsModal<T> = Omit<ModalTableProps<T>, "tableProps">;
+
+export function useTableProps<T>({
   configData,
   params,
   title,
   request,
   dataSource,
-}: Omit<ModalTableProps, "tableProps">) => {
-  const [modalTableParams, setModalTableParams] = useState({
+}: TablePropsModal<T>) {
+  const [modalTableParams, setModalTableParams] = useState<TablePropsModal<T>>({
     params,
     title,
     configData,
@@ -45,11 +48,19 @@ export const useTableProps = ({
       });
     }
   }, [configData]);
+  useEffect(() => {
+    setModalTableParams((oldVal) => {
+      return {
+        ...oldVal,
+        dataSource,
+      };
+    });
+  }, [dataSource]);
   return {
     modalTableParams,
     setModalTableParams,
   };
-};
+}
 export const useCurrentTable = ({ show, hide, dialogTable }: ParamsModal) => {
   const cuDialogTableInstance = useHDialogTable();
   const dialogTableInstance = dialogTable || cuDialogTableInstance;

package/src/components/EditTable/hooks.ts

@@ -0,0 +1,43 @@
+import { useRequest } from "ahooks";
+import { EditTableProps } from "./modal";
+import { MutableRefObject, useMemo, useRef } from "react";
+import type { ActionType } from "@ant-design/pro-table";
+import { EditableFormInstance } from "@ant-design/pro-table/lib/components/EditableTable";
+
+export const useListRequest = ({ request, dataSource }: EditTableProps) => {
+  const saveParams = useMemo(() => {
+    return {
+      params: {},
+    };
+  }, []);
+  return useRequest(
+    async (params) => {
+      const newParams = {
+        ...saveParams.params,
+        ...params,
+      };
+      saveParams.params = newParams;
+      if (request) {
+        return request(newParams);
+      }
+      if (Array.isArray(dataSource)) {
+        return dataSource;
+      }
+      return dataSource;
+    },
+    { manual: true, refreshDeps: [dataSource] }
+  );
+};
+
+export const useCuRef = ({ actionRef, editableFormRef }: EditTableProps) => {
+  const defaultActionRef = useRef<ActionType>();
+  const defaultTableRef = useRef<EditableFormInstance>();
+  const cuActionRef = (actionRef ||
+    defaultActionRef) as MutableRefObject<ActionType>;
+  const cuEditableFormRef = (editableFormRef ||
+    defaultTableRef) as MutableRefObject<EditableFormInstance>;
+  return {
+    cuActionRef,
+    cuEditableFormRef,
+  };
+};

package/src/components/EditTable/index.tsx

@@ -0,0 +1,118 @@
+import { EditableProTable } from "@ant-design/pro-table";
+import { EditTableProps } from "./modal";
+import { useClassName } from "@/components/hooks";
+import HTablePagination from "../HTablePagination";
+import { ConfigProvider } from "antd";
+import {
+  emptyDefaultRender,
+  errorDefaultRender,
+} from "@/components/HTableBody/defaultRender";
+import { useHTableConfigContext } from "@/components/TableConfig";
+import { useCuRef, useListRequest } from "./hooks";
+import React from "react";
+
+export default ({
+  configData,
+  rowKey = "id",
+  creatorButtonText = "新增一列",
+  recordCreatorProps = {},
+  defaultRecordValue = {},
+  pagination,
+  editable = {},
+  dataSource,
+  request,
+  manual,
+  emptyRender,
+  errorRender,
+  onAdd,
+  onEdit,
+  actionRef,
+  editableFormRef,
+  ...props
+}: EditTableProps) => {
+  const tableBody = useClassName("hw-table-body");
+  const { loading, data, error, run } = useListRequest({
+    request,
+    dataSource,
+  });
+  const {
+    emptyRender: tableEmptyRender = emptyDefaultRender,
+    errorRender: tableErrorRender = errorDefaultRender,
+  } = useHTableConfigContext({ emptyRender, errorRender });
+
+  const isLocalData = Array.isArray(data);
+  const values = isLocalData ? data : data?.record;
+  const { cuActionRef, cuEditableFormRef } = useCuRef({
+    actionRef,
+    editableFormRef,
+  });
+
+  return (
+    <div className={tableBody}>
+      <ConfigProvider
+        renderEmpty={() => {
+          if (error) {
+            return tableErrorRender?.({
+              reload: cuActionRef.current.reload,
+              error,
+            });
+          }
+          return tableEmptyRender?.();
+        }}
+      >
+        <EditableProTable
+          columns={configData as any}
+          loading={loading}
+          rowKey={rowKey}
+          editableFormRef={cuEditableFormRef}
+          manualRequest={manual}
+          request={run}
+          actionRef={cuActionRef}
+          value={values}
+          recordCreatorProps={{
+            position: "bottom",
+            record: () => ({ id: "add" }),
+            creatorButtonText,
+            ...recordCreatorProps,
+          }}
+          editable={{
+            type: "single",
+            onCancel: async (keys) => {
+              cuEditableFormRef.current?.resetFields([keys]);
+            },
+            actionRender: (trow, tconfig, defaultDoms) => {
+              return [defaultDoms.save, defaultDoms.cancel];
+            },
+            onSave: async (key, row) => {
+              const { index, id, ...oRow } = row;
+              if (key === "add") {
+                await onAdd?.(oRow);
+                cuEditableFormRef.current?.resetFields(["add"]);
+                cuActionRef.current?.reload();
+                return;
+              }
+              await onEdit?.({
+                id,
+                ...oRow,
+              });
+              cuEditableFormRef.current?.resetFields(["key"]);
+              cuActionRef.current?.reload();
+            },
+            ...editable,
+          }}
+          {...props}
+        />
+      </ConfigProvider>
+      <HTablePagination
+        data={isLocalData ? null : data}
+        {...pagination}
+        onChange={(page, pageSize) => {
+          run({
+            size: pageSize,
+            current: page,
+          });
+        }}
+      />
+    </div>
+  );
+};

package/src/components/EditTable/modal.ts

@@ -0,0 +1,26 @@
+import { 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 { ProColumns } from "@ant-design/pro-table/lib/typing";
+
+export interface EditTableProps<T = any>
+  extends Omit<
+    EditableProTableProps<T, ParamsType>,
+    "recordCreatorProps" | "request" | "pagination"
+  > {
+  creatorButtonText?: string;
+  defaultRecordValue?: T;
+  recordCreatorProps?: Partial<
+    EditableProTableProps<T, ParamsType>["recordCreatorProps"]
+  >;
+  dataSource?: any[];
+  request?: (params: Record<string, any>) => Promise<T>;
+  pagination?: IPaginationProps;
+  manual?: boolean;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
+  onAdd?: (data: T) => Promise<void>;
+  onEdit?: (data: T) => Promise<void>;
+  configData?: ProColumns<T>[];
+}

package/src/components/HTableBody/Options/Content.tsx

@@ -70,35 +70,35 @@ export const ColsSettingContent = ({
         onDrop={onDropEnd}
         onCheck={(key) => {
           const curKey = key as string[];
-          check([...curKey,...norCheckKeys,...rightCheckKeys]);
+          check([...curKey, ...norCheckKeys, ...rightCheckKeys]);
         }}
       />
       <ContentTree
         title="不固定"
         treeData={norContentTreeData}
         checkedKeys={norCheckKeys}
-        onDrop={({ dragNodesKeys, dropPosition })=>{
-          const cuDropPosition=leftContentTreeData.length+dropPosition;
-          onDropEnd({dragNodesKeys, dropPosition:cuDropPosition});
+        onDrop={({ dragNodesKeys, dropPosition }) => {
+          const cuDropPosition = leftContentTreeData.length + dropPosition;
+          onDropEnd({ dragNodesKeys, dropPosition: cuDropPosition });
         }}
         onCheck={(key) => {
           const curKey = key as string[];
-          check([...leftCheckKeys,...curKey,...rightCheckKeys]);
+          check([...leftCheckKeys, ...curKey, ...rightCheckKeys]);
         }}
       />
       <ContentTree
         title="固定在右侧"
         treeData={rightContentTreeData}
         checkedKeys={rightCheckKeys}
-        onDrop={({ dragNodesKeys, dropPosition })=>{
-          const leftLen=leftContentTreeData.length;
-          const norLen=norContentTreeData.length;
-          const cuDropPosition=leftLen+norLen+dropPosition;
-          onDropEnd({dragNodesKeys, dropPosition:cuDropPosition});
+        onDrop={({ dragNodesKeys, dropPosition }) => {
+          const leftLen = leftContentTreeData.length;
+          const norLen = norContentTreeData.length;
+          const cuDropPosition = leftLen + norLen + dropPosition;
+          onDropEnd({ dragNodesKeys, dropPosition: cuDropPosition });
         }}
         onCheck={(key) => {
           const curKey = key as string[];
-          check([...leftCheckKeys,...norCheckKeys,...curKey]);
+          check([...leftCheckKeys, ...norCheckKeys, ...curKey]);
         }}
       />
     </div>

package/src/components/HTableBody/Options/ContentTree.tsx

@@ -15,11 +15,7 @@ export default ({ treeData, checkedKeys, onDrop, onCheck, title }: IProps) => {
     return null;
   }
   return (
-    <Space
-      className={treeItemContent}
-      direction="vertical"
-      size={12}
-    >
+    <Space className={treeItemContent} direction="vertical" size={12}>
       <Typography.Text type={"secondary"} style={{ paddingLeft: 24 }}>
         {title}
       </Typography.Text>

package/src/components/HTableBody/Options/hooks.tsx

@@ -58,15 +58,12 @@ export const useContentTree = ({ columns, matchKey }: UseContentTreeModal) => {
   }, [columns]);
 };
 interface UseTreeKeysModal {
-  treeData:ColDataNode[];
-  checkKeys:string[];
+  treeData: ColDataNode[];
+  checkKeys: string[];
 }
 
-export const useTreeKeys = ({
-  treeData,
-  checkKeys,
-}: UseTreeKeysModal) => {
-  return  useMemo(()=>{
+export const useTreeKeys = ({ treeData, checkKeys }: UseTreeKeysModal) => {
+  return useMemo(() => {
     const newKeys: string[] = [];
     treeData.forEach(({ key }) => {
       const index = checkKeys.indexOf(key);
@@ -75,5 +72,5 @@ export const useTreeKeys = ({
       }
     });
     return newKeys;
-  },[treeData, checkKeys])
+  }, [treeData, checkKeys]);
 };

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

@@ -3,12 +3,12 @@ import Body from "./HTableBody";
 import useCurrentTable from "./hooks/useCurrentTable";
 import useRowObj from "./hooks/useRowObj";
 import { HTableContext } from "./context";
-import { Space } from "antd";
 import type { HTableProps } from "./modal";
 import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import { useState } from "react";
 import { useClassName } from "./hooks";
+
 export default ({
   request,
   configData,
@@ -85,7 +85,7 @@ export default ({
         configData,
         onFinish: (value) => {
           rowSelectionReload();
-          return run({ ...saveParams.old, ...value, current: 1 });
+          return run({ ...value, current: 1 });
         },
         onPageChange: tableInstance.table.reloadWithParams,
         setSelectedRowData,

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>,
+          ],
+        },
+      ]}
+    />
+  );
+};