@@ -2,13 +2,17 @@ import React, { useEffect, useMemo, useState } from 'react';
22import { TableDataType } from '@/constants/table' ;
33import { IManageResultData , ITableHeaderItem } from '@/typings/database' ;
44import { formatDate } from '@/utils/date' ;
5- import { message , Modal , Table } from 'antd' ;
6- import { applyTransforms , BaseTable , BaseTableProps , collectNodes , makeColumnResizeTransform } from 'ali-react-table' ;
5+ import { Button , message , Modal , Table } from 'antd' ;
6+ import antd from 'antd' ;
7+ import { BaseTable , ArtColumn , useTablePipeline , features } from 'ali-react-table' ;
78import Iconfont from '../Iconfont' ;
89import classnames from 'classnames' ;
910import StateIndicator from '../StateIndicator' ;
1011import MonacoEditor from '../Console/MonacoEditor' ;
12+ import { useTheme } from '@/hooks/useTheme' ;
13+ import styled from 'styled-components' ;
1114import styles from './TableBox.less' ;
15+ import { ThemeType } from '@/constants' ;
1216
1317interface ITableProps {
1418 className ?: string ;
@@ -20,11 +24,30 @@ interface IViewTableCellData {
2024 name : string ;
2125 value : any ;
2226}
27+ // --bgcolor: #333;
28+ // --header-bgcolor: #45494f;
29+ const DarkSupportBaseTable : any = styled ( BaseTable ) `
30+ &.dark {
31+ --bgcolor: #131418;
32+ --header-bgcolor: #0a0b0c;
33+ --hover-bgcolor: #46484a;
34+ --header-hover-bgcolor: #606164;
35+ --highlight-bgcolor: #191a1b;
36+ --header-highlight-bgcolor: #191a1b;
37+ --color: #dadde1;
38+ --header-color: #dadde1;
39+ --lock-shadow: rgb(37 37 37 / 0.5) 0 0 6px 2px;
40+ --border-color: #3c4045;
41+ }
42+ ` ;
2343
2444export default function TableBox ( props : ITableProps ) {
2545 const { className, data, key } = props ;
2646 const { headerList, dataList, duration, description } = data || { } ;
2747 const [ viewTableCellData , setViewTableCellData ] = useState < IViewTableCellData | null > ( null ) ;
48+ const [ appTheme ] = useTheme ( ) ;
49+
50+ const isDarkTheme = useMemo ( ( ) => appTheme . backgroundColor === ThemeType . Dark , [ appTheme ] ) ;
2851
2952 function viewTableCell ( data : IViewTableCellData ) {
3053 setViewTableCellData ( data ) ;
@@ -39,24 +62,28 @@ export default function TableBox(props: ITableProps) {
3962 setViewTableCellData ( null ) ;
4063 }
4164
42- const columns = useMemo (
65+ const columns : ArtColumn [ ] = useMemo (
4366 ( ) =>
44- ( headerList || [ ] ) . map ( ( item : any ) => ( {
45- title : item . name ,
46- dataIndex : item . name ,
67+ ( headerList || [ ] ) . map ( ( item , index ) => ( {
4768 code : item . name ,
69+ name : item . name ,
4870 key : item . name ,
49- type : item . dataType ,
50- sorter : ( a : any , b : any ) => a [ item . name ] - b [ item . name ] ,
51- render : ( value : any ) => (
52- < div className = { styles . tableItem } >
53- < div className = { styles . tableHoverBox } >
54- < Iconfont code = "" onClick = { viewTableCell . bind ( null , { name : item . name , value } ) } />
55- < Iconfont code = "" onClick = { copyTableCell . bind ( null , { name : item . name , value } ) } />
71+ lock : index === 0 ,
72+ width : 120 ,
73+ // type: item.dataType,
74+ // sorter: (a: any, b: any) => a[item.name] - b[item.name],
75+ render : ( value : any , row : any , rowIndex : number ) => {
76+ console . log ( 'rowIndex' , rowIndex ) ;
77+ return (
78+ < div className = { styles . tableItem } >
79+ < div > { value } </ div >
80+ < div className = { styles . tableHoverBox } >
81+ < Iconfont code = "" onClick = { viewTableCell . bind ( null , { name : item . name , value } ) } />
82+ < Iconfont code = "" onClick = { copyTableCell . bind ( null , { name : item . name , value } ) } />
83+ </ div >
5684 </ div >
57- { value }
58- </ div >
59- ) ,
85+ ) ;
86+ } ,
6087 } ) ) ,
6188 [ headerList ] ,
6289 ) ;
@@ -71,11 +98,11 @@ export default function TableBox(props: ITableProps) {
7198 const { dataType : type } = headerList [ index ] || { } ;
7299 // console.log('headerList[rowIndex]', headerList[rowIndex]);
73100 if ( type === TableDataType . DATETIME && i ) {
74- rowData [ columns [ index ] . title ] = formatDate ( i , 'yyyy-MM-dd hh:mm:ss' ) ;
101+ rowData [ columns [ index ] . name ] = formatDate ( i , 'yyyy-MM-dd hh:mm:ss' ) ;
75102 } else if ( i === null ) {
76- rowData [ columns [ index ] . title ] = '[null]' ;
103+ rowData [ columns [ index ] . name ] = '[null]' ;
77104 } else {
78- rowData [ columns [ index ] . title ] = i ;
105+ rowData [ columns [ index ] . name ] = i ;
79106 }
80107 } ) ;
81108 rowData . key = rowIndex ;
@@ -84,15 +111,32 @@ export default function TableBox(props: ITableProps) {
84111 }
85112 } , [ dataList , columns ] ) ;
86113
87- console . log ( 'dataList' , dataList ) ;
114+ const pipeline = useTablePipeline ( )
115+ . input ( { dataSource : tableData , columns } )
116+ . use (
117+ features . columnResize ( {
118+ fallbackSize : 120 ,
119+ minSize : 60 ,
120+ maxSize : 1080 ,
121+ // handleBackground: '#ddd',
122+ // handleHoverBackground: '#aaa',
123+ // handleActiveBackground: '#89bff7',
124+ } ) ,
125+ ) ;
88126 return (
89127 < div className = { classnames ( className , styles . tableBox ) } >
90128 { columns . length ? (
91- < Table pagination = { false } columns = { columns } dataSource = { tableData } scroll = { { y : '100vh' } } size = "small" />
129+ // <Table pagination={false} columns={columns} dataSource={tableData} scroll={{ y: '100vh' }} size="small" />
130+ < >
131+ < DarkSupportBaseTable
132+ className = { classnames ( { dark : isDarkTheme } , props . className , styles . table ) }
133+ { ...pipeline . getProps ( ) }
134+ />
135+ < div className = { styles . statusBar } > { `结果:${ description } ${ duration } } </ div >
136+ </ >
92137 ) : (
93138 < StateIndicator state = "success" text = "执行成功" />
94139 ) }
95- < div className = { styles . statusBar } > { `结果:${ description } ${ duration } } </ div >
96140 < Modal
97141 title = { viewTableCellData ?. name }
98142 open = { ! ! viewTableCellData ?. name }
@@ -116,20 +160,9 @@ export default function TableBox(props: ITableProps) {
116160 options = { {
117161 readOnly : true ,
118162 } }
119- > </ MonacoEditor >
163+ / >
120164 </ div >
121165 </ Modal >
122166 </ div >
123167 ) ;
124168}
125- function pipeline ( arg0 : {
126- sizes : number ;
127- onChangeSizes : React . Dispatch < React . SetStateAction < number > > ;
128- appendExpander : boolean ;
129- expanderVisibility : string ;
130- disableUserSelectWhenResizing : boolean ;
131- minSize : number ;
132- maxSize : number ;
133- } ) : import ( 'ali-react-table' ) . Transform < { columns: any ; dataSource: any } > {
134- throw new Error ( 'Function not implemented.' ) ;
135- }
0 commit comments