update

.fatherrc.ts

-import { IBundleOptions } from 'umi-library/src/types';
+// import { IBundleOptions } from 'umi-library/src/types';
 
 // @ts-ignore
-const options: IBundleOptions = {
+const options: any = {
     cjs: 'rollup',
     esm: 'rollup',
     doc: { typescript: true },
+    extraBabelPlugins: [
+        [
+            'babel-plugin-import',
+            {
+                libraryName: 'antd',
+                libraryDirectory: 'es',
+                style: true,
+            },
+        ],
+    ],
+    cssModules:true,
 };
 
 export default options;

package.json

@@ -10,7 +10,7 @@
   },
   "repository": "/airtable",
   "scripts": {
-    "dev": "umi-lib doc dev",
+    "dev": "father doc dev",
     "build": "umi-lib build",
     "lint:ts": "tslint \"src/**/*.ts\" \"src/**/*.tsx\"",
     "precommit": "lint-staged:ts"
@@ -21,8 +21,13 @@
   "devDependencies": {
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
+    "babel-plugin-import": "^1.13.0",
+    "css-loader": "^3.3.0",
     "docz": "^2.0.0-rc.76",
     "js-cookie": "^2.2.1",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "style-loader": "^1.0.1",
     "typescript": "^3.3.3",
     "umi": "^2.12.2",
     "umi-library": "^1.1.1",
@@ -31,6 +36,7 @@
   "license": "MIT",
   "dependencies": {
     "antd": "^3.25.2",
+    "father": "^2.29.1",
     "react-virtualized": "^9.21.2"
   },
   "lint-staged:ts": {

src/apollo-table/component/Cell.less

+@import '../../common';
+
 .cell {
-    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
     height: 100%;
 
     &.disabled {
-        background: #f9f9f9;
+        background: @disabledColor;
     }
 
     .cellContent {
@@ -19,10 +22,14 @@
 .editPop {
     width: 300px;
 
+    :global(.ant-popover-inner){
+        box-shadow: none;
+    }
+
     :global(.ant-popover-inner-content) {
         padding: 0;
-        border: 1px solid #5c99ff;
-        border-radius: 4px;
+        border: 1px solid @primaryColor;
+        border-radius: 2px;
     }
 }
 
@@ -30,8 +37,8 @@
     width: 110px;
 
     :global(.ant-popover-inner-content) {
-        padding: 6px 0;
-        border-radius: 4px;
+        padding: @paddingSmX 0;
+        border-radius: @borderRadius;
         background: #333333;
     }
 
@@ -45,7 +52,7 @@
         .menu {
             display: flex;
             height: 28px;
-            padding: 0 10px;
+            padding: 0 @paddingGen;
             align-items: center;
             cursor: pointer;
 
@@ -55,11 +62,14 @@
 
             .menuIcon {
                 width: 12px;
-                margin-right: 6px;
+                margin-right: @marginSmX;
+                color: white;
+                font-size: @textFontGen;
+                display: flex;
             }
 
             .menuTitle {
-                font-size: 14px;
+                font-size: @textFontGen;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: white;

src/apollo-table/component/Column.less

+@import '../../common';
+
 .colContainer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
+    width: 100%;
 
     .colBrief {
         display: flex;
         align-items: center;
         flex: 1;
+        width: 100%;
 
         .colIcon {
-            width: 14px;
-            //height: 12px;
-            margin-right: 5px;
+            width: @textFontGen;
+            color: @textPrimaryColor;
         }
 
         .colTitle {
@@ -21,9 +24,12 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             text-align: left;
+            margin-left: 5px;
+            color: @textPrimaryColor;
         }
     }
 
+
     .colOpera {
         width: 20px;
         text-align: center;

src/apollo-table/component/Column.tsx

-import React, { Component } from 'react';
-import { config } from './base/config';
+import React, { PureComponent } from 'react';
+import { config } from './config';
 import s from './Column.less';
 import { ColumnProps } from './interface';
+import IconFont from './base/extra/iconFont';
 
-export default class TableColumn extends Component<ColumnProps> {
-    constructor(props: ColumnProps) {
-        super(props);
-    }
+export default class TableColumn extends PureComponent<ColumnProps> {
 
     render() {
-        let { type, title, width=200 } = this.props;
+        let { type, title, width = 200, columnAttrObj = {} } = this.props;
         let icon = config[String(type)] && config[String(type)].icon;
+        if (String(type) === '13' && !columnAttrObj.isMultiple) {
+            icon = 'iconziduan-lianxiangdanxuan';
+        }
         return (
-            <div className={s.colContainer} style={{ width: width }}>
+            <div className={s.colContainer} style={{ width }}>
                 <div className={s.colBrief}>
-                    <img className={s.colIcon} src={icon} />
+                    {icon && (typeof icon === 'string' ? <IconFont className={s.colIcon} type={icon} /> : icon)}
                     <span className={s.colTitle}>{title}</span>
                 </div>
             </div>

src/apollo-table/component/EditCell.tsx

 import React from 'react';
 import { EditCellProps, EditCellState } from './interface';
+import FormHelper from '../utils/formHelper';
 
 export default class EditCell extends React.Component {
     static getDerivedStateFromProps(nextProps: EditCellProps, prevState: EditCellState) {
@@ -8,32 +9,72 @@ export default class EditCell extends React.Component {
             ...prevState,
             prevProps: nextProps,
         };
-        if (JSON.stringify(prevProps.columnAttrObj) !== JSON.stringify(nextProps.columnAttrObj)) {
-            nextState.columnAttrObj = nextProps.columnAttrObj;
+        if (
+            JSON.stringify(prevProps.columnConfig) !== JSON.stringify(nextProps.columnConfig) ||
+            JSON.stringify(prevProps.rowData) !== JSON.stringify(nextProps.rowData)
+        ) {
+            let columnConfig = this.formHelp(nextProps.columnConfig, nextProps.rowData);
+            if (JSON.stringify(prevState.columnConfig) !== JSON.stringify(columnConfig)) {
+                nextState.columnConfig = columnConfig;
+            }
         }
         return nextState;
     }
     constructor(props: EditCellProps) {
         super(props);
         this.state = {
-            itemConfig: {},
+            prevProps: props,
+            columnConfig: {},
         };
     }
 
-    handleChange = ({ newValue, originValue, emitFlag }: any) => {
-        this.props.onChange(newValue, originValue, emitFlag);
+    formHelp = async (item: any, record: any) => {
+        const list = this.formatData(record.rowData);
+        const itemsConfig = await FormHelper.getFormData({ list, rowLocked: record.isLocked });
+        const itemConfig = itemsConfig.find((temp: any) => {
+            return temp.columnName === item.columnName;
+        });
+        return itemConfig;
+    };
+
+    formatData = (rowData: []) => {
+        const { columns, noEdit } = this.props;
+        const temp: any[] = [];
+        columns.forEach((item: any) => {
+            const value: any = rowData.find((itemData: any) => {
+                return itemData.colName === item.key;
+            });
+            temp.push({
+                ...item,
+                value: (value && value.cellValueList) || [{ text: '', value: '' }],
+                type: item.columnType,
+                readonlyFlag: noEdit ? true : item.readonlyFlag,
+            });
+        });
+        return temp;
+    };
+
+    handleChange = (newValue: any, originValue: any, emitFlag: boolean) => {
+        const { onChange } = this.props;
+        if (typeof onChange === 'function') {
+            onChange(newValue, originValue, emitFlag);
+        }
     };
 
     render() {
-        const Component = this.props.component;
-        const { itemConfig } = this.state;
+        const { columnConfig } = this.state;
+        const { component, value, tableId, cellData, rowId } = this.props;
+        const Component = component;
         return (
             <Component
-                value={this.props.value}
+                value={value}
                 changeParams={this.handleChange}
-                columnConfig={itemConfig}
-                autoFocus
+                columnConfig={columnConfig}
+                autoFocus={true}
                 style={{ width: '100%' }}
+                tableId={tableId}
+                cellData={cellData}
+                rowId={rowId}
             />
         );
     }

src/apollo-table/component/Table.less

@@ -38,20 +38,6 @@
         padding: 10px;
         background: white;
     }
-
-    :global(.ant-table-row-hover) {
-        .unchecked {
-            display: block;
-        }
-
-        .no {
-            display: none;
-        }
-
-        .showFormBtn {
-            visibility: visible;
-        }
-    }
 }
 
 .indexCell {
@@ -74,8 +60,10 @@
     &:hover {
         box-shadow: inset 0 0 0 1px @operateColor;
 
+        .showFormBtnCls {
             .showFormBtn {
-            visibility: visible;
+                display: initial;
+            }
         }
 
         .unchecked {
@@ -85,6 +73,12 @@
         .no {
             display: none;
         }
+
+        .addCls {
+            .addIcon {
+                display: initial;
+            }
+        }
     }
 
     .cellNo {
@@ -94,10 +88,34 @@
     }
 
     .cellContent {
-
         flex: 1;
         overflow: hidden;
         height: 100%;
+        display: flex;
+        align-items: center;
+        .firstCell {
+            min-width: 0;
+            max-width: 80%;
+        }
+        .empty {
+            min-width: 80%;
+        }
+        .historyCount {
+            margin: @marginSmX;
+            cursor: pointer;
+            .countNo {
+                color: @primaryColor;
+            }
+        }
+    }
+    .addCls {
+        width: 20px;
+        text-align: center;
+        cursor: pointer;
+        .addIcon {
+            display: none;
+            color: @primaryColor;
+        }
     }
 
     .unchecked {
@@ -111,17 +129,20 @@
         white-space: nowrap;
     }
 
-    .showFormBtn {
-        visibility: hidden;
+    .showFormBtnCls {
         margin: 0 5px;
         width: 18px;
-        border-radius: 50%;
         cursor: pointer;
 
+        .showFormBtn {
+            display: none;
+            width: 18px;
+            border-radius: 50%;
             &:hover {
                 background: #d0f0fd;
             }
         }
+    }
 }
 
 .GridRow {
@@ -129,7 +150,7 @@
     display: flex;
     flex-direction: row;
     background: #fff;
-    .LeftSideContainer{
+    .LeftSideContainer {
         box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
         position: absolute;
         z-index: 1;
@@ -186,20 +207,3 @@
     outline: none;
 }
 
-.cell,
-.headerCell,
-.leftCell {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 0 .5em;
-}
-
-.headerCell,
-.leftCell {
-    font-weight: bold;
-}

src/apollo-table/component/Table.tsx

@@ -9,6 +9,8 @@ import { TableProps, TableState } from './interface';
 import Column from './Column';
 import Cell from './Cell';
 import extendIcon from '../assets/extend.png';
+import IconFont from './base/extra/iconFont';
+import scrollbarSize from '../utils/scrollbarSize';
 
 export default class AirTable extends Component<TableProps, TableState> {
     static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) {
@@ -23,6 +25,9 @@ export default class AirTable extends Component<TableProps, TableState> {
         if (JSON.stringify(prevProps.columns) !== JSON.stringify(nextProps.columns)) {
             nextState.columns = nextProps.columns;
         }
+        if (JSON.stringify(prevProps.checked) !== JSON.stringify(nextProps.checked)) {
+            nextState.checked = nextProps.checked;
+        }
         return nextState;
     }
     constructor(props: TableProps) {
@@ -36,7 +41,6 @@ export default class AirTable extends Component<TableProps, TableState> {
             prevProps: props,
             height: document.body.clientHeight - 193,
         };
-        this.indexCount = {};
         this.config = {
             overscanColumnCount: 5,
             overscanRowCount: 5,
@@ -166,7 +170,8 @@ export default class AirTable extends Component<TableProps, TableState> {
     // 下拉加载
     onScrollRow = ({ clientHeight, scrollTop }: any) => {
         const height = clientHeight + scrollTop || 0;
-        const { dataSource = [], rowHeight = 40 } = this.state;
+        const { dataSource = [],  } = this.state;
+        const { rowHeight } = this.config;
         const { onScroll } = this.props;
         const offset = 100;
         if (dataSource.length === 0) return;
@@ -243,6 +248,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             noDel,
             tableId,
             flush,
+            showHistory=()=>{},
         } = this.props;
         if (columns.length === 0 || data.length === 0) {
             return;
@@ -305,6 +311,11 @@ export default class AirTable extends Component<TableProps, TableState> {
                     </div>
                     <div className={styles.cellContent} style={extraCellContentStyle}>
                         <Cell
+                            overlayClassName={
+                                cellData && cellData.length > 0
+                                    ? styles.firstCell
+                                    : styles.empty
+                            }
                             columns={columns}
                             columnConfig={columnConfig}
                             rowData={rowData}
@@ -321,7 +332,37 @@ export default class AirTable extends Component<TableProps, TableState> {
                             tableId={tableId}
                             flush={flush}
                         />
+                        {(tableId === 1 || tableId === 14) && (
+                            <div
+                                className={styles.historyCount}
+                                role="presentation"
+                                onClick={showHistory.bind(this, {
+                                    rowId: rowData.id,
+                                    rowData: rowData.rowData,
+                                    initType: 'detail',
+                                })}
+                            >
+                                {filterRowData.groupHistoryCount && filterRowData.groupHistoryCount > 1 && (
+                                    <span className={styles.countNo}>
+                                        {`(${filterRowData.groupHistoryCount > 99 ? '99+' : filterRowData.groupHistoryCount})`}
+                                    </span>
+                                )}
                             </div>
+                        )}
+                    </div>
+                    {(tableId === 1 || tableId === 14) && (
+                        <div
+                            className={styles.addCls}
+                            role="presentation"
+                            onClick={showHistory.bind(this, {
+                                rowId: rowData.id,
+                                rowData: rowData.rowData,
+                                initType: 'add',
+                            })}
+                        >
+                            <IconFont className={styles.addIcon} type="iconxinzeng" />
+                        </div>
+                    )}
                 </div>
             );
         }
@@ -382,7 +423,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     className={styles.LeftSideContainer}
                                     style={{
                                         width: `${columnWidth * leftCount}px`,
-                                        height: `${height + rowHeight}px`,
+                                        height: `${height - scrollbarSize() + rowHeight}px`,
                                     }}
                                 >
                                     {
@@ -434,7 +475,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                 width={columnWidth * leftCount}
                                                 rowHeight={rowHeight}
                                                 rowCount={rowCount}
-                                                height={height}
+                                                height={height - scrollbarSize()}
                                                 scrollTop={scrollTop}
                                                 checked={checked}
                                                 dataSource={dataSource}
@@ -446,8 +487,10 @@ export default class AirTable extends Component<TableProps, TableState> {
                                 </div>
                                 <div className={styles.GridColumn}>
                                     <AutoSizer disableHeight>
-                                        {({ width }: any) => (
-                                            <div>
+                                        {({ width }: any) => {
+                                            // 如果列太少不满一屏时，列头宽度按列计算
+                                            const headerWidth:number = columnWidth * columnCount < width ? columnWidth * columnCount : width;
+                                           return ( <div>
                                                 {
                                                     //右侧表头
                                                     <div
@@ -457,7 +500,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                             width:
                                                                 columnWidth * columnCount < width
                                                                     ? columnWidth * columnCount
-                                                                    : width, //如果列太少不满一屏时，列头宽度按列计算
+                                                                    : headerWidth - scrollbarSize(),
                                                         }}
                                                     >
                                                         <Grid
@@ -466,7 +509,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                             columnData={columns}
                                                             columnWidth={columnWidth}
                                                             columnCount={columnCount}
-                                                            width={width}
+                                                            width={width - scrollbarSize()}
                                                             rowHeight={rowHeight}
                                                             rowCount={1}
                                                             height={rowHeight}
@@ -507,7 +550,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                     </div>
                                                 }
                                             </div>
-                                        )}
+                                        )}}
                                     </AutoSizer>
                                 </div>
                             </div>

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

 import React from 'react';
-import _ from 'lodash';
 import { config } from '../config';
 import styles from './styles.less';
 import { transferAttr } from '../_utils/transferAttr';
-import { BaseComponentProps } from '@/apollo-table/component/interface';
+import { BaseComponentProps } from '../../../component/interface';
 import Text from './input';
 
 // 此方法为高阶组件,不应再render里面频繁调用,防止频繁实例化,带来性能上的浪费
 
 export const getDetail = (type: string) => {
     const NodeObj = config[type] || {};
-    const Node = NodeObj.detail || Text; //  默认文本类型
+    const Detail = NodeObj.detail || Text; //  默认文本类型
     if (!NodeObj.detail) {
-        console.warn(NodeObj.name + '---详情组件暂未定义,默认使用文本类型');
+        console.warn(`${NodeObj.name}---详情组件暂未定义,默认使用文本类型`);
     }
-    return class extends React.Component {
-        state = {
-            value: undefined,
-        };
-        shouldComponentUpdate(nextProps: BaseComponentProps) {
-            return !_.isEqual(this.props, nextProps);
-        }
-
+    return class extends React.PureComponent<BaseComponentProps> {
         render() {
             const {
                 columnConfig: { columnAttrObj, columnType },
@@ -31,11 +23,11 @@ export const getDetail = (type: string) => {
                 ...(NodeObj.componentAttr || {}),
                 ...(columnAttrObj || {}),
             };
-            let transferColumn = transferAttr(columnType, newProps);
+            const transferColumn = transferAttr(columnType, newProps);
 
-            return Node ? (
+            return (
                 <div className={styles.container}>
-                    <Node
+                    <Detail
                         {...this.props}
                         componentAttr={transferColumn}
                         formatter={NodeObj.getFormatter}
@@ -43,7 +35,7 @@ export const getDetail = (type: string) => {
                         onChange={this.onChange}
                     />
                 </div>
-            ) : null;
+            );
         }
     };
 };

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

+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+    scriptUrl: '//at.alicdn.com/t/font_1509781_8rwgy6vdhtx.js',
+});
+
+export default IconFont;

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

@@ -25,7 +25,6 @@ export const getComponent = (type: string) => {
 
         componentDidMount() {
             const { value, columnConfig } = this.props;
-            debugger
             this.setState({ value: this.getFormat(value), columnConfig });
         }
 

src/apollo-table/component/config.ts

+import { getComponent } from './base';
+
+export const config:any = {
+    '1': {
+        name: '单行文本',
+        component: getComponent('1'),
+        icon: 'iconziduan-danhangwenben',
+    },
+    '2': {
+        name: '超链接',
+        component: getComponent('2'),
+        icon: 'iconziduan-chaolianjie',
+    },
+    '3': {
+        name: '多行文本',
+        component: getComponent('3'),
+        icon: 'iconziduan-duohangwenben',
+    },
+    '4': {
+        name: '附件上传',
+        component: getComponent('4'),
+        icon: 'iconziduan-fujian',
+    },
+    '5': {
+        name: '复选',
+        component: getComponent('5'),
+        icon: 'iconziduan-fuxuan',
+    },
+    '6': {
+        name: '下拉单选',
+        component: getComponent('6'),
+        icon: 'iconziduan-xiala',
+    },
+    '7': {
+        name: '下拉多选',
+        component: getComponent('7'),
+        icon: 'iconziduan-xialaduoxuan',
+    },
+    '8': {
+        name: '评级',
+        component: getComponent('8'),
+        icon: 'iconziduan-pingji',
+    },
+    '9': {
+        name: '数字输入',
+        component: getComponent('9'),
+        icon: 'iconziduan-shuzi',
+    },
+    '10': {
+        name: '百分比',
+        component: getComponent('10'),
+        icon: 'iconziduan-baifenbi',
+    },
+    '11': {
+        name: '日期',
+        component: getComponent('11'),
+        icon: 'iconziduan-riqi',
+    },
+    '12': {
+        name: '引用',
+        component: getComponent('12'),
+        icon: 'iconziduan-yinyong',
+    },
+    '13': {
+        name: '模糊搜索多选',
+        component: getComponent('13'),
+        icon: 'iconziduan-lianxiangduoxuan',
+    },
+    '14': {
+        name: '树结构',
+        component: getComponent('14'),
+        icon: 'iconziduan-ren',
+    },
+    '15': {
+        name: '文本搜索框',
+        component: getComponent('15'),
+        icon: 'iconziduan-lianxiangdanxuan',
+    },
+};
+export default config;

src/apollo-table/component/interface.tsx

@@ -5,6 +5,7 @@ export interface CommonProps {
     dataSource?: [];
     tableId?: number;
     checked?: [];
+    columnWidth?: number;
 }
 
 export interface CommonState {
@@ -13,6 +14,7 @@ export interface CommonState {
     dataSource?: [];
     tableId?: number;
     checked?: [];
+    columnWidth?: number;
 }
 
 export interface TableProps extends CommonProps {}
@@ -48,7 +50,15 @@ export interface CellState {
     columns: [];
     columnConfig: any;
     rowData: [];
-    cellData: [];
+    editValue: [];
+    originValue: [];
+}
+export interface EditCellProps {
+    columnConfig: any;
+    rowData: [];
+    value: any;
+}
+export interface EditCellState {
+    prevProps: EditCellProps;
+    columnConfig: any;
 }
-export interface EditCellProps extends BaseComponentProps {}
-export interface EditCellState extends BaseComponentState {}

src/apollo-table/utils/scrollbarSize.ts

+const canUseDOM:boolean = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+let size: number;
+
+export default function scrollbarSize(recalc?: boolean) {
+    if ((!size && size !== 0) || recalc) {
+        if (canUseDOM) {
+            const scrollDiv = document.createElement('div');
+
+            scrollDiv.style.position = 'absolute';
+            scrollDiv.style.top = '-9999px';
+            scrollDiv.style.width = '50px';
+            scrollDiv.style.height = '50px';
+            scrollDiv.style.overflow = 'scroll';
+
+            document.body.appendChild(scrollDiv);
+            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
+        }
+    }
+
+    return size;
+}