bri-components 1.0.0

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

@@ -0,0 +1,446 @@
+.ZUpload {
+    width: 100%;
+    height: 100%;
+    background: #FFF;
+    position: relative;
+    overflow: hidden;
+
+    // 外围
+    &-old {
+        overflow: hidden;
+        display: flex;
+
+        &-wrapper {
+            min-width: 80px;
+            height: 100%;
+            margin: 8px 0px 8px 8px;
+            border: none;
+            border-radius: 0px;
+
+            &:hover {
+                border: none
+            }
+        }
+
+        &-imageadd {
+            width: 80px;
+            height: 80px;
+            border-radius: 0px;
+            background: transparent!important;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            border: 1px @shenpi-themeColor dashed;
+            color:@shenpi-themeColor;
+
+            i {
+                color: @iconDefaultGreyColor;
+                font-size: 14px;
+
+                &.bico-tianjia1{
+                    color: @shenpi-themeColor;
+                    margin-right: 8px;
+                }
+            }
+        }
+
+        &-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 50px !important;
+            height: 50px !important;
+            margin-top: -25px;
+            margin-left: -25px;
+            border-radius: 50%;
+            background-color: #f4f5fa;
+
+            i {
+                color: #5cb85c;
+                font-size: 40px;
+            }
+        }
+    }
+
+    &-new,
+    &-inline {
+        display: flex;
+
+        &-wrapper {
+            min-width: 50px;
+            background-color: @uploadBackgroundColor;
+            height: 30px;
+            line-height: 30px;
+            border: none;
+
+            &:hover {
+                border: none
+            }
+        }
+
+        &-imageadd {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            white-space: nowrap;
+            font-size: 14px;
+            padding: 0 3px;
+            height: 30px;
+            position: relative;
+
+            i {
+                color: @iconDefaultGreyColor;
+            }
+        }
+
+        &-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: #5cb85c;
+                font-size: 24px;
+            }
+        }
+    }
+
+    // 列表样式
+    .uploadList {
+        width: 100%;
+        overflow: auto;
+
+        // 普通文件
+        &-old {
+            margin: 8px 8px 8px;
+        }
+
+        &-nodata {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 80px;
+            color: #929292;
+            white-space: nowrap;
+
+            span {
+                margin-left: 5px;
+            }
+        }
+
+        &-list {
+            display: flex;
+            flex-wrap: nowrap;
+        }
+
+        &-listItem {
+            flex: 0 0 80px;
+            height: 80px;
+            margin-right: 10px;
+            background: #f4f5fa;
+            text-align: center;
+            overflow: hidden;
+            display: inline-flex;
+            flex-direction: column;
+            justify-content: space-between;
+            position: relative;
+
+            &:hover {
+                .uploadList-listItem-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 {
+                display: none !important;
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                left: 0px;
+                bottom: 0px;
+                background-color: rgba(0, 0, 0, 0.5);
+                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: auto;
+                padding-left: 3px;
+            }
+
+            &-listItem {
+                flex: 0 0 50px;
+                background: #f4f5fa;
+                margin-right: 3px;
+                position: relative;
+
+                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: rgba(0, 0, 0, 0.4);
+                    color: #fff;
+                    align-items: center;
+
+                    i {
+                        margin: 0px;
+                    }
+                }
+
+                &:hover {
+                    .uploadList-inline-listItem-action {
+                        display: flex !important;
+                        animation: toTop 0.1s;
+                    }
+                }
+
+                @keyframes toTop {
+                    from {
+                        top: 100%;
+                    }
+
+                    to {
+                        top: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// dropdownItem
+.uploadList-new-listItem {
+    width: 150px;
+    height: 37px;
+    display: inline-flex;
+    justify-content: space-between;
+
+    &-show {
+        flex: 0 0 34px;
+        margin-right: 10px;
+        background: #e9edf1;
+        border-radius: 0px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
+    &-right {
+        height: 100%;
+        flex: 1;
+        overflow: hidden;
+        text-align: right;
+    }
+
+    &-name {
+        &-title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: @themeColor;
+            line-height: 14px;
+        }
+    }
+
+    &-action {
+        display: block !important;
+
+        &-icon {
+            color: #9a9a9a;
+        }
+    }
+}
+
+.YUploadImage {
+    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;
+            }
+        }
+    }
+}
+
+// 不同模式下的样式
+.ZUpload.control {
+    &-default {
+        &-edit {
+            border: 1px solid @formBorderColor;
+            border-radius: 0px;
+        }
+
+        &-readonly {
+            border: 1px solid @readonlyBorderColor;
+            border-radius: 0px;
+        }
+
+        &-disabled {
+            border: 1px solid @readonlyBorderColor;
+            border-radius: 0px;
+        }
+
+    }
+
+    &-rimless {
+        &-edit {
+            border: 1px solid @formBorderColor;
+            border-radius: 0px;
+        }
+
+        &-readonly {
+            padding: 5px 0;
+
+            .uploadList-old {
+                margin: 0;
+            }
+        }
+
+        &-disabled {
+            padding: 5px 0;
+
+            .uploadList-old {
+                margin: 0;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,159 @@
+.DshAdvSearchForm {
+
+    #title {
+        font-weight: 400;
+        color: #999999;
+        font-size: 14px;
+    }
+
+    &-title {
+        #title();
+    }
+
+    &-logic {
+        margin: 5px 0px 10px;
+        .dsh-flex-row-start-center();
+
+        &-title {
+            #title();
+        }
+        &-option {
+            flex: 1;
+            min-width: 100px;
+            margin-left: 20px;
+        }
+    }
+
+    &-conditions {
+        &-delete {
+            display: none;
+            padding: 3px;
+            position: absolute;
+            top: 6px;
+            right: 2px;
+            color: red;
+        }
+
+        &-loop,
+        &-item {
+            position: relative;
+
+            &:hover,
+            &-active {
+                .DshAdvSearchForm-conditions-delete {
+                    display: inline-block;
+                }
+            }
+        }
+
+        &-loop {
+            padding: 10px;
+            margin: 6px;
+            border: 1px solid @greyColor;
+            background-color: @ghostBg;
+        }
+
+        &-item {
+            padding: 0!important;
+            margin-bottom: 10px!important;
+            cursor: pointer;
+
+            .DshFormItem-label-right {
+                flex: 6;
+            }
+
+            &-loading {
+                margin: 5px 0px;
+                text-align: center;
+                font-size: 16px;
+                color: @subColor;
+            }
+
+            &-control {
+                .dsh-margin-bottom5();
+            }
+
+            &-blank {
+                text-align: center;
+                line-height: 30px;
+                color: @subColor;
+            }
+
+            &-extra {
+                text-align: right;
+                padding-right: 10px;
+
+                .extra {
+                    &-dynamic {
+                        width: 90px;
+                        display: inline-block;
+                    }
+                    
+                    &-operator {
+                        .dsh-margin-right10();
+
+                        &-wrap {
+                            display: inline-block;
+                            padding: 5px;
+                            &:hover {
+                                background-color: @hoverBg;
+                            }
+                        }
+
+                        &-name {
+                            display: inline-block;
+                            min-width: 36px;
+                        }
+
+                        &-icon {
+                            .dsh-margin-left5();
+                        }
+                    }
+                }
+            }
+
+            &.DshFormItem-labels{
+                overflow: initial;
+                .DshLabels {
+                    width: 100%;
+                    padding: 0;
+                }
+
+            }
+        }
+    }
+
+    &-btns {
+        width: 100%;
+        margin-top: 15px;
+        .dsh-flex-row-start-center();
+
+        &-field {
+            flex: 3;
+
+            &-list {
+                width: 330px;
+            }
+
+            &-create {
+                #btn-style();
+            }
+        }
+
+        &-loop {
+            flex: 1;
+            margin-left: 12px;
+
+            &-create {
+                #btn-style();
+            }
+        }
+    }
+
+    &-nodata {
+        margin: 20px 0px;
+        text-align: center;
+        font-size: 16px;
+        color: @subColor;
+    }
+}

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

@@ -0,0 +1,71 @@
+.DshDefaultSearch {
+    position: relative;
+
+    // .ivu-input {
+    //     border-radius: 0;
+    // }
+
+    // .DshLabels-show {
+    //     border-radius: 0;
+    // }
+
+    &-item {
+        padding: 0 !important;
+        padding-bottom: 6px !important;
+        padding-top: 6px !important;
+        margin-top: 0px !important;
+        margin-bottom: 0px !important;
+
+        &-name {}
+
+        &.DshFormItem-labels {
+            .DshLabels {
+                position: static;
+                width: 100%;
+                padding: 0;
+
+                &-searchResult {
+                    position: fixed;
+                }
+            }
+        }
+    }
+
+    &-form {
+        position: relative;
+        z-index: 2;
+    }
+
+    //展开图标
+    &-fold {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        bottom: -20px;
+        left: 0px;
+
+        &-zhanwei {
+            width: 100%;
+            height: 15px;
+            background: #fff;
+            position: relative;
+            z-index: 1;
+        }
+
+        &-icon {
+            width: 48px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            background: #fff;
+            box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.1);
+            font-size: 14px;
+            color: #999999;
+            cursor: pointer;
+
+            &.arrow-up {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

package/src/styles/components/index.less

@@ -0,0 +1,49 @@
+// controls
+@import "./controls/DshCheckbox.less";
+@import "./controls/DshCoordinates.less";
+@import "./controls/DshDaterange.less";
+@import "./controls/DshDivider.less";
+@import "./controls/DshInput.less";
+@import "./controls/DshNumberange.less";
+@import "./controls/DshSelect.less";
+@import "./controls/ZUpload.less";
+@import "./controls/DshCascader.less";
+@import "./controls/DshEditor.less";
+@import "./controls/MultipleInput.less";
+@import "./controls/DshLabels.less";
+@import "./controls/DshPackage.less";
+
+// form
+@import "./form/DshAdvSearchForm.less";
+@import "./form/DshDefaultSearch.less";
+
+// list
+@import "./list/evTable.less";
+@import "./list/DshCascaderTable.less";
+@import "./list/DshFlatTable.less";
+@import "./list/DshSingleData.less";
+@import "./list/DshCrossTable.less";
+@import "./list/ivu_reset.less";
+
+// other
+@import "./other/DshEditPanel.less";
+@import "./other/DshMenu.less";
+@import "./other/DshMenuNav.less";
+@import "./other/ZCode.less";
+@import "./other/ZCollapseTree.less";
+@import "./other/ZGantt.less";
+@import "./other/InfoCascader.less";
+@import "./other/ZLoading.less";
+
+// small
+@import "./small/DshButtons.less";
+@import "./small/Ctooltip.less";
+@import "./small/DshDropdown.less";
+@import "./small/DshPage.less";
+@import "./small/DshTabs.less";
+@import "./small/DshTitle.less";
+@import "./small/DshSteps.less";
+@import "./small/DshControlDefine.less";
+
+// unit
+@import "./unit/DshFormItem.less";