bri-components 1.2.61 → 1.2.63

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.61",
+    "version": "1.2.63",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

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/DshCascader/DshCascader.vue

@@ -29,18 +29,31 @@
         class="DshCascader-show"
     >
         <!-- 有值 -->
-        <bri-tooltip
-            v-if="!$isEmptyData(curValList)"
-            :content="showVal"
-            :transfer="true"
-        >
-            <div :class="{
-                commonClass,
-                'DshCascader-show-ellipsis': true
-            }">
+        <template v-if="!$isEmptyData(curValList)">
+            <!-- 详情页查看 且单独占一行高度自由时 -->
+            <div
+                v-if="isDetailShow && isHeightAuto"
+                :class="{
+                    ...commonClass,
+                    'DshCascader-show-auto': true
+                }"
+            >
                 {{ showVal }}
             </div>
-        </bri-tooltip>
+
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :transfer="true"
+            >
+                <div :class="{
+                    ...commonClass,
+                    'DshCascader-show-ellipsis': true
+                }">
+                    {{ showVal }}
+                </div>
+            </bri-tooltip>
+        </template>
 
         <!-- 无值 -->
         <div
@@ -81,26 +94,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,20 +186,21 @@
 </script>
 
 <style lang="less">
+    @import url("../../control.less");
+
     .DshCascader {
+        #control-show();
+
         &-show {
+            &-auto,
             &-ellipsis {
-                .dsh-ellipsis();
+                margin: 6px;
             }
         }
     }
 
     // 多选
     .DshCascaders {
-        &-show {
-            &-ellipsis {
-                .dsh-ellipsis();
-            }
-        }
+        #control-show();
     }
 </style>

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

@@ -51,7 +51,7 @@
                         :label="item.name || item._name"
                         :disabled="getCheckItemDisabled(item, index)"
                     >
-                        <Checkbox :value="curValList.includes(item._key)"></Checkbox>
+                        <Checkbox :value="getItemCheckStatus(item)"></Checkbox>
 
                         <slot :item="item"></slot>
 
@@ -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-ellipsis-tag"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
 
         <!-- 无值 -->
         <div
@@ -139,6 +153,7 @@
     @import url("../../control.less");
 
     .DshCheckbox {
+        #control-show();
         #control-select(checkbox);
     }
 </style>

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

@@ -84,19 +84,33 @@
         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
@@ -154,6 +168,7 @@
     @import url("../../control.less");
 
     .DshSelect {
+        #control-show();
         #control-select(radio);
     }
 </style>

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

@@ -13,7 +13,6 @@
             :false-color="selfPropsObj._closeColor"
             :true-value="selfPropsObj._openValue"
             :false-value="selfPropsObj._closeValue"
-            @on-change="change"
         >
             <span slot="open">
                 {{ selfPropsObj._openText }}
@@ -25,15 +24,47 @@
     </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-show();
     }
 </style>

package/src/components/controls/control.less

@@ -1,3 +1,24 @@
+// 控件查看状态的样式
+#control-show () {
+    &-show {
+        &-auto {
+            &-tag {
+                height: auto!important;
+            }
+        }
+
+        &-ellipsis {
+            margin: 2px 0px;
+            .dsh-ellipsis();
+
+            &-tag {
+                .dsh-ellipsis();
+            }
+        }
+    }
+}
+
+// 单选多选控件样式
 #control-select (@control-type) {
     &-flat {
         width: 100%;
@@ -152,7 +173,6 @@
         &.ivu-select-multiple {
             .ivu-select-selection {
                 height: 32px;
-                .dsh-flex-row-between-center();
 
                 & > div {
                     .bri-scrollbar3();
@@ -162,7 +182,7 @@
                     white-space: nowrap;
                     overflow: auto;
                     overflow-y: hidden;
-
+                    
                     .ivu-tag {
                         margin: 2px 4px 0px 0px;
                         background-color: @borderColor;
@@ -185,11 +205,5 @@
             }
         }
     }
+}
 
-    // 查看
-    &-show {
-        &-ellipsis {
-            .dsh-ellipsis();
-        }
-    }
-}

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

@@ -1,5 +1,5 @@
 import controlMixin from "./controlMixin.js";
-import { regionData, userIndustryData } from "bri-datas";
+import { resourceData, regionData, userIndustryData } from "bri-datas";
 
 export default {
     mixins: [
@@ -15,6 +15,8 @@ export default {
             const _joinSymbol = this.propsObj._joinSymbol || "/";
             return {
                 _showMode: "default",
+                colorMap: resourceData.colorMap,
+                _useColor: false,
                 _saveKey: "_key",
                 _valueKey: "code",
                 _nameKey: "name",
@@ -34,6 +36,12 @@ export default {
         showType () {
             return this.selfPropsObj._showMode;
         },
+        colorMap () {
+            return this.selfPropsObj.colorMap;
+        },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
         saveKey () {
             return this.selfPropsObj._saveKey;
         },
@@ -99,12 +107,17 @@ export default {
             return loop(this.originData, this.cascaderLevel, undefined, this.cascaderFilterVals, this.isMobile);
         },
 
+        curValObj () {
+            return this.getItemObj(this.curValList);
+        },
         curValName: {
             get () {
-                return this.transformFullName(this.curValList);
+                return this.curValObj
+                    ? this.curValObj[this.nameKey]
+                    : "";
             },
-            set (str) {
-                if (!str) {
+            set (val) {
+                if (!val) {
                     this.clickClear();
                 }
             }
@@ -114,13 +127,17 @@ export default {
                 ? this.emptyShowVal
                 : this.curValName;
         },
+        // 已选择项的对象列表
+        curValObjList () {
+            return this.curValList.map(arrItem => this.getItemObj(arrItem));
+        },
         curValNameList () {
-            return this.curValList.map(item => this.transformFullName(item));
+            return this.curValObjList.map(item => item[this.nameKey]);
         },
         showMulVal () {
             return this.$isEmptyData(this.curValList)
                 ? this.emptyShowVal
-                : this.curValNameList.join("，");
+                : this.curValNameList.join("、");
         }
     },
     created () { },
@@ -153,9 +170,43 @@ export default {
         },
 
         /* --------- 工具类 -------- */
+        getItemObj (val) {
+            const objArr = this.$getTreeLinealDatas(val, this.cascaderData, undefined, this.saveKey);
+
+            return !this.$isEmptyData(val)
+                ? objArr.length
+                    ? {
+                        ...objArr.slice(-1)[0],
+                        [this.nameKey]: this.transformFullName(val),
+                        // 查看状态时tag用
+                        style: {
+                            ...this.tagStyle,
+                            ...this.getItemColorStyle(objArr.slice(-1)[0])
+                        },
+                        color: undefined
+                    }
+                    : {
+                        _key: val,
+                        name: `提示：选项${val}已找不到`,
+                        style: {
+                            ...this.tagStyle
+                        }
+                    }
+                : undefined;
+        },
+        // 每项的颜色相关style --flat方式在用
+        getItemColorStyle (item) {
+            const color = this.colorMap[item.color] || this.colorMap["color-1"];
+            return this.useColor
+                ? {
+                    backgroundColor: this.$getColor(color, 0.1),
+                    color: color
+                }
+                : {};
+        },
         // 转化出级联全名
-        transformFullName (value) {
-            return this.renderFormat(this.$getTreeLinealDatas(value, this.cascaderData, this.nameKey, this.saveKey));
+        transformFullName (val) {
+            return this.renderFormat(this.$getTreeLinealDatas(val, this.cascaderData, this.nameKey, this.saveKey));
         }
     }
 };

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

@@ -188,6 +188,8 @@ export default {
                 });
             }
         },
+
+        // 接口 -获得某个节点对应的描述内容
         getDescription (value = []) {
             if (value.length) {
                 this.$https({
@@ -201,7 +203,7 @@ export default {
                     },
                     callback: data => {
                         this.description = data;
-                        this.selectedObj.description = data;
+                        // this.selectedObj.description = data;
                     }
                 });
             }

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: {
@@ -116,8 +130,8 @@ export default {
             return {
                 "bri-control-edit": this.canEdit && this.finalCanEdit,
                 "bri-control-disabled": this.canEdit && !this.finalCanEdit,
-                "bri-control-unit": !this.canEdit && this.isInTable,
-                "bri-control-show": !this.canEdit && !this.isInTable,
+                "bri-control-unit": this.isUnitShow,
+                "bri-control-show": this.isDetailShow,
 
                 "dsh-ellipsis": this.isUnitShow,
                 "bri-control-nodata": this.$isEmptyData(this.curVal)

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

@@ -15,8 +15,8 @@ export default {
     computed: {
         basePropsObj () {
             return {
-                colorMap: resourceData.colorMap,
                 _optionKind: "dropdown", // "flat"、"dropdown"
+                colorMap: resourceData.colorMap,
                 _useColor: false,
                 _filterable: true,
                 _data: [],
@@ -29,12 +29,12 @@ export default {
         showType () {
             return this.selfPropsObj._optionKind;
         },
-        useColor () {
-            return this.selfPropsObj._useColor;
-        },
         colorMap () {
             return this.selfPropsObj.colorMap;
         },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
         listData () {
             const listData = this.selfPropsObj._data.concat(this.initListData);
 
@@ -46,7 +46,7 @@ export default {
         curValObj () {
             return this.getItemObj(this.curVal);
         },
-        valStr: {
+        curValName: {
             get () {
                 return this.curValObj
                     ? this.curValObj.name || this.curValObj._name
@@ -54,26 +54,26 @@ export default {
             },
             set (val) {
                 if (!val) {
-                    this.curVal = "";
+                    this.clickClear();
                 }
             }
         },
         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 () {
@@ -84,6 +84,10 @@ export default {
             this.getListData();
         },
 
+        // 点击清除
+        clickClear () {
+            this.curVal = "";
+        },
         // 单选模式 点击选项
         clickRadioItem (item, index) {
             if (!this.getRadioItemDisabled(item)) {
@@ -105,16 +109,37 @@ export default {
         // 多选模式 点击选项
         clickCheckItem (item, index) {
             if (!this.getCheckItemDisabled(item)) {
-                if (this.curValList.includes(item._key)) {
-                    this.curValList = this.curValList.filter(key => key !== item._key);
-                } else {
-                    this.curValList = [...this.curValList, item._key];
-                }
+                this.curValList = this.getItemCheckStatus(item)
+                    ? this.curValList.filter(key => key !== item._key)
+                    : [...this.curValList, item._key];
             }
         },
 
         /* ------- 方法 ------- */
-        // 每项的class集合 --flat方式在用
+        // 获取某项的对象数据
+        getItemObj (val) {
+            const obj = this.listData.find(item => item._key === val) || {
+                _key: val,
+                name: `提示：选项${val}已找不到`
+            };
+
+            return !this.$isEmptyData(val)
+                ? {
+                    ...obj,
+                    // 查看状态时tag用
+                    style: {
+                        ...this.tagStyle,
+                        ...this.getItemColorStyle(obj)
+                    },
+                    color: undefined
+                }
+                : undefined;
+        },
+        // 获取某项的选中状态
+        getItemCheckStatus (item) {
+            return this.curValList.includes(item._key);
+        },
+        // 获取某项的class集合 --flat方式在用
         getItemClass (item) {
             return [
                 this.useColor
@@ -123,7 +148,7 @@ export default {
                 item.class
             ];
         },
-        // 每项的颜色相关style --flat方式在用
+        // 获取某项的颜色相关style --flat方式在用
         getItemColorStyle (item) {
             const color = this.colorMap[item.color] || this.colorMap["color-1"];
             return this.useColor
@@ -133,16 +158,6 @@ export default {
                 }
                 : {};
         },
-        // 每项的具体样式 -查看状态时用
-        getItemShowStyle (item) {
-            return {
-                ...this.getItemColorStyle(item),
-                display: "inline-block",
-                "max-width": "100%",
-                padding: "0px 6px",
-                "border-radius": "4px"
-            };
-        },
         // 获取单选项的置灰状态
         getRadioItemDisabled (item) {
             return !!(
@@ -155,23 +170,9 @@ export default {
             return !!(
                 this.selfPropsObj._disabled ||
                 item._disabled ||
-                (this.curValList.length >= this.selfPropsObj._max && !this.curValList.includes(item._key))
+                (this.curValList.length >= this.selfPropsObj._max && !this.getItemCheckStatus(item))
             );
         },
-        getItemObj (key) {
-            const obj = this.listData.find(item => item._key === key) || {
-                _key: key,
-                name: `温馨提示：选项${key}已找不到`
-            };
-
-            return this.$isEmptyData(key)
-                ? undefined
-                : {
-                    ...obj,
-                    style: this.getItemShowStyle(obj),
-                    color: undefined
-            };
-        },
 
         // TODO：待删除 接口 -获取自定义的接口数据
         getListData () {
@@ -182,12 +183,10 @@ export default {
                     callback: data => {
                         this.initListData = [
                             ...this.initListData,
-                            ...data.list.map(dataItem =>
-                                ({
-                                    _key: dataItem._key,
-                                    name: dataItem.name
-                                })
-                            )
+                            ...data.list.map(dataItem => ({
+                                _key: dataItem._key,
+                                name: dataItem.name
+                            }))
                         ];
                     }
                 });

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, // 打开时的背景色
@@ -47,19 +47,20 @@ export default {
                 ...this.propsObj
             };
         },
-        showStyle () {
+
+        curValObj () {
             return !this.$isEmptyData(this.curVal)
                 ? {
-                    backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
-                    color: this.curVal === true ? "#37C45E" : "#E83636",
-                    display: "inline-block",
-                    "max-width": "100%",
-                    padding: "0px 6px",
-                    "border-radius": "4px"
+                    _key: "1",
+                    name: this.showVal,
+                    style: {
+                        ...this.tagStyle,
+                        backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
+                        color: this.curVal === true ? "#37C45E" : "#E83636"
+                    }
                 }
-                : {};
+                : undefined;
         },
-
         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/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/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,24 @@
     &-rel {
         width: 100%;
     }
+}
+
+.ivu-tag {
+    &-default {
+        border: none;
+        background-color: @borderColor;
+        color: @text-color;
+    }
+
+    .ivu-tag-text {
+        color: inherit;
+    }
+
+    &[disabled] {
+        background-color: @border-disabled;
+    }
+}
+
+.ivu-select-dropdown {
+    max-width: 800px;
 }

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;
-    }
-}