|
@@ -36,14 +36,14 @@ interface Prosp {
|
|
|
}
|
|
|
}) => void,
|
|
|
ajax?: any,//接口刷新
|
|
|
- syncAjax?:any,//同步
|
|
|
+ syncAjax?: any,//同步
|
|
|
hoverable?: boolean,
|
|
|
rowSelection?: any,
|
|
|
- myKey?:any,//自定义使用哪个值做key
|
|
|
+ myKey?: any,//自定义使用哪个值做key
|
|
|
}
|
|
|
|
|
|
function TableData(props: Prosp) {
|
|
|
- const { isZj, scroll, columns, title, dataSource, expandedRowRender, className, leftChild, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', total = 0, loading = false, onChange, config, configName, ajax,syncAjax, hoverable = true ,myKey} = props
|
|
|
+ const { isZj, scroll, columns, title, dataSource, expandedRowRender, className, leftChild, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', total = 0, loading = false, onChange, config, configName, ajax, syncAjax, hoverable = true, myKey } = props
|
|
|
const { state: userState } = useModel('useOperating.useUser')
|
|
|
const { isFell } = userState
|
|
|
const [visible, setVisible] = useState<boolean>(false)
|
|
@@ -52,6 +52,11 @@ function TableData(props: Prosp) {
|
|
|
const [newColumns, setNewColumns] = useState<any[]>([])
|
|
|
// const [oldConfigName, setOldConfigName] = useState<any>('')//上次的配置名称
|
|
|
const [selectData, setSelectData] = useState<{ selectData: any[], fixed: { left: string, right: string } }>({ selectData: [], fixed: { left: '0', right: '0' } })
|
|
|
+ const [tiptopShow, setTipTopShow] = useState({//tiptop开关
|
|
|
+ ajaxShow: false,
|
|
|
+ syncAjaxShow: false,
|
|
|
+ configShow: false,
|
|
|
+ })
|
|
|
const ref = useRef(null)
|
|
|
const oldName = useRef(null)
|
|
|
const version = '1.0.0'
|
|
@@ -120,6 +125,37 @@ function TableData(props: Prosp) {
|
|
|
localStorage.setItem(`myAdMonitorConfig${version}_` + configName, JSON.stringify(newSelectData))
|
|
|
}
|
|
|
}, [configName, selectData])
|
|
|
+ // 初始展示TIPTOP提示功能
|
|
|
+ useEffect(() => {
|
|
|
+ let time: any = null
|
|
|
+ function timeOut(arg: any) {
|
|
|
+ return new Promise((res, rel) => {
|
|
|
+ time = setTimeout(() => {
|
|
|
+ setTipTopShow({ ...tiptopShow, ...arg })
|
|
|
+ res(true)
|
|
|
+ }, 3000)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ async function isShow() {
|
|
|
+ if (ajax) {
|
|
|
+ setTipTopShow({ ...tiptopShow, ajaxShow: true })
|
|
|
+ await timeOut({ ajaxShow: false })
|
|
|
+ }
|
|
|
+ if (syncAjax) {
|
|
|
+ setTipTopShow({ ...tiptopShow, syncAjaxShow: true })
|
|
|
+ await timeOut({ syncAjaxShow: false })
|
|
|
+ }
|
|
|
+ if (config) {
|
|
|
+ setTipTopShow({ ...tiptopShow, configShow: true })
|
|
|
+ await timeOut({ configShow: false })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ isShow()
|
|
|
+ return () => {
|
|
|
+ clearTimeout(time)
|
|
|
+ time = null
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
const header = <Col span={24}>
|
|
|
<Row gutter={[0, 10]}>
|
|
|
<Col span={24} style={{
|
|
@@ -131,43 +167,55 @@ function TableData(props: Prosp) {
|
|
|
{leftChild}
|
|
|
</Space>
|
|
|
{/*紧凑*/}
|
|
|
- <div style={{ float: 'right',display:'flex',flexFlow:'row' }}>
|
|
|
+ <div style={{ float: 'right', display: 'flex', flexFlow: 'row' }}>
|
|
|
{
|
|
|
ajax && <Button
|
|
|
size='small'
|
|
|
type='text'
|
|
|
- style={{display:'flex',alignItems:'center'}}
|
|
|
+ style={{ display: 'flex', alignItems: 'center' }}
|
|
|
onClick={() => {
|
|
|
ajax.refresh()
|
|
|
}}>
|
|
|
<span style={{ fontSize: 10, color: '#999' }}>刷新时间:{ajax?.data?.reqTime}</span>
|
|
|
- <Tooltip title='刷新'><RedoOutlined style={{color:'#2196f3',fontSize:17}}/></Tooltip>
|
|
|
+ <Tooltip
|
|
|
+ title='刷新'
|
|
|
+ visible={tiptopShow.ajaxShow}
|
|
|
+ onVisibleChange={(visible) => {
|
|
|
+ setTipTopShow({ ...tiptopShow, ajaxShow: visible })
|
|
|
+ }}
|
|
|
+ ><RedoOutlined style={{ color: '#2196f3', fontSize: 17 }} /></Tooltip>
|
|
|
</Button>
|
|
|
}
|
|
|
{
|
|
|
syncAjax && <Button
|
|
|
size='small'
|
|
|
type='text'
|
|
|
- style={{display:'flex',alignItems:'center'}}
|
|
|
+ style={{ display: 'flex', alignItems: 'center' }}
|
|
|
onClick={() => {
|
|
|
syncAjax()
|
|
|
}}>
|
|
|
- <Tooltip title='同步最新'><SyncOutlined style={{color:'red',fontSize:17}}/></Tooltip>
|
|
|
+ <Tooltip
|
|
|
+ title='同步最新'
|
|
|
+ visible={tiptopShow.syncAjaxShow}
|
|
|
+ onVisibleChange={(visible) => {
|
|
|
+ setTipTopShow({ ...tiptopShow, syncAjaxShow: visible })
|
|
|
+ }}
|
|
|
+ ><SyncOutlined style={{ color: 'red', fontSize: 17 }} /></Tooltip>
|
|
|
</Button>
|
|
|
}
|
|
|
{config && <Button
|
|
|
size='small'
|
|
|
type='text'
|
|
|
- style={{display:'flex',alignItems:'center'}}
|
|
|
+ style={{ display: 'flex', alignItems: 'center' }}
|
|
|
onClick={() => {
|
|
|
setVisible(true)
|
|
|
}}>
|
|
|
- <Tooltip title='设置'><SettingOutlined style={{fontSize:17}}/></Tooltip>
|
|
|
+ <Tooltip title='设置'><SettingOutlined style={{ fontSize: 17 }} /></Tooltip>
|
|
|
</Button>}
|
|
|
<Button
|
|
|
type='text'
|
|
|
size='small'
|
|
|
- style={{display:'flex',alignItems:'center'}}
|
|
|
+ style={{ display: 'flex', alignItems: 'center' }}
|
|
|
onClick={() => {
|
|
|
if (ref?.current) {
|
|
|
quanpin(ref?.current)
|
|
@@ -192,7 +240,7 @@ function TableData(props: Prosp) {
|
|
|
>
|
|
|
<Row gutter={[0, 20]}>
|
|
|
{header}
|
|
|
- <Tab {...{ size, newColumns, handelResize, className, isZj, rowSelection, columns, loading, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax ,myKey}} />
|
|
|
+ <Tab {...{ size, newColumns, handelResize, className, isZj, rowSelection, columns, loading, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey }} />
|
|
|
</Row>
|
|
|
</Card>
|
|
|
</Col>
|
|
@@ -204,7 +252,7 @@ function TableData(props: Prosp) {
|
|
|
|
|
|
/**表格 */
|
|
|
const Tab = React.memo((props: any) => {
|
|
|
- const { size, newColumns, className, handelResize, columns, scroll, loading, rowSelection, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax ,myKey} = props
|
|
|
+ const { size, newColumns, className, handelResize, columns, scroll, loading, rowSelection, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey } = props
|
|
|
return < Col span={24} >
|
|
|
<div className={`${style[size]} ${className ? style[className] : ''} `}>
|
|
|
{dataSource || !ajax?.loading ? <Tables
|