From b2aecf3cca824f0a02eef92e525bbe058354906b Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Sat, 21 Mar 2020 01:11:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 + scripts/demo.js | 3 + scripts/test.js | 18 ++ src/apollo-table/component/Table.less | 34 --- src/apollo-table/component/Table.tsx | 304 +++++++++++------------ src/apollo-table/component/index.tsx | 11 +- src/apollo-table/component/interface.tsx | 1 + src/test/demo1.tsx | 89 +++++++ src/test/index.tsx | 16 +- src/test/serives.ts | 46 ++++ webpack.config.js | 5 +- webpack.config.test.js | 13 + 12 files changed, 340 insertions(+), 204 deletions(-) create mode 100644 scripts/demo.js create mode 100644 scripts/test.js create mode 100644 src/test/demo1.tsx create mode 100644 src/test/serives.ts create mode 100644 webpack.config.test.js diff --git a/package.json b/package.json index 0f1eba6..891749e 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 0000000..8b3a64c --- /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 0000000..b2b7b8c --- /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 05fcb55..5815db7 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 d6357d1..53d7092 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 959c5f5..1dc0bbd 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 d6eab4e..c212cc1 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 0000000..ec34f94 --- /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 004e5be..fda28ee 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 0000000..b2272e4 --- /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 6554be7..8dd8ea7 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 0000000..63506d8 --- /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)], +}; -- 2.21.0