|
@@ -1,9 +1,11 @@
|
|
|
import { QuestionCircleOutlined } from "@ant-design/icons";
|
|
|
-import { useFullscreen, useLocalStorageState, useMount, useSetState } from "ahooks";
|
|
|
+import { useDebounceFn, useFullscreen, useLocalStorageState, useMount, useSetState } from "ahooks";
|
|
|
import { Card, Col, Row, Space, Tooltip } from "antd";
|
|
|
-import React, { useRef, useState } from "react"
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from "react"
|
|
|
import style from './index.less'
|
|
|
import Settings from "../Settings";
|
|
|
+import CustomListModel from "@/components/CustomList";
|
|
|
+import NewTable from "./newTable";
|
|
|
|
|
|
const log = (text?: any, key?: string) => {
|
|
|
console.log(`pro_${key || ''}----->`, text)
|
|
@@ -11,6 +13,7 @@ const log = (text?: any, key?: string) => {
|
|
|
export const DispatchContext = React.createContext<PROAPI.TableContentProps | null>(null);
|
|
|
export const DispatchHeader = React.createContext<PROAPI.HeaderContentProps | null>(null);
|
|
|
export const version = '1.0.0'
|
|
|
+const ran = Math.ceil(Math.random() * 100)
|
|
|
/**
|
|
|
* 升级版表格
|
|
|
* @returns
|
|
@@ -26,12 +29,20 @@ const TablePro: React.FC<PROAPI.TableProProps> = ({
|
|
|
leftChild,
|
|
|
size = 'small',
|
|
|
className,
|
|
|
- total
|
|
|
+ total,
|
|
|
+ page,
|
|
|
+ pageSize,
|
|
|
+ scroll,
|
|
|
+ dataSource,
|
|
|
+ isZj,
|
|
|
+ totalData = [],
|
|
|
+ rowSelection,
|
|
|
+ summary
|
|
|
}) => {
|
|
|
|
|
|
/*********************************************/
|
|
|
const [lsDataSource, setLsDataSource] = useLocalStorageState(`myAdMonitorConfig${version}_` + configName);
|
|
|
- const [lsFixed, setLsFixed] = useLocalStorageState<{ left: 0, right: 0 }>(`myAdMonitorConfigFixed${version}_` + configName);
|
|
|
+ const [lsFixed] = useLocalStorageState<{ left: number, right: number }>(`myAdMonitorConfigFixed${version}_` + configName);
|
|
|
const [state, setState] = useSetState<PROAPI.State>({
|
|
|
// 所有配置用key转Object
|
|
|
configObj: {},
|
|
@@ -69,26 +80,33 @@ const TablePro: React.FC<PROAPI.TableProProps> = ({
|
|
|
})
|
|
|
})
|
|
|
setState({ defaultColumns: newColumns, configObj: newConfigObj })
|
|
|
- handleColumns(newColumns, newConfigObj)
|
|
|
+ handleColumns(newColumns, newConfigObj, lsDataSource, lsFixed)
|
|
|
}
|
|
|
|
|
|
-
|
|
|
// 处理columns
|
|
|
- const handleColumns = (defaultColumns: any[], configObj: { [key: string]: string; }) => {
|
|
|
+ const handleColumns = (defaultColumns: any[], configObj: { [key: string]: string; }, lsDataSource?: any, lsFixed?: { left: number, right: number }) => {
|
|
|
log(defaultColumns, 'defaultColumns')
|
|
|
log(configObj, 'configObj')
|
|
|
+ log(lsDataSource, 'lsDataSource')
|
|
|
+
|
|
|
// 使用默认配置
|
|
|
let newColumns = defaultColumns
|
|
|
let newFixed = fixed
|
|
|
- log(lsFixed, 'lsFixed')
|
|
|
if (lsFixed) {
|
|
|
newFixed = lsFixed
|
|
|
}
|
|
|
if (lsDataSource) { // 找到了设置的配置
|
|
|
-
|
|
|
+ newColumns = lsDataSource
|
|
|
+ .filter((item: { dataIndex: string | number; }) => !!item && configObj[item.dataIndex])
|
|
|
+ .map((item: { dataIndex: string | number; width: number }) => {
|
|
|
+ let column = configObj[item.dataIndex]
|
|
|
+ column['width'] = item.width
|
|
|
+ return column
|
|
|
+ })
|
|
|
}
|
|
|
+ log(newFixed, 'newFixed')
|
|
|
newColumns = newColumns.map(item => ({ ...item, key: item.dataIndex }))
|
|
|
- if (newFixed.left && newFixed.right) {
|
|
|
+ if (newFixed.left || newFixed.right) {
|
|
|
for (let i = 0; i < Math.min(newFixed.left, newColumns.length); i++) {
|
|
|
newColumns[i] = { ...newColumns[i], fixed: 'left' };
|
|
|
}
|
|
@@ -102,31 +120,116 @@ const TablePro: React.FC<PROAPI.TableProProps> = ({
|
|
|
}
|
|
|
|
|
|
|
|
|
- return <Row gutter={[0, 20]} ref={ref} style={isFull ? { background: '#fff' } : {}}>
|
|
|
- <Col span={24}>
|
|
|
- <Card
|
|
|
- style={{ borderRadius: 8 }}
|
|
|
- headStyle={{ textAlign: 'left' }}
|
|
|
- bodyStyle={{ padding: '5px 10px' }}
|
|
|
- >
|
|
|
- {title && <div className={style.title}>
|
|
|
- <Space><span>{title}</span>{tips && <Tooltip title={tips}><span><QuestionCircleOutlined /></span></Tooltip>}</Space>
|
|
|
- </div>}
|
|
|
- <Row gutter={[0, 16]}>
|
|
|
- <DispatchHeader.Provider value={{ setIsFullscreen, isFullscreen, isFull, toggleFull, setVisible, ajax, czChild, leftChild }}>
|
|
|
- <Settings />
|
|
|
- </DispatchHeader.Provider>
|
|
|
- <DispatchContext.Provider value={{total}}>
|
|
|
- <Col span={24}>
|
|
|
- <div className={`${style[size]} ${className ? style[className] : ''} `}>
|
|
|
-
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </DispatchContext.Provider>
|
|
|
- </Row>
|
|
|
- </Card>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
+ useEffect(() => {
|
|
|
+ const contentBodyScroll = (e: any) => {
|
|
|
+ let el = document.querySelector(`.header_table_body_${ran} .ant-table-body`);
|
|
|
+ if (el) {
|
|
|
+ el.scrollLeft = e.target.scrollLeft
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const headerBodyScroll = (e: any) => {
|
|
|
+ let el = document.querySelector(`.content_table_body_${ran} .ant-table-body`);
|
|
|
+ if (el) {
|
|
|
+ el.scrollLeft = e.target.scrollLeft
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (isZj) {
|
|
|
+ document.querySelector(`.content_table_body_${ran} .ant-table-body`)?.addEventListener('scroll', contentBodyScroll);
|
|
|
+ document.querySelector(`.header_table_body_${ran} .ant-table-body`)?.addEventListener('scroll', headerBodyScroll);
|
|
|
+ }
|
|
|
+ () => {
|
|
|
+ if (isZj) {
|
|
|
+ document.querySelector(`.content_table_body_${ran} .ant-table-body`)?.removeEventListener('scroll', contentBodyScroll);
|
|
|
+ document.querySelector(`.header_table_body_${ran} .ant-table-body`)?.removeEventListener('scroll', headerBodyScroll);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [isZj, ran])
|
|
|
+
|
|
|
+ const { run: runResize } = useDebounceFn((columns) => {
|
|
|
+ if (configName) {
|
|
|
+ let newSelectData = state.columns?.map((item, index) => {
|
|
|
+ item['width'] = columns[index]['width']
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ setLsDataSource(newSelectData)
|
|
|
+ }
|
|
|
+ }, { wait: 200 });
|
|
|
+
|
|
|
+ //拖动宽度设置设置保存
|
|
|
+ const handelResize = useCallback((columns: any) => {
|
|
|
+ runResize(columns)
|
|
|
+ }, [configName, state.columns])
|
|
|
+
|
|
|
+ return <>
|
|
|
+ {/* 设置展示参数 */}
|
|
|
+ {visible && <CustomListModel
|
|
|
+ columns={state.columns}
|
|
|
+ sysFixed={fixed}
|
|
|
+ version={version}
|
|
|
+ config={config}
|
|
|
+ configName={configName}
|
|
|
+ visible={visible}
|
|
|
+ onClose={() => { setVisible(false) }}
|
|
|
+ onChange={(value) => {
|
|
|
+ if (value) {
|
|
|
+ handleColumns(state.defaultColumns, state.configObj, value?.selectData, value?.fixed)
|
|
|
+ } else {
|
|
|
+ handleColumns(state.defaultColumns, state.configObj)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+ <Row gutter={[0, 20]} ref={ref} style={isFull ? { background: '#fff' } : {}}>
|
|
|
+ <Col span={24}>
|
|
|
+ <Card
|
|
|
+ style={{ borderRadius: 8 }}
|
|
|
+ headStyle={{ textAlign: 'left' }}
|
|
|
+ bodyStyle={{ padding: '5px 10px' }}
|
|
|
+ >
|
|
|
+ {title && <div className={style.title}>
|
|
|
+ <Space><span>{title}</span>{tips && <Tooltip title={tips}><span><QuestionCircleOutlined /></span></Tooltip>}</Space>
|
|
|
+ </div>}
|
|
|
+ <Row gutter={[0, 16]}>
|
|
|
+ <DispatchHeader.Provider value={{ setIsFullscreen, isFullscreen, isFull, toggleFull, setVisible, ajax, czChild, leftChild }}>
|
|
|
+ <Settings />
|
|
|
+ </DispatchHeader.Provider>
|
|
|
+ <DispatchContext.Provider value={{ total, page, pageSize, handelResize }}>
|
|
|
+ <Col span={24}>
|
|
|
+ <div className={`${style[size]} ${className ? style[className] : ''} `}>
|
|
|
+ {
|
|
|
+ isZj && <NewTable
|
|
|
+ bordered
|
|
|
+ columns={state.columns}
|
|
|
+ dataSource={totalData?.length > 0 ? [...totalData] : [{ id: 1 }]}
|
|
|
+ scroll={scroll ? isFull ? { ...scroll, y: document.body.clientHeight - 300 } : scroll : {}}
|
|
|
+ size={size}
|
|
|
+ pagination={false}
|
|
|
+ loading={ajax?.loading}
|
|
|
+ rowSelection={rowSelection}
|
|
|
+ className={`all_table header_table_body header_table_body_${ran} ${className ? className : ''}`}
|
|
|
+ sortDirections={['ascend', 'descend', null]}
|
|
|
+ // onChange={(pagination: any, filters: any, sorter: any) => onChange && onChange({ pagination, filters, sortData: sorter })}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ <NewTable
|
|
|
+ showHeader={!isZj}
|
|
|
+ sortDirections={['ascend', 'descend', null]}
|
|
|
+ bordered
|
|
|
+ className={`all_table content_table_body content_table_body_${ran} ${className ? className : ''}`}
|
|
|
+ scroll={scroll ? isFull ? { ...scroll, y: document.body.clientHeight - 300 } : scroll : {}}
|
|
|
+ columns={state.columns}
|
|
|
+ dataSource={dataSource}
|
|
|
+ loading={ajax?.loading}
|
|
|
+ rowSelection={rowSelection}
|
|
|
+ summary={summary}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </DispatchContext.Provider>
|
|
|
+ </Row>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </>
|
|
|
}
|
|
|
|
|
|
export default React.memo(TablePro)
|