修改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,11 +114,13 @@ export default class Cell extends React.Component<CellProps, CellState> {
             title: '确认要删除该条数据吗？',
             autoFocusButton: null,
             onOk: async () => {
-                const response = await delData({ tableId, data: { id: record.id } });
-                if (response && response.success) {
-                    message.success('删除成功');
-                    if (typeof getData === 'function') {
-                        getData({ isClean: true });
+                if (typeof delData === 'function') {
+                    const response = await delData({ tableId, data: { id: record.id } });
+                    if (response && response.success) {
+                        message.success('删除成功');
+                        if (typeof getData === 'function') {
+                            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;
+    }
+    const { width = 200, fixed } = column;
+    const style: any = {
+        display: 'inline-block',
+        width: '200px',
+    };
+    if (fixed) {
+        style.position = 'sticky';
+        style.left = 0;
+    }
+    return (
+        <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 });
         }
-        let icon = config[String(type)] && config[String(type)].icon;
-        if (String(type) === '13' && !columnAttrObj.isMultiple) {
-            icon = 'iconziduan-lianxiangdanxuan';
+        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 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>
-        );
     }
+
+    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/Table.tsx

@@ -108,7 +108,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     changeCheckbox = (record: any, flag: boolean) => {
         const { changeChecked, hasGroup } = this.props;
         const { checked, dataSource } = this.state;
-        let temp = checked.slice();
+        let temp = checked && checked.slice() || [];
         if (flag) {
             if (hasGroup) {
                 const selected = dataSource.filter((item: any) => {
@@ -136,7 +136,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     // 检测当前分组是否全部选中
     getCheckedAll = () => {
         const { checked, dataSource } = this.state;
-        const temp = checked.slice();
+        const temp = checked && checked.slice() || [];
         const result = temp.filter((v: any) => {
             return dataSource.some((item: any) => {
                 return item.id === v.id;
@@ -148,9 +148,9 @@ export default class AirTable extends Component<TableProps, TableState> {
     changeCheckboxAll = () => {
         const { checked, dataSource } = this.state;
         const { changeChecked } = this.props;
-        const temp = checked.slice();
+        const temp = checked && checked.slice() || [];
         const flag = this.getCheckedAll();
-        let result = [];
+        let result:any[] = [];
         if (flag) {
             result = temp.concat(dataSource).filter((v: any) => {
                 return (
@@ -219,20 +219,20 @@ export default class AirTable extends Component<TableProps, TableState> {
     renderCheckbox = (record: any, rowIndex: number) => {
         const { checked } = this.state;
         const { hasGroup } = this.props;
-        const flag = checked.some((item: any) => {
+        const flag = checked && checked.some((item: any) => {
             return item.id === record.id;
         });
         let checkbox = flag ? (
             <Checkbox checked={true} onClick={this.changeCheckbox.bind(this, record, false)} />
         ) : (
-            <>
+            <React.Fragment>
                 <Checkbox
                     className={styles.unchecked}
                     checked={false}
                     onClick={this.changeCheckbox.bind(this, record, true)}
                 />
                 <div className={styles.no}>{record.index || rowIndex + 1}</div>
-            </>
+            </React.Fragment>
         );
         if (hasGroup) {
             if (
@@ -246,8 +246,72 @@ export default class AirTable extends Component<TableProps, TableState> {
         return checkbox;
     };
 
+    renderBodyRow = (data: any[], { columnIndex, key, rowIndex, style }: any) => {
+        const { rowClassName, rowStyle, rowBorder = false } = this.props;
+        const rowClass = typeof rowClassName === 'function' ? rowClassName({ index: rowIndex }) : rowClassName;
+        const rowStyleObject = typeof rowStyle === 'function' ? rowStyle({ index: rowIndex }) : rowStyle;
+        // 默认边框覆盖掉传过来的样式
+        const rowBorderStyle: any = {
+            borderLeft: 'none',
+            borderRight: '1px solid #e8e8e8',
+            borderTop: 'none',
+            borderBottom: '1px solid #e8e8e8',
+        };
+        if (rowIndex === 0) {
+            rowBorderStyle.borderTop = '1px solid #e8e8e8';
+        }
+        if (columnIndex === 0) {
+            rowBorderStyle.borderLeft = '1px solid #e8e8e8';
+        }
+        // border需要单独设置
+        if (typeof rowBorder === 'string') {
+            rowBorderStyle.borderTop = rowBorder;
+            rowBorderStyle.borderBottom = rowBorder;
+            if (columnIndex === 0) {
+                rowBorderStyle.borderLeft = rowBorder;
+            }
+            if (columnIndex === data.length - 1) {
+                rowBorderStyle.borderRight = rowBorder;
+            }
+        }
+        let className = styles.bodyRow;
+        if (rowClass) {
+            className = `${className} ${rowClass}`;
+        }
+        return (
+            <div
+                key={key}
+                className={className}
+                style={{
+                    ...style,
+                    ...rowStyleObject,
+                    ...rowBorderStyle,
+                }}
+            >
+                {this.renderBodyCellContainer(data, { columnIndex, key, rowIndex, style })}
+            </div>
+        );
+    };
+
+    renderBodyCellContainer = (data: any[], { columnIndex, key, rowIndex, style }: any) => {
+        const { columns } = this.state;
+        const columnConfig = columns[columnIndex];
+        const { cellClassName, cellStyle } = columnConfig;
+        const cellClass = typeof cellClassName === 'function' ? cellClassName({ index: columnIndex }) : cellClassName;
+        const cellStyleObject = typeof cellStyle === 'function' ? cellStyle({ index: columnIndex }) : cellStyle;
+        let className = styles.bodyCell;
+        if (cellClass) {
+            className = `${className} ${cellClass}`;
+        }
+        return (
+            <div className={className} style={{ ...cellStyleObject }}>
+                {this.renderBodyCell(data, { columnIndex, key, rowIndex, style })}
+            </div>
+        );
+    };
+
     //渲染数据
-    renderBodyCell = (data: any[], { columnIndex, key, rowIndex, style }: any) => {
+    renderBodyCell = (data: any[], { columnIndex, key, rowIndex }: any) => {
         const { columns, dataSource } = this.state;
         const {
             updateData,
@@ -272,47 +336,10 @@ export default class AirTable extends Component<TableProps, TableState> {
         const columnData: any = rowData.rowData[columnIndex]; // 列数据
         const cellData: any = columnData.cellValueList; // 列数据
         let className = styles.indexCell;
-        // 只读列不可编辑样式
-        if (columnConfig.readOnlyFlag || rowData.isLocked || noEdit) {
-            className += ` ${styles.disabled}`;
-        }
-        let extraIndexCellStyle = {};
-        let extraCellContentStyle = {};
-        if (hasGroup) {
-            if (columnConfig.splitFlag) {
-                // 正常列额外样式
-                extraIndexCellStyle = {
-                    borderTop:
-                        this.indexCount[rowData.groupId][0] !== rowData.id ? '1px solid #F7F7F7' : '1px solid #e8e8e8',
-                    borderBottom: rowIndex + 1 < data.length ? 0 : '1px solid #e8e8e8',
-                };
-            } else {
-                // 不可拆分列额外样式
-                extraIndexCellStyle = {
-                    borderTop: this.indexCount[rowData.groupId][0] !== rowData.id ? 0 : '1px solid #e8e8e8',
-                    borderBottom: rowIndex + 1 < data.length ? 0 : '1px solid #e8e8e8',
-                };
-                // 不可拆分列数据样式
-                extraCellContentStyle = {
-                    display:
-                        this.indexCount[rowData.groupId][
-                            Math.floor((this.indexCount[rowData.groupId].length - 1) / 2)
-                        ] !== rowData.id
-                            ? 'none'
-                            : 'auto',
-                };
-            }
-        }
+
         if (columnIndex === 0) {
             return (
-                <div
-                    key={key}
-                    className={className}
-                    style={{
-                        ...style,
-                        ...extraIndexCellStyle,
-                    }}
-                >
+                <div key={key} className={className}>
                     <div className={styles.cellNo}>
                         {this.renderCheckbox(filterRowData, rowIndex)}
                         <div className={styles.showFormBtnCls}>
@@ -324,7 +351,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                             />
                         </div>
                     </div>
-                    <div className={styles.cellContent} style={extraCellContentStyle}>
+                    <div className={styles.cellContent}>
                         <Cell
                             overlayClassName={cellData && cellData.length > 0 ? styles.firstCell : styles.empty}
                             columns={columns}
@@ -382,15 +409,8 @@ export default class AirTable extends Component<TableProps, TableState> {
             );
         }
         return (
-            <div
-                key={key}
-                className={className}
-                style={{
-                    ...style,
-                    ...extraIndexCellStyle,
-                }}
-            >
-                <div className={styles.cellContent} style={extraCellContentStyle}>
+            <div key={key} className={className}>
+                <div className={styles.cellContent}>
                     <Cell
                         columns={columns}
                         columnConfig={columnConfig}
@@ -436,7 +456,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         const leftCount = this.memoizeLeftCount(columns);
 
         return (
-            <>
+            <React.Fragment>
                 <ScrollSync>
                     {({ onScroll, scrollLeft, scrollTop }: any) => {
                         return (
@@ -491,7 +511,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                             <Grid
                                                 className={styles.LeftSideGrid}
                                                 overscanRowCount={overscanRowCount}
-                                                cellRenderer={this.renderBodyCell.bind(this, data)}
+                                                cellRenderer={this.renderBodyRow.bind(this, data)}
                                                 columnWidth={colWidth}
                                                 columnCount={leftCount}
                                                 width={colWidth * leftCount}
@@ -547,7 +567,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                         //右侧内容
                                                         <div
                                                             style={{
-                                                                height:totalHeight,
+                                                                height: totalHeight,
                                                                 width,
                                                             }}
                                                         >
@@ -563,11 +583,10 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                                 rowCount={rowCount}
                                                                 height={totalHeight}
                                                                 onScroll={(...arg: Array<Object>) => {
-                                                                    console.log('arg', arg);
                                                                     onScroll(...arg);
                                                                     this.onScrollRow(arg[0]);
                                                                 }}
-                                                                cellRenderer={this.renderBodyCell.bind(this, data)}
+                                                                cellRenderer={this.renderBodyRow.bind(this, data)}
                                                                 columns={columns}
                                                                 checked={checked}
                                                                 hasGroup={hasGroup}
@@ -583,7 +602,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                         );
                     }}
                 </ScrollSync>
-            </>
+            </React.Fragment>
         );
     }
 }

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',
                     {