bri-components 1.2.50 → 1.2.52

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

@@ -29,26 +29,19 @@
                 @on-change="changeVal($event, 0)"
                 @on-open-change="changeOpen($event, 0)"
             >
-                <div
-                    class="DshDaterange-item"
-                    @click="changeOpen(true, 0)"
-                >
-                    <span class="DshDaterange-item-name">
-                        {{ showVal0 }}
-                    </span>
-
-                    <span class="DshDaterange-item-icon">
-                        <Icon
-                            v-show="val0"
-                            type="ios-close-circle"
-                            @click.stop="clickClear('', 0)"
-                        />
-                        <Icon
-                            v-show="!val0"
-                            type="ios-calendar-outline"
-                        />
-                    </span>
-                </div>
+                <bri-control-input
+                    :class="{
+                        ...commonClass,
+                        'bri-control-nodata': this.$isEmptyData(this.showVal0),
+                        'DshDaterange-item': true
+                    }"
+                    :canEdit="finalCanEdit"
+                    :value="showVal0"
+                    inputIcon="ios-calendar-outline"
+                    :propsObj="selfPropsObj"
+                    @clear="clickClear('', 0)"
+                    @click.native="changeOpen(true, 0)"
+                ></bri-control-input>
             </DatePicker>
 
             <span class="DshDaterange-center"> — </span>
@@ -66,26 +59,19 @@
                 @on-change="changeVal($event, 1)"
                 @on-open-change="changeOpen($event, 1)"
             >
-                <div
-                    class="DshDaterange-item"
-                    @click="changeOpen(true, 1)"
-                >
-                    <span class="DshDaterange-item-name">
-                        {{ showVal1 }}
-                    </span>
-
-                    <span class="DshDaterange-item-icon">
-                        <Icon
-                            v-show="val1"
-                            type="ios-close-circle"
-                            @click.stop="clickClear('', 1)"
-                        />
-                        <Icon
-                            v-show="!val1"
-                            type="ios-calendar-outline"
-                        />
-                    </span>
-                </div>
+                <bri-control-input
+                    :class="{
+                        ...commonClass,
+                        'bri-control-nodata': this.$isEmptyData(this.showVal1),
+                        'DshDaterange-item': true
+                    }"
+                    :canEdit="finalCanEdit"
+                    :value="showVal1"
+                    inputIcon="ios-calendar-outline"
+                    :propsObj="selfPropsObj"
+                    @clear="clickClear('', 1)"
+                    @click.native="changeOpen(true, 1)"
+                ></bri-control-input>
             </DatePicker>
         </template>
     </div>
@@ -224,28 +210,13 @@
             };
         },
         computed: {
-            val0: {
-                get () {
-                    return this.getVal(0);
-                },
-                set (val) {
-                    this.setVal(val, 0);
-                }
-            },
-            val1: {
-                get () {
-                    return this.getVal(1);
-                },
-                set (val) {
-                    this.setVal(val, 1);
-                }
-            },
-
             selfPropsObj () {
                 return {
                     _useShortcuts: true,
+
                     ...this.propsObj,
                     ...this.commonDealPropsObj,
+
                     _type: "date"
                 };
             },
@@ -255,18 +226,34 @@
             useShortcuts () {
                 return this.selfPropsObj._useShortcuts;
             },
-
             options0 () {
                 return this.getOptions(0);
             },
             options1 () {
                 return this.getOptions(1);
             },
+
+            val0: {
+                get () {
+                    return this.getVal(0);
+                },
+                set (val) {
+                    this.setVal(val, 0);
+                }
+            },
+            val1: {
+                get () {
+                    return this.getVal(1);
+                },
+                set (val) {
+                    this.setVal(val, 1);
+                }
+            },
             showVal0 () {
-                return this.getShowVal(0);
+                return this.getShowVal(this.val0);
             },
             showVal1 () {
-                return this.getShowVal(1);
+                return this.getShowVal(this.val1);
             }
         },
         created () {},
@@ -328,9 +315,7 @@
                     }
                 };
             },
-            getShowVal (index) {
-                const val = this[`val${index}`];
-
+            getShowVal (val) {
                 return this.isDynDateKey(val)
                     ? (this.dynDate.find(dynItem => dynItem._key === val) || { name: `"${val}"dnDate不存在` }).name
                     : this.$transformDate(val, "-", this.subType);
@@ -342,56 +327,27 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshDaterange {
         width: 100%;
+        display: flex;
+        align-items: center;
 
         &-left,
         &-right {
-            width: 47%;
-            float: left;
-            background-color: #ffffff;
+            flex: 7;
+            min-width: 0px;
         }
 
         &-center {
-            width: 3%;
+            flex: 1;
+            min-width: 10px;
             text-align: center;
             color: @textColor;
-            overflow: hidden;
-            line-height: 30px;
-            float: left;
-            margin: 0 1.5%;
         }
 
         &-item {
-            height: 32px;
-            border: 1px solid @borderColor;
-            border-radius: 4px;
-            overflow: hidden;
-            position: relative;
 
-            &-name {
-                display: inline-block;
-                width: 100%;
-                height: 100%;
-                line-height: 30px;
-                overflow: hidden;
-                padding-right: 32px;
-                padding-left: 7px;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-
-            &-icon {
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                display: inline-block;
-                width: 32px;
-                height: 100%;
-                text-align: center;
-                line-height: 30px;
-            }
         }
     }
 </style>

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/DshEditor.vue

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

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

@@ -121,9 +121,7 @@
                     },
 
                     ...this.propsObj,
-                    ...this.commonDealPropsObj,
-
-                    _disabled: this.propsObj._disabled || ["serialNumber"].includes(this.controlType) || !this.finalCanEdit
+                    ...this.commonDealPropsObj
                 };
             },
             inputType () {
@@ -182,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

@@ -149,7 +149,7 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshNumber {
         width: 100%;
 
@@ -164,44 +164,3 @@
         }
     }
 </style>
-<style lang="less">
-    .ivu-input-number {
-        width: 100%;
-
-        .ivu-input-number-input {
-            color: @textColor;
-        }
-
-        &-disabled {
-            .ivu-input-number-input {
-                opacity: 1;
-                background: @inputBg-disabled;
-                color: @textColor;
-                &::-webkit-input-placeholder {
-                    color: @placeholder-disabled-color;
-                }
-            }
-        }
-
-        &-handler {
-            &-wrap {
-                border-left: none;
-            }
-            &-down {
-                border: none;
-            }
-            &:hover {
-                background-color: @hoverBg;
-
-                .ivu-input-number-handler-down-inner,
-                .ivu-input-number-handler-up-inner {
-                    color: @textColor;
-                }
-            }
-            &-down-inner,
-            &-up-inner {
-                color: @contentColor;
-            }
-        }
-    }
-</style>

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

@@ -126,7 +126,7 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshNumberange {
         width: 100%;
         display: flex;
@@ -134,25 +134,25 @@
 
         &-left,
         &-right {
-            flex: 1;
+            flex: 7;
+            flex: 7;
+            min-width: 0px;
         }
 
         &-center {
-            width: 30px;
+            flex: 1;
+            min-width: 10px;
             text-align: center;
             color: @textColor;
         }
 
         &-suffix {
-            padding-right: 24px;
-            padding-left: 8px;
+            padding-right: 8px;
+            padding-left: 2px;
             line-height: 30px;
             white-space: nowrap;
         }
-    }
-</style>
-<style lang="less">
-    .DshNumberange {
+
         input {
             text-overflow: ellipsis;
             overflow: hidden;

package/src/components/controls/base/DshSelect/selectMixin.js

@@ -26,9 +26,7 @@ export default {
                 _customData: [],
 
                 ...this.propsObj,
-                ...this.commonDealPropsObj,
-
-                _disabled: this.propsObj._disabled || !this.finalCanEdit
+                ...this.commonDealPropsObj
             };
         },
         showType () {

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

@@ -72,11 +72,6 @@
     };
 </script>
 
-<style lang="less" scoped>
-    .DshSwitch {
-
-    }
-</style>
 <style lang="less">
     .DshSwitch {