fix

src/components/widthEllipsis/index.tsx

@@ -1,6 +1,5 @@
-import { Tooltip, Typography } from "antd"
-import React, { useEffect, useRef, useState } from "react"
-import style from './index.less'
+import { Typography } from "antd"
+import React from "react"
 import { copy } from "@/utils/utils"
 
 interface Props {
@@ -15,30 +14,7 @@ const WidthEllipsis: React.FC<Props> = (props) => {
 
     /*********************************/
     const { value, isCopy } = props
-    // const ref: any = useRef(null)
-    // const ref1: any = useRef(null)
-    // const [data, setData] = useState<{ visible?: boolean }>({})
-    // /*********************************/
-
-    // useEffect(() => {
-    //     // 容器宽度
-    //     let width = ref.current.clientWidth
-    //     // 文字实际宽度
-    //     let actualWidth = ref1.current.childNodes[0].getBoundingClientRect().width
-    //     if (actualWidth > width) {
-    //         setData({})
-    //     } else {
-    //         setData({ visible: false })
-    //     }
-    // }, [ref, ref1])
-
-    // return <Tooltip title={value} {...data}>
-    //     <div className={style.myEll}>
-    //         <div ref={ref} className="ellipsisOne" style={isCopy ? { color: '#1890ff' } : {}} onClick={() => { if(isCopy) copy((value || '') as any) }}>{value || '--'}</div>
-    //         <div ref={ref1} className={style.hiddenCon}><span>{value}</span></div>
-    //     </div>
-    // </Tooltip>
-    return <Typography.Text ellipsis={{ tooltip: true }} style={isCopy ? { color: '#1890ff' } : {}} onClick={() => { if(isCopy) copy((value || '') as any) }}>{value || '--'}</Typography.Text>
+    return <Typography.Text ellipsis={{ tooltip: true }} style={isCopy ? { color: '#1890ff' } : { color: 'inherit' }} onClick={() => { if(isCopy) copy((value || '') as any) }}>{value || '--'}</Typography.Text>
 }
 
 export default React.memo(WidthEllipsis)

src/pages/gameDataStatistics/components/TablePro/index.tsx

@@ -0,0 +1,72 @@
+import { useLocalStorageState, useMount, useSetState } from "ahooks";
+import React, { useState } from "react"
+
+const log = (text?: any, key?: string) => {
+    console.log(`pro_${key || ''}----->`, text)
+}
+export const DispatchContext = React.createContext<{} | null>(null);
+export const version = '1.0.0'
+/**
+ * 升级版表格
+ * @returns 
+ */
+const TablePro: React.FC<PROAPI.TableProProps> = ({
+    configName,
+    config,
+    fixed = { left: 0, right: 1 }
+}) => {
+
+    /*********************************************/
+    const [lsDataSource, setLsDataSource] = useLocalStorageState(`myAdMonitorConfig${version}_` + configName);
+    const [lsFixed, setLsFixed] = useLocalStorageState(`myAdMonitorConfigFixed${version}_` + configName);
+    const [state, setState] = useSetState<PROAPI.State>({
+        configObj: {},
+        columns: [],
+        defaultColumns: []
+    });
+    // const { configObj, columns, defaultColumns } = state
+    /*********************************************/
+
+    // 首次渲染
+    useMount(() => {
+        log('----mount-----')
+        handleConfig()
+    });
+
+    /**
+     * 处理config成对象 减少后期轮询
+     * 拿到默认Columns
+     */
+    const handleConfig = () => {
+        // log(config)
+        let newColumns: any[] = []
+        let newConfigObj: { [key: string]: any; } = {}
+        config?.forEach((item: { data: { default: any; dataIndex: string }[] }) => {
+            item?.data?.forEach((d: { default: any, dataIndex: string }) => {
+                newConfigObj[d.dataIndex] = d
+                if (d.default) {
+                    newColumns[d.default - 1] = d
+                }
+            })
+        })
+        setState({ defaultColumns: newColumns, configObj: newConfigObj })
+        handleColumns(newColumns, newConfigObj)
+    }
+
+
+    // 处理columns
+    const handleColumns = (defaultColumns: any[], configObj: { [key: string]: string; }) => {
+        log(defaultColumns, 'defaultColumns')
+        log(configObj, 'configObj')
+        if (lsDataSource) { // 找到了设置的配置
+
+        } else { // 使用默认配置
+
+        }
+    }
+
+
+    return <DispatchContext.Provider value={{}}></DispatchContext.Provider>
+}
+
+export default React.memo(TablePro)

src/pages/gameDataStatistics/components/TablePro/typings.d.ts

@@ -0,0 +1,15 @@
+declare namespace PROAPI {
+    type TableProProps = {
+        configName: string;
+        config: any;
+        fixed?: {
+            left: number,
+            right: number
+        };
+    };
+    type State = {
+        columns: any[];
+        configObj: { [key: string]: string; };
+        defaultColumns: any[];
+    }
+}

src/pages/gameDataStatistics/order/index.tsx

@@ -7,6 +7,7 @@ import columns12 from "./tableConfig"
 import { getPresets } from "@/components/QueryForm/const"
 import moment from "moment"
 import Details from "./details"
+import TablePro from "../components/TablePro"
 
 
 const Order: React.FC = () => {
@@ -135,7 +136,12 @@ const Order: React.FC = () => {
             configName={'订单明细'}
         />
 
-        {visible && <Details visible={visible} initialValues={orderData} onClose={() => setVisible(false)}/>}
+        {/* <TablePro
+            config={columns12(onDetail)}
+            configName={'订单明细'}
+        /> */}
+
+        {visible && <Details visible={visible} initialValues={orderData} onClose={() => setVisible(false)} />}
     </div>
 }