bri-components 1.2.58 → 1.2.60

package/package.json

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

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

@@ -138,7 +138,7 @@
             selfPropsObj () {
                 return {
                     _fileType: "file",
-                    _showType: this.isFullRow && !this.isInTable ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
+                    _showType: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
                     // _multiple: true,
                     _useType: "drag",
                     _maxSize: 1024 * 1024,

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

@@ -26,17 +26,18 @@
     <!-- 单选模式 查看 -->
     <div
         v-else-if="!multipleMode && !canEdit"
-        class="DshCascader"
+        class="DshCascader-show"
     >
         <!-- 有值 -->
         <bri-tooltip
             v-if="!$isEmptyData(curValList)"
             :content="showVal"
-            placement="top"
-            maxWidth="200"
             :transfer="true"
         >
-            <div :class="commonClass">
+            <div :class="{
+                commonClass,
+                'DshCascader-show-ellipsis': true
+            }">
                 {{ showVal }}
             </div>
         </bri-tooltip>
@@ -83,19 +84,15 @@
         <bri-tooltip
             v-if="!$isEmptyData(curValList)"
             :content="showMulVal"
-            placement="top"
-            maxWidth="200"
             :transfer="true"
         >
-            <div :class="{
-                ...commonClass,
-                'DshCascader-show-row': isFullRow && !isUnitShow
-            }">
-                <dsh-tags
-                    class="text"
-                    :list="curValNameList"
-                ></dsh-tags>
-            </div>
+            <dsh-tags
+                :class="{
+                    ...commonClass,
+                    'DshCascaders-show-ellipsis': !(isDetailShow && isHeightAuto)
+                }"
+                :list="curValNameList"
+            ></dsh-tags>
         </bri-tooltip>
 
         <!-- 无值 -->
@@ -139,7 +136,7 @@
         computed: {
             selfPropsObj () {
                 return {
-                    _showMode: "default", // 只有单选模式有效，值为"default", "custom", "simple"
+                    _showMode: "default", // 值为"default", "custom", "simple"
                     _transfer: true,
                     _transferClassName: "",
 
@@ -165,23 +162,18 @@
 
 <style lang="less">
     .DshCascader {
-
+        &-show {
+            &-ellipsis {
+                .dsh-ellipsis();
+            }
+        }
     }
 
     // 多选
     .DshCascaders {
         &-show {
-            height: auto;
-
-            &-row {
-                .text,
-                .overflow {
-                    .bri-scrollbar3();
-                    width: 100%;
-                    height: 100%;
-                    white-space: normal;
-                    overflow: auto;
-                }
+            &-ellipsis {
+                .dsh-ellipsis();
             }
         }
     }

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

@@ -1,111 +1,100 @@
 <template>
-    <div class="DshCheckbox">
-        <!-- 编辑 -->
-        <template v-if="canEdit">
-            <!-- 有选项 -->
-            <template v-if="listData.length">
-                <!-- flat方式 -->
-                <template v-if="showType === 'flat'">
-                    <CheckboxGroup
-                        :class="{
+    <!-- 编辑 -->
+    <div
+        v-if="canEdit"
+        class="DshCheckbox"
+    >
+        <!-- 有选项 -->
+        <template v-if="listData.length">
+            <!-- flat方式 -->
+            <template v-if="showType === 'flat'">
+                <CheckboxGroup
+                    :class="{
                         'DshCheckbox-flat': true,
                         'DshCheckbox-flat-color': useColor,
-                        'DshCheckbox-flat-disabled': !canEdit,
-                        'DshCheckbox-flat-scroll': selfPropsObj._span < 24 && !selfPropsObj._br,
+                        'DshCheckbox-flat-scroll': !isHeightAuto,
                     }"
-                        v-model="curValList"
+                    v-model="curValList"
+                >
+                    <Checkbox
+                        v-for="(item, index) in listData"
+                        :key="item._key"
+                        :class="getItemClass(item)"
+                        :style="getItemColorStyle(item)"
+                        :label="item._key"
+                        :disabled="getCheckItemDisabled(item, index)"
+                        :border="useColor"
                     >
-                        <Checkbox
-                            v-for="(item, index) in listData"
-                            :key="index"
-                            :class="[
-                                'DshCheckbox-item',
-                                getItemColorClass(item),
-                                selfPropsObj.class,
-                                item.class
-                            ]"
-                            :style="getItemStyle(item)"
-                            :label="item._key"
-                            :disabled="getItemDisabled(item)"
-                            :border="useColor"
-                            @click.native="clickOpenTip(item)"
-                        >
-                            <slot :item="item"></slot>
-
-                            <span>{{ item.name || item._name }}</span>
-                        </Checkbox>
-
-                        <!-- tip项弹框提示 -->
-                        <dsh-render :render="tipModalRender"></dsh-render>
-                    </CheckboxGroup>
-                </template>
+                        <span>{{ item.name || item._name }}</span>
+                    </Checkbox>
+                </CheckboxGroup>
+            </template>
 
-                <!-- dropdown模式 -->
-                <template v-else>
-                    <Select
-                        v-model="value[controlKey]"
-                        :multiple="true"
-                        :placeholder="selfPropsObj._placeholder"
-                        :disabled="!finalCanEdit"
-                        :filterable="selfPropsObj._filterable"
-                        :transfer="selfPropsObj._transfer"
-                        :transfer-class-name="selfPropsObj._transferClassName"
-                        :max-tag-count="selfPropsObj._maxTagCount"
-                        @on-select="changeSelect"
+            <!-- dropdown模式 -->
+            <template v-else>
+                <Select
+                    class="DshCheckbox-dropdown"
+                    :value="curValList"
+                    :multiple="true"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="selfPropsObj._disabled"
+                    :filterable="selfPropsObj._filterable"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    :max-tag-count="selfPropsObj._maxTagCount"
+                    @on-select="changeCheckValue"
+                >
+                    <Option
+                        v-for="(item, index) in listData"
+                        :key="item._key"
+                        :value="item._key"
+                        :label="item.name || item._name"
+                        :disabled="getCheckItemDisabled(item, index)"
                     >
-                        <Option
-                            v-for="(item, index) in listData"
-                            :key="index"
-                            :value="item._key"
-                            :label="item.name || item._name"
-                            :disabled="getItemDisabled(item)"
-                        >
-                            <Checkbox :value="getItemSelectStatus(item)"></Checkbox>
+                        <Checkbox :value="curValList.includes(item._key)"></Checkbox>
 
-                            <slot :item="item"></slot>
+                        <slot :item="item"></slot>
 
-                            <span>{{ item.name || item._name }}</span>
-                            <span style="float:right; padding-right:20px">
-                                {{ item.rightName }}
-                            </span>
-                        </Option>
-                    </Select>
-                </template>
+                        <span>{{ item.name || item._name }}</span>
+                    </Option>
+                </Select>
             </template>
-
-            <!-- 无选项 -->
-            <div
-                v-else
-                class="dsh-subtip"
-            >-- 无选择项 --</div>
         </template>
 
-        <!-- 查看 -->
-        <template v-else>
-            <bri-tooltip
-                :content="showMulVal"
-                placement="top"
-                maxWidth="200"
-                :transfer="true"
-            >
-                <div :class="{
-                    ...commonClass,
-                    'DshCheckbox-show': true
-                }">
-                    <!-- 有值 -->
-                    <dsh-tags
-                        v-if="!$isEmptyData(curValList)"
-                        class="text"
-                        :list="curValObjList"
-                    ></dsh-tags>
+        <!-- 无选项 -->
+        <div
+            v-else
+            class="dsh-subtip"
+        >-- 无选择项 --</div>
+    </div>
 
-                    <!-- 无值 -->
-                    <template v-else>
-                        {{ emptyShowVal }}
-                    </template>
-                </div>
-            </bri-tooltip>
-        </template>
+    <!-- 查看 -->
+    <div
+        v-else
+        class="DshCheckbox-show"
+    >
+        <!-- 有值 -->
+        <bri-tooltip
+            v-if="!$isEmptyData(curValList)"
+            :content="showMulVal"
+            :transfer="true"
+        >
+            <dsh-tags
+                :class="{
+                    ...commonClass,
+                    'DshCheckbox-show-ellipsis': !(isDetailShow && isHeightAuto)
+                }"
+                :list="curValObjList"
+            ></dsh-tags>
+        </bri-tooltip>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
     </div>
 </template>
 
@@ -125,156 +114,31 @@
         computed: {
             selfPropsObj () {
                 return {
+                    _max: 100000000,
                     _transfer: true,
-                    ...this.selectPropsObj
+                    _transferClassName: "",
+
+                    ...this.basePropsObj
                 };
             }
         },
         created () {},
         methods: {
-            // 下拉框的change (下拉方式时用v-model触发change有问题，组件进来如果值不为空的，就会v-model返值一次)
-            changeSelect (item) {
-                if (this.curValList.includes(item.value)) {
-                    let itemIndex = this.curValList.findIndex(valItem => valItem === item.value);
-                    this.curValList.splice(itemIndex, 1);
-                } else {
-                    this.curValList.push(item.value);
-                }
-
-                this.curValList = [...this.curValList];
-            },
-
-            getItemColorClass (item) {
-                return this.colorMap[item.color] ? item.color : "color-1";
-            },
-            getItemStyle (item) {
-                const color = this.colorMap[item.color] || this.colorMap["color-1"];
-                return {
-                    background: this.useColor ? this.$getColor(color, 0.1) : undefined,
-                    color: this.useColor ? color : undefined
-                };
-            },
-            // 获取某项的置灰状态
-            getItemDisabled (item) {
-                return !!(
-                    !this.finalCanEdit ||
-                    item._disabled ||
-                    this.curValList.length >= this.selfPropsObj._max && !this.getItemSelectStatus(item)
-                );
-            },
-            // 获取某项的选中状态
-            getItemSelectStatus (item) {
-                return this.curValList.includes(item._key);
+            // 多选模式 值改变 (pc端下拉方式时，用v-model触发change有问题，组件进来如果值不为空的，就会v-model返值一次)
+            changeCheckValue (item) {
+                this.clickCheckItem({
+                    ...item,
+                    _key: item.value
+                });
             }
         }
     };
 </script>
 
 <style lang="less">
-    .DshCheckbox {
-        width: 100%;
-
-        &-flat {
-            width: 100%;
-
-            // 选中时背景为白色
-            .ivu-checkbox-checked .ivu-checkbox-inner {
-                background-color: @themeColor;
-            }
-
-            &-item {}
-
-            &-color {
-                .ivu-checkbox-border {
-                    margin-right: 16px;
-                    height: 32px;
-                    border: none;
-                    border-radius: 4px;
-                    line-height: 32px;
-                    color: #FFF;
-                }
-
-                .ivu-checkbox {
-                    .ivu-checkbox-inner {
-                        border: 2px solid @themeColor;
-                        background-color: transparent;
-                    }
-
-                    .ivu-checkbox-focus {
-                        box-shadow: 0 0 0 0;
-                    }
-                }
+    @import url("../../control.less");
 
-                .ivu-checkbox-disabled+span {
-                    color: inherit;
-                }
-
-                each(@resourceColor, {
-                    .color-@{index} {
-                        .ivu-checkbox {
-                            .ivu-checkbox-inner {
-                                border-color: @value;
-                            }
-                        }
-
-                        .ivu-checkbox-checked {
-                            .ivu-checkbox-inner {
-                                background-color: @value;
-                            }
-                        }
-                    }
-                });
-            }
-
-            &-disabled {
-                .ivu-checkbox-disabled+span {
-                    color: #515a6e;
-                }
-            }
-
-            &-scroll {
-                overflow: auto;
-                white-space: nowrap;
-
-                .bri-scrollbar3();
-            }
-        }
-
-        &-show {}
-
-        .ivu-select-multiple {
-            .ivu-select-selection {
-                height: 32px;
-                .dsh-flex-row-between-center();
-
-                & > div {
-                    width: 100%;
-                    height: 100%;
-                    word-break: keep-all;
-                    white-space: nowrap;
-                    overflow: auto;
-                    .bri-scrollbar3();
-
-                    .ivu-tag {
-                        margin: 2px 4px 0px 0px;
-                        background-color: @borderColor;
-                    }
-                }
-            }
-
-            &.ivu-select-disabled {
-                .ivu-select-selection {
-                    & > div {
-                        .ivu-tag {
-                            background-color: @border-disabled;
-                        }
-                    }
-                }
-            }
-
-            .ivu-select-item-selected:after {
-                content: none;
-            }
-        }
+    .DshCheckbox {
+        #control-select(checkbox);
     }
 </style>