修改ts配置

.babelrc

+{
+    "presets": [
+        "env",
+        "react",
+        "stage-0"
+    ],
+    "plugins": [
+        [
+            "import",
+            {
+                "libraryName": "antd",
+                "style": true
+            }
+        ]
+    ]
+}

package.json

@@ -20,16 +20,15 @@
     "react": "16.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/preset-env": "^7.7.7",
-    "@types/core-js": "^2.5.2",
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
-    "af-webpack": "^1.14.4",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^7.1.5",
     "babel-plugin-import": "^1.13.0",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^6.0.3",
     "css-loader": "^3.3.0",
@@ -38,6 +37,7 @@
     "js-cookie": "^2.2.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.1",
     "ts-loader": "^6.2.1",
     "typescript": "^3.7.4",
@@ -55,6 +55,7 @@
     "dom-helpers": "^5.1.3",
     "father": "^2.29.1",
     "file-saver": "^2.0.2",
+    "react": "^16.13.0",
     "react-dom": "^16.12.0",
     "react-virtualized": "^9.21.2"
   },

src/apollo-table/component/Cell.tsx

@@ -114,6 +114,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
             title: '确认要删除该条数据吗？',
             autoFocusButton: null,
             onOk: async () => {
+                if (typeof delData === 'function') {
                     const response = await delData({ tableId, data: { id: record.id } });
                     if (response && response.success) {
                         message.success('删除成功');
@@ -121,6 +122,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
                             getData({ isClean: true });
                         }
                     }
+                }
             },
         });
     };
@@ -193,7 +195,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
                     </div>
                 )}
                 {extraMenu && extraMenu.length > 0 && (
-                    <>
+                    <React.Fragment>
                         <div className={style.splitLine} />
                         {extraMenu.map((item: any, i: number) => {
                             if (typeof item.hidden === 'function' && item.hidden({ record: cellData, menu: item })) {
@@ -216,7 +218,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
                                 </div>
                             );
                         })}
-                    </>
+                    </React.Fragment>
                 )}
             </div>
         );

src/apollo-table/component/Row.tsx

-import React, { PureComponent } from 'react';
-import { config } from './config';
-import s from './Row.less';
-import { ColumnProps } from './interface';
-import IconFont from './base/extra/iconFont';
+import React from 'react';
+import { RowRendererParams } from './interface';
+import styles from './Table.less';
+import _ from 'lodash';
+import Cell from './Cell';
 
-export default class TableRow extends PureComponent<ColumnProps> {
-    render() {
-        let { type, title, width = 200, columnAttrObj = {} } = this.props;
-        if (!config[String(type)]) {
-            type = '1';
+const renderBodyCell = ({ column, columnIndex, rowData, rowIndex, key }) => {
+    const columnData: any = rowData.rowData[columnIndex]; // 列数据
+    const cellData: any = columnData.cellValueList; // 列数据
+    let text = '';
+    if (Array.isArray(cellData) && cellData.length > 0) {
+        text = cellData[0].text;
     }
-        let icon = config[String(type)] && config[String(type)].icon;
-        if (String(type) === '13' && !columnAttrObj.isMultiple) {
-            icon = 'iconziduan-lianxiangdanxuan';
+    const { width = 200, fixed } = column;
+    const style: any = {
+        display: 'inline-block',
+        width: '200px',
+    };
+    if (fixed) {
+        style.position = 'sticky';
+        style.left = 0;
     }
     return (
-            <div className={s.colContainer} style={{ width }}>
-                <div className={s.colBrief}>
-                    {icon && (typeof icon === 'string' ? <IconFont className={s.colIcon} type={icon} /> : icon)}
-                    <span className={s.colTitle}>{title}</span>
-                </div>
+        <div key={key} style={style}>
+            {text}
         </div>
     );
+};
+export default function defaultRowRenderer({
+    rowClassName,
+    columns,
+    rowIndex,
+    key,
+    onRowClick,
+    onRowDoubleClick,
+    onRowMouseOut,
+    onRowMouseOver,
+    onRowRightClick,
+    rowData,
+    rowStyle,
+}: RowRendererParams) {
+    const a11yProps: any = { 'aria-rowindex': rowIndex + 1 };
+
+    if (onRowClick || onRowDoubleClick || onRowMouseOut || onRowMouseOver || onRowRightClick) {
+        a11yProps['aria-label'] = 'row';
+        a11yProps.tabIndex = 0;
+
+        if (onRowClick) {
+            a11yProps.onClick = (event) => onRowClick({ event, rowIndex, rowData });
+        }
+        if (onRowDoubleClick) {
+            a11yProps.onDoubleClick = (event) => onRowDoubleClick({ event, rowIndex, rowData });
+        }
+        if (onRowMouseOut) {
+            a11yProps.onMouseOut = (event) => onRowMouseOut({ event, rowIndex, rowData });
+        }
+        if (onRowMouseOver) {
+            a11yProps.onMouseOver = (event) => onRowMouseOver({ event, rowIndex, rowData });
         }
+        if (onRowRightClick) {
+            a11yProps.onContextMenu = (event) => onRowRightClick({ event, rowIndex, rowData });
+        }
+    }
+
+    return (
+        <div {...a11yProps} className={rowClassName} key={key} role="row" style={rowStyle}>
+            {columns.map((column, columnIndex) =>
+                renderBodyCell({
+                    column,
+                    columnIndex,
+                    rowData,
+                    rowIndex,
+                    key,
+                }),
+            )}
+        </div>
+    );
 }

src/apollo-table/component/Table.less

@@ -45,9 +45,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    border-right: 1px solid #e8e8e8;
-    border-bottom: 1px solid #e8e8e8;
-    box-sizing: border-box;
+    height: 100%;
 
     &.disabled {
         background: @disabledColor;
@@ -112,6 +110,7 @@
         width: 20px;
         text-align: center;
         cursor: pointer;
+        height: 16px;
         .addIcon {
             display: none;
             color: @primaryColor;
@@ -206,4 +205,11 @@
     width: 100%;
     outline: none;
 }
-
+.bodyRow {
+    width: 100%;
+    box-sizing: border-box;
+}
+.bodyCell {
+    width: 100%;
+    height: 100%;
+}

src/apollo-table/component/base/config.tsx

@@ -29,13 +29,13 @@ export const config: any = {
         },
         detail: require('./detail/textarea').default,
     },
-    // '4': {
-    //     name: '附件上传',
-    //     component: require('./edit/upload').default,
-    //     getFormatter: GetFormatter['UPLOAD'],
-    //     setFormatter: SetFormatter['UPLOAD'],
-    //     detail: require('./detail/upload').default,
-    // },
+    '4': {
+        name: '附件上传',
+        component: require('./edit/input').default,
+        setFormatter: SetFormatter['INPUT'],
+        getFormatter: GetFormatter['INPUT'],
+        detail: require('./detail/input').default,
+    },
     '5': {
         name: '复选',
         component: require('./edit/checkbox').default, // 暂未添加

src/apollo-table/component/base/detail/text-select/index.tsx

@@ -14,11 +14,10 @@ export default function Detail(props: SearchProps) {
         const tagsVal = value.filter((ls) => ls.value);
         const textVal = value.filter((ls) => !ls.value);
         return (
-            <>
-                {' '}
+            <React.Fragment>
                 {tagsVal.length > 0 ? <Tag value={tagsVal} {...selfAttr} /> : null}
                 {textVal.length > 0 ? <div className={styles.text}>{textVal[0].text}</div> : null}
-            </>
+            </React.Fragment>
         );
     }
 }

src/apollo-table/component/base/detail/upload/index.tsx

 import React from 'react';
-import Upload from '../../extra/upload';
+// import Upload from '../../extra/upload';
 import styles from './styles.less';
 import { UploadProps } from '../detailInterface';
 
@@ -10,13 +10,12 @@ export default function Detail(props: UploadProps) {
     const { value, formatter, width } = props;
     const formatValue = formatter ? formatter(value) : value;
     if (!formatValue) return null;
-
     let themeValue: any[] = [];
     if (Array.isArray(formatValue)) {
         themeValue = formatValue.map((item) => {
             return {
                 ...item,
-                ...Upload.checkoutFileType(item.value),
+                // ...Upload.checkoutFileType(item.value),
             };
         });
     }

src/apollo-table/component/base/edit/upload/index.tsx

-import UpLoad from '../../extra/upload';
+// import UpLoad from '../../extra/upload';
 
-export default UpLoad;
+// export default UpLoad;

src/apollo-table/component/base/extra/associationSearch/index.tsx

@@ -197,7 +197,7 @@ class AssociationSearch extends React.Component<Props> {
         const { data, fetching, value } = this.state;
         const { selfCom, autoFocus, onChange, ...rest } = this.props;
         return (
-            <>
+            <React.Fragment>
                 <Select
                     filterOption={false}
                     suffixIcon={<img alt="" className={s.suffixIcon} src="https://static.mttop.cn/admin/search.png" />}
@@ -226,7 +226,7 @@ class AssociationSearch extends React.Component<Props> {
                     })}
                 </Select>
                 {selfCom || null}
-            </>
+            </React.Fragment>
         );
     }
 }

src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx

@@ -20,23 +20,22 @@ interface Props {
         value: any;
         label: string;
     };
-    placeholder?:string;
-    width?:number;
-    disabled?:boolean;
+    placeholder?: string;
+    width?: number;
+    disabled?: boolean;
 }
 interface State {
-    searchStr: string,
-    list: any[],
-    loading: boolean,
-    selected: any[],
-    tempSelected: any[],
-    tempVisible: boolean,
+    searchStr: string;
+    list: any[];
+    loading: boolean;
+    selected: any[] | undefined;
+    tempSelected: any[] | undefined;
+    tempVisible: boolean;
 }
-class TextSelect extends React.Component<Props,State> {
+class TextSelect extends React.Component<Props, State> {
     container: any;
     input: any;
-    width: number;
-    inputWidth = 320;
+    width: number = 320;
 
     constructor(props) {
         super(props);

src/apollo-table/component/base/index.tsx

@@ -30,7 +30,7 @@ export const getComponent = (type: string) => {
         return value;
     };
 
-    const getFormat = (columnConfig: any, values: any[]) => {
+    const getFormat = (columnConfig: any, values: any) => {
         const { columnAttrObj, columnType } = columnConfig || {};
         if (!values || !Array.isArray(values) || values.length <= 0) return undefined;
         const newValue = values.filter((item) => {

src/apollo-table/component/index.less

@@ -11,5 +11,8 @@
         .tableC {
             padding: 0 16px;
         }
+        .rowClassName{
+            border: 1px solid black;
+        }
     }
 }

src/apollo-table/component/index.tsx

@@ -38,6 +38,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
 
     render() {
         const { columns, dataSource, tableId } = this.state;
+        const { rowStyle } = this.props;
         const operateConfig = {};
         return (
             <div className={styles.container}>
@@ -48,6 +49,8 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                         tableId={tableId}
                         onScroll={this.onScroll}
                         operateConfig={operateConfig}
+                        rowStyle={rowStyle}
+                        rowClassName={styles.rowClassName}
                     />
                 </div>
             </div>

src/apollo-table/component/interface.tsx

@@ -6,6 +6,9 @@ export interface CommonProps {
     tableId: number;
     checked?: any[];
     columnWidth?: number;
+    rowClassName?: string | Function;
+    rowStyle?: Object | Function;
+    rowRenderer?: Function;
 }
 
 export interface CommonState {
@@ -32,6 +35,10 @@ export interface TableProps extends CommonProps {
     noAdd?: boolean;
     noEdit?: boolean;
     noDel?: boolean;
+    rowClassName?: string | Function;
+    rowStyle?: Object | Function;
+    rowRenderer?: Function;
+    rowBorder?:string;
 }
 
 export interface TableState extends CommonState {
@@ -39,6 +46,21 @@ export interface TableState extends CommonState {
     tableHeight: number;
     tableWidth: number;
 }
+export interface RowRendererParams {
+    rowClassName?: string|Function;
+    columns: Array<any>;
+    rowIndex: number;
+    isScrolling: boolean;
+    onRowClick?: Function;
+    onRowDoubleClick?: Function;
+    onRowMouseOver?: Function;
+    onRowMouseOut?: Function;
+    onRowRightClick?: Function;
+    rowData: any;
+    rowStyle?: any;
+    key: string;
+}
+
 export interface ColumnProps {
     type: string;
     title: string;

src/apollo-table/utils/request.tsx

@@ -31,7 +31,7 @@ const handleRestfulUrl = (url: string = '', options: any = {}) => {
     const { API_IDS = '' } = newParams || {};
     const type = checkoutType(API_IDS);
     if (type === 'array' && API_IDS.length > 0) {
-        const ids = [];
+        const ids:any[] = [];
         return url.replace(/{id}/g, (word) => {
             ids.push(word);
             return API_IDS[ids.length - 1];

src/test/index.tsx

@@ -4,5 +4,14 @@ import ApolloTable from '../apollo-table';
 import Data from './data';
 
 const { cols, list } = Data;
-
-render(<ApolloTable columns={cols} dataSource={list} tableId={1} />, document.getElementById('root'));
+const rowStyle = ({ index, record }) => {
+    const style: any = {};
+    if (index % 3 === 0) {
+        style.background = 'red';
+    }
+    return style;
+};
+render(
+    <ApolloTable rowStyle={rowStyle} columns={cols} dataSource={list} tableId={1} />,
+    document.getElementById('root'),
+);

tsconfig.json

@@ -3,22 +3,19 @@
         "outDir": "./dist/",
         "sourceMap": false,
         "noImplicitAny": false,
-        "module": "commonjs",
+        "module": "esnext",
         "target": "es5",
-        "jsx": "react",
-        "esModuleInterop": true
-    },
-    "include": ["./typings.d.ts"],
-    "files": [
-        "./src/test/index.tsx",
-        "./src/test/data.ts",
-        "./src/apollo-table/index.tsx",
-        "./src/apollo-table/component/index.tsx",
-        "./src/apollo-table/component/interface.tsx",
-        "./src/apollo-table/component/config.ts",
-        "./src/apollo-table/component/Table.tsx",
-        "./src/apollo-table/component/Column.tsx",
-        "./src/apollo-table/component/base/index.tsx",
-        "./src/apollo-table/component/base/config.tsx",
+        "jsx": "preserve",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "moduleResolution": "node",
+        "importHelpers": true,
+        "strict": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "src/*"
             ]
+        }
+    }
 }

webpack.config.js

@@ -2,28 +2,12 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const webpack = require('webpack');
-// 根据API_ENV环境不同分为debugger开发代理(api),development为使用dev的api,production为使用线上api
-function getIp() {
-    const interfaces = require('os').networkInterfaces(); // 在开发环境中获取局域网中的本机iP地址
-    let IPAdress = '';
-    for (var devName in interfaces) {
-        var iface = interfaces[devName];
-        for (var i = 0; i < iface.length; i++) {
-            var alias = iface[i];
-            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
-                IPAdress = alias.address;
-            }
-        }
-    }
-    return IPAdress;
-}
 
 const proxyHost = {
     localhost: 'http://192.168.16.252:8093', //链接本地调试
     development: 'https://arthas.mttop.cn',
     production: 'https://mt.mttop.cn',
     feature: 'http://192.168.8.108:8096',
-    mock: `http://${getIp()}:8000`,
 };
 
 const proxy_env = proxyHost[process.env.PROXY_ENV];
@@ -44,24 +28,40 @@ module.exports = {
         rules: [
             {
                 test: /\.tsx?$/,
-                include: [path.resolve(__dirname, 'src')],
-                use: ['ts-loader'],
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                    },
+                    {
+                        loader: 'ts-loader',
+                    },
+                ],
             },
             {
                 test: /\.jsx?$/,
-                include: [path.resolve(__dirname, 'src')],
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                },
+            },
+            {
+                test: /\.less$/,
+                include: /node_modules\/antd/, // antd中的样式
                 use: [
+                    'style-loader',
+                    'css-loader',
                     {
-                        loader: 'babel-loader',
+                        loader: 'less-loader',
                         options: {
-                            presets: ['@babel/preset-env'],
+                            javascriptEnabled: true,
                         },
                     },
                 ],
             },
             {
                 test: /\.less$/,
-                include: [path.resolve(__dirname, 'src')],
+                exclude: /node_modules/, // 项目中的样式
                 use: [
                     'style-loader',
                     {
@@ -70,11 +70,16 @@ module.exports = {
                             modules: true,
                         },
                     },
-                    'less-loader',
+                    {
+                        loader: 'less-loader',
+                        options: {
+                            modules: true,
+                        },
+                    },
                 ],
             },
             {
-                test: /\.css$/,
+                test: /\.css$/, // 外部引入的react-virtualized/styles.css
                 use: [
                     'style-loader',
                     {