bri-components 1.2.50 → 1.2.52

package/package.json

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

package/src/components/controls/BriControlInput.vue

@@ -115,12 +115,7 @@
         .placeholder {
             flex: 1;
             min-width: 0px;
-            overflow: hidden;
-        }
-
-        .ivu-icon {
-            padding: 5px;
-            color: @placeholder-disabled-color;
+            .dsh-ellipsis();
         }
 
         .icon {
@@ -133,3 +128,11 @@
         }
     }
 </style>
+<style lang="less">
+    .BriControlInput {
+        .ivu-icon {
+            padding: 5px;
+            color: @placeholder-disabled-color;
+        }
+    }
+</style>

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

@@ -243,3 +243,173 @@
         }
     };
 </script>
+
+<style lang="less">
+    .BriUpload {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        border: 1px solid @borderColor;
+        border-radius: @borderRadius;
+        background-color: @white;
+
+        // 外围
+        &-old {
+            overflow: hidden;
+            display: flex;
+
+            &-wrapper {
+                min-width: 120px;
+                height: 100%;
+                margin: 16px 0px 16px 16px;
+                border-radius: 0px;
+                border: none;
+                &:hover {
+                    border: none
+                }
+            }
+
+            &-imageadd {
+                .dsh-flex-col-center-center();
+                width: 120px;
+                height: 120px;
+                position: relative;
+                border: 1px @borderColor dashed;
+                color: @themeColor;
+                border-radius: @borderRadius;
+                cursor: pointer;
+                &:hover {
+                    border-color: @themeColor;
+                    background-color: @theme-focus;
+                }
+            }
+
+            &-circle {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 50px !important;
+                height: 50px !important;
+                margin-top: -25px;
+                margin-left: -25px;
+                border-radius: 50%;
+                background-color: @inputBg-readonly;
+
+                i {
+                    color: @scuess-color;
+                    font-size: 40px;
+                }
+            }
+        }
+
+        &-new,
+        &-inline {
+            display: flex;
+
+            &-wrapper {
+                min-width: 30px;
+                background-color: @border-readonly;
+                height: 30px;
+                line-height: 30px;
+                border: none;
+                border-radius: 0px !important;
+                &:hover {
+                    border: none
+                }
+            }
+
+            &-imageadd {
+                .dsh-flex-row-center-center();
+                height: 30px;
+                background-color: @btn-hover;
+                color: @textColor;
+                border: none;
+                border-radius: 0px;
+                &:hover {
+                    color: @themeColor;
+                    background-color: @theme-focus;
+                }
+            }
+
+            &-circle {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 24px !important;
+                height: 24px !important;
+                margin-top: -12px;
+                margin-left: -12px;
+                background-color: #f4f5fa;
+                border-radius: 50%;
+                i {
+                    color: @scuess-color;
+                    font-size: 24px;
+                }
+            }
+        }
+
+        &-readonly {
+            border: none;
+            border-radius: 0px;
+            background-color: transparent;
+
+            .uploadList {
+                &-old {
+                    margin: 0px;
+                }
+
+                &-list {
+                    .item {
+                        flex: 0 0 80px;
+                        height: 80px;
+                    }
+                }
+
+                &-inline {
+                    .bri-scrollbar6();
+                    height: 48px;
+                    line-height: 48px;
+
+                    .item {
+                        flex: 0 0 48px
+                    }
+                }
+            }
+        }
+
+        &-disabled {
+            .bri-control-disabled();
+
+            .uploadList {
+                &-old {
+                    margin: 0px;
+                }
+
+                &-list {
+                    .item {
+                        flex: 0 0 80px;
+                        height: 80px;
+                    }
+                }
+
+                &-nodata {
+                    color: @placeholder-disabled-color;
+                    text-indent: 7px;
+                    text-align: left;
+                }
+                &-inline-nodata {
+                    color: @placeholder-disabled-color;
+                }
+            }
+        }
+
+        &-unit {
+            .uploadList {
+                &-inline-nodata {
+                    .bri-control-nodata();
+                }
+            }
+        }
+    }
+</style>

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

@@ -281,3 +281,93 @@
         }
     };
 </script>
+
+<style lang="less">
+    .BriUploadImage {
+        position: relative;
+
+        &-set {
+            width: 100%;
+
+            &-img {
+                width: 100px;
+                height: 100px;
+                float: left;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: contain;
+                background-color: #fff;
+                border: 1px solid @borderColor;
+                border-radius: 0px;
+                position: relative;
+                overflow: hidden;
+
+                &-action {
+                    color: @themeColor;
+                    cursor: pointer;
+                }
+
+                &-circle {
+                    position: absolute;
+                    top: 0px;
+                    bottom: 0px;
+                    left: 0px;
+                    right: 0px;
+                    background-color: #f4f5fa;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .circle {
+                        width: 50px !important;
+                        height: 50px !important;
+                    }
+
+                    i {
+                        color: #5cb85c;
+                        font-size: 40px;
+                    }
+                }
+            }
+
+            &-avatar {
+                background-size: cover;
+            }
+
+            .wrap {
+                width: 100px;
+                height: 32px;
+                position: relative;
+                overflow: hidden;
+                display: inline-block;
+                line-height: 18px;
+                text-align: center;
+                vertical-align: middle;
+                cursor: pointer;
+
+                button {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                }
+
+                .file {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    margin: 0;
+                    border: solid transparent;
+                    opacity: 0;
+                    filter: alpha(opacity=0);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        &-cropper {
+            width: 400px;
+            height: 400px;
+            margin: 0 auto;
+        }
+    }
+</style>

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

@@ -258,3 +258,169 @@
         }
     };
 </script>
+
+<style lang="less">
+    .uploadList {
+        width: 100%;
+        overflow: auto;
+
+        // 普通文件
+        &-old {
+            margin: 16px;
+        }
+
+        &-nodata {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 120px;
+            color: @placeholderColor;
+            white-space: nowrap;
+
+            span {
+                margin-left: 5px;
+            }
+        }
+
+        &-list {
+            display: flex;
+            flex-wrap: nowrap;
+
+            .item {
+                flex: 0 0 120px;
+                height: 120px;
+                margin-right: 10px;
+                border-radius: @borderRadius;
+                background: #f4f5fa;
+                text-align: center;
+                overflow: hidden;
+                display: inline-flex;
+                flex-direction: column;
+                justify-content: space-between;
+                position: relative;
+
+                &:hover {
+                    .item-action {
+                        display: flex !important;
+                    }
+                }
+
+                &-show {
+                    display: flex;
+                    overflow: hidden;
+                    align-items: center;
+                    justify-content: center;
+                    flex: 2;
+                    min-height: 50px;
+
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+                }
+
+                &-name {
+                    flex: 1;
+                    display: flex;
+                    max-height: 32px;
+
+                    &-title {
+                        padding: 0 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        color: @themeColor;
+                    }
+                }
+
+                &-action {
+                    background-color: @placeholderColor;
+                    display: none !important;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    left: 0px;
+                    bottom: 0px;
+                    align-items: center;
+                    justify-content: center;
+
+                    &-icon {
+                        width: 22px;
+                        height: 22px;
+                        line-height: 22px;
+                        color: #fff;
+                        margin-left: 2px;
+                    }
+                }
+            }
+        }
+
+        // 内部表格inline模式
+        &-inline {
+            height: 30px;
+            line-height: 30px;
+
+            &-list {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-wrap: nowrap;
+                overflow-x: auto;
+                overflow-y: hidden;
+                padding-left: 3px;
+
+                .item {
+                    flex: 0 0 48px;
+                    background: #f4f5fa;
+                    margin-right: 3px;
+                    position: relative;
+                    border-radius: @borderRadius;
+
+                    &:hover {
+                        .item-action {
+                            display: flex !important;
+                            animation: toTop 0.1s;
+                        }
+                    }
+
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                        margin: auto;
+                    }
+
+                    &-action {
+                        display: none !important;
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                        background-color: @placeholderColor;
+                        color: #fff;
+                        align-items: center;
+                        justify-content: center;
+                        i {
+                            margin: 0px;
+                        }
+                    }
+
+                    @keyframes toTop {
+                        from {
+                            top: 100%;
+                        }
+
+                        to {
+                            top: 0;
+                        }
+                    }
+                }
+            }
+
+            &-nodata {
+                padding-left: 7px;
+                color: @placeholderColor;
+            }
+        }
+    }
+</style>

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

@@ -376,3 +376,54 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshCascader {
+        width: 100%;
+
+        &-edit {
+
+            // 多选
+            &-multiple {
+                width: 100%;
+
+                &-edit {}
+            }
+
+            // 单选 -新模式
+            &-custom {
+                width: 100%;
+            }
+
+            // 单选 -默认模式
+            &-single {
+                width: 100%;
+            }
+        }
+
+        // 查看
+        &-show {
+            &-multiple {}
+
+            &-single {}
+        }
+
+        // 多选类型且独自一行时
+        &-row {
+            &-edit {}
+
+            &-show {
+                height: auto;
+
+                .text,
+                .overflow {
+                    width: 100%;
+                    height: 100%;
+                    white-space: normal;
+                    overflow: auto;
+                    .bri-scrollbar3();
+                }
+            }
+        }
+    }
+</style>

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

@@ -181,8 +181,8 @@
                 } else {
                     if (!this.propsObj._cascaderLevel || node.level == this.propsObj._cascaderLevel || !node.children.length) {
                         this.curSelect = node;
-                        this.getDescription(node.codeArr);
                     }
+                    this.getDescription(node.codeArr);
                 }
             },
             getDescription (nodeKeys) {
@@ -255,3 +255,65 @@
         }
     };
 </script>
+
+<style lang="less">
+    .InfoCascader {
+        height: 100%;
+
+        &-search {
+            padding: 24px 24px 0;
+            width: 100%;
+        }
+
+        &-content {
+            height: calc(100% - 142px);
+            margin: 5px 24px 24px;
+            display: flex;
+            border: 1px solid #E5E5E5;
+
+            &-left {
+                flex: 1;
+                padding: 5px 0 5px 10px;
+                overflow: auto;
+                border-right: 1px solid #E5E5E5;
+            }
+
+            &-right {
+                flex: 1;
+
+                &-title {
+                    border-bottom: 1px solid #E5E5E5;
+                    font-weight: 700;
+                    // height: 32px;
+                    // line-height: 32px;
+
+                    padding: 6px 16px;
+                }
+
+                &-content {
+                    height: calc(100% - 32px);
+                    overflow: auto;
+                    padding: 16px;
+                    white-space: pre-line;
+                }
+            }
+
+            .ivu-tree-title-selected {
+                color: #3D84EE;
+                background-color: #eee;
+            }
+
+            .ivu-tree-empty {
+                text-align: center;
+            }
+        }
+
+        &-footer {
+            &-btns {
+                display: flex;
+                justify-content: flex-end;
+                padding-right: 16px;
+            }
+        }
+    }
+</style>

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

@@ -10,8 +10,7 @@
             <bri-control-input
                 v-if="canEdit"
                 :class="{
-                    ...commonClass,
-                    'DshCoordinates-edit': true
+                    ...commonClass
                 }"
                 :canEdit="finalCanEdit"
                 :value="curVal"
@@ -25,8 +24,7 @@
             <div
                 v-else
                 :class="{
-                    ...commonClass,
-                    'DshCoordinates-show': true
+                    ...commonClass
                 }"
             >
                 {{ showVal }}
@@ -487,3 +485,65 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshCoordinates {
+        width: 100%;
+
+        &-modal {
+            &-header {
+                padding: 5px 0px;
+
+                .header {
+                    &-edit {
+                        &-message {
+                            position: absolute;
+                            color: red;
+                            font-size: 12px;
+                            bottom: -16px;
+                            left: 0px;
+                        }
+
+                        &-text {
+                            font-size: @textSize;
+                            line-height: 18px;
+                        }
+
+                        &-row {
+                            margin-top: 5px;
+                        }
+                    }
+
+                    &-show {
+                        &-text {
+                            text-align: right;
+                            .dsh-padding-top10();
+                        }
+                    }
+                }
+            }
+
+            &-map {
+                width: 100%;
+                height: 100%;
+            }
+
+            &-lnglat {
+                padding: 5px 10px;
+                background:#fff;
+                display: none;
+                position:absolute;
+            }
+
+            .ivu-modal-content {
+                overflow: hidden;
+                height: 100%;
+
+                .ivu-modal-body {
+                    padding: 0px;
+                    height: 100%;
+                }
+            }
+        }
+    }
+</style>

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

@@ -135,7 +135,7 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshDate {
         width: 100%;