From d7b7482cecdd41b271ef255cec5f613efe3f2134 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Wed, 10 Jun 2020 18:40:08 +0800
Subject: [PATCH] update upload and number ui

---
 components/apolloTable/component/Table.less   |  2 +-
 .../component/base/_utils/setFormatter.tsx    |  1 -
 .../component/base/edit/number/index.tsx      |  8 +++--
 .../component/base/edit/upload/index.less     |  9 +++++-
 .../component/base/edit/upload/index.tsx      | 29 ++++++++++++++-----
 components/apolloTable/component/index.tsx    |  2 ++
 6 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less
index 3692347..13732d6 100644
--- a/components/apolloTable/component/Table.less
+++ b/components/apolloTable/component/Table.less
@@ -9,7 +9,7 @@
         height: 100%;
         .loading {
             position: absolute;
-            top: 50%;
+            top: 200px;
             left: 50%;
             transform: translate(-50%, -50%);
         }
diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx
index 8f54f0a..21406a7 100644
--- a/components/apolloTable/component/base/_utils/setFormatter.tsx
+++ b/components/apolloTable/component/base/_utils/setFormatter.tsx
@@ -83,7 +83,6 @@ export const SetFormatter = {
         return [{ value: val, text: val }];
     },
     NUMBER: (val, config) => {
-        debugger
         if (!isNumber(val)) return emptyModel;
         const { unit = {} } = config || {};   // 设置单位
         if (unit && unit.code === 'wan') {
diff --git a/components/apolloTable/component/base/edit/number/index.tsx b/components/apolloTable/component/base/edit/number/index.tsx
index 9a5bbbd..72de75a 100644
--- a/components/apolloTable/component/base/edit/number/index.tsx
+++ b/components/apolloTable/component/base/edit/number/index.tsx
@@ -5,7 +5,7 @@ import { ApolloNumberProps } from '../editInterface';
 import { antiAssign } from '../../../../utils/utils';
 
 export const ApolloNumber = (props: ApolloNumberProps) => {
-    const { onChange }: any = props;
+    const { onChange, origin }: any = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
     const changeValue = (newValue: any) => {
         if (typeof onChange === 'function') {
@@ -13,5 +13,9 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
         }
     };
     const { onEmitChange, ...o } = selfProps;
-    return <InputNumber className={styles.number} {...o} onChange={changeValue} />;
+    const style: any = {};
+    if (origin === 'editForm') {
+        style.height = '32px';
+    }
+    return <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
 };
diff --git a/components/apolloTable/component/base/edit/upload/index.less b/components/apolloTable/component/base/edit/upload/index.less
index 6b7c92f..667714c 100644
--- a/components/apolloTable/component/base/edit/upload/index.less
+++ b/components/apolloTable/component/base/edit/upload/index.less
@@ -11,6 +11,10 @@
         background: @disabledColor;
         border-color: #d9d9d9;
     }
+    &.editForm{
+        height: auto;
+        border: none;
+    }
     .add {
         cursor: pointer;
         font-size: @textFontGen;
@@ -19,9 +23,12 @@
         }
     }
     .picContainer {
-        margin-left: @marginSmX;
+        margin-right: @marginSmX;
         .pic {
             height: 30px;
+            &.editForm {
+                height: 100px;
+            }
         }
     }
 }
diff --git a/components/apolloTable/component/base/edit/upload/index.tsx b/components/apolloTable/component/base/edit/upload/index.tsx
index ac2dc4e..5eaa533 100644
--- a/components/apolloTable/component/base/edit/upload/index.tsx
+++ b/components/apolloTable/component/base/edit/upload/index.tsx
@@ -8,7 +8,7 @@ import Upload from '../../extra/upload';
 import addIcon from '../../../../assets/addIcon.png';
 
 export const ApolloUpload = (props: ApolloUploadProps) => {
-    const { isMultiple, onEmitChange, onChange, disabled } = props;
+    const { isMultiple, onEmitChange, onChange, disabled, origin } = props;
     const selfProps = antiAssign(props, ['onChange', 'value']);
     if (isMultiple) {
         selfProps.multiple = true;
@@ -29,6 +29,9 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
     // 点击Modal中上传时回调用浏览器弹框，触发onBlur，而此时并不希望触发onBlur，因此在组件内自定义监听
     useEffect(() => {
         document.addEventListener('click', onBlur, false);
+        if (origin !== 'editForm') {
+            toggleUploadDialog(true);
+        }
         return () => {
             document.removeEventListener('click', onBlur, false);
         };
@@ -61,23 +64,33 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
         e.stopPropagation(); // 阻止事件冒泡
         e.nativeEvent.stopImmediatePropagation();
     };
+    let containerClass = s.container;
+    if (disabled) {
+        containerClass = classNames(containerClass, s.disabled);
+    }
+    if (origin === 'editForm') {
+        containerClass = classNames(containerClass, s.editForm);
+    }
     return (
-        <div className={disabled ? classNames(s.container, s.disabled) : s.container} onClick={onClickContainer}>
-            {!disabled && (
-                <div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
-                    <img alt="" className={s.addIcon} src={addIcon} />
-                </div>
-            )}
+        <div className={containerClass} onClick={onClickContainer}>
             {value &&
                 value.map((item, i) => {
                     return (
                         <div key={i} className={s.picContainer}>
                             <Tooltip placement="bottom" title={item.name}>
-                                <img className={s.pic} src={item.thumbUrl} />
+                                <img
+                                    className={origin === 'editForm' ? classNames(s.pic, s.editForm) : s.pic}
+                                    src={item.thumbUrl}
+                                />
                             </Tooltip>
                         </div>
                     );
                 })}
+            {!disabled && origin === 'editForm' && (
+                <div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
+                    <img alt="" className={s.addIcon} src={addIcon} />
+                </div>
+            )}
             <Modal visible={visible} title="文件上传" onOk={onOk} onCancel={onCancel}>
                 <div className={s.uploadContainer}>
                     <Upload {...selfProps} value={props.value} onChange={changeValue} />
diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx
index 9b7bdd6..eb6d3f7 100644
--- a/components/apolloTable/component/index.tsx
+++ b/components/apolloTable/component/index.tsx
@@ -78,6 +78,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             headerHeight,
             contentMenu,
             onScroll,
+            loadComp,
         } = this.props;
         const sortConfig =
             operateConfig &&
@@ -116,6 +117,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                             rowSelection={rowSelection}
                             noDataPlaceholder={noDataPlaceholder}
                             contentMenu={contentMenu}
+                            loadComp={loadComp}
                         />
                     </div>
                     {paginationConfig && <Pagination {...paginationConfig} />}
-- 
2.21.0