update apolloTable link

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

@@ -16,6 +16,10 @@ export const GetFormatter = {
         const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
         return obj.value;
     },
+    TEXTLINK: (val) => {
+        const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
+        return obj.value;
+    },
     UPLOAD: (val) => {
         if (!Array.isArray(val)) return undefined;
         return val.map((item) => {

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

@@ -17,6 +17,12 @@ export const SetFormatter = {
         }
         return [{ value, text: value }];
     },
+    TEXTLINK: (value) => {
+        if (!value) {
+            return emptyModel;
+        }
+        return [{ value, text: value }];
+    },
     UPLOAD: (val) => {
         if (!val) return emptyModel;
         return val.map((item) => {

components/apolloTable/component/base/config.tsx

@@ -39,6 +39,7 @@ import {
     ApolloTreeSelectDetail,
     ApolloUploadDetail,
     ApolloDateRangeDetail,
+    ApolloTextLinkDetail,
 } from './detail';
 import CellContainer from './edit/container';
 
@@ -55,13 +56,22 @@ export const config: any = {
         detailComp: ApolloInputDetail,
         icon: 'iconziduan-danhangwenben',
     },
+    // 2: {
+    //     name: '超链接',
+    //     editComp: ApolloLink,
+    //     cellComp: CellContainer(ApolloLink),
+    //     getFormatter: GetFormatter.LINK,
+    //     setFormatter: SetFormatter.LINK,
+    //     detailComp: ApolloLinkDetail,
+    //     icon: 'iconziduan-chaolianjie',
+    // },
     2: {
         name: '超链接',
-        editComp: ApolloLink,
-        cellComp: CellContainer(ApolloLink),
-        getFormatter: GetFormatter.LINK,
-        setFormatter: SetFormatter.LINK,
-        detailComp: ApolloLinkDetail,
+        editComp: ApolloTextArea,
+        cellComp: CellContainer(ApolloTextArea),
+        getFormatter: GetFormatter.TEXTLINK,
+        setFormatter: SetFormatter.TEXTLINK,
+        detailComp: ApolloTextLinkDetail,
         icon: 'iconziduan-chaolianjie',
     },
     3: {

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

@@ -15,6 +15,7 @@ import { ApolloTextAreaDetail } from './textarea';
 import { ApolloTreeSelectDetail } from './tree-select';
 import { ApolloUploadDetail } from './upload';
 import { ApolloDateRangeDetail } from './dateRange';
+import { ApolloTextLinkDetail } from './text-link';
 
 export {
     ApolloInputDetail,
@@ -34,4 +35,5 @@ export {
     ApolloTreeSelectDetail,
     ApolloUploadDetail,
     ApolloDateRangeDetail,
+    ApolloTextLinkDetail,
 };

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

+@import '../../../../common';
+.container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    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/text-link/index.tsx

+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 ApolloTextLinkDetail = (props: any) => {
+    const { value, origin, formatter } = props;
+    const newValue = formatter ? formatter(value) : value;
+    if (!newValue) return null;
+    const arr = newValue.split(',');
+    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}>
+                    {arr.map((item, i) => {
+                        return (
+                            <a
+                                key={i}
+                                target="_blank"
+                                href={item}
+                                className={s.item}
+                                style={itemStyle}
+                                rel="noopener noreferrer"
+                            >
+                                {item}
+                            </a>
+                        );
+                    })}
+                </div>
+            </div>
+            {dotVisible && (
+                <Popover
+                    trigger="click"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                    placement="left"
+                    overlayClassName={s.popContainer}
+                    content={
+                        <div
+                            className={s.popContent}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                        >
+                            {arr.map((item, i) => {
+                                return (
+                                    <a
+                                        key={i}
+                                        target="_blank"
+                                        href={item}
+                                        className={s.popItem}
+                                        style={itemStyle}
+                                        rel="noopener noreferrer"
+                                    >
+                                        {item}
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    }
+                >
+                    <div className={s.moreBtn}>
+                        <img alt="" className={s.extend} src={extendIcon} />
+                    </div>
+                </Popover>
+            )}
+        </div>
+    );
+};

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

@@ -8,7 +8,7 @@ import { floatNumberReg, intNumberReg } from '../../../../utils/reg';
 export const ApolloNumber = (props: ApolloNumberProps) => {
     const { onChange, columnConfig }: any = props;
     const { columnAttrObj = {} } = columnConfig;
-    const { precision, dataType } = columnAttrObj;
+    const { dataType } = columnAttrObj;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
     const changeValue = (newValue: any) => {
         if (dataType === 'INT') {
@@ -30,7 +30,6 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
         <InputNumber
             className={styles.number}
             {...o}
-            precision={precision}
             onChange={changeValue}
         />
     );

components/apolloTable/component/base/extra/associationSearch/index.tsx

 import React from 'react';
 import { Spin, Select } from 'antd';
 import lodash from 'lodash';
+import { Consumer } from '../../../context';
 import s from './index.less';
 
 interface Props {
@@ -206,17 +207,13 @@ class AssociationSearch extends React.Component<Props, State> {
         }
     };
 
-    notFoundContent = () => {
+    notFoundContent = (locale) => {
         const { data, fetching, value } = this.state;
         if (fetching) {
             return <Spin size="small" />;
         }
         if (!data || data.length === 0) {
-            return (
-                <span style={{ fontSize: '12px' }}>
-                    Sorry, the data you queried does not exist or has been deleted.
-                </span>
-            );
+            return <span style={{ fontSize: '12px' }}>{locale.notFoundContent}</span>;
         }
         return null;
     };
@@ -225,26 +222,32 @@ class AssociationSearch extends React.Component<Props, State> {
         const { data, fetching, value } = this.state;
         const { selfCom, autoFocus, onChange, ...rest } = this.props;
         return (
-            <Select
-                filterOption={false}
-                {...rest}
-                value={value}
-                showSearch={true}
-                labelInValue={true}
-                notFoundContent={this.notFoundContent()}
-                onSearch={this.onSearch}
-                onChange={this.handleChange}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-            >
-                {data.map((d: any) => {
+            <Consumer>
+                {({ locale }) => {
                     return (
-                        <Select.Option key={d.value} value={d.value}>
-                            {d.label}
-                        </Select.Option>
+                        <Select
+                            filterOption={false}
+                            {...rest}
+                            value={value}
+                            showSearch={true}
+                            labelInValue={true}
+                            notFoundContent={this.notFoundContent(locale)}
+                            onSearch={this.onSearch}
+                            onChange={this.handleChange}
+                            onFocus={this.onFocus}
+                            onBlur={this.onBlur}
+                        >
+                            {data.map((d: any) => {
+                                return (
+                                    <Select.Option key={d.value} value={d.value}>
+                                        {d.label}
+                                    </Select.Option>
+                                );
+                            })}
+                        </Select>
                     );
-                })}
-            </Select>
+                }}
+            </Consumer>
         );
     }
 }

components/apolloTable/locale.ts

@@ -22,6 +22,7 @@ export const defaultLocale: any = {
         alreadyInput: '已输入',
         linkText: '文本:',
         linkUrl: 'url:',
+        notFoundContent: '对不起,您查询的数据不存在或已被删除',
     },
     en: {
         empty: 'It’s empty here.',
@@ -46,5 +47,6 @@ export const defaultLocale: any = {
         alreadyInput: 'Entered',
         linkText: 'text:',
         linkUrl: 'url:',
+        notFoundContent: 'Sorry, the data you queried does not exist or has been deleted.',
     },
 };