diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000000000000000000000000000000000000..cad013d28c5d47048f97f58107b79c207c3972e8 --- /dev/null +++ b/.babelrc @@ -0,0 +1,16 @@ +{ + "presets": [ + "env", + "react", + "stage-0" + ], + "plugins": [ + [ + "import", + { + "libraryName": "antd", + "style": true + } + ] + ] +} diff --git a/package.json b/package.json index b3dc3e049f606df1cbb89439183f14057ad41e6a..0f1eba65bbd75c6924efd3e052bd73307f6b37f3 100644 --- a/package.json +++ b/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" }, diff --git a/src/apollo-table/component/Cell.tsx b/src/apollo-table/component/Cell.tsx index 32f686c62bf09e92feda5eb5664838ca4c54af7e..db01894ad4eb64c595fa04a308405f4a30f0b422 100644 --- a/src/apollo-table/component/Cell.tsx +++ b/src/apollo-table/component/Cell.tsx @@ -114,11 +114,13 @@ export default class Cell extends React.Component { 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 { )} {extraMenu && extraMenu.length > 0 && ( - <> +
{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 {
); })} - + )} ); diff --git a/src/apollo-table/component/Row.tsx b/src/apollo-table/component/Row.tsx index 3633c64bc40cbcaadfc641ba8336e2df9966ca03..02bef19f8d8c6c73c975dd9f1c0e7f973ed85c32 100644 --- a/src/apollo-table/component/Row.tsx +++ b/src/apollo-table/component/Row.tsx @@ -1,26 +1,78 @@ -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 { - 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 ( +
+ {text} +
+ ); +}; +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 ( -
-
- {icon && (typeof icon === 'string' ? : icon)} - {title} -
-
- ); } + + return ( +
+ {columns.map((column, columnIndex) => + renderBodyCell({ + column, + columnIndex, + rowData, + rowIndex, + key, + }), + )} +
+ ); } diff --git a/src/apollo-table/component/Table.less b/src/apollo-table/component/Table.less index 69931a67d4a8ccb70877ec460e24f549c4b83481..05fcb553a9eefe0341d14fcbb54d13930e90b70d 100644 --- a/src/apollo-table/component/Table.less +++ b/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%; +} diff --git a/src/apollo-table/component/Table.tsx b/src/apollo-table/component/Table.tsx index dbe5b77fa08a5212412d1e461383f230a311b8eb..d6357d105a22c8d27c0b60815e150f95e71a30f0 100644 --- a/src/apollo-table/component/Table.tsx +++ b/src/apollo-table/component/Table.tsx @@ -108,7 +108,7 @@ export default class AirTable extends Component { 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 { // 检测当前分组是否全部选中 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 { 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 { 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 ? ( ) : ( - <> +
{record.index || rowIndex + 1}
- + ); if (hasGroup) { if ( @@ -246,8 +246,72 @@ export default class AirTable extends Component { 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 ( +
+ {this.renderBodyCellContainer(data, { columnIndex, key, rowIndex, style })} +
+ ); + }; + + 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 ( +
+ {this.renderBodyCell(data, { columnIndex, key, rowIndex, style })} +
+ ); + }; + //渲染数据 - 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 { 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 ( -
+
{this.renderCheckbox(filterRowData, rowIndex)}
@@ -324,7 +351,7 @@ export default class AirTable extends Component { />
-
+
0 ? styles.firstCell : styles.empty} columns={columns} @@ -382,15 +409,8 @@ export default class AirTable extends Component { ); } return ( -
-
+
+
{ const leftCount = this.memoizeLeftCount(columns); return ( - <> + {({ onScroll, scrollLeft, scrollTop }: any) => { return ( @@ -491,7 +511,7 @@ export default class AirTable extends Component { { //右侧内容
@@ -563,11 +583,10 @@ export default class AirTable extends Component { rowCount={rowCount} height={totalHeight} onScroll={(...arg: Array) => { - 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 { ); }} - + ); } } diff --git a/src/apollo-table/component/base/config.tsx b/src/apollo-table/component/base/config.tsx index 46d58fed484411ddc4df2f97c6444b224455e001..5cc5cd1e7c243cb68622504ec95a78103c5bd8d3 100644 --- a/src/apollo-table/component/base/config.tsx +++ b/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, // 暂未添加 diff --git a/src/apollo-table/component/base/detail/text-select/index.tsx b/src/apollo-table/component/base/detail/text-select/index.tsx index 474674a3e1f84ba4dff332e9f6c1a9f90254ab5b..e8977f2ac2390189916f5c2ee531c7623c1573d1 100644 --- a/src/apollo-table/component/base/detail/text-select/index.tsx +++ b/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 ( - <> - {' '} + {tagsVal.length > 0 ? : null} {textVal.length > 0 ?
{textVal[0].text}
: null} - + ); } } diff --git a/src/apollo-table/component/base/detail/upload/index.tsx b/src/apollo-table/component/base/detail/upload/index.tsx index 67c50bbd69106c078686c88102fdd96f57a272bb..72cc11f7a2407126bbe58d9061997e24e908752d 100644 --- a/src/apollo-table/component/base/detail/upload/index.tsx +++ b/src/apollo-table/component/base/detail/upload/index.tsx @@ -1,5 +1,5 @@ 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), }; }); } diff --git a/src/apollo-table/component/base/edit/upload/index.tsx b/src/apollo-table/component/base/edit/upload/index.tsx index b1f9b9cdab0cf3b8d3c95ac893992eeddfa46805..1211a37616a3662d432800a3b4a58b3a655e428d 100644 --- a/src/apollo-table/component/base/edit/upload/index.tsx +++ b/src/apollo-table/component/base/edit/upload/index.tsx @@ -1,3 +1,3 @@ -import UpLoad from '../../extra/upload'; +// import UpLoad from '../../extra/upload'; -export default UpLoad; +// export default UpLoad; diff --git a/src/apollo-table/component/base/extra/associationSearch/index.tsx b/src/apollo-table/component/base/extra/associationSearch/index.tsx index 418ef1d417a754576eb370bebb7f44364f5417f3..dc4a96bcd5780c813b518c67fcb4f3a286f12b9f 100644 --- a/src/apollo-table/component/base/extra/associationSearch/index.tsx +++ b/src/apollo-table/component/base/extra/associationSearch/index.tsx @@ -197,7 +197,7 @@ class AssociationSearch extends React.Component { const { data, fetching, value } = this.state; const { selfCom, autoFocus, onChange, ...rest } = this.props; return ( - <> + {selfCom || null} - + ); } } diff --git a/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx b/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx index 658bf0e1606d13c03288d5faa952887f239923cd..f89d55a76391db704b1596ff9c59f5c29d56aa3f 100644 --- a/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx +++ b/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 { +class TextSelect extends React.Component { container: any; input: any; - width: number; - inputWidth = 320; + width: number = 320; constructor(props) { super(props); diff --git a/src/apollo-table/component/base/index.tsx b/src/apollo-table/component/base/index.tsx index 6d5ec30ea4b8a968335036ee10053b3c1b5530a4..f9dabc8a55f174436be46b409322f6517a3c00d1 100644 --- a/src/apollo-table/component/base/index.tsx +++ b/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) => { diff --git a/src/apollo-table/component/defaultCellRender.tsx b/src/apollo-table/component/defaultCellRender.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/apollo-table/component/index.less b/src/apollo-table/component/index.less index 8d431437e1ae8ab543ee6a909255a4332f34b44c..eabbc51d1c2b8ba15c32ae7505ac78fa8c329e1a 100644 --- a/src/apollo-table/component/index.less +++ b/src/apollo-table/component/index.less @@ -11,5 +11,8 @@ .tableC { padding: 0 16px; } + .rowClassName{ + border: 1px solid black; + } } } diff --git a/src/apollo-table/component/index.tsx b/src/apollo-table/component/index.tsx index 4150cce832c88b0474bf54b0f40fa79c3a27dbf3..959c5f53c14e963fe22d9adb176e8c427b2d19e6 100644 --- a/src/apollo-table/component/index.tsx +++ b/src/apollo-table/component/index.tsx @@ -38,6 +38,7 @@ class AirTable extends React.Component { render() { const { columns, dataSource, tableId } = this.state; + const { rowStyle } = this.props; const operateConfig = {}; return (
@@ -48,6 +49,8 @@ class AirTable extends React.Component { tableId={tableId} onScroll={this.onScroll} operateConfig={operateConfig} + rowStyle={rowStyle} + rowClassName={styles.rowClassName} />
diff --git a/src/apollo-table/component/interface.tsx b/src/apollo-table/component/interface.tsx index f562904779b74ab064a975b7c269c7bcb34a9b5b..d6eab4ef87dccc02611e536f3def079e1dfdd9fe 100644 --- a/src/apollo-table/component/interface.tsx +++ b/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; + 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; diff --git a/src/apollo-table/utils/request.tsx b/src/apollo-table/utils/request.tsx index 54f720ea69d1ed095d52ccc63fb38f05cc202fb7..331ab13668aebe07bfd214c0d07d6320aad99c57 100644 --- a/src/apollo-table/utils/request.tsx +++ b/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]; diff --git a/src/test/index.tsx b/src/test/index.tsx index bfff845e50ead1605696949e8d7d3fa557987522..004e5becb275bbca849fc2ee013992c90f85c92f 100644 --- a/src/test/index.tsx +++ b/src/test/index.tsx @@ -4,5 +4,14 @@ import ApolloTable from '../apollo-table'; import Data from './data'; const { cols, list } = Data; - -render(, document.getElementById('root')); +const rowStyle = ({ index, record }) => { + const style: any = {}; + if (index % 3 === 0) { + style.background = 'red'; + } + return style; +}; +render( + , + document.getElementById('root'), +); diff --git a/tsconfig.json b/tsconfig.json index aafae15ef2ebbded988ae3b4c1c6a8628e3d30f2..6f32c422d407138a008c0e9661712535aca6d9b2 100644 --- a/tsconfig.json +++ b/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/*" + ] + } + } } diff --git a/webpack.config.js b/webpack.config.js index 9f8bef3c4523bb44c4df1c46ec4ee8280302ff9c..6554be71c773ff90b24be5893d9bef037c1c32a2 100644 --- a/webpack.config.js +++ b/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', {