bri-components 1.2.51 → 1.2.53

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

@@ -1,43 +1,42 @@
 <template>
-    <div class="DshDivider">
-        <!-- <div class="DshDivider-divider-cli">
+    <div
+        class="DshDivider"
+        :style="propsObj._tagKind === 'flag' ? { marginRight:'36px' } : {}"
+    >
+        <!-- <div class="DshDivider-cli">
             <p>{{ propsObj._name }}</p>
         </div> -->
+
+        <div
+            v-if="propsObj._tagKind === 'flag'"
+            class="DshDivider-flag"
+        >
+            <Icon
+                size="15"
+                style="margin-top: -1px"
+                :custom="'bico-font ' + propsObj._tagIcon"
+            />
+            <p>{{ propsObj._name }}</p>
+            <span class="triangle-topleft"></span>
+            <span class="triangle-topright"></span>
+        </div>
+
         <div
-            class="DshDivider-divider"
-            :style="propsObj._tagKind === 'flag' ? { marginRight:'36px' } : {}"
+            v-else-if="propsObj._tagKind === 'line'"
+            class="DshDivider-line"
         >
-            <div
-                v-if="propsObj._tagKind === 'flag'"
-                class="DshDivider-divider-flag"
-            >
-                <Icon
-                    size="15"
-                    style="margin-top: -1px"
-                    :custom="'bico-font ' + propsObj._tagIcon"
-                />
-                <p>{{ propsObj._name }}</p>
-                <span class="triangle-topleft"></span>
-                <span class="triangle-topright"></span>
-            </div>
-
-            <div
-                v-else-if="propsObj._tagKind === 'line'"
-                class="DshDivider-divider-line"
-            >
-                <p>{{ propsObj._name }}</p>
-                <span></span>
-            </div>
-
-            <div
-                v-else-if="propsObj._tagKind === 'circle'"
-                class="DshDivider-divider-circle"
-            >
-                <span class="DshDivider-divider-circle-icon">
-                    <Icon :custom="'bico-font ' + propsObj._tagIcon" />
-                </span>
-                <p>{{ propsObj._name }}</p>
-            </div>
+            <p>{{ propsObj._name }}</p>
+            <span></span>
+        </div>
+
+        <div
+            v-else-if="propsObj._tagKind === 'circle'"
+            class="DshDivider-circle"
+        >
+            <span class="DshDivider-circle-icon">
+                <Icon :custom="'bico-font ' + propsObj._tagIcon" />
+            </span>
+            <p>{{ propsObj._name }}</p>
         </div>
     </div>
 </template>
@@ -47,7 +46,9 @@
 
     export default {
         name: "DshDivider",
-        mixins: [controlMixin],
+        mixins: [
+            controlMixin
+        ],
         props: {},
         data () {
             return {};
@@ -57,3 +58,129 @@
         methods: {}
     };
 </script>
+
+<style lang="less">
+    .DshDivider {
+        margin-right: 20px;
+        font-family: SourceHanSansCN-Medium,SourceHanSansCN;
+        font-weight: 500;
+        font-size: 14px;
+
+        p {
+            margin-left: 10px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        // &-cli {
+        //     margin-right: 20px;
+        //     line-height: 32px;
+        //     font-family:SourceHanSansCN-Medium,SourceHanSansCN;
+        //     font-weight:700;
+        //     font-size:16px;
+        //     color: #333333;
+
+        //     p {
+        //         overflow: hidden;
+        //         white-space: nowrap;
+        //         text-overflow: ellipsis;
+        //     }
+        // }
+
+        &-flag {
+            min-width: 130px;
+            max-width: 100%;
+            height: 38px;
+            margin-bottom: 4px;
+            background: linear-gradient(57deg, #3DB8C5 0%, #85CBED 100%);
+            line-height:38px;
+            display: inline-flex;
+            align-items: center;
+            padding: 0 10px;
+            color:rgba(255,255,255,1);
+            position: relative;
+
+            .triangle-topleft {
+                /* 左上三角 */
+                position: absolute;
+                top: 38px;
+                left: 0;
+                width: 0;
+                height: 0;
+                border-right: 14px solid transparent;
+                border-top: 4px solid #457FBB;
+            }
+
+            .triangle-topright {
+                /* 右上三角 */
+                position: absolute;
+                top: 0px;
+                right: -25px;
+                width: 0;
+                height: 0;
+                border-right: 25px solid transparent;
+                border-bottom: 38px solid #82c7ed;
+            }
+        }
+
+        &-circle {
+            min-width: 142px;
+            max-width: 100%;
+            height: 32px;
+            background-repeat: no-repeat;
+            background-position: center left;
+            display: inline-flex;
+            align-items: center;
+            line-height: 32px;
+            color:rgba(255,255,255,1);
+            background:linear-gradient(270deg,rgba(166,215,250,1) 0%,rgba(109,174,242,1) 47%,rgba(109,174,242,1) 100%);
+            border-radius:16px;
+            padding: 0 20px;
+
+            &-icon {
+                display: block;
+                font-size: 18px;
+                border: 4px solid #fff;
+                height: 40px;
+                min-width: 40px;
+                border-radius: 20px;
+                line-height: 28px;
+                text-align: center;
+            }
+        }
+
+        &-line {
+            color: @themeColor;
+            min-width:130px;
+            height: 32px;
+            max-width: 100%;
+            display: inline-block;
+            flex-direction:column;
+
+            p {
+                height: 32px;
+                line-height: 32px;
+                font-size:14px;
+            }
+
+            span {
+                display: block;
+                width: 100%;
+                background:linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
+                height: 1px;
+                position: relative;
+                &::before {
+                    content: "";
+                    width: 5px;
+                    height: 5px;
+                    position: absolute;
+                    border-radius: 5px;
+                    background: #6DAEF2;
+                    left: 0px;
+                    top: -2px;
+                }
+            }
+        }
+    }
+</style>

package/src/components/controls/base/DshInput/BriInputs.vue

@@ -3,8 +3,8 @@
         <Input
             v-show="status === 'edit'"
             v-model="curInputVal"
-            icon="ios-search"
             :placeholder="selfPropsObj._placeholder"
+            icon="ios-search"
             @on-enter="clickConfirm"
             @on-click="clickConfirm"
         ></Input>
@@ -106,3 +106,61 @@
         }
     };
 </script>
+
+<style lang="less">
+    .BriInputs {
+        width: 100%;
+
+        i {
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        &-show {
+            display: flex;
+            align-items: center;
+            border: 1px solid #e5e5e5;
+            border-radius: 4px;
+            color: #515a6e;
+            padding-left: 5px;
+            height: 34px;
+
+            &-content {
+                display: flex;
+                width: calc(100% - 30px);
+                overflow: hidden;
+
+                &-item {
+                    display: flex;
+                    margin: 2px 4px 2px 0;
+                    padding-left: 8px;
+                    border: 1px solid #e8eaec;
+                    border-radius: 3px;
+                    background: #f7f7f7;
+                    font-size: 14px;
+                    max-width: 50%;
+                    cursor: pointer;
+
+                    &-content {
+                        vertical-align: middle;
+                        display: inline-block;
+                        width: calc(100% - 20px);
+                        .dsh-ellipsis();
+                    }
+
+                    &-del {
+                        display: inline-block;
+                        width: 20px;
+                        vertical-align: middle;
+                    }
+                }
+            }
+
+            &-add {
+                flex: 1;
+                height: 34px;
+                line-height: 34px;
+            }
+        }
+    }
+</style>

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

@@ -180,3 +180,19 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshInput {
+        width: 100%;
+
+        &-show {
+            &-textarea {
+                display: inline-block;
+                width: 100%;
+                height: auto;
+                white-space: pre-wrap;
+                min-height: 32px;
+            }
+        }
+    }
+</style>

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

@@ -163,4 +163,4 @@
             }
         }
     }
-</style>
+</style>

package/src/components/controls/controlMap.js

@@ -44,6 +44,9 @@ const componentNameMap = {
     back: "DshBack",
     undefined: "DshUndeveloped",
 
+    themeColor: "themeColor",
+    themeIcon: "themeIcon",
+
     ...controlConfig.componentNameMap
 };
 
@@ -60,17 +63,23 @@ const pathMap = {
         BriUpload: "./base/BriUpload/BriUpload.vue",
         DshCoordinates: "./base/DshCoordinates.vue",
         DshEditor: "./base/DshEditor.vue",
-        DshDivider: "./base/DshDivider.vue",
-
+        DshDivider: "./base/DshDivider.vue"
+    },
+    senior: {
         selectUsers: "./senior/selectUsers/selectUsers.vue",
         selectDepartments: "./senior/selectDepartments.vue",
         BriLabels: "./senior/BriLabels.vue",
         DshPackage: "./senior/DshPackage.vue",
         flatTable: "./senior/flatTable.vue",
-        cascaderTable: "./senior/cascaderTable",
-
+        cascaderTable: "./senior/cascaderTable"
+    },
+    special: {
         DshBack: "./special/DshBack.vue",
         DshUndeveloped: "./special/DshUndeveloped.vue"
+    },
+    extra: {
+        themeColor: "./extra/themeColor.vue",
+        themeIcon: "./extra/themeIcon.vue"
     }
 };
 

package/src/components/controls/extra/themeColor.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="themeColor">
+        <div class="themeColor-colors">
+            <div
+                v-for="(colorItem, colorKey) in themeColorMap"
+                :key="colorKey"
+                class="item"
+                @click="curVal = colorKey"
+            >
+                <div
+                    class="item-content"
+                    :style="{
+                        backgroundColor: colorItem.color
+                    }"
+                ></div>
+                <Icon
+                    v-if="colorKey === curVal"
+                    class="item-icon"
+                    type="ios-checkmark-circle"
+                    size="16"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "themeColor",
+        mixins: [
+            controlMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _relateColorkey: "colorType",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            themeColorMap () {
+                return this.$appData.themeColors || {};
+            },
+
+            // 值为不是[]类型用的
+            curVal: {
+                get () {
+                    return this.value[this.controlKey];
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                    this.change();
+                }
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                if (!this.curVal) {
+                    this.curVal = Object.keys(this.themeColorMap)[0];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .themeColor {
+        width: 100%;
+
+        &-colors {
+            display: flex;
+
+            .item {
+                display: inlile-block;
+                width: 54px;
+                height: 54px;
+                margin-right: 7px;
+                cursor: pointer;
+                position: relative;
+
+                &-content {
+                    width: 38px;
+                    height: 38px;
+                    margin: 8px auto;
+                    border-radius: 50%;
+                }
+
+                &-icon {
+                    position: absolute;
+                    bottom: 7px;
+                    right: 7px;
+
+                    border-radius: 50%;
+                    background-color: rgba(255, 255, 255, 0.85);
+                    color: @themeColor;
+                }
+
+                &:last-of-type {
+                    margin-right: 0px;
+                }
+            }
+        }
+    }
+</style>

package/src/components/controls/extra/themeIcon.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="themeIcon">
+        <div class="themeIcon-icons">
+            <div
+                v-for="(iconItem, iconKey) in iconMap"
+                :key="iconKey"
+                :class="{
+                    'item': true,
+                    'item-active': iconKey === curVal
+                }"
+                :style="{
+                    'borderColor': iconKey === curVal ? bgColor : undefined
+                }"
+                @click="curVal = iconKey"
+            >
+                <div
+                    class="item-content"
+                    :style="{
+                        'backgroundColor': bgColor
+                    }"
+                >
+                    <Icon :custom="'bico-font ' + iconItem" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "themeIcon",
+        mixins: [
+            controlMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _relateColorkey: "colorType",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            iconMap () {
+                return this.$appData.themeIcons || {};
+            },
+            relateColorkey () {
+                return this.selfPropsObj._relateColorkey;
+            },
+            themeColorMap () {
+                return this.$appData.themeColors || {};
+            },
+            bgColor () {
+                return (this.themeColorMap[this.value[this.relateColorkey]] || {}).bgColor;
+            },
+
+            // 值为不是[]类型用的
+            curVal: {
+                get () {
+                    return this.value[this.controlKey];
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                    this.change();
+                }
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                if (!this.curVal) {
+                    this.curVal = Object.keys(this.iconMap)[0];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .themeIcon {
+        width: 100%;
+
+        &-icons {
+            display: flex;
+
+            .item {
+                min-width: 54px;
+                height: 54px;
+                margin-right: 7px;
+                border: 1px solid transparent;
+                border-radius: 8px;
+                cursor: pointer;
+
+                &-content {
+                    width: 38px;
+                    height: 38px;
+                    margin: 8px auto;
+                    border-radius: 38px;
+                    line-height: 38px;
+                    text-align: center;
+
+                    i {
+                        font-size: 20px;
+                        color: #ffffff;
+                    }
+                }
+
+                &:hover,
+                &-active {
+                    border-color: @themeColor;
+                }
+            }
+        }
+    }
+</style>

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

@@ -14,8 +14,7 @@
                 <!-- 可编辑 -->
                 <bri-control-input
                     :class="{
-                        ...commonClass,
-                        'BriLabels-edit': true
+                        ...commonClass
                     }"
                     :canEdit="finalCanEdit"
                     :value="curValList"
@@ -103,8 +102,7 @@
                 :transfer="true"
             >
                 <div :class="{
-                    ...commonClass,
-                    'BriLabels-show': true
+                    ...commonClass
                 }">
                     <dsh-tags
                         v-if="!$isEmptyData(curValList)"
@@ -255,3 +253,64 @@
         }
     };
 </script>
+
+<style lang="less">
+    .BriLabels {
+        width: 100%;
+
+        &-dropdown {
+            width: 100%;
+
+            &-menu {
+                .item {
+                    margin: 4px 8px;
+                    border-radius: @borderRadius;
+
+                    &-active {
+                        background-color: @theme-focus;
+                        color: @themeColor;
+                    }
+
+                    &-edit {
+
+                    }
+
+                    &-show {
+
+                    }
+                }
+
+                .btns {
+                    border-top: 1px solid #E7E7E7;
+                    margin: 12px 8px 0;
+                    padding-top: 8px;
+
+                    &-add {
+                        width: 100%;
+                        margin-bottom: 8px;
+                    }
+                }
+            }
+        }
+
+        .ivu-select-dropdown {
+            width: fit-content;
+        }
+
+        .ivu-input-suffix {
+            display: flex;
+            align-items: center;
+
+            i {
+                width: 24px;
+                height: 24px;
+                line-height: 24px;
+
+                &:hover {
+                    background-color: @btn-hover;
+                    border-radius: @borderRadius;
+                }
+            }
+        }
+    }
+</style>