bri-components 1.4.42 → 1.4.44

package/src/components/list/DshPage.vue

@@ -97,3 +97,98 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshPage {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        text-align: right;
+        font-size: 14px;
+
+        .ivu-page-total {
+            float: left;
+        }
+        .ivu-select-selection {
+            border: 0px!important;
+        }
+        .ivu-page-item-active {
+            a,
+            &:hover a {
+                color: @themeColor!important;
+            }
+        }
+        .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
+        .ivu-select-single .ivu-select-selection,
+        .ivu-page-simple-pager input,
+        .ivu-page-options-elevator input,
+        .ivu-page-item-jump-next,
+        .ivu-page-item-jump-prev,
+        .ivu-page-next,
+        .ivu-page-prev,
+        .ivu-page-total,
+        .ivu-page-item {
+            height: 24px!important;
+            line-height: 24px!important;
+            background: transparent;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
+            height: 24px!important;
+            line-height: 24px!important;
+        }
+        .ivu-page-next,
+        .ivu-page-prev {
+            background: @white;
+            min-width: 26px;
+            border: 1px solid #d9d9d9;
+            a {
+                color: #000;
+                font-weight: bold;
+            }
+        }
+        .ivu-page-item {
+            min-width: 24px;
+            &:hover {
+                color: @themeColor;
+            }
+        }
+        .ivu-page-options {
+            margin-left: 4px;
+        }
+        .ivu-select-visible .ivu-select-selection{
+            box-shadow: unset;
+        }
+        .ivu-select-item-selected,
+        .ivu-select-item-selected:hover {
+            color: @themeColor;
+        }
+        .ivu-icon {
+            vertical-align: baseline;
+        }
+
+        &-small,
+        &-simple.ivu-page-simple{
+            a {
+                &:hover {
+                    color: @themeColor !important;
+                }
+            }
+            .ivu-page-next,
+            .ivu-page-prev {
+            background: transparent;
+            border-color: transparent;
+                &:hover {
+                    border-color: transparent;
+                }
+        }
+        }
+
+        &-small {
+            .ivu-icon {
+            vertical-align: -.125em;
+        }
+        }
+    }
+</style>

package/src/components/list/mixins/tableBaseMixin.js

@@ -1,7 +1,6 @@
 import DshListUnit from "../../unit/DshListUnit.vue";
 import importModal from "../common/importModal.vue";
 import quoteListModal from "../common/quoteListModal.vue";
-import { mapGetters } from "vuex";
 
 export default {
     mixins: [],
@@ -195,13 +194,11 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["appObj"]),
         appObj () {
             return this.$store.getters.appObj || {};
         },
         appColor () {
-            const themeColorMap = this.$appData.themeColors || {};
-            return (themeColorMap[this.appObj.colorType] || { color: "#3DB8C5" }).color;
+            return ((this.$appData.themeColors || {})[this.appObj.colorType] || {}).color || "#3DB8C5";
         },
 
         dshRender () {

package/src/components/other/BriAvatar.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="BriAvatar">
         <!-- 无显示 -->
-        <template v-if="users.length == 0">
-
-        </template>
+        <template v-if="users.length == 0"></template>
 
         <!-- 图片堆叠显示 -->
         <div
@@ -35,7 +33,7 @@
                         <img :src="user && user.avatarurl || avatarSrc">
                     </div>
                     <span>
-                        {{user && user.realname || user && user.name || ""}}
+                        {{ user ? user.realname || user.name : "" }}
                     </span>
                 </div>
             </div>
@@ -77,6 +75,14 @@
                 return this.users.slice(0, 4);
             }
         },
+        watch: {
+            rowData: {
+                handler (newVal, oldVal) {
+                    this.init();
+                },
+                immediate: true
+            }
+        },
         created () {
             this.init();
         },
@@ -88,14 +94,73 @@
                         ? this.rowData[this.field]
                         : []);
             }
-        },
-        watch: {
-            rowData: {
-                handler (newVal, oldVal) {
-                    this.init();
-                },
-                immediate: true
-            }
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .BriAvatar {
+        position: relative;
+
+        span {
+            display: inline-block;
+            margin-left: 20px;
+            line-height: 22px;
+        }
+
+        &-img {
+            width: 22px;
+            height: 22px;
+            padding: 1px;
+            display: inline-block;
+            line-height: 20px;
+            background: #fff;
+            border-radius: 50%;
+            img {
+                width: 20px;
+                height: 20px;
+                display: inline-block;
+                border-radius: 50%;
+            }
+            &:nth-child(1) {
+                position: absolute;
+                left: 0px;
+                top: 50%;
+                margin-top: -10px;
+            }
+            &:nth-child(2) {
+                position: absolute;
+                left: 12px;
+                top: 50%;
+                margin-top: -10px;
+            }
+            &:nth-child(3) {
+                position: absolute;
+                left: 24px;
+                top: 50%;
+                margin-top: -10px;
+            }
+            &:nth-child(4) {
+                position: absolute;
+                left: 36px;
+                top: 50%;
+                margin-top: -10px;
+            }
+        }
+
+        &-round {
+            display: inline-block;
+            margin-right: 8px;
+        }
+
+        &-box {
+            position: relative;
+            img {
+                width: 20px;
+                height: 20px;
+                display: inline-block;
+                border-radius: 50%;
+            }
+        }
+    }
+</style>

package/src/components/other/BriCode.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="BriCode">
+    <div class="BriCode">
         <codemirror
             style="height:100%"
             v-model="computedVal"
@@ -8,7 +8,7 @@
             @input="input"
             @changes="changes"
         ></codemirror>
-   </div>
+    </div>
 </template>
 
 <script>
@@ -116,3 +116,10 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .BriCode {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/src/components/other/BriCollapseTree.vue

@@ -77,9 +77,7 @@
                     </div>
                 </div>
             </li>
-
         </ul>
-
     </div>
 </template>
 
@@ -110,3 +108,98 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .BriCollapseTree {
+        &-listItem {
+            display: flex;
+            justify-content: space-between;
+            padding: 6px 12px;
+            line-height: 20px;
+            cursor: pointer;
+
+            &-text {
+                word-break: break-word;
+                flex: 1;
+                min-width: 120px;
+            }
+
+            &-grey {
+                text-align: right;
+                color: @textColor;
+                margin-left: 0px;
+            }
+
+            &-rightText {
+                min-width: 50px;
+                .dsh-ellipsis2();
+                -webkit-line-clamp: 3;
+                word-break: break-word;
+                color: @contentColor;
+            }
+
+            &:hover {
+                background: @bgColor;
+            }
+
+            &-current {
+                font-weight: normal;
+                color: @themeColor;
+            }
+
+            &-disabled {
+                cursor: not-allowed;
+            }
+        }
+
+        &-collapseItem {
+            padding: 4px 0px;
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+            cursor: pointer;
+
+            &:hover {
+                background: @bgColor;
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .BriCollapseTree {
+        &-collapse {
+            border: none;
+
+            .ivu-collapse-item>.ivu-collapse-header {
+                padding: 0px;
+                height: auto;
+                min-height: 32px;
+                line-height: 18px;
+                display: flex;
+                align-items: center;
+
+                i {
+                    margin-right: 0px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 30px;
+                    height: 30px;
+                }
+
+                &:hover {
+                    background: @bgColor;
+                }
+            }
+
+            .ivu-collapse-content {
+                padding: 0px;
+            }
+
+            .ivu-collapse-content>.ivu-collapse-content-box {
+                padding: 0px;
+                padding-left: 18px;
+            }
+        }
+    }
+</style>

package/src/components/other/BriGantt.vue

@@ -663,6 +663,9 @@
             // 宽度调整
             window.onresize = this.refreshWidth;
         },
+        destroyed () {
+            window.onresize = null;
+        },
         methods: {
             init () {
                 // 赋初值
@@ -782,12 +785,322 @@
             clickRow (col) {
                 this.canClick && this.$emit("clickRow", col.task, col);
             }
-        },
-        filters: {
-
-        },
-        destroyed () {
-            window.onresize = null;
         }
     };
 </script>
+
+<style lang="less">
+    .briGantt {
+        width: 100%;
+        height: 100%;
+        color: #656565;
+        font-size: @smallSize;
+        line-height: 28px;
+        position: relative;
+        display: flex;
+        overflow: auto;
+        flex-direction: column;
+
+        &-top {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            justify-content: space-between;
+            position: absolute;
+        }
+
+        &-bottom {
+            width: 100%;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            margin-top: 38px;
+            background: @white;
+
+            &-title {
+                text-align: center;
+                border: 1px solid #EDEDED;
+                border-bottom: none;
+                line-height: 27px;
+                // margin: 10px 14px 0 14px;
+            }
+
+            &-content {
+                flex: 1;
+                display: flex;
+                overflow: auto;
+            }
+        }
+
+        // 表格渲染
+        &-tableBox {
+            width: 100%;
+            text-align: center;
+            border-collapse: collapse;
+            border-spacing: 0;
+
+            td,
+            th {
+                word-break: break-all;
+                word-wrap: break-word;
+                min-width: 50px;
+                height: 29px;
+                text-align: center;
+                // overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                max-width: 200px;
+            }
+
+            .briGantt-chart-td {
+                height: 40px;
+            }
+
+            .briGantt-table-th-now {
+                color: @themeColor;
+            }
+        }
+
+        &-table {
+            &-tr {
+                border: 1px solid #EDEDED;
+            }
+
+            &-tr:nth-child(2n) {
+                background: rgba(244, 246, 249, 0.5119);
+            }
+
+            &-th {
+                background: #F4F8FF;
+                font-weight: 400;
+                color: rgba(101, 101, 101, 1);
+            }
+
+            &-td {
+                border-right: 1px solid #EDEDED;
+                font-weight: 400;
+                color: rgba(111, 111, 111, 1);
+
+                &-main {
+                    height: 28px;
+                    background: rgba(238, 238, 238, 0.5);
+                    border: 1px solid #f6f6f6;
+                }
+            }
+
+            &-td:last-of-type {
+                border: none;
+            }
+        }
+
+        &-chart {
+            &-td {
+                overflow: visible;
+
+                &-greyLine {
+                    border-top: 1px dashed #D5D5D5;
+                }
+
+                &-main {
+                    display: flex;
+                    width: 100%;
+                    height: 100%;
+                    align-items: center;
+                    justify-content: center;
+
+                    &-left,
+                    &-right {
+                        height: 100%;
+                        overflow: hidden;
+                    }
+
+                    &-right-auto {
+                        height: 100%;
+                        overflow: hidden;
+                        flex: 1;
+                    }
+
+                    &-center {
+                        height: 30px;
+                        border-radius: 4px;
+                        background: #f6f6f6;
+                        z-index: 1;
+                        min-width: 2px;
+
+                        .ms-ellipsis {
+                            border-radius: 4px;
+                            height: 100%;
+                            color: @white;
+                            text-align: left;
+                            padding-left: 10px;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                        }
+
+                        &-tooltip {
+                            white-space: normal;
+
+                            &-select {
+                                height: 5px;
+                                display: inline-block;
+                                vertical-align: middle;
+                                width: 5px;
+                                border-radius: 50%;
+                            }
+                        }
+                    }
+
+                    &-line {
+                        width: 100%;
+                        border-bottom: 1px solid #D5D5D5;
+                        font-weight: 400;
+                        color: rgba(74, 74, 74, 1);
+                        padding: 0 10px;
+                        transform: translateY(15px);
+                        text-align: left;
+                        height: 29px;
+                        font-size: @smallSize;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+
+                        &-circle {
+                            display: block;
+                            width: 10px;
+                            height: 100%;
+                            min-width: 10px;
+
+                            .circle {
+                                display: block;
+                                width: 10px;
+                                height: 10px;
+                                border-radius: 50%;
+                                min-width: 10px;
+                                margin-top: 38px;
+                                background: #D5D5D5;
+                            }
+                        }
+                    }
+
+                    ;
+                }
+            }
+        }
+
+        // 蓝色虚线
+        &-line-now {
+            z-index: 9;
+            text-align: center;
+            background: transparent;
+
+            &::before {
+                content: "";
+                border-left: 1px dashed @themeColor;
+                position: absolute;
+                top: 25px;
+                bottom: 0px;
+                z-index: 9;
+            }
+
+            &::after {
+                content: "";
+                width: 6px;
+                height: 6px;
+                border-radius: 6px;
+                background: @themeColor;
+                position: absolute;
+                top: 25px;
+                margin-left: -3px;
+            }
+        }
+
+        // 时间轴
+        &-timer {
+            align-items: center;
+            position: relative;
+            float: right;
+            overflow: hidden;
+
+            &-main {
+                overflow: auto;
+                flex: 1;
+                height: 100%;
+                position: relative;
+            }
+
+            &-bg {
+                position: absolute;
+                background: #F4F8FF;
+                left: 0px;
+                right: 0px;
+                height: 28px;
+                border-radius: 28px;
+            }
+
+            &-icon {
+                background: #F4F8FF;
+                color: #fff;
+                width: 28px;
+                height: 28px;
+                min-width: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                z-index: 2;
+                top: 0px;
+                background: #F2F8FF;
+
+                &:hover {
+                    color: #fff;
+                }
+
+                i {
+                    display: block;
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 16px;
+                    font-size: 13px;
+                    background: @themeColor;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &-left {
+                    left: -1px;
+                    border-top-left-radius: 28px;
+                    border-bottom-left-radius: 28px;
+                }
+
+                &-right {
+                    right: -1px;
+                    border-top-right-radius: 28px;
+                    border-bottom-right-radius: 28px;
+                }
+            }
+        }
+
+        // 区域映射
+        &-data {
+            flex: 1;
+            overflow: auto;
+            position: relative;
+
+            &-table {}
+
+            &-chart {}
+
+            &::-webkit-scrollbar {
+                height: 0px;
+            }
+        }
+
+        // table 列表映射
+        &-tabledata {
+            overflow-y: auto;
+            border-right: none;
+        }
+    }
+</style>