update apolloTable

components/apolloTable/component/Cell.less

@@ -10,6 +10,9 @@
     height: 100%;
     font-size: @textFontGen;
     padding: 0 @paddingLg;
+    &.selected{
+        box-shadow: inset 0 0 0 1px @primaryColor;
+    }
     .num {
         min-width: 30px;
         max-width: 100px;

components/apolloTable/component/Cell.tsx

 import React, { useEffect, useState } from 'react';
 import { Checkbox, message, Popover } from 'antd';
+import classNames from 'classnames';
 import _ from 'lodash';
 import { config } from './base/config';
 import { getEditComponent } from './base';

components/apolloTable/component/Table.tsx

@@ -370,7 +370,6 @@ export default class AirTable extends Component<TableProps, TableState> {
         if (rowCount > 0 && rowCount * rowHeight > totalHeight) {
             realWidth = tableWidth + scrollbarWidth;
         }
-        console.log('rightColumns', rightColumns);
         return (
             <Consumer>
                 {({ locale }) => (

components/apolloTable/component/base/_utils/getFormatter.tsx

@@ -57,8 +57,12 @@ export const GetFormatter = {
         const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
         return obj.value || 0;
     },
-    NUMBER: (val) => {
+    NUMBER: (val, config) => {
         const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
+        const { precision } = config;
+        if (precision >= 0 && isNumber(obj.value)) {
+            return Number(obj.value).toFixed(precision);
+        }
         return obj.value;
     },
     PERCENTAGE: (val, config) => {

components/apolloTable/component/base/_utils/transferAttr.tsx

@@ -4,11 +4,15 @@ export const transferAttr = (columnType, columnAttrObj) => {
     switch (String(columnType)) {
         case '9':
             let precision9;
+            if (columnAttrObj.dataType === 'INT') {
+                precision9 = 0;
+            } else {
                 if (isNumber(columnAttrObj.precision)) {
                     precision9 = columnAttrObj.precision;
                 } else if (isNumber(columnAttrObj.decimalPartMaxLength)) {
                     precision9 = columnAttrObj.decimalPartMaxLength;
                 }
+            }
             columnAttrObj.precision = precision9;
             columnAttrObj.min = columnAttrObj.minValue;
             columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength;

components/apolloTable/component/base/detail/number/index.tsx

@@ -3,8 +3,8 @@ import styles from './index.less';
 import { NumberProps } from '../detailInterface';
 
 export const ApolloNumberDetail = (props: NumberProps) => {
-    const { value, formatter } = props;
-    const formatValue = formatter ? formatter(value) : value;
+    const { value, formatter, componentAttr } = props;
+    const formatValue = formatter ? formatter(value, componentAttr) : value;
     if (!formatValue) return null;
 
     if (typeof formatValue === 'string') {

components/apolloTable/component/base/detail/upload/index.tsx

-import React from 'react';
-// import Upload from '../../extra/upload';
+import React, { useRef } from 'react';
 import styles from './styles.less';
 import { UploadProps } from '../detailInterface';
 import { checkoutFileType } from '../../extra/upload/utils';
+import Preview from '../../extra/upload/preview';
 
 const itemWidth = 20;
 const itemSpace = 5;
@@ -11,6 +11,7 @@ export const ApolloUploadDetail = (props: UploadProps) => {
     const { value, formatter, width } = props;
     const formatValue = formatter ? formatter(value) : value;
     if (!formatValue) return null;
+    const previewModel = useRef(null);
     let themeValue: any[] = [];
     if (Array.isArray(formatValue)) {
         themeValue = formatValue.map((item) => {
@@ -20,6 +21,12 @@ export const ApolloUploadDetail = (props: UploadProps) => {
             };
         });
     }
+    const onPreview = (item) => {
+        if (previewModel && previewModel.current && previewModel.current.onPreview) {
+            previewModel.current.onPreview(item.value, item.name);
+        }
+    };
+
     // 根据宽度计算显示个数, 临时使用
     const len = Math.floor(((width || 200) - 40) / (itemWidth + itemSpace));
     return (
@@ -29,14 +36,16 @@ export const ApolloUploadDetail = (props: UploadProps) => {
                     <img
                         alt=""
                         className={styles.img}
-                        key={item.value + index}
+                        key={index}
                         src={item.thumbUrl}
                         width={itemWidth}
                         style={{ marginRight: itemSpace }}
+                        onClick={onPreview.bind(null, item)}
                     />
                 );
             })}
             {themeValue.length > len && <span className={styles.moreBtn}>{`${themeValue.length - len}+`}</span>}
+            <Preview ref={previewModel} />
         </div>
     );
 };

components/apolloTable/component/base/edit/input/index.tsx

@@ -3,6 +3,7 @@ import { Input } from 'antd';
 import styles from './styles.less';
 import { antiAssign } from '../../../../utils/utils';
 import { ApolloInputProps } from '../editInterface';
+import { Consumer } from '../../../context';
 
 export const ApolloInput = (props: ApolloInputProps) => {
     const { maxLength, onChange, value, style } = props;
@@ -16,12 +17,20 @@ export const ApolloInput = (props: ApolloInputProps) => {
     const newStyle: any = {
         ...style,
     };
+    const wordNumStyle: any = {};
     if (maxLength) {
         newStyle.paddingRight = '110px';
         if (style && style.minHeight) {
             newStyle.minHeight = Number(style.minHeight) + 10;
+            newStyle.paddingRight = '11px';
+            newStyle.paddingBottom = '28px';
+            wordNumStyle.bottom = '4px';
+            wordNumStyle.marginTop = '0';
         }
     }
+    return (
+        <Consumer>
+            {({ locale }) => {
                 return (
                     <div className={styles.container}>
                         <Input
@@ -32,7 +41,14 @@ export const ApolloInput = (props: ApolloInputProps) => {
                                 changeValue(e.target.value);
                             }}
                         />
-            {!!maxLength && <span className={styles.wordNumber}>{`Entered ${(value || '').length}/${maxLength}`}</span>}
+                        {!!maxLength && (
+                            <span className={styles.wordNumber} style={wordNumStyle}>{`${locale.alreadyInput} ${
+                                (value || '').length
+                            }/${maxLength}`}</span>
+                        )}
                     </div>
                 );
+            }}
+        </Consumer>
+    );
 };

components/apolloTable/component/base/edit/textarea/index.tsx

@@ -3,6 +3,7 @@ import { Input } from 'antd';
 import styles from './styles.less';
 import { antiAssign } from '../../../../utils/utils';
 import { ApolloTextAreaProps } from '../editInterface';
+import { Consumer } from '../../../context';
 
 export const ApolloTextArea = (props: ApolloTextAreaProps) => {
     const { maxLength, onChange, value } = props;
@@ -14,10 +15,20 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
         }
     };
 
+    return (
+        <Consumer>
+            {({ locale }) => {
                 return (
                     <div className={styles.container}>
                         <Input.TextArea className={styles.input} {...selfProps} onChange={changeValue} />
-            {!!maxLength && <span className={styles.wordNumber}>{`Entered ${(value || '').length}/${maxLength}`}</span>}
+                        {!!maxLength && (
+                            <span className={styles.wordNumber}>{`${locale.alreadyInput} ${
+                                (value || '').length
+                            }/${maxLength}`}</span>
+                        )}
                     </div>
                 );
+            }}
+        </Consumer>
+    );
 };

components/apolloTable/detailForm/index.less

+@import '~@/theme/common';
+.wrap {
+    position: relative;
+    width: 580px;
+    background: #fff;
+    .titleRow {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 @paddingLg;
+        .titleCls {
+            font-size: 14px;
+            color: #5a6876;
+            line-height: 62px;
+            z-index: 10;
+            background: #fff;
+        }
+        .editClick {
+            cursor: pointer;
+            .detailEdit {
+                color: @primaryColor;
+                font-size: 14px;
+                margin-left: 6px;
+            }
+        }
+    }
+    .formWrap {
+        padding: @paddingLg;
+        height: 520px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        margin-bottom: 68px;
+        position: relative;
+        background: rgb(250, 250, 250);
+
+        .row {
+            display: flex;
+            background-color: rgba(251, 251, 251, 1);
+
+            .listLeft {
+                width: 150px;
+                padding: 12px;
+                text-align: right;
+                align-self: center;
+                background-color: rgba(251, 251, 251, 1);
+            }
+
+            .listRight {
+                flex: 1;
+                padding: 12px 20px;
+                background-color: #fff;
+
+                .item {
+                    white-space: initial;
+                }
+            }
+        }
+    }
+}

components/apolloTable/detailForm/index.tsx

+import React from 'react';
+import { config } from '../component/base/config';
+import { transferAttr } from '../component/base/_utils/transferAttr';
+import styles from './index.less';
+
+const DetailForm = (props: any) => {
+    const { data, rowData, title, goEdit } = props;
+    const renderDetailForm = (item: any) => {
+        const { columnType, columnAttrObj, value, renderDetailForm } = item;
+        let detailConfig;
+        if (typeof renderDetailForm === 'function') {
+            detailConfig = renderDetailForm({ cellData: value, rowData, columnConfig: item });
+        } else {
+            detailConfig = config[String(columnType)] || config['1'];
+        }
+        const DetailComp: any = detailConfig.detailComp;
+        const cellRenderProps: any = detailConfig.cellRenderProps || {};
+
+        const newProps = {
+            ...(detailConfig.componentAttr || {}),
+            ...(columnAttrObj || {}),
+        };
+        const transferColumn = transferAttr(columnType, newProps);
+        return (
+            <DetailComp
+                value={value}
+                rowData={rowData}
+                columnConfig={item}
+                componentAttr={transferColumn}
+                formatter={detailConfig.getFormatter}
+                cellRenderProps={cellRenderProps}
+                origin="detailForm"
+                className={styles.item}
+            />
+        );
+    };
+    const renderBtn = () => {
+        return (
+            <div
+                role="presentation"
+                className={styles.editClick}
+                onClick={() => {
+                    return goEdit('editPage');
+                }}
+            >
+                <span className={styles.detailEdit}>编辑</span>
+            </div>
+        );
+    };
+    return (
+        <div className={styles.wrap}>
+            <div className={styles.titleRow}>
+                <div className={styles.titleCls}>{title}</div>
+                {renderBtn()}
+            </div>
+            <div id="gotop" className={styles.formWrap}>
+                {data.map((item: any, index: number) => {
+                    const border =
+                        index === 0
+                            ? { border: '1px solid #ECECEC' }
+                            : {
+                                  borderBottom: '1px solid #ECECEC',
+                                  borderLeft: '1px solid #ECECEC',
+                                  borderRight: '1px solid #ECECEC',
+                              };
+                    return (
+                        <div key={index} className={styles.row} style={border}>
+                            <div className={styles.listLeft}>{`${item.columnChsName}：`}</div>
+                            <div className={styles.listRight}>{renderDetailForm(item)}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+export default DetailForm;

components/apolloTable/locale.ts

@@ -18,6 +18,7 @@ export const defaultLocale: any = {
         hideHideAll: '全部隐藏',
         select: '请选择',
         text: '请输入',
+        alreadyInput: '已输入',
     },
     en: {
         empty: 'It’s empty here.',
@@ -38,5 +39,6 @@ export const defaultLocale: any = {
         hideHideAll: 'Hide all',
         select: 'please select',
         text: 'please input',
+        alreadyInput: 'Entered',
     },
 };