From db1fcf46183bb8718e6f9b8aa8c3f78494bffd73 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Wed, 1 Jul 2020 15:51:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9tags=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/base/detail/tag/index.less      |  64 ++++----
 .../component/base/detail/tag/index.tsx       | 140 +++++++++---------
 2 files changed, 106 insertions(+), 98 deletions(-)

diff --git a/components/apolloTable/component/base/detail/tag/index.less b/components/apolloTable/component/base/detail/tag/index.less
index 4c6ec16..f4d7c2a 100644
--- a/components/apolloTable/component/base/detail/tag/index.less
+++ b/components/apolloTable/component/base/detail/tag/index.less
@@ -5,49 +5,53 @@
     width: 100%;
     height: 100%;
     align-items: center;
+    .item {
+        background: #e9eef9;
+        border-radius: 12px;
+        .itemBgTxt {
+            height: 24px;
+            padding: 5px 10px;
+            line-height: 1;
+            font-size: 14px;
+            color: @textGeneralColor;
+        }
+    }
     .outContainer {
         display: flex;
-        width: calc(100% - 30px);
+        width: 100%;
         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;
+            .content {
+                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{
+.popContainer {
     width: 200px;
-    :global(.ant-popover-inner-content){
+    :global(.ant-popover-inner-content) {
         padding: 0;
     }
-    .popContent{
+    .popContent {
         padding: @paddingGen;
     }
 }
diff --git a/components/apolloTable/component/base/detail/tag/index.tsx b/components/apolloTable/component/base/detail/tag/index.tsx
index 87ea0c9..7e0739c 100644
--- a/components/apolloTable/component/base/detail/tag/index.tsx
+++ b/components/apolloTable/component/base/detail/tag/index.tsx
@@ -7,6 +7,36 @@ export const Tags = (props: any) => {
     const { value, origin, componentAttr } = props;
     if (!Array.isArray(value) || value.length === 0) return null;
     const { options, mode } = componentAttr || {};
+    const outStyle: any = {};
+    const innerStyle: any = {};
+    const itemStyle: any = {};
+    if (origin === 'detailForm') {
+        outStyle.width = 'auto';
+        innerStyle.flexWrap = 'wrap';
+        itemStyle.marginBottom = '5px';
+    }
+    const getColor = (item: any) => {
+        let color = '';
+        if (options && Array.isArray(options) && options.length > 0) {
+            const obj = options.find((ls) => {
+                return String(ls.id) === String(item.value);
+            }) || {};
+            color = obj.color || 'e9eef9';
+        }
+        return color;
+    };
+
+    if (mode !== 'multiple') {
+        // 单选
+        return (
+            <div className={s.container}>
+                <span className={s.item} style={{ ...itemStyle, background: `#${getColor(value[0])}` }}>
+                    <div className={s.itemBgTxt}>{value[0].text}</div>
+                </span>
+            </div>
+        );
+    }
+
     const [dotVisible, setDotVisible] = useState(false);
     const outer = useRef(null);
     const inner = useRef(null);
@@ -24,87 +54,61 @@ export const Tags = (props: any) => {
         setDotVisible(visible);
     }, [value]);
 
-    const outStyle: any = {};
-    const innerStyle: any = {};
-    const itemStyle: any = {};
-    if (origin === 'detailForm') {
-        outStyle.width = 'auto';
-        innerStyle.flexWrap = 'wrap';
-        itemStyle.marginBottom = '5px';
-    }
     return (
         <div className={s.container}>
-            {dotVisible && mode === 'multiple' && (
-                <Popover
-                    placement="left"
-                    overlayClassName={s.popContainer}
-                    content={
-                        <div className={s.popContent}>
-                            {value.map((item, index) => {
-                                let color = '';
-                                if (options && Array.isArray(options) && options.length > 0) {
-                                    const obj = options.find((ls) => {
-                                        return String(ls.id) === String(item.value);
-                                    }) || {};
-                                    color = obj.color || 'e9eef9';
-                                }
-                                return (
-                                    <span className={s.popItem} key={index} style={{ background: `#${color}` }}>
-                                        <div className={s.popItemBgTxt}>{item.text}</div>
-                                    </span>
-                                );
-                            })}
-                        </div>
-                    }
-                >
-                    <div className={s.outContainer} ref={outer} style={outStyle}>
-                        <div className={s.innerContainer} ref={inner} style={innerStyle}>
+            <div className={s.outContainer} ref={outer} style={outStyle}>
+                <div className={s.innerContainer} ref={inner} style={innerStyle}>
+                    {dotVisible ? (
+                        <Popover
+                            placement="left"
+                            overlayClassName={s.popContainer}
+                            content={
+                                <div className={s.popContent}>
+                                    {value.map((item, index) => {
+                                        return (
+                                            <span
+                                                className={s.popItem}
+                                                key={index}
+                                                style={{ background: `#${getColor(item)}` }}
+                                            >
+                                                <div className={s.popItemBgTxt}>{item.text}</div>
+                                            </span>
+                                        );
+                                    })}
+                                </div>
+                            }
+                        >
+                            <div className={s.content} style={innerStyle}>
+                                {value.map((item, index) => {
+                                    return (
+                                        <span
+                                            key={index}
+                                            className={classNames(s.item, s.multi)}
+                                            style={{ ...itemStyle, background: `#${getColor(item)}` }}
+                                        >
+                                            <div className={s.itemBgTxt}>{item.text}</div>
+                                        </span>
+                                    );
+                                })}
+                            </div>
+                        </Popover>
+                    ) : (
+                        <div className={s.content} style={innerStyle}>
                             {value.map((item, index) => {
-                                let color = '';
-                                if (options && Array.isArray(options) && options.length > 0) {
-                                    const obj = options.find((ls) => {
-                                        return String(ls.id) === String(item.value);
-                                    }) || {};
-                                    color = obj.color || 'e9eef9';
-                                }
                                 return (
                                     <span
                                         key={index}
-                                        className={classNames(s.item, mode === 'multiple' && s.multi)}
-                                        style={{ ...itemStyle, background: `#${color}` }}
+                                        className={classNames(s.item, s.multi)}
+                                        style={{ ...itemStyle, background: `#${getColor(item)}` }}
                                     >
                                         <div className={s.itemBgTxt}>{item.text}</div>
                                     </span>
                                 );
                             })}
                         </div>
-                    </div>
-                </Popover>
-            )}
-            {!dotVisible && (
-                <div className={s.outContainer} ref={outer} style={outStyle}>
-                    <div className={s.innerContainer} ref={inner} style={innerStyle}>
-                        {value.map((item, index) => {
-                            let color = '';
-                            if (options && Array.isArray(options) && options.length > 0) {
-                                const obj = options.find((ls) => {
-                                    return String(ls.id) === String(item.value);
-                                }) || {};
-                                color = obj.color || 'e9eef9';
-                            }
-                            return (
-                                <span
-                                    key={index}
-                                    className={classNames(s.item, mode === 'multiple' && s.multi)}
-                                    style={{ ...itemStyle, background: `#${color}` }}
-                                >
-                                    <div className={s.itemBgTxt}>{item.text}</div>
-                                </span>
-                            );
-                        })}
-                    </div>
+                    )}
                 </div>
-            )}
+            </div>
         </div>
     );
 };
-- 
2.21.0