bri-components 1.2.60 → 1.2.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.60",
+    "version": "1.2.62",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -32,7 +32,7 @@
     "dependencies": {
         "ali-oss": "^6.13.1",
         "axios": "^0.23.0",
-        "bri-datas": "^1.0.48",
+        "bri-datas": "^1.0.49",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

package/src/components/controls/DshControlInput.vue

@@ -143,7 +143,13 @@
         }
 
         .ivu-tag-size-medium {
+            height: 24px;
             margin: 3px 4px 3px 0px;
+            line-height: 24px;
+
+            .ivu-icon {
+                padding: 0px;
+            }
         }
     }
 </style>

package/src/components/controls/base/BriUpload/BriUpload.vue

@@ -154,7 +154,7 @@
                 return this.selfPropsObj._fileType;
             },
             showType () {
-                return this.selfPropsObj._showType;
+                return this.isInTable ? "inline" : this.selfPropsObj._showType;
             },
             useType () {
                 return this.selfPropsObj._useType;

package/src/components/controls/base/DshCascader/DshCascader.vue

@@ -81,26 +81,38 @@
         class="DshCascaders-show"
     >
         <!-- 有值 -->
-        <bri-tooltip
-            v-if="!$isEmptyData(curValList)"
-            :content="showMulVal"
-            :transfer="true"
-        >
+        <template v-if="!$isEmptyData(curValList)">
+            <!-- 详情查看页 且单独充满行的 -->
             <dsh-tags
+                v-if="isDetailShow && isHeightAuto"
                 :class="{
                     ...commonClass,
-                    'DshCascaders-show-ellipsis': !(isDetailShow && isHeightAuto)
+                    'DshCascaders-show-auto': true
                 }"
-                :list="curValNameList"
+                :list="curValObjList"
+                itemClass="DshCascaders-show-auto-tag"
             ></dsh-tags>
-        </bri-tooltip>
+
+            <bri-tooltip
+                v-else
+                :content="showMulVal"
+                :transfer="true"
+            >
+                <dsh-tags
+                    :class="{
+                        ...commonClass,
+                        'DshCascaders-show-ellipsis': true
+                    }"
+                    :list="curValObjList"
+                    itemClass="DshCascaders-show-ellipsis-tag"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
 
         <!-- 无值 -->
         <div
             v-else
-            :class="{
-                ...commonClass
-            }"
+            :class="commonClass"
         >
             {{ emptyShowVal }}
         </div>
@@ -161,6 +173,8 @@
 </script>
 
 <style lang="less">
+    @import url("../../control.less");
+
     .DshCascader {
         &-show {
             &-ellipsis {
@@ -171,10 +185,6 @@
 
     // 多选
     .DshCascaders {
-        &-show {
-            &-ellipsis {
-                .dsh-ellipsis();
-            }
-        }
+        #control-select(cascader);
     }
 </style>

package/src/components/controls/base/DshEditor.vue

@@ -7,14 +7,14 @@
                     ...commonClass,
                     'DshEditor-edit': true
                 }"
-                v-show="showType === 'show'"
+                v-show="showStatus === 'show'"
                 v-html="showVal"
                 @click="handleEdit"
             ></div>
 
             <div
                 v-if="finalCanEdit"
-                v-show="showType === 'edit'"
+                v-show="showStatus === 'edit'"
                 class="DshEditor-wrap"
             >
                 <div
@@ -76,7 +76,7 @@
         data () {
             return {
                 editor: null,
-                showType: "show",
+                showStatus: "show",
                 operationMap: {
                     canSave: {
                         name: "完成",
@@ -167,11 +167,11 @@
             handleEdit () {
                 if (this.finalCanEdit) {
                     this.editor.txt.html(this.value[this.propsObj._key]);
-                    this.showType = "edit";
+                    this.showStatus = "edit";
                 }
             },
             clickSave () {
-                this.showType = "show";
+                this.showStatus = "show";
             },
             // 插入代码
             insertHTML (value) {

package/src/components/controls/base/DshSelect/DshCheckbox.vue

@@ -74,19 +74,33 @@
         class="DshCheckbox-show"
     >
         <!-- 有值 -->
-        <bri-tooltip
-            v-if="!$isEmptyData(curValList)"
-            :content="showMulVal"
-            :transfer="true"
-        >
+        <template v-if="!$isEmptyData(curValList)">
+            <!-- 详情查看页 且单独充满行的 -->
             <dsh-tags
+                v-if="isDetailShow && isHeightAuto"
                 :class="{
                     ...commonClass,
-                    'DshCheckbox-show-ellipsis': !(isDetailShow && isHeightAuto)
+                    'DshCheckbox-show-auto': true
                 }"
                 :list="curValObjList"
+                itemClass="DshCheckbox-show-auto-tag"
             ></dsh-tags>
-        </bri-tooltip>
+
+            <bri-tooltip
+                v-else
+                :content="showMulVal"
+                :transfer="true"
+            >
+                <dsh-tags
+                    :class="{
+                    ...commonClass,
+                    'DshCheckbox-show-ellipsis': true
+                }"
+                    :list="curValObjList"
+                    itemClass="DshCheckbox-show-tag"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
 
         <!-- 无值 -->
         <div

package/src/components/controls/base/DshSelect/DshSelect.vue

@@ -84,19 +84,32 @@
         class="DshSelect-show"
     >
         <!-- 有值 -->
-        <bri-tooltip
-            v-if="!$isEmptyData(curVal)"
-            :content="showVal"
-            :transfer="true"
-        >
+        <template v-if="!$isEmptyData(curVal)">
             <dsh-tags
+                v-if="isDetailShow && isHeightAuto"
                 :class="{
                     ...commonClass,
-                    'DshSelect-show-ellipsis': !(isDetailShow && isHeightAuto)
+                    'DshSelect-show-auto': true
                 }"
                 :list="[curValObj]"
+                itemClass="DshSelect-show-auto-tag"
             ></dsh-tags>
-        </bri-tooltip>
+
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :transfer="true"
+            >
+                <dsh-tags
+                    :class="{
+                        ...commonClass,
+                        'DshSelect-show-ellipsis': true
+                    }"
+                    :list="[curValObj]"
+                    itemClass="DshSelect-show-ellipsis-tag"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
 
         <!-- 无值 -->
         <div
@@ -155,57 +168,5 @@
 
     .DshSelect {
         #control-select(radio);
-
-        &-modal {
-            .ivu-modal-wrap {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-
-            .ivu-modal {
-                width: 544px !important;
-                position: static;
-            }
-
-            .ivu-modal-content {
-                border-radius: 8px;
-            }
-
-            .ivu-modal-header {
-                border-bottom: none;
-                padding: 32px 32px 0;
-
-                .ivu-modal-header-inner {
-                    font-size: 18px;
-                    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
-                    font-weight: 600;
-                    color: #252F36;
-                }
-            }
-
-            .DshModal-close {
-                right: 30px !important;
-                top: 30px !important;
-                background: #F4F6F8;
-                border-radius: 4px 4px 4px 4px;
-            }
-
-            .ivu-modal-body {
-                padding: 24px 32px 32px;
-            }
-
-            &-footer {
-                margin-top: 24px;
-                text-align: right;
-
-                .ivu-btn {
-                    font-size: 16px;
-                    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
-                    font-weight: 600;
-                    border-radius: 4px;
-                }
-            }
-        }
     }
 </style>

package/src/components/controls/base/DshSwitch/DshSwitch.vue

@@ -25,15 +25,46 @@
     </div>
 
     <!-- 单选模式 查看 -->
-    <span
+    <div
         v-else-if="!multipleMode && !canEdit"
-        :class="{
-            ...commonClass
-        }"
-        :style="showStyle"
+        class="DshSwitch-show"
     >
-        {{ showVal }}
-    </span>
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(curVal)">
+            <dsh-tags
+                v-if="isDetailShow && isHeightAuto"
+                :class="{
+                    ...commonClass,
+                    'DshSwitch-show-auto': true
+                }"
+                :list="[curValObj]"
+                itemClass="DshSwitch-show-auto-tag"
+            ></dsh-tags>
+
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :transfer="true"
+            >
+                <dsh-tags
+                    :class="{
+                        ...commonClass,
+                        'DshSwitch-show-ellipsis': true
+                    }"
+                    :list="[curValObj]"
+                    itemClass="DshSwitch-show-ellipsis-tag"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
 
     <!-- 多选模式 -->
     <dsh-checkbox
@@ -46,7 +77,7 @@
 </template>
 
 <script>
-    import switchMixin from "./switchMixin.js";
+    import switchMixin from "../../mixins/switchMixin.js";
 
     export default {
         name: "DshSwitch",
@@ -63,7 +94,7 @@
                 return {
                     _size: "default", // "default", "small", "large"
 
-                    ...this.switchPropsObj
+                    ...this.basePropsObj
                 };
             }
         },
@@ -73,7 +104,9 @@
 </script>
 
 <style lang="less">
-    .DshSwitch {
+    @import url("../../control.less");
 
+    .DshSwitch {
+        #control-select(switch);
     }
 </style>

package/src/components/controls/control.less

@@ -1,4 +1,4 @@
-#control-select(@control-type) {
+#control-select (@control-type) {
     &-flat {
         width: 100%;
 
@@ -152,7 +152,6 @@
         &.ivu-select-multiple {
             .ivu-select-selection {
                 height: 32px;
-                .dsh-flex-row-between-center();
 
                 & > div {
                     .bri-scrollbar3();
@@ -161,7 +160,8 @@
                     word-break: keep-all;
                     white-space: nowrap;
                     overflow: auto;
-
+                    overflow-y: hidden;
+                    
                     .ivu-tag {
                         margin: 2px 4px 0px 0px;
                         background-color: @borderColor;
@@ -187,8 +187,19 @@
 
     // 查看
     &-show {
+        &-auto {
+            &-tag {
+                height: auto!important;
+            }
+        }
+
         &-ellipsis {
+            margin: 2px 0px;
             .dsh-ellipsis();
+
+            &-tag {
+                .dsh-ellipsis();
+            }
         }
     }
 }

package/src/components/controls/mixins/cascaderMixin.js

@@ -114,13 +114,24 @@ export default {
                 ? this.emptyShowVal
                 : this.curValName;
         },
+        curValObjList () {
+            return this.curValNameList.map((item, index) => {
+                return {
+                    _key: index,
+                    name: item,
+                    style: {
+                        ...this.tagStyle
+                    }
+                };
+            });
+        },
         curValNameList () {
             return this.curValList.map(item => this.transformFullName(item));
         },
         showMulVal () {
             return this.$isEmptyData(this.curValList)
                 ? this.emptyShowVal
-                : this.curValNameList.join("，");
+                : this.curValNameList.join("、");
         }
     },
     created () { },

package/src/components/controls/mixins/controlMixin.js

@@ -36,7 +36,21 @@ export default {
     },
     data () {
         return {
-            showModal: false
+            showModal: false,
+
+            tagStyle: {
+                display: "inline-block",
+                "max-width": "100%",
+                height: "24px",
+                padding: "4px 8px",
+                margin: "2px 4px 2px 0px",
+                "border-radius": "4px",
+                "line-height": "16px",
+                "font-size": "12px",
+
+                backgroundColor: "#E5E5E5",
+                color: "rgb(0, 0, 0, 0.9)"
+            }
         };
     },
     computed: {

package/src/components/controls/mixins/selectMixin.js

@@ -46,7 +46,7 @@ export default {
         curValObj () {
             return this.getItemObj(this.curVal);
         },
-        valStr: {
+        curValName: {
             get () {
                 return this.curValObj
                     ? this.curValObj.name || this.curValObj._name
@@ -61,19 +61,19 @@ export default {
         showVal () {
             return this.$isEmptyData(this.curVal)
                 ? this.emptyShowVal
-                : this.valStr;
+                : this.curValName;
         },
         // 已选择项的对象列表
         curValObjList () {
             return this.curValList.map(key => this.getItemObj(key));
         },
-        valListStr () {
-            return this.curValObjList.map(item => item.name || item._name).join("、");
+        curValNameList () {
+            return this.curValObjList.map(item => item.name || item._name);
         },
         showMulVal () {
             return this.$isEmptyData(this.curValList)
                 ? this.emptyShowVal
-                : this.valListStr;
+                : this.curValNameList.join("、");
         }
     },
     created () {
@@ -136,11 +136,8 @@ export default {
         // 每项的具体样式 -查看状态时用
         getItemShowStyle (item) {
             return {
-                ...this.getItemColorStyle(item),
-                display: "inline-block",
-                "max-width": "100%",
-                padding: "0px 6px",
-                "border-radius": "4px"
+                ...this.tagStyle,
+                ...this.getItemColorStyle(item)
             };
         },
         // 获取单选项的置灰状态

package/src/components/controls/{base/DshSwitch → mixins}/switchMixin.js

@@ -1,5 +1,5 @@
-import controlMixin from "../../mixins/controlMixin.js";
-import DshCheckbox from "../DshSelect/DshCheckbox.vue";
+import controlMixin from "./controlMixin.js";
+import DshCheckbox from "../base/DshSelect/DshCheckbox.vue";
 
 export default {
     mixins: [
@@ -13,7 +13,7 @@ export default {
         return {};
     },
     computed: {
-        switchPropsObj () {
+        basePropsObj () {
             return {
                 loading: false, // 是否为加载状态
                 _openColor: this.$appData.themeColor, // 打开时的背景色
@@ -50,16 +50,20 @@ export default {
         showStyle () {
             return !this.$isEmptyData(this.curVal)
                 ? {
+                    ...this.tagStyle,
                     backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
-                    color: this.curVal === true ? "#37C45E" : "#E83636",
-                    display: "inline-block",
-                    "max-width": "100%",
-                    padding: "0px 6px",
-                    "border-radius": "4px"
+                    color: this.curVal === true ? "#37C45E" : "#E83636"
                 }
                 : {};
         },
 
+        curValObj () {
+            return {
+                _key: "1",
+                name: this.showVal,
+                style: this.showStyle
+            };
+        },
         showVal () {
             return this.$isEmptyData(this.curVal)
                 ? this.emptyShowVal

package/src/components/list/DshBox/DshCrossTable.vue

@@ -90,12 +90,15 @@
                             <td
                                 class="DshCrossTable-col DshCrossTable-col-content"
                                 :style="{
-                                    background: '#F7F9FD'
+                                    background: '#F7F9FD',
+                                    display: 'flex',
+                                    width: (propsObj.titleWidth ? propsObj.titleWidth : 160)+ 'px'
                                 }"
                             >
                                 <bri-tooltip
                                     transfer
                                     :content="colItem.title"
+                                    style="width: calc(100% - 16px)"
                                 >
                                     <div class="td-content dsh-ellipsis">
                                         <slot
@@ -112,22 +115,23 @@
 
                                             <template v-else>
                                                 {{ colItem.title }}
-                                                <Tooltip
-                                                    v-if="colItem._comment"
-                                                    :content="colItem._comment"
-                                                    :transfer="true"
-                                                    placement="top-start"
-                                                    max-width="200"
-                                                >
-                                                    <Icon
-                                                        type="ios-help-circle-outline"
-                                                        size="16"
-                                                    />
-                                                </Tooltip>
                                             </template>
                                         </slot>
                                     </div>
                                 </bri-tooltip>
+                                <Tooltip
+                                    style="width:16px"
+                                    v-if="colItem._comment"
+                                    :content="colItem._comment"
+                                    :transfer="true"
+                                    placement="top-start"
+                                    max-width="200"
+                                >
+                                    <Icon
+                                        type="ios-help-circle-outline"
+                                        size="16"
+                                    />
+                                </Tooltip>
                             </td>
                         </tr>
                     </table>

package/src/components/small/BriTooltip.vue

@@ -82,5 +82,6 @@
 <style lang="less" scoped>
     .BriTooltip {
         width: 100%;
+        display: flex;
     }
 </style>

package/src/components/small/DshModal.vue

@@ -37,7 +37,7 @@
             <slot name="header-right"></slot>
         </div>
 
-        <!-- 删除按钮 -->
+        <!-- 关闭按图标 -->
         <Icon
             v-if="selfPropsObj.showSlotClose"
             class="DshModal-close"

package/src/components/small/DshTags.vue

@@ -3,7 +3,7 @@
         ref="DshTags"
         :class="{
             'DshTags': true,
-            'DshTags-autoEllipsis': autoEllipsis
+            'DshTags-auto': autoEllipsis
         }"
     >
         <Tag
@@ -11,6 +11,7 @@
             :key="tagIndex"
             ref="tagItem"
             :style="tagItem.style"
+            :class="itemClass || tagItem.class"
             :disabled="getItemDisabled(tagItem)"
             :name="tagIndex"
             :type="propsObj.type"
@@ -51,8 +52,11 @@
                 placement="bottom"
                 popper-class="DshTags-poptip"
             >
-                <dsh-icons :list="[moreOperation]" />
+                <dsh-icons :list="[{
+                    customIcon: 'bico-gengduo'
+                }]" />
                 {{ subList.length }}项
+
                 <div slot="content">
                     <Tag
                         v-for="(tagItem, tagIndex) in subList"
@@ -100,6 +104,9 @@
                     return {};
                 }
             },
+            itemClass: {
+                type: String
+            },
             autoEllipsis: {
                 type: Boolean,
                 default: false
@@ -128,20 +135,13 @@
             };
         },
         computed: {
-            moreOperation () {
-                return {
-                    customIcon: "bico-gengduo"
-                };
-            },
             computedList () {
                 return this.list.slice(0, this.maxTagCount);
             },
             subList () {
-                if (this.autoEllipsis && this.maxTagCount) {
-                    return this.list.slice(this.maxTagCount);
-                } else {
-                    return [];
-                }
+                return this.autoEllipsis && this.maxTagCount
+                    ? this.list.slice(this.maxTagCount)
+                    : [];
             }
         },
         created () {},
@@ -150,6 +150,14 @@
 
             window.addEventListener("resize", this.callEliipsis, true);
         },
+        destroyed () {
+            window.removeEventListener("resize", this.callEliipsis, true);
+        },
+        watch: {
+            list: function () {
+                this.callEliipsis();
+            }
+        },
         methods: {
             // 删除标签
             deleteTag (event, item, index) {
@@ -194,14 +202,25 @@
                     }
                 }
             }
-        },
-        watch: {
-            list: function () {
-                this.callEliipsis();
-            }
-        },
-        destroyed () {
-            window.removeEventListener("resize", this.callEliipsis, true);
         }
     };
 </script>
+
+<style lang="less">
+    .DshTags {
+        &-auto {
+            overflow: hidden;
+            width: 100%;
+        }
+
+        &-poptip {
+            &-tag {
+                margin: 2px 0;
+                .dsh-flex-row-between-center();
+            }
+            .ivu-tag-text {
+                .dsh-ellipsis();
+            }
+        }
+    }
+</style>

package/src/components/unit/DshFormUnit.vue

@@ -43,10 +43,7 @@
                         </slot>
 
                         <!-- label后可自定义内容 -->
-                        <dsh-render
-                            v-if="formItem._tipsRender"
-                            :render="tipsRender(formItem, formData)"
-                        ></dsh-render>
+                        <dsh-render :render="tipsRender(formItem, formData)"></dsh-render>
                     </span>
                 </bri-tooltip>
             </span>
@@ -154,13 +151,95 @@
                 this.$emit("changeField", ...params);
             },
             tipsRender (formItem, formData) {
-                return formItem._tipsRender.call(this, formItem, formData);
+                return formItem._tipsRender
+                    ? formItem._tipsRender.call(this, formItem, formData)
+                    : formItem._openTip
+                        ? (h) => {
+                            return h("span", {}, [
+                                h("Icon", {
+                                    props: {
+                                        type: "md-help-circle"
+                                    },
+                                    style: {
+                                        cursor: "pointer"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            if (formItem._tipKind === "dynamic" && !formItem._tipContent) {
+                                                if (formItem._tipUrl) {
+                                                    this.$https({
+                                                        url: {
+                                                            module: "customPage",
+                                                            name: formItem._tipUrl
+                                                        },
+                                                        params: {
+                                                            formData: formData,
+                                                            propsObj: formItem
+                                                        },
+                                                        callback: res => {
+                                                            this.showTipModal = true;
+                                                            formItem._tipContent = res;
+                                                        }
+                                                    });
+                                                }
+                                            } else {
+                                                this.showTipModal = true;
+                                            }
+                                        }
+                                    }
+                                }),
+
+                                h("dsh-modal", {
+                                    props: {
+                                        value: this.showTipModal,
+                                        mode: "small",
+                                        propsObj: {
+                                            title: "温馨提示",
+                                            class: "DshFormUnit-modal",
+                                            showSlotClose: false,
+                                            maskClosable: true
+                                        }
+                                    },
+                                    on: {
+                                        input: bool => {
+                                            this.showTipModal = bool;
+                                        }
+                                    }
+                                }, [
+                                    h("div", {
+                                        class: "wrap"
+                                    }, [
+                                        h("div", {
+                                            class: "wrap-content",
+                                            domProps: {
+                                                innerHTML: formItem._tipContent
+                                            }
+                                        }),
+                                        h("div", {
+                                            class: "wrap-btns"
+                                        }, [
+                                            h("Button", {
+                                                props: {
+                                                    type: "primary"
+                                                },
+                                                on: {
+                                                    click: () => {
+                                                        this.showTipModal = false;
+                                                    }
+                                                }
+                                            }, "我知道了")
+                                        ])
+                                    ])
+                                ])
+                            ]);
+                        }
+                        : undefined;
             }
         }
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshFormUnit {
         margin: 3px 6px; // 不可轻易改margin的左右值，上面style的width根据他calc
         padding: 0px 10px 10px;
@@ -258,5 +337,33 @@
                 color: #E94829;
             }
         }
+
+        &-modal {
+            .wrap {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                &-content {
+                    flex: 1;
+                    min-height: 0px;
+                    padding: 0px 12px;
+                    overflow: auto;
+                }
+
+                &-btns {
+                    margin: 10px 0px;
+                    text-align: right;
+
+                    .ivu-btn {
+                        font-size: 16px;
+                        font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
+                        font-weight: 600;
+                        border-radius: 4px;
+                    }
+                }
+            }
+        }
     }
 </style>

package/src/styles/components/index.less

@@ -32,7 +32,6 @@
 @import "./small/DshIcons.less";
 @import "./small/DshModal.less";
 @import "./small/DshSteps.less";
-@import "./small/DshTags.less";
 @import "./small/DshTitle.less";
 
 @import "./small/DshBtnModal.less";

package/src/styles/components/list/DshBox/DshCrossTable.less

@@ -43,10 +43,6 @@
 
         &-body {
             overflow: hidden;
-
-            td {
-                width: 100% !important;
-            }
         }
 
         &-footer {
@@ -78,7 +74,6 @@
     }
 
     &-col {
-        width: 160px !important;
         font-weight: bold;
         color: #5D5D5D;
 

package/src/styles/reset-iview-other.less

@@ -18,4 +18,20 @@
     &-rel {
         width: 100%;
     }
+}
+
+.ivu-tag {
+    &-default {
+        border: none;
+        background-color: @borderColor;
+        color: @text-color;
+    }
+
+    .ivu-tag-text {
+        color: inherit;
+    }
+
+    &[disabled] {
+        background-color: @border-disabled;
+    }
 }

package/src/styles/components/small/DshTags.less

@@ -1,36 +0,0 @@
-.DshTags {
-    &-autoEllipsis {
-        overflow: hidden;
-        width: 100%;
-    }
-    
-    &-poptip {
-        &-tag {
-            margin: 2px 0;
-            .dsh-flex-row-between-center();
-        }
-        .ivu-tag-text {
-            .dsh-ellipsis();
-        }
-    }
-}
-
-.ivu-tag {
-    &-default {
-        border: none;
-        background-color: @borderColor;
-        color: @text-color;
-    }
-    &-size-medium {
-        height: 24px;
-        padding: 0 8px;
-        line-height: 26px;
-    }
-    &[disabled] {
-        background-color: @border-disabled;
-    }
-
-    .ivu-tag-text {
-        color: inherit;
-    }
-}