diff --git a/package.json b/package.json index 0f1eba65bbd75c6924efd3e052bd73307f6b37f3..891749e2de999802877e0e4c16a2b38f27f120fa 100644 --- a/package.json +++ b/package.json @@ -29,15 +29,19 @@ "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", + "chalk": "^3.0.0", "clean-webpack-plugin": "^3.0.0", "cross-env": "^6.0.3", "css-loader": "^3.3.0", "docz": "^2.0.0-rc.76", "html-webpack-plugin": "^3.2.0", + "i18n-webpack-plugin": "^1.0.0", "js-cookie": "^2.2.1", "less": "^3.10.3", "less-loader": "^5.0.0", + "ora": "^4.0.3", "source-map-loader": "^0.2.4", + "speed-measure-webpack-plugin": "^1.3.1", "style-loader": "^1.0.1", "ts-loader": "^6.2.1", "typescript": "^3.7.4", diff --git a/scripts/demo.js b/scripts/demo.js new file mode 100644 index 0000000000000000000000000000000000000000..8b3a64c6d2c3732347e8b85d0f611eb8c6fde637 --- /dev/null +++ b/scripts/demo.js @@ -0,0 +1,3 @@ +var a = '你好'; + +console.log(a); diff --git a/scripts/test.js b/scripts/test.js new file mode 100644 index 0000000000000000000000000000000000000000..b2b7b8c442ae2e8a58e571c9dd10ddde48a427d8 --- /dev/null +++ b/scripts/test.js @@ -0,0 +1,18 @@ +#!/bin/sh node +const chalk = require('chalk'); +const log = console.log; +const ora = require('ora'); + +const spinner = ora({ + text: 'kkk', + prefixText: '√', + spinner: 'betaWave', +}); + +spinner.start(); + +setTimeout(() => { + spinner.color = 'yellow'; + spinner.text = 'Loading rainbows'; + spinner.stop(); +}, 5000); diff --git a/src/apollo-table/component/Table.less b/src/apollo-table/component/Table.less index 05fcb553a9eefe0341d14fcbb54d13930e90b70d..5815db7f3352170f78c1a0594fdd0fd61265f360 100644 --- a/src/apollo-table/component/Table.less +++ b/src/apollo-table/component/Table.less @@ -6,40 +6,6 @@ } } -.table { - background: white; - - :global(.ant-table-bordered.ant-table-empty .ant-table-placeholder) { - display: none; - } - - :global(.ant-table-scroll table) { - min-width: 0; - } - - :global(.ant-table-thead > tr > th) { - padding: 0; - } - - :global(.ant-table-tbody > tr > td) { - padding: 0; - height: 40px; - } - - :global(.ant-table-tbody > tr > td:last-child) { - text-align: left; - } - - :global(.ant-table-thead > tr > th .ant-table-header-column) { - display: block; - } - - :global(.ant-table.ant-table-bordered .ant-table-footer) { - padding: 10px; - background: white; - } -} - .indexCell { padding: 0 10px; display: flex; diff --git a/src/apollo-table/component/Table.tsx b/src/apollo-table/component/Table.tsx index d6357d105a22c8d27c0b60815e150f95e71a30f0..53d7092767d88e8b70d0f7e22435f19103a0ed11 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 && 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 && 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 && checked.slice() || []; + const temp = (checked && checked.slice()) || []; const flag = this.getCheckedAll(); - let result:any[] = []; + let result: any[] = []; if (flag) { result = temp.concat(dataSource).filter((v: any) => { return ( @@ -219,9 +219,11 @@ export default class AirTable extends Component { renderCheckbox = (record: any, rowIndex: number) => { const { checked } = this.state; const { hasGroup } = this.props; - const flag = checked && checked.some((item: any) => { - return item.id === record.id; - }); + const flag = + checked && + checked.some((item: any) => { + return item.id === record.id; + }); let checkbox = flag ? ( ) : ( @@ -456,153 +458,151 @@ export default class AirTable extends Component { const leftCount = this.memoizeLeftCount(columns); return ( - - - {({ onScroll, scrollLeft, scrollTop }: any) => { - return ( -
-
- { - //左侧表头 -
- -
- } - { - //左侧固定列 -
- -
- } -
-
- - {({ width }: any) => { - // 如果列太少不满一屏时，列头宽度按列计算 - let headerWidth = width; - if (rowCount * rowHeight > tableHeight) { - // 表格行数大于一屏的高度时出现竖向滚动条，此时宽度减出滚动条宽度 - headerWidth -= scrollbarSize(); - } - return ( -
- { - //右侧表头 -
- -
- } - { - //右侧内容 -
- ) => { - onScroll(...arg); - this.onScrollRow(arg[0]); - }} - cellRenderer={this.renderBodyRow.bind(this, data)} - columns={columns} - checked={checked} - hasGroup={hasGroup} - /> -
- } -
- ); + + {({ onScroll, scrollLeft, scrollTop }: any) => { + return ( +
+
+ { + //左侧表头 +
+ +
+ } + { + //左侧固定列 +
-
+ > + +
+ }
- ); - }} - - +
+ + {({ width }: any) => { + // 如果列太少不满一屏时，列头宽度按列计算 + let headerWidth = width; + if (rowCount * rowHeight > tableHeight) { + // 表格行数大于一屏的高度时出现竖向滚动条，此时宽度减出滚动条宽度 + headerWidth -= scrollbarSize(); + } + return ( +
+ { + //右侧表头 +
+ +
+ } + { + //右侧内容 +
+ ) => { + onScroll(...arg); + this.onScrollRow(arg[0]); + }} + cellRenderer={this.renderBodyRow.bind(this, data)} + columns={columns} + checked={checked} + hasGroup={hasGroup} + /> +
+ } +
+ ); + }} + +
+
+ ); + }} + ); } } diff --git a/src/apollo-table/component/index.tsx b/src/apollo-table/component/index.tsx index 959c5f53c14e963fe22d9adb176e8c427b2d19e6..1dc0bbdc01982c1e2b745ea278a33cfd57fa24dc 100644 --- a/src/apollo-table/component/index.tsx +++ b/src/apollo-table/component/index.tsx @@ -34,11 +34,16 @@ class AirTable extends React.Component { }; } - onScroll = () => {}; + onScroll = () => { + const { onScroll } = this.props; + if (typeof onScroll === 'function') { + onScroll(); + } + }; render() { const { columns, dataSource, tableId } = this.state; - const { rowStyle } = this.props; + const { rowStyle, rowClassName } = this.props; const operateConfig = {}; return (
@@ -50,7 +55,7 @@ class AirTable extends React.Component { onScroll={this.onScroll} operateConfig={operateConfig} rowStyle={rowStyle} - rowClassName={styles.rowClassName} + rowClassName={rowClassName} />
diff --git a/src/apollo-table/component/interface.tsx b/src/apollo-table/component/interface.tsx index d6eab4ef87dccc02611e536f3def079e1dfdd9fe..c212cc1ac1f6c012a4f14bd668cd227e9e8f38ac 100644 --- a/src/apollo-table/component/interface.tsx +++ b/src/apollo-table/component/interface.tsx @@ -9,6 +9,7 @@ export interface CommonProps { rowClassName?: string | Function; rowStyle?: Object | Function; rowRenderer?: Function; + onScroll?:Function; } export interface CommonState { diff --git a/src/test/demo1.tsx b/src/test/demo1.tsx new file mode 100644 index 0000000000000000000000000000000000000000..ec34f94f32211435183fabc4f95a7ecfdc75e4b7 --- /dev/null +++ b/src/test/demo1.tsx @@ -0,0 +1,89 @@ +import React, { useState, useEffect, useCallback } from 'react'; +import _ from 'lodash'; +import ApolloTable from '../apollo-table'; +import { getColumnConfig, getDataSource } from './serives'; +import { message } from 'antd'; + +const rowStyle = ({ index, record }) => { + const style: any = {}; + if (index % 3 === 0) { + style.background = 'red'; + } + return style; +}; +const tableId = 1; +interface RowData { + id: number; + rowData: any[]; +} +interface PageConfig { + pageNum: number; + pageSize: number; + hasNextPage: boolean; + nextPage: number; +} +const Demo1 = (props) => { + const [columns, setColumns] = useState([]); + useEffect(() => { + const getColumnsList = async () => { + const res = await getColumnConfig({ tableId }); + if (res && res.success && res.data) { + const arr = Array.isArray(res.data) ? res.data : []; + setColumns(arr); + } + }; + getColumnsList(); + }, []); + const [dataSource, setDataSource] = useState([]); + const [pageConfig, setPageConfig] = useState({ + pageNum: 1, + pageSize: 50, + hasNextPage: false, + nextPage: 1, + }); + useEffect(() => { + const getDataList = async () => { + const data = { + pageNum: pageConfig.nextPage, + pageSize: pageConfig.pageSize, + }; + const res = await getDataSource({ tableId, data }); + if (res && res.success && res.data) { + const { list, hasNextPage, nextPage } = res.data; + let arr = Array.isArray(list) ? list : []; + setDataSource([...dataSource, ...arr]); + setPageConfig({ ...data, hasNextPage, nextPage }); + } + }; + getDataList(); + }, [pageConfig.pageNum]); + const fetchData = useCallback(async (isClean: boolean) => { + const data = { + pageNum: isClean ? 1 : pageConfig.nextPage, + pageSize: pageConfig.pageSize, + }; + const res = await getDataSource({ tableId, data }); + if (res && res.success && res.data) { + const arr = Array.isArray(res.data.list) ? res.data.list : []; + setDataSource(arr); + } + }, []); + const onScroll = () => { + if (pageConfig.hasNextPage) { + setPageConfig({ ...pageConfig, pageNum: pageConfig.nextPage }); + } else { + message.warning('没有更多了'); + } + }; + const debounceScroll = _.debounce(onScroll, 400); + return ( + + ); +}; +export default Demo1; diff --git a/src/test/index.tsx b/src/test/index.tsx index 004e5becb275bbca849fc2ee013992c90f85c92f..fda28eee66320eec023410bc038e75247b5e5b55 100644 --- a/src/test/index.tsx +++ b/src/test/index.tsx @@ -1,17 +1,5 @@ import React from 'react'; import { render } from 'react-dom'; -import ApolloTable from '../apollo-table'; -import Data from './data'; +import Demo1 from './demo1'; -const { cols, list } = Data; -const rowStyle = ({ index, record }) => { - const style: any = {}; - if (index % 3 === 0) { - style.background = 'red'; - } - return style; -}; -render( - , - document.getElementById('root'), -); +render(, document.getElementById('root')); diff --git a/src/test/serives.ts b/src/test/serives.ts new file mode 100644 index 0000000000000000000000000000000000000000..b2272e4770570ad14c7616401e1cabfc15bf4591 --- /dev/null +++ b/src/test/serives.ts @@ -0,0 +1,46 @@ +import request from '../apollo-table/utils/request'; + +// 获取表头配置 +export async function getColumnConfig({ tableId, data }: { tableId: number; data?: any }) { + return request(`/airTable/userConfig/${tableId}`, { method: 'get', prefix: '/crmApi', data }); +} + +// 设置表头显隐配置 +export async function setHideConfig({ tableId, data }) { + return request(`/airTable/hideConfig/${tableId}`, { method: 'post', prefix: '/crmApi', data }); +} + +// 获取操作栏配置 +export async function getOperateConfig({ tableId }) { + return request(`/airTable/table/config/${tableId}`, { method: 'post', prefix: '/crmApi' }); +} + +// 修改操作栏配置 +export async function setOperateConfig({ tableId, data }) { + return request(`/airTable/table/config/save/${tableId}`, { method: 'post', prefix: '/crmApi', data }); +} + +// 获取数据 +export async function getDataSource({ tableId, data }: { tableId: number; data?: any }) { + return request(`/follow/list/${tableId}`, { method: 'post', prefix: '/crmApi', data }); +} + +// 获取分组数据 +export async function getGroupDataSource({ tableId, data }) { + return request(`/follow/group/list/${tableId}`, { method: 'post', prefix: '/crmApi', data }); +} + +// 修改数据 +export async function addOrUpdateDataSource({ data }) { + return request('/follow/addOrUpdate', { method: 'post', prefix: '/crmApi', data }); +} + +// 删除数据 +export async function delData({ data }) { + return request('/follow/del', { method: 'post', prefix: '/crmApi', data }); +} + +// 获取数据详情 +export async function getDetail({ tableId, rowId }) { + return request(`/follow/row/${tableId}/${rowId}`, { method: 'get', prefix: '/crmApi' }); +} diff --git a/webpack.config.js b/webpack.config.js index 6554be71c773ff90b24be5893d9bef037c1c32a2..8dd8ea7d718fb080df49a8dfeb99398e2f42a9df 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,8 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const webpack = require('webpack'); +const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); +const smp = new SpeedMeasurePlugin(); const proxyHost = { localhost: 'http://192.168.16.252:8093', //链接本地调试 @@ -11,7 +13,7 @@ const proxyHost = { }; const proxy_env = proxyHost[process.env.PROXY_ENV]; -module.exports = { +const config = { mode: 'development', entry: './src/test/index.tsx', output: { @@ -146,3 +148,4 @@ module.exports = { port: 9000, }, }; +module.exports = smp.wrap(config); diff --git a/webpack.config.test.js b/webpack.config.test.js new file mode 100644 index 0000000000000000000000000000000000000000..63506d8bbe47e76c382add8cbf0ce1ff0b07fe90 --- /dev/null +++ b/webpack.config.test.js @@ -0,0 +1,13 @@ +const path = require('path'); +const I18nPlugin = require('i18n-webpack-plugin'); +const languageConfig = {}; +const optionsObj = {}; +module.exports = { + mode: 'development', + entry: './scripts/demo.js', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'bundle.[hash:6].js', + }, + plugins: [new I18nPlugin(languageConfig, optionsObj)], +};