bri-components 1.2.9 → 1.2.11

package/src/components/controls/senior/selectDepartments.vue

@@ -8,50 +8,22 @@
         >
             <div @click.stop="clickInput">
                 <slot>
-                    <!-- 编辑模式 -->
-                    <div
+                    <!-- 编辑 -->
+                    <bri-control-input
                         v-if="canEdit"
                         :class="{
                             ...commonClass,
                             'selectDepartments-edit': true
                         }"
-                        @mouseenter="isHover = true"
-                        @mouseleave="isHover = false"
-                    >
-                        <!-- 有值 -->
-                        <template v-if="!$isEmptyData(curValList)">
-                            <dsh-tags
-                                class="text"
-                                :list="curValList"
-                                :propsObj="{
-                                    disabled: !finalCanEdit,
-                                    closable: true
-                                }"
-                                @delete="clickDeleteItem"
-                            ></dsh-tags>
-                        </template>
-                        <!-- 无值 -->
-                        <template v-else>
-                            {{ emptyShowVal }}
-                        </template>
+                        :canEdit="finalCanEdit"
+                        :value="curValList"
+                        :inputIcon="inputIcon"
+                        :propsObj="selfPropsObj"
+                        @deleteItem="clickDeleteItem"
+                        @clear="clickClear"
+                    ></bri-control-input>
 
-                        <!-- 图标 -->
-                        <template>
-                            <Icon
-                                v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
-                                class="icon-close"
-                                type="ios-close-circle"
-                                @click.stop="clickClear"
-                            />
-                            <Icon
-                                v-else
-                                class="icon-default"
-                                :type="inputIcon"
-                            />
-                        </template>
-                    </div>
-
-                    <!-- 查看模式 -->
+                    <!-- 查看 -->
                     <div
                         v-else
                         :class="{
@@ -202,10 +174,8 @@
         props: {},
         data () {
             return {
-                isHover: false,
-
-                newValList: [],
                 showModal: false,
+                newValList: [],
                 loading: false,
                 searchName: "", // 搜索名字
                 departmentList: [],

package/src/components/controls/senior/selectUsers/selectUsers.vue

@@ -9,47 +9,19 @@
             <div @click.stop="clickInput">
                 <slot>
                     <!-- 编辑 -->
-                    <div
+                    <bri-control-input
                         v-if="canEdit"
                         :class="{
                             ...commonClass,
                             'selectUsers-edit': true
                         }"
-                        @mouseenter="isHover = true"
-                        @mouseleave="isHover = false"
-                    >
-                        <!-- 有值 -->
-                        <template v-if="!$isEmptyData(curValList)">
-                            <dsh-tags
-                                class="text"
-                                :list="curValList"
-                                :propsObj="{
-                                    disabled: !finalCanEdit,
-                                    closable: true
-                                }"
-                                @delete="clickDeleteItem"
-                            ></dsh-tags>
-                        </template>
-                        <!-- 无值 -->
-                        <template v-else>
-                            {{ emptyShowVal }}
-                        </template>
-
-                        <!-- 图标 -->
-                        <template>
-                            <Icon
-                                v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
-                                class="icon-close"
-                                type="ios-close-circle"
-                                @click.stop="clickClear"
-                            />
-                            <Icon
-                                v-else
-                                class="icon-default"
-                                :type="inputIcon"
-                            />
-                        </template>
-                    </div>
+                        :canEdit="finalCanEdit"
+                        :value="curValList"
+                        :inputIcon="inputIcon"
+                        :propsObj="selfPropsObj"
+                        @clickDeleteItem="clickDeleteItem"
+                        @clickClear="clickClear"
+                    ></bri-control-input>
 
                     <!-- 查看 -->
                     <div
@@ -219,8 +191,6 @@
         props: {},
         data () {
             return {
-                isHover: false,
-
                 // 弹框
                 newValList: [],
                 showModal: false,

package/src/components/form/DshAdvSearchForm.vue

@@ -20,7 +20,7 @@
                     <!-- 'and', 'or' 循环模式 -->
                     <div
                         v-if="['and', 'or'].includes(conditionItem.logic)"
-                        :key="conditionItem._id"
+                        :key="`${conditionItem._id}andor`"
                         class="DshAdvSearchForm-conditions-loop"
                     >
                         <dsh-advSearch-form
@@ -44,7 +44,7 @@
                     <!-- field 正常模式 -->
                     <dsh-formItem
                         v-else-if="['field', undefined].includes(conditionItem.logic)"
-                        :key="conditionItem._id"
+                        :key="`${conditionItem._id}field`"
                         class="DshAdvSearchForm-conditions-item"
                         :formData="conditionItem"
                         :formItem="conditionItem.formItem"
@@ -76,11 +76,11 @@
                                 class="DshAdvSearchForm-conditions-item-control"
                                 :value="conditionItem"
                                 :propsObj="{
-                                _name: `${conditionItem.formItem._name}的动态参数`,
-                                _key: 'fieldParams',
-                                _multiple: true,
-                                _data: conditionItem.dynamicList
-                            }"
+                                    _name: `${conditionItem.formItem._name}的动态参数`,
+                                    _key: 'fieldParams',
+                                    _multiple: true,
+                                    _data: conditionItem.dynamicList
+                                }"
                                 @change="change(conditionItem, arguments)"
                             ></dsh-select>
 
@@ -137,7 +137,7 @@
                     <!-- text 关键字的模式 -->
                     <div
                         v-else-if="['text'].includes(conditionItem.logic)"
-                        :key="conditionItem._id"
+                        :key="`${conditionItem._id}text`"
                     >
                         {{ conditionItem.logic }}模式暂未开发
                     </div>
@@ -145,7 +145,7 @@
                     <!-- native 以及以后可能增加的模式 -->
                     <div
                         v-else
-                        :key="conditionItem._id"
+                        :key="`${conditionItem._id}other`"
                     >
                         {{ conditionItem.logic }}模式是不用开发的
                     </div>

package/src/components/small/BriButton.vue

@@ -8,7 +8,7 @@
         :loading="selfPropsObj.loading"
         :disabled="selfPropsObj.disabled"
         :htmlType="selfPropsObj.htmlType"
-        :icon="selfPropsObj.icon || icon"
+        :icon="(selfPropsObj.customIcon || customIcon) ? undefined : (selfPropsObj.icon || icon)"
         :customIcon="selfPropsObj.customIcon || customIcon"
         :long="selfPropsObj.long"
         :ghost="selfPropsObj.ghost"

package/src/components/small/BriTooltip.vue

@@ -2,18 +2,13 @@
     <Tooltip
         class="BriTooltip"
         style="width: 100%;"
-        :disabled="disabled"
         :content="content"
+        :disabled="toolTipDisabled"
         :placement="placement"
-        :transfer="transfer"
         :max-width="maxWidth"
+        :transfer="transfer"
     >
-        <div
-            ref="ellipsisContent"
-            class="ellipsisContent"
-        >
-            <slot></slot>
-        </div>
+        <slot></slot>
 
         <slot
             slot="content"
@@ -27,12 +22,6 @@
         name: "BriTooltip",
         props: {
             content: String,
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
             placement: {
                 type: String,
                 default: "bottom"
@@ -44,44 +33,48 @@
             transfer: {
                 type: Boolean,
                 default: false
+            },
+
+            defaultDisabled: {
+                type: Boolean,
+                default: true
             }
         },
         data () {
             return {
-                disabled: false
+                toolTipDisabled: true,
+                tmpToolTipDisabled: true
             };
         },
-        computed: {},
-        methods: {
-            computedDisable () {
-                // 获取overflow：hidden元素的实际被撑开的宽度
-                let test = this.$refs.ellipsisContent;
-                if (test) {
-                    let cp = test.cloneNode(true);
-                    cp.style.cssText = "all: unset;position: absolute;opacity:0;";
-                    test.parentElement.appendChild(cp);
-                    let realWidth = cp.offsetWidth;
-                    cp.remove();
-                    this.disabled = realWidth <= test.offsetWidth;
-                }
-            }
+        created () {
+            this.toolTipDisabled = this.defaultDisabled;
+            this.tmpToolTipDisabled = this.toolTipDisabled;
         },
-        created () {},
         mounted () {
-            this.$nextTick(() => {
-                this.computedDisable();
-            });
+            this.getToolTipDisabled("mouted");
         },
         updated () {
-            this.$nextTick(() => {
-                this.computedDisable();
-            });
+            this.getToolTipDisabled("updated");
         },
-        watch: {
-            content () {
-                this.$nextTick(() => {
-                    this.computedDisable();
-                });
+        methods: {
+            getToolTipDisabled (type) {
+                const isOverflow = this.$slots.default;
+                const toolTipDisabled = isOverflow[0]
+                    ? !(isOverflow[0].elm.scrollWidth > isOverflow[0].elm.clientWidth)
+                    : this.toolTipDisabled;
+
+                if (toolTipDisabled !== this.toolTipDisabled) {
+                    if (toolTipDisabled !== this.tmpToolTipDisabled) {
+                        this.tmpToolTipDisabled = toolTipDisabled;
+
+                        this.timer = setTimeout(() => {
+                            this.toolTipDisabled = toolTipDisabled;
+                            this.tmpToolTipDisabled = this.toolTipDisabled;
+                        }, 2000);
+                    }
+                } else {
+                    clearTimeout(this.timer);
+                }
             }
         }
     };

package/src/components/unit/DshUnit.vue

@@ -21,8 +21,9 @@
                 :propsObj="{
                     ...formItem,
                     size: 'default',
-                    inTable: true
+                    isInTable: true
                 }"
+                :rowIndex="rowIndex"
                 :parentData="parentData"
                 @blur="blur"
                 @change="change"

package/src/index.js

@@ -26,6 +26,7 @@ import DshFormItem from "./components/unit/DshFormItem.vue";
 import DshUnit from "./components/unit/DshUnit.vue";
 
 // controls
+import BriControlInput from "./components/controls/BriControlInput.vue";
 import DshInput from "./components/controls/base/DshInput.vue";
 import DshNumber from "./components/controls/base/DshNumber/DshNumber.vue";
 import DshSelect from "./components/controls/base/DshSelect.vue";
@@ -118,6 +119,7 @@ const map = {
     DshUnit,
 
     // controls
+    BriControlInput,
     DshInput,
     DshNumber,
     DshSelect,

package/src/styles/common/control.less

@@ -52,18 +52,16 @@
     border: none;
     background-color: transparent;
 
-    .ivu-icon {
-        padding: 5px;
-        color: @placeholderColor;
+    .text {
+        .dsh-ellipsis();
     }
 }
 .bri-control-unit {
     border: none;
     background-color: transparent;
 
-    .ivu-icon {
-        padding: 5px;
-        color: @placeholderColor;
+    .text {
+        .dsh-ellipsis();
     }
 }
 
@@ -75,35 +73,3 @@
 .bri-control-disabled-placeholder {
     color: @textColor-disabled;
 }
-
-// 展示为tag标签公共样式
-#bri-control-wrap () {
-    height: 32px;
-    padding: 4px 0 4px 7px;
-    line-height: 24px;
-    .dsh-flex-row-between-center();
-
-    .text {
-        .dsh-ellipsis();
-    }
-
-    .overflow {
-        overflow: auto;
-        .bri-scrollbar3();
-    }
-
-    .icon {
-        &-default {
-
-        }
-        &-close {
-            display: none;
-        }
-    }
-
-    &:hover {
-        .icon-close {
-            display: block;
-        }
-    }
-}

package/src/styles/components/controls/BriControlInput.less

@@ -1,3 +1,30 @@
 .BriControlInput {
-    
+    height: 32px;
+    padding: 4px 0 4px 7px;
+    line-height: 24px;
+    .dsh-flex-row-between-center();
+
+    .text {
+        .dsh-ellipsis();
+    }
+
+    .overflow {
+        overflow: auto;
+        .bri-scrollbar3();
+    }
+
+    .placeholder {
+        flex: 1;
+        min-width: 0px;
+        overflow: hidden;
+    }
+
+    .icon {
+        &-default {
+
+        }
+        &-close {
+
+        }
+    }
 }

package/src/styles/components/controls/base/DshCascader/DshCascader.less

@@ -7,14 +7,13 @@
             width: 100%;
             
             &-edit {
-                #bri-control-wrap();
+
             }
         }
 
         // 单选 -新模式
         &-custom {
             width: 100%;
-            #bri-control-wrap();
         }
         // 单选 -默认模式
         &-single {
@@ -36,7 +35,7 @@
     // 多选类型且独自一行时
     &-row {
         &-edit {
-            // height: 68px;
+
         }
         &-show {
             height: auto;

package/src/styles/components/controls/base/DshCoordinates.less

@@ -2,14 +2,10 @@
     width: 100%;
 
     &-edit {
-        #bri-control-wrap();
-    }
 
-    &-show {
-        
     }
 
-    &-unit {
+    &-show {
         
     }
 

package/src/styles/components/controls/senior/BriLabels.less

@@ -2,7 +2,7 @@
     width: 100%;
 
     &-edit {
-        #bri-control-wrap();
+
     }
     
     &-show {

package/src/styles/components/controls/senior/selectDepartments.less

@@ -2,7 +2,7 @@
     width: 100%;
 
     &-edit {
-        #bri-control-wrap();
+
     }
 
     &-show {

package/src/styles/components/controls/senior/selectUsers/selectUsers.less

@@ -2,7 +2,7 @@
     width: 100%;
 
     &-edit {
-        #bri-control-wrap();
+
     }
     &-show {
         

package/src/styles/components/index.less

@@ -23,6 +23,8 @@
 @import "./unit/DshUnit.less";
 
 // controls
+@import "./controls/BriControlInput.less";
+
 @import "./controls/base/DshInput.less";
 @import "./controls/base/BriInputs.less";
 @import "./controls/base/DshNumber.less";

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

@@ -6,12 +6,12 @@
     }
 
     .ivu-tooltip-inner {
+        padding: 5px 8px;
         border-radius: 4px;
         background: rgba(0, 0, 0, 0.9);
-        color: rgba(255, 255, 255, 0.9);
         font-size: 14px;
         font-weight: 400;
-        padding: 5px 8px;
+        color: rgba(255, 255, 255, 0.9);
     }
 
     .ivu-tooltip-rel {

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

@@ -90,7 +90,7 @@
                         }
                     }
                     .ivu-modal-body {
-                        padding: 16px 24px 20px;
+                        padding: 10px;
                     }
                 }
             }