update apolloTable link and dateRange

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

@@ -32,8 +32,8 @@ export const GetFormatter = {
         if (isMultiple) {
             return Array.isArray(val)
                 ? val.map((item) => {
-                    return item.value;
-                })
+                      return item.value;
+                  })
                 : [];
         }
         const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
@@ -76,6 +76,14 @@ export const GetFormatter = {
         const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
         return obj.value ? moment(obj.value) : undefined;
     },
+    DATERANGE: (val) => {
+        if (Array.isArray(val)) {
+            return val.map((item) => {
+                return moment(item.value);
+            });
+        }
+        return undefined;
+    },
     LINK: (val) => {
         return Array.isArray(val) && val.length > 0 ? val : [];
     },

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

@@ -81,7 +81,7 @@ export const SetFormatter = {
         return [{ value: val, text: val }];
     },
     PERCENTAGE: (val) => {
-        val = (`${val}`).replace('%', '');
+        val = `${val}`.replace('%', '');
         if (!isNumber(val)) return emptyModel;
         val = accDiv(val, 100);
         return SetFormatter.NUMBER(val);
@@ -103,6 +103,16 @@ export const SetFormatter = {
         val = val.format ? val.format(setFormat) : val;
         return [{ value: val, text: val }];
     },
+    DATERANGE: (val, config) => {
+        if (Array.isArray(val)) {
+            let res: any[] = [];
+            val.map((item) => {
+                res = res.concat(SetFormatter.DATE(item, config));
+            });
+            return res;
+        }
+        return emptyModel;
+    },
     LINK: (val) => {
         return Array.isArray(val) && val.length > 0 ? val : emptyModel;
     },

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

@@ -28,6 +28,7 @@ export const transferAttr = (columnType, columnAttrObj) => {
             columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength;
             break;
         case '11':
+        case '20':
             columnAttrObj.format = columnAttrObj.format.replace(/y/g, 'Y').replace(/d/g, 'D');
             columnAttrObj.showTime = /H|m|s/.test(columnAttrObj.format);
             break;

components/apolloTable/component/base/config.tsx

@@ -19,6 +19,7 @@ import {
     ApolloTreeSelect,
     ApolloUpload,
     ApolloTextArea,
+    ApolloDateRange,
 } from './edit';
 import {
     ApolloInputDetail,
@@ -37,6 +38,7 @@ import {
     ApolloTextAreaDetail,
     ApolloTreeSelectDetail,
     ApolloUploadDetail,
+    ApolloDateRangeDetail,
 } from './detail';
 import CellContainer from './edit/container';
 
@@ -225,4 +227,17 @@ export const config: any = {
         detailComp: ApolloCascaderDetail,
         icon: 'iconziduan-lianxiangdanxuan',
     },
+    20: {
+        name: '期间',
+        editComp: ApolloDateRange,
+        cellComp: CellContainer(ApolloDateRange),
+        componentAttr: {
+            format: formatStr,
+            showTime: true,
+        },
+        getFormatter: GetFormatter.DATERANGE,
+        setFormatter: SetFormatter.DATERANGE,
+        detailComp: ApolloDateRangeDetail,
+        icon: 'iconziduan-riqi',
+    },
 };

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

+import React from 'react';
+import { formatStr } from '../../_utils/setFormatter';
+import s from '../input/index.less';
+import { DateProps } from '../detailInterface';
+
+export const ApolloDateRangeDetail = (props: DateProps) => {
+    const { value, formatter, componentAttr } = props;
+    const formatValue = formatter ? formatter(value) : value;
+    if (!formatValue) return null;
+
+    const { format = formatStr } = componentAttr || {};
+
+    let valueStr = '';
+    if (typeof formatValue === 'string') {
+        valueStr = formatValue;
+    } else {
+        valueStr = formatValue.format ? formatValue.format(format) : formatValue;
+    }
+    return <div className={s.text}>{valueStr}</div>;
+};

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

@@ -14,6 +14,7 @@ import { ApolloInputSearchDetail } from './text-select';
 import { ApolloTextAreaDetail } from './textarea';
 import { ApolloTreeSelectDetail } from './tree-select';
 import { ApolloUploadDetail } from './upload';
+import { ApolloDateRangeDetail } from './dateRange';
 
 export {
     ApolloInputDetail,
@@ -32,4 +33,5 @@ export {
     ApolloTextAreaDetail,
     ApolloTreeSelectDetail,
     ApolloUploadDetail,
+    ApolloDateRangeDetail,
 };

components/apolloTable/component/base/detail/link/index.less

-.text {
+@import '../../../../common';
+.container {
+    position: relative;
+    display: flex;
     width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    height: 100%;
+    align-items: center;
+    .outContainer {
+        display: flex;
+        width: calc(100% - 30px);
+        overflow: hidden;
+        .innerContainer {
+            display: flex;
+            .item {
+                margin-right: 10px;
+                //background: #e9eef9;
+                border-radius: 12px;
+                &.multi {
+                    border-radius: @borderRadius;
+                }
+                .itemBgTxt {
+                    height: 24px;
+                    padding: 5px 10px;
+                    line-height: 1;
+                    font-size: 14px;
+                    color: @textGeneralColor;
+                }
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+    .moreBtn {
+        width: 30px;
+        font-size: 12px;
+        cursor: pointer;
+        text-align: center;
+        .extend {
+            width: 14px;
+            border-radius: 50%;
+        }
+    }
+}
+.popContainer{
+    width: 200px;
+    :global(.ant-popover-inner-content){
+        padding: 0;
+    }
+    .popContent{
+        padding: @paddingGen;
+    }
+}
+.popItem {
+    border-radius: @borderRadius;
+    margin-bottom: @marginSm;
+    background: #e9eef9;
+    padding: @paddingSmX;
+    display: flex;
+    .popItemBgTxt {
+        word-break: break-all;
+        height: 24px;
+        padding: 5px 10px;
+        line-height: 1;
+        font-size: 14px;
+    }
 }

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

-import React from 'react';
-import styles from './index.less';
-import { LinkProps } from '../detailInterface';
+import React, { useState, useRef, useEffect } from 'react';
+import { Popover } from 'antd';
+import classNames from 'classnames';
+import s from './index.less';
+import extendIcon from '../../../../assets/extend.png';
 
-export const ApolloLinkDetail = (props: LinkProps) => {
-    const { value } = props;
-    if (!value) return null;
-    if (Array.isArray(value)) {
-        return (
-            <div className={styles.text}>
-                {value.map((item, i) => {
-                    return (
-                        <div key={i}>
+export const ApolloLinkDetail = (props: any) => {
+    const { value, origin } = props;
+    debugger
+    if (!Array.isArray(value) || value.length === 0) return null;
+    const [dotVisible, setDotVisible] = useState(false);
+    const outer = useRef(null);
+    const inner = useRef(null);
+    useEffect(() => {
+        const outerTarget: any = outer.current;
+        const innerTarget: any = inner.current;
+        if (outerTarget && innerTarget && origin !== 'detailForm') {
+            if (innerTarget.clientWidth > outerTarget.clientWidth) {
+                setDotVisible(true);
+            } else {
+                setDotVisible(false);
+            }
+        }
+    }, [value]);
+
+    const outStyle: any = {};
+    const innerStyle: any = {};
+    const itemStyle: any = {};
+    if (origin === 'detailForm') {
+        outStyle.width = 'auto';
+        innerStyle.flexWrap = 'wrap';
+        itemStyle.marginBottom = '5px';
+        itemStyle.wordBreak = 'break-all';
+    }
+    return (
+        <div className={s.container}>
+            <div className={s.outContainer} ref={outer} style={outStyle}>
+                <div className={s.innerContainer} ref={inner} style={innerStyle}>
+                    {value.map((item, i) => {
+                        return (
                             <a
+                                key={i}
                                 target="_blank"
                                 href={item.value}
-                                style={{ textDecoration: 'underline' }}
+                                className={s.item}
+                                style={itemStyle}
                                 rel="noopener noreferrer"
                             >
                                 {item.text || item.value}
                             </a>
-                        </div>
-                    );
-                })}
+                        );
+                    })}
+                </div>
             </div>
-        );
-    }
+            {dotVisible && (
+                <Popover
+                    trigger="click"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                    placement="left"
+                    overlayClassName={s.popContainer}
+                    content={
+                        <div
+                            className={s.popContent}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                        >
+                            {value.map((item, i) => {
+                                return (
+                                    <a
+                                        key={i}
+                                        target="_blank"
+                                        href={item.value}
+                                        className={s.popItem}
+                                        style={itemStyle}
+                                        rel="noopener noreferrer"
+                                    >
+                                        {item.text || item.value}
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    }
+                >
+                    <div className={s.moreBtn}>
+                        <img alt="" className={s.extend} src={extendIcon} />
+                    </div>
+                </Popover>
+            )}
+        </div>
+    );
 };

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

+import React from 'react';
+import { DatePicker } from 'antd';
+import styles from './styles.less';
+import { antiAssign } from '../../../../utils/utils';
+
+const { RangePicker } = DatePicker;
+export const ApolloDateRange = (props: any) => {
+    const { onChange } = props;
+    const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
+    const changeValue = (dates, dateStrings) => {
+        if (typeof onChange === 'function') {
+            onChange(dates, dateStrings);
+        }
+    };
+    return (
+        <RangePicker
+            className={styles.date}
+            dropdownClassName={styles.dropdownClassName}
+            popupStyle={{ width: '350px' }}
+            {...selfProps}
+            onChange={changeValue}
+        />
+    );
+};

components/apolloTable/component/base/edit/dateRange/styles.less

+@import '../../../../media';
+.date {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    div {
+        height: 100%;
+    }
+    :global(.ant-calendar-picker-input.ant-input) {
+        height: 100%;
+        border-radius: 0;
+    }
+}
+.dropdownClassName {
+    .mediaMax(375px,{
+        width:350px;
+    });
+}

components/apolloTable/component/base/edit/index.ts

@@ -14,6 +14,7 @@ import { ApolloInputSearch } from './text-select';
 import { ApolloTextArea } from './textarea';
 import { ApolloTreeSelect } from './tree-select';
 import { ApolloUpload } from './upload';
+import { ApolloDateRange } from './dateRange';
 
 export {
     ApolloInput,
@@ -32,4 +33,5 @@ export {
     ApolloTreeSelect,
     ApolloUpload,
     ApolloTextArea,
+    ApolloDateRange,
 };

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

@@ -6,8 +6,12 @@ import addIcon from '../../../../assets/addIcon.png';
 import delIcon from '../../../../assets/delIcon.png';
 import { Consumer } from '../../../context';
 
-export const ApolloLink = (props: ApolloLinkProps) => {
-    const { onChange, value } = props;
+export const ApolloLink = (props: any) => {
+    const { onChange, value, isMultiple, maxLength, maxValue } = props;
+    let len = 1;
+    if (isMultiple) {
+        len = maxValue || 10;
+    }
     const changeText = (i, e) => {
         const newValue = (value && value.slice()) || [];
         newValue[i].text = e.target.value;
@@ -50,6 +54,7 @@ export const ApolloLink = (props: ApolloLinkProps) => {
                                                 className={styles.input}
                                                 value={link.text}
                                                 onChange={changeText.bind(null, i)}
+                                                maxLength={maxLength}
                                             />
                                         </div>
                                         <div className={styles.row}>
@@ -58,6 +63,7 @@ export const ApolloLink = (props: ApolloLinkProps) => {
                                                 className={styles.input}
                                                 value={link.value}
                                                 onChange={changeValue.bind(null, i)}
+                                                maxLength={maxLength}
                                             />
                                             <div className={styles.delContainer} onClick={delLink.bind(null, i)}>
                                                 <img alt="" className={styles.delIcon} src={delIcon} />
@@ -66,9 +72,11 @@ export const ApolloLink = (props: ApolloLinkProps) => {
                                     </div>
                                 );
                             })}
-                        <div className={styles.btn} onClick={addLink}>
-                            <img alt="" className={styles.icon} src={addIcon} />
-                        </div>
+                        {(!value || value.length < len) && (
+                            <div className={styles.btn} onClick={addLink}>
+                                <img alt="" className={styles.icon} src={addIcon} />
+                            </div>
+                        )}
                     </div>
                 );
             }}