bri-components 1.2.62 → 1.2.63

package/package.json

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

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
@@ -82,7 +95,7 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curValList)">
-            <!-- 详情查看页 且单独充满行的 -->
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
                 v-if="isDetailShow && isHeightAuto"
                 :class="{
@@ -176,15 +189,18 @@
     @import url("../../control.less");
 
     .DshCascader {
+        #control-show();
+
         &-show {
+            &-auto,
             &-ellipsis {
-                .dsh-ellipsis();
+                margin: 6px;
             }
         }
     }
 
     // 多选
     .DshCascaders {
-        #control-select(cascader);
+        #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>
 
@@ -75,7 +75,7 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curValList)">
-            <!-- 详情查看页 且单独充满行的 -->
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
                 v-if="isDetailShow && isHeightAuto"
                 :class="{
@@ -93,11 +93,11 @@
             >
                 <dsh-tags
                     :class="{
-                    ...commonClass,
-                    'DshCheckbox-show-ellipsis': true
-                }"
+                        ...commonClass,
+                        'DshCheckbox-show-ellipsis': true
+                    }"
                     :list="curValObjList"
-                    itemClass="DshCheckbox-show-tag"
+                    itemClass="DshCheckbox-show-ellipsis-tag"
                 ></dsh-tags>
             </bri-tooltip>
         </template>
@@ -153,6 +153,7 @@
     @import url("../../control.less");
 
     .DshCheckbox {
+        #control-show();
         #control-select(checkbox);
     }
 </style>

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

@@ -85,6 +85,7 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curVal)">
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
                 v-if="isDetailShow && isHeightAuto"
                 :class="{
@@ -167,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 }}
@@ -31,6 +30,7 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curVal)">
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
                 v-if="isDetailShow && isHeightAuto"
                 :class="{
@@ -107,6 +107,6 @@
     @import url("../../control.less");
 
     .DshSwitch {
-        #control-select(switch);
+        #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%;
@@ -184,22 +205,5 @@
             }
         }
     }
+}
 
-    // 查看
-    &-show {
-        &-auto {
-            &-tag {
-                height: auto!important;
-            }
-        }
-
-        &-ellipsis {
-            margin: 2px 0px;
-            .dsh-ellipsis();
-
-            &-tag {
-                .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,19 +127,12 @@ export default {
                 ? this.emptyShowVal
                 : this.curValName;
         },
+        // 已选择项的对象列表
         curValObjList () {
-            return this.curValNameList.map((item, index) => {
-                return {
-                    _key: index,
-                    name: item,
-                    style: {
-                        ...this.tagStyle
-                    }
-                };
-            });
+            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)
@@ -164,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

@@ -130,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);
 
@@ -54,7 +54,7 @@ export default {
             },
             set (val) {
                 if (!val) {
-                    this.curVal = "";
+                    this.clickClear();
                 }
             }
         },
@@ -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,13 +158,6 @@ export default {
                 }
                 : {};
         },
-        // 每项的具体样式 -查看状态时用
-        getItemShowStyle (item) {
-            return {
-                ...this.tagStyle,
-                ...this.getItemColorStyle(item)
-            };
-        },
         // 获取单选项的置灰状态
         getRadioItemDisabled (item) {
             return !!(
@@ -152,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 () {
@@ -179,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/mixins/switchMixin.js

@@ -47,22 +47,19 @@ export default {
                 ...this.propsObj
             };
         },
-        showStyle () {
+
+        curValObj () {
             return !this.$isEmptyData(this.curVal)
                 ? {
-                    ...this.tagStyle,
-                    backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
-                    color: this.curVal === true ? "#37C45E" : "#E83636"
+                    _key: "1",
+                    name: this.showVal,
+                    style: {
+                        ...this.tagStyle,
+                        backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
+                        color: this.curVal === true ? "#37C45E" : "#E83636"
+                    }
                 }
-                : {};
-        },
-
-        curValObj () {
-            return {
-                _key: "1",
-                name: this.showVal,
-                style: this.showStyle
-            };
+                : undefined;
         },
         showVal () {
             return this.$isEmptyData(this.curVal)

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

@@ -34,4 +34,8 @@
     &[disabled] {
         background-color: @border-disabled;
     }
+}
+
+.ivu-select-dropdown {
+    max-width: 800px;
 }