bri-components 1.1.5 → 1.1.6

package/package.json

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

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

@@ -33,6 +33,7 @@
                             class="hasdata"
                         >
                             <dsh-tags
+                                class="hasdata-multiple"
                                 :list="curValNameList"
                                 :propsObj="{
                                     closable: canEdit,
@@ -62,6 +63,7 @@
                             ...commonClass,
                             'DshCascader-custom-input': true
                         }"
+                        class
                         @click="openModal"
                     >
                         <!-- 有值 -->
@@ -150,6 +152,7 @@
                         class="hasdata-multiple"
                         :list="curValNameList"
                         :propsObj="{
+                            closable: !canEdit,
                             size: isSelfRow ? 'medium' : 'default'
                         }"
                     ></dsh-tags>

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

@@ -203,12 +203,14 @@
                         ..._customData.params
                     },
                     callback: data => {
-                        this.initListData.push(...data.list.map(item => (
-                            {
-                                _key: item[_customData._key || "_key"],
-                                name: item[_customData._name || "name"]
-                            }
-                        )));
+                        this.initListData.push(
+                            ...data.list.map(item => (
+                                {
+                                    _key: item[_customData._key || "_key"],
+                                    name: item[_customData._name || "name"]
+                                }
+                            ))
+                        );
                     }
                 });
             },

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

@@ -1,48 +1,44 @@
 <template>
-    <div
-        class="DshSwitch"
-        :style="{ textAlign: propsObj._textAlign, width: '100%' }"
-    >
-        <!-- 组件无clearable -->
-        <i-switch
-            v-if="finalCanEdit"
-            v-model="value[propsObj._key]"
-            :size="propsObj._size"
-            :disabled="!finalCanEdit"
-            @on-change="change"
-        >
-            <span
-                slot="open"
-                style="font-size: 12px;"
-            >{{ propsObj._openText }}</span>
-            <span slot="close">{{ propsObj._closeText }}</span>
-        </i-switch>
-        <!-- 查看 和 编辑下无编辑权限 -->
-        <Ctooltip
-            v-else
-            placement="top"
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-        >
-            <div
-                class="DshCheckbox-value-wrapper"
-                :style="{
-                        textAlign: propsObj._textAlign,
-                        flexGrow: 1,
-                        display: 'flex',
-                        justifyContent: getFlexLayout(propsObj._textAlign)
-                    }"
+    <!-- 该组件无clearable -->
+    <div class="DshSwitch">
+        <!-- 编辑 -->
+        <template v-if="canEdit">
+            <i-switch
+                v-model="curVal"
+                :disabled="!finalCanEdit"
+                :size="propsObj._size"
+                @on-change="change"
             >
-                <span
-                    class="DshCheckbox-value control-show-color-text dsh-ellipsis"
-                    :style="{
-                        background: value[controlKey] ? '#ECF3FD' : '#FEF6EB',
-                        color: value[controlKey] ? '#3D84EE' : '#F4A135'
-                    }"
-                >{{ showVal }}</span>
-            </div>
-        </Ctooltip>
+                <span slot="open">
+                    {{ propsObj._openText }}
+                </span>
+                <span slot="close">
+                    {{ propsObj._closeText }}
+                </span>
+            </i-switch>
+        </template>
+
+        <!-- 查看 -->
+        <template v-else>
+            <Ctooltip
+                :content="showText"
+                placement="top"
+                :transfer="true"
+                maxWidth="200"
+            >
+                <div class="DshSwitch-show">
+                    <span
+                        class="DshSwitch-show-name"
+                        :style="{
+                            background: curVal ? '#ECF3FD' : '#FEF6EB',
+                            color: curVal ? '#3D84EE' : '#F4A135'
+                        }"
+                    >
+                        {{ showText }}
+                    </span>
+                </div>
+            </Ctooltip>
+        </template>
     </div>
 </template>
 
@@ -51,58 +47,20 @@
 
     export default {
         name: "DshSwitch",
-        mixins: [controlMixin],
+        mixins: [
+            controlMixin
+        ],
         data () {
             return {};
         },
         computed: {
-            showVal () {
+            showText () {
                 return this.value[this.controlKey]
                     ? this.propsObj._openText
                     : this.propsObj._closeText;
             }
         },
-        created () {
-        },
-        methods: {
-            getFlexLayout (align) {
-                let map = {
-                    left: "flex-start",
-                    center: "center",
-                    right: "flex-end"
-                };
-                if (align) {
-                    return map[align];
-                } else {
-                    return "flex-start";
-                }
-            }
-        }
+        created () {},
+        methods: {}
     };
 </script>
-
-<style lang="less" scoped>
-    .DshSwitch {
-
-    }
-</style>
-<style lang="less">
-    .DshSwitch {
-        .ivu-switch {
-            width: 50px;
-        }
-        .ivu-switch-checked:after {
-            left: 29px;
-        }
-        .ivu-switch-inner {
-            color: #fff;
-            font-size: 12px;
-            position: absolute;
-            left: auto;
-            right: 4px;
-        }
-        .ivu-switch-checked .ivu-switch-inner {
-            left: 3px;
-        }
-    }
-</style>

package/src/components/form/DshDefaultSearch.vue

@@ -53,7 +53,7 @@
             v-if="canUseFold"
             class="DshDefaultSearch-fold"
         >
-            <div class="DshDefaultSearch-fold-zhanwei"></div>
+            <!-- <div class="DshDefaultSearch-fold-zhanwei"></div> -->
             <Icon
                 :class="[
                     'DshDefaultSearch-fold-icon',

package/src/components/form/DshForm.vue

@@ -325,6 +325,10 @@
         &-item-FormItem {
             margin-bottom: 0px!important;
         }
+
+        .ivu-form-item-content {
+            line-height: normal;
+        }
         .ivu-form-item-error-tip {
             top: 90%;
             left: 15px;

package/src/components/small/BriButton.vue

@@ -42,13 +42,13 @@
                 let setType = this.propsObj.btnType || this.type;
                 if (["cancel"].includes(defaultType)) {
                     setType = "primary";
-                } else if (["errorLine"].includes(defaultType)) {
+                } else if (["errorLine", "primaryLine"].includes(defaultType)) {
                     setType = "default";
                 } else if (["linkText", "primaryText", "errorText"].includes(defaultType)) {
                     setType = "text";
                 }
                 return {
-                    class: ["cancel", "linkText", "primaryText", "errorLine", "errorText"].includes(defaultType) ? `ivu-btn-${defaultType}` : "",
+                    class: ["cancel", "linkText", "primaryText", "errorLine", "errorText", "primaryLine"].includes(defaultType) ? `ivu-btn-${defaultType}` : "",
                     ...this.propsObj,
                     btnType: setType,
                     customIcon: this.propsObj.customIcon ? `bico-font ${this.propsObj.customIcon}` : undefined

package/src/components/small/DshButtons.vue

@@ -78,7 +78,7 @@
 
         <template v-else>
             <bri-button
-                v-for="(operationItem, index) in list"
+                v-for="(operationItem, index) in flatList"
                 :key="operationItem.type"
                 :style="operationItem.style"
                 :class="[
@@ -97,6 +97,25 @@
                     {{ operationItem.name }}
                 </span>
             </bri-button>
+
+            <dsh-dropdown
+                v-if="moreList.length"
+                class="DshButtons-dropdown"
+                :list="moreList"
+                :trigger="'hover'"
+                @click="emit($event)"
+            >
+                <slot name="more">
+                    <bri-button
+                        class="DshButtons-dropdown-more"
+                        :propsObj="moreBtnOperationObj"
+                    >
+                        <span class="DshButtons-dropdown-more-name">
+                            {{ moreBtnOperationObj.name }}
+                        </span>
+                    </bri-button>
+                </slot>
+            </dsh-dropdown>
         </template>
     </div>
 </template>
@@ -143,11 +162,18 @@
                     name: "更多",
                     type: "more",
                     size: "default",
-                    customIcon: "bico-gengduo1"
+                    customIcon: "bico-gengduo",
+                    btnType: "primaryText"
                 }
             };
         },
         computed: {
+            flatList () {
+                return this.list.slice(0, this.maxFlatNum);
+            },
+            moreList () {
+                return this.list.slice(this.maxFlatNum);
+            },
             leftFlatList () {
                 return this.leftList.slice(0, this.maxFlatNum);
             },

package/src/components/small/DshIcons.vue

@@ -5,7 +5,7 @@
     >
         <Icon
             v-for="(operationItem, index) in list"
-            :key="operationItem._key || operationItem._id || operationItem.customIcon || operationItem.icon"
+            :key="operationItem._key || operationItem._id || index"
             :style="operationItem.style"
             :class="[
                 'DshIcons-item',

package/src/components/unit/DshFormItem.vue

@@ -117,10 +117,10 @@
                     return [];
                 }
             },
-            // 实际最精确值是74px（label:30px, control:32px, 上下padding各: 6px，因为ivu-form-item-content里line-height: 32px导致有问题，故先76px
+            // 实际最精确值是68px（label:30px, control:32px, 上下padding各: 3px，因为ivu-form-item-content里line-height: 32px导致有问题，故先70px
             height: {
                 type: [String, Number],
-                default: "76"
+                default: "70"
             },
             rowStyle: {
                 type: Object,

package/src/styles/common/control.less

@@ -61,12 +61,23 @@
     color: @textColor;
 }
 .control-disabled {
+    height: 32px;
     border: 1px solid @border-disabled;
     border-radius: @borderRadius;
     background: @inputBg-disabled;
+    line-height: 32px;
     cursor: not-allowed;
     color: @textColor-disabled;
 }
+.control-readonly {
+    height: 32px;
+    border: 1px solid @border-readonly;
+    border-radius: @borderRadius;
+    background: @inputBg-readonly;
+    line-height: 32px;
+    cursor: not-allowed;
+    color: @textColor-readonly;
+}
 .control-show {
     border: none;
     background-color: transparent;
@@ -79,13 +90,6 @@
 .control-placeholder {
     color: @placeholderColor;
 }
-.control-readonly {
-    border: 1px solid @border-readonly;
-    border-radius: @borderRadius;
-    background: @inputBg-readonly;
-    line-height: 32px;
-    color: @textColor-readonly;
-}
 .control-notext {
     color: @placeholderColor;
 }

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

@@ -0,0 +1,110 @@
+.DshCascader {
+    width: 100%;
+
+    #nodata () {
+        display: inline-block;
+        padding: 0px 8px;
+        color: @placeholderColor;
+    }
+
+    // 多选
+    &-multiple {
+        width: 100%;
+
+        &-input {
+            .hasdata {
+                width: 100%;
+                height: 100%;
+                
+                &-multiple {
+                    width: 100%;
+                    height: 100%;
+                    padding: 0px 8px;
+                    .bri-scrollbar3();
+                    overflow-y: hidden;
+                }
+            }
+
+            .nodata {
+                #nodata();
+            }
+        }
+    }
+
+    // 单选 -新模式
+    &-custom {
+        &-input {
+            .hasdata {
+                width: 100%;
+                height: 100%;
+                padding: 0px 8px;
+
+                &-text {
+                    .dsh-ellipsis();
+                }
+                
+                &-clear {
+                    margin-left: 5px;
+                }
+            }
+
+            .nodata {
+                #nodata();
+            }
+        }
+    }
+    
+    // 单选 -默认模式
+    &-single {
+        width: 100%;
+    }
+    
+    // 查看
+    &-show {
+        .hasdata {
+            width: 100%;
+            height: 100%;
+            
+            &-multiple {
+                width: 100%;
+                height: 100%;
+                padding: 0px 8px;
+                .bri-scrollbar3();
+                overflow-y: hidden;
+            }
+        }
+
+        .nodata {
+            #nodata();
+        }
+    }
+
+    &-multiplerow {
+        height: 70px;
+
+        .hasdata {
+            &-multiple {
+                padding: 4px 8px;
+                overflow-y: auto;
+                display: flex;
+                flex-wrap: wrap;
+            }
+        }
+    }
+}
+
+.ivu-cascader {
+    &-label {
+        padding-right: 24px;
+    }
+
+    &-transfer {
+        max-height: 400px !important;
+
+        .ivu-cascader-menu {
+            max-height: 400px;
+            height: auto;
+            max-width: 300px;
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+.DshSwitch {
+    width: 100%;
+
+    &-show {
+        height: 24px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        line-height: 20px;
+        flex-grow: 1;
+        display: flex;
+        justify-content: flex-start;
+    
+        &-name {
+            .dsh-ellipsis();
+            display: flex;
+            min-height: 32px;
+            padding: 4px;
+        }
+    }
+
+    .ivu-switch {
+        width: 50px;
+    }
+    .ivu-switch-checked:after {
+        left: 29px;
+    }
+    .ivu-switch-inner {
+        color: #fff;
+        font-size: 12px;
+        position: absolute;
+        left: auto;
+        right: 4px;
+    }
+    .ivu-switch-checked .ivu-switch-inner {
+        left: 3px;
+    }
+}

package/src/styles/components/form/DshDefaultSearch.less

@@ -1,5 +1,6 @@
 .DshDefaultSearch {
     position: relative;
+    background: #fff;
 
     &-item {
         padding: 0 !important;
@@ -21,17 +22,9 @@
         width: 100%;
         text-align: center;
         position: absolute;
-        bottom: -20px;
+        bottom: -10px;
         left: 0px;
 
-        &-zhanwei {
-            width: 100%;
-            height: 15px;
-            background: #fff;
-            position: relative;
-            z-index: 1;
-        }
-
         &-icon {
             width: 48px;
             height: 20px;
@@ -48,4 +41,43 @@
             }
         }
     }
+
+    // 输入框/下拉框
+    input,
+    .ivu-select-selection,
+    .ivu-cascader-size-default,
+    .DshCascader-multiple-input,
+    .DshDaterange-item {
+        border-radius: 0;
+
+        .ivu-select-input{
+            top: 0px!important;
+        }
+    }
+
+    .DshCascader-multiple-input {
+        height: 32px;
+        padding: 1px 6px;
+        overflow: hidden!important;
+    }
+
+    .DshFormItem-label {
+        width: 80px;
+        text-align: right;
+        margin-right: 16px;
+
+        .DshFormItem-label-left {
+            .DshFormItem-label-name {
+                font-family: "Microsoft YaHei";            
+            }
+        }
+        
+        .DshFormItem-label-right {
+            text-align: left;
+        }
+    }
+    .control-edit {
+        border-radius: 0px;
+    }
+
 }

package/src/styles/components/index.less

@@ -1,23 +1,24 @@
 // controls
-@import "./controls/DshInput.less";
-@import "./controls/BriInputs.less";
-@import "./controls/DshNumber.less";
-@import "./controls/DshNumberange.less";
-@import "./controls/DshCheckbox.less";
-@import "./controls/DshSelect.less";
-@import "./controls/DshDate.less";
-@import "./controls/DshDaterange.less";
-@import "./controls/DshCascader.less";
-@import "./controls/InfoCascader.less";
-@import "./controls/DshCoordinates.less";
-@import "./controls/DshEditor.less";
-@import "./controls/DshDivider.less";
+@import "./controls/base/DshInput.less";
+@import "./controls/base/BriInputs.less";
+@import "./controls/base/DshNumber.less";
+@import "./controls/base/DshNumberange.less";
+@import "./controls/base/DshSwitch.less";
+@import "./controls/base/DshSelect.less";
+@import "./controls/base/DshCheckbox.less";
+@import "./controls/base/DshDate.less";
+@import "./controls/base/DshDaterange.less";
+@import "./controls/base/DshCascader.less";
+@import "./controls/base/InfoCascader.less";
+@import "./controls/base/BriUpload.less";
+@import "./controls/base/DshCoordinates.less";
+@import "./controls/base/DshEditor.less";
+@import "./controls/base/DshDivider.less";
 
-@import "./controls/BriUpload.less";
-@import "./controls/flatTable.less";
-@import "./controls/cascaderTable.less";
-@import "./controls/BriLabels.less";
-@import "./controls/DshPackage.less";
+@import "./controls/senior/flatTable.less";
+@import "./controls/senior/cascaderTable.less";
+@import "./controls/senior/BriLabels.less";
+@import "./controls/senior/DshPackage.less";
 
 @import "./controls/controlShow.less";