asder

package.json

@@ -20,6 +20,7 @@
     ]
   },
   "dependencies": {
+    "@ant-design/pro-components": "^2.3.30",
     "@ant-design/pro-layout": "^6.5.0",
     "ahooks": "^3.7.2",
     "color-thief-react": "^2.1.0",
@@ -28,7 +29,9 @@
     "express-http-proxy": "^1.6.3",
     "react": "17.x",
     "react-amap": "^1.2.8",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "17.x",
+    "react-resizable": "^3.0.4",
     "umi": "^3.5.35",
     "umi-request": "^1.4.0"
   },

src/components/AutoTable/Resizecell/index.jsx

+import React, { Component } from 'react';
+import { Resizable } from 'react-resizable';
+
+function Resizecell({ onResize, onResizeStop, width, onClick, ...restProps }) {
+  return (
+    <Resizable
+      width={width ?? 1}
+      height={0}
+      onResize={onResize}
+      onResizeStop={onResizeStop}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+}
+
+export default Resizecell;

src/components/AutoTable/index.jsx

+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState, memo, useMemo } from 'react';
+import { ProTable } from '@ant-design/pro-components';
+import Resizecell from './Resizecell';
+import { Tooltip } from 'antd';
+import { doFetch } from '@/utils/doFetch';
+import { useAsyncEffect } from 'ahooks';
+
+let handlEmptyChild = (tree = []) => {
+  const newtree = tree.map((item) => {
+    if (!item.children || item.children.length == 0) {
+      item.value = item.key;
+      return item;
+    } else {
+      item.value = item.key;
+      return {
+        ...item,
+        children: handlEmptyChild(item.children),
+      };
+    }
+  });
+  return newtree;
+};
+
+const Mtable = (props) => {
+  const {
+    actionRef, //表格动作
+    formRef, //表单Ref
+    rowKey, // key
+    columns = [], //columns
+    style, //style
+    path, //接口地址
+    extraparams, //额外参数
+    pageSize, //修改默认pageSize
+    pagination, //分页设置
+    x, //横向滚动
+    activeTabKey, //激活的tabKey 拖拽表格唯一标识使用 其他情况用不到
+    refreshDep, //依赖刷新 （已废弃）
+    getDefaultSelected, //存在默认选中向上返回选中值
+    resizeable = true,
+  } = props;
+
+  const actionRefs = actionRef ?? useRef(),
+    formRefs = formRef ?? useRef(),
+    ifspagination = pagination == 'false' || pagination === false,
+    [size, setsize] = useState('large'),
+    [valueColumns, setvalueColumns] = useState({});
+  const [columnes, setcolumnes] = useState(columns ?? []);
+
+  //调用接口
+  const request = async (params, sort, filter) => {
+    if (!path) return;
+    let newparams = {
+      ...params,
+      ...extraparams, //父组件传参
+      pageIndex: params.current,
+      pageSize: params.pageSize || pageSize,
+    };
+    delete newparams.current;
+    if (ifspagination) {
+      delete newparams.pageIndex;
+      delete newparams.pageSize;
+    }
+    const result = await doFetch({ url: path, params: newparams });
+    //分页结果
+    let data = result?.data?.page?.records,
+      success = true,
+      total = result?.data?.page?.total;
+    //不带分页获取结果
+    if (ifspagination) {
+      data = result?.data?.dataList;
+      total = result?.data?.dataList?.length;
+    }
+    //存在默认选中向上返回选中值
+    getDefaultSelected && getDefaultSelected(result?.data);
+    return {
+      data,
+      success,
+      total,
+    };
+  };
+  //更新 columns
+  useEffect(() => {
+    setcolumnes((s) => {
+      return columns.map((item, index) => {
+        let it = { ...item };
+        let itemwidth = valueColumns[it.key]?.width
+          ? valueColumns[it.key].width
+          : it.width
+          ? it.width
+          : resizeable
+          ? 160