bri-components 1.2.61 → 1.2.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.61",
+    "version": "1.2.62",
     "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

@@ -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/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

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

@@ -152,7 +152,6 @@
         &.ivu-select-multiple {
             .ivu-select-selection {
                 height: 32px;
-                .dsh-flex-row-between-center();
 
                 & > div {
                     .bri-scrollbar3();
@@ -162,7 +161,7 @@
                     white-space: nowrap;
                     overflow: auto;
                     overflow-y: hidden;
-
+                    
                     .ivu-tag {
                         margin: 2px 4px 0px 0px;
                         background-color: @borderColor;
@@ -188,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/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,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;
-    }
-}