@hw-component/table 0.0.7-beta-v8 → 0.0.7-beta-v9

package/src/components/HTableBody/index.tsx

@@ -1,7 +1,7 @@
 import type { ProTableProps } from "@ant-design/pro-table";
 import ProTable from "@ant-design/pro-table";
 import type { ActionRenderFn, ConfigDataModal, ParamsModal } from "../modal";
-import { useCols, useSynchronousKeys } from "./hooks";
+import { useCols, useSize, useSynchronousKeys } from "./hooks";
 import { useHTableContext } from "../context";
 import type { DetailedReactHTMLElement } from "react";
 import React from "react";
@@ -13,8 +13,8 @@ import { useClassName } from "../hooks";
 import AlertMsg from "./AlertMsg";
 import type { HRowSelection } from "../modal";
 import type { AffixProps } from "antd/lib/affix";
-import GoTop from "../GoTop";
-interface HTableBodyProps
+import Options from "./Options";
+export interface HTableBodyProps
   extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
   configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
@@ -49,10 +49,11 @@ export default ({
   tableStyle,
   paginationStyle,
   headerTitle,
-  options,
+  options = {},
   actionRender,
   affixProps,
   goTop = true,
+  size,
   ...props
 }: HTableBodyProps) => {
   // @ts-ignore
@@ -71,14 +72,13 @@ export default ({
     emptyRender: tableEmptyRender = defaultRender,
     errorRender: tableErrorRender = defaultRender,
   } = useHTableConfigContext({ emptyRender, errorRender });
+  const { cuSize, setCuSize } = useSize(size);
   const bodyConfigData = configData || contextConfigData;
   const { records } = data || {};
-  const cols = useCols({
+  const { cols, changeCols } = useCols({
     configData: bodyConfigData,
-    rowSelection,
     table: tableInstance,
   });
-
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
 
   const { keys = [], selectAll } = selectedRowData;
@@ -103,6 +103,18 @@ export default ({
           />
         </div>
       )}
+      {options && (
+        <Options
+          reload={() => {
+            tableInstance.table.reloadWithParams();
+          }}
+          {...options}
+          size={cuSize}
+          columns={cols}
+          setSizeChange={setCuSize}
+          onChange={changeCols}
+        />
+      )}
       <ConfigProvider
         renderEmpty={() => {
           if (error) {
@@ -113,17 +125,10 @@ export default ({
       >
         <ProTable
           {...props}
-          columns={cols}
+          columns={(cols as any)}
+          size={cuSize}
           search={false}
-          options={
-            options
-              ? options
-              : {
-                  reload: () => {
-                    tableInstance.table.reloadWithParams();
-                  },
-                }
-          }
+          options={false}
           tableStyle={{
             paddingBottom: 0,
           }}

package/src/components/HTableHeader/hooks.tsx

@@ -63,6 +63,9 @@ const formConfigDataItemProvider = ({
   dataIndex,
   itemProps = {},
   searchRender,
+  childrenDataIndex,
+  showSearch,
+  hideInTable,
   ...props
 }: FormConfigDataItemProviderModal): HItemProps => {
   const { allowClear = true } = itemProps as any;

package/src/components/hooks/useHTable.tsx

@@ -17,6 +17,7 @@ export default () => {
       getParams: () => {
         return {} as any;
       },
+      settingKeys: [],
     };
   }, []);
   return {

package/src/components/index.less

@@ -44,3 +44,44 @@
   }
 }
 
+.@{ant-prefix}-hw-table-body-option{
+  padding: 0px 24px 16px 24px;
+
+}
+.@{ant-prefix}-hw-table-body-option-icon{
+ font-size: 16px;
+}
+.@{ant-prefix}-hw-table-body-option-setting-content{
+  width: 198px;
+  margin: -10px -16px;
+}
+.@{ant-prefix}-hw-table-body-option-setting-title{
+  width: 198px;
+  margin: 0px -16px;
+  padding: 6px 8px;
+}
+.@{ant-prefix}-hw-table-body-option-setting-content-title{
+  display: flex;
+}
+.@{ant-prefix}-hw-table-body-option-tree{
+  .@{ant-prefix}-tree-treenode{
+     width: 100%;
+    padding-left: 24px !important;
+  }
+  .@{ant-prefix}-tree-node-content-wrapper{
+    flex: 1;
+  }
+  .@{ant-prefix}-tree-switcher{
+    width: 0px;
+  }
+  .@{ant-prefix}-tree-treenode-draggable{
+      padding-left: 0px !important;
+  }
+}
+.@{ant-prefix}-hw-table-pointer{
+  cursor: pointer;
+  &:hover{
+    color:#1890ff;
+  }
+}
+

package/src/components/modal.ts

@@ -35,8 +35,14 @@ interface HColumns extends Omit<ProColumns, "render"> {
   showSearch?: boolean;
   searchType?: HItemProps["type"];
   searchRender?: HItemProps["render"];
+  rowSelectionTitle?: boolean;
 }
-export type ConfigItemModal = Omit<HItemProps, "render" | "type"> & HColumns;
+interface BcItemModal {
+  childrenDataIndex?: string[];
+}
+export type ConfigItemModal = Omit<HItemProps, "render" | "type"> &
+  HColumns &
+  BcItemModal;
 export type ConfigDataModal = ConfigItemModal[];
 export type ActionRenderFn = (
   selectedRowKeys: RowObj,
@@ -100,6 +106,7 @@ export interface TableInstance {
   dispatch: (key: string, params: any) => void;
   reloadWithParams: (params?: ParamsModal) => Promise<any>;
   getParams: () => any;
+  settingKeys: string[];
 }
 export interface HTableInstance {
   form: HFormInstance;

package/src/pages/Table/index.tsx

@@ -4,9 +4,10 @@ import { HFormConfigProvider } from "@hw-component/form";
 
 const configData = [
   {
-    title: "座位",
+    title: "座位21321",
     showSearch: true,
     searchType: "select",
+    hideInTable: true,
     dataIndex: "name",
     itemProps: {
       options: [{ label: "1", value: 1 }],
@@ -15,7 +16,8 @@ const configData = [
   {
     title: "座位断开",
     showSearch: true,
-    dataIndex: "name",
+    dataIndex: "name1",
+    childrenDataIndex: ["name5", "name3"],
     itemProps: {
       options: [{ label: "1", value: 1 }],
     },
@@ -23,16 +25,7 @@ const configData = [
   {
     title: "座位",
     showSearch: true,
-    dataIndex: "name",
-    itemProps: {
-      options: [{ label: "1", value: 1 }],
-    },
-  },
-  {
-    title: "座位",
-    showSearch: true,
-    searchType: "select",
-    dataIndex: "name",
+    dataIndex: "name2",
     itemProps: {
       options: [{ label: "1", value: 1 }],
     },
@@ -61,23 +54,23 @@ export default () => {
           configData={configData}
           rowKey={"id"}
           table={hTable}
-          rowSelection={{
-            getCheckboxProps: (item) => {
-              return {
-                disabled: item.id === 2,
-              };
-            },
-          }}
+          rowSelection={{}}
           affixProps={{
             target: () => document.querySelector(".body"),
           }}
-          options={{
-            reload: false,
-            setting: false,
-            density: false,
-          }}
           actionRender={() => {
-            return <Button>你大爷</Button>;
+            return (
+              <Button
+                onClick={() => {
+                  console.log(hTable.table.settingKeys);
+                }}
+              >
+                你大爷
+              </Button>
+            );
+          }}
+          scroll={{
+            x: 1000,
           }}
           headerTitle={<Button type={"primary"}>操作</Button>}
           request={(params) => {