bri-components 1.5.21 → 1.6.0

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

@@ -1,186 +1,186 @@
-<template>
-    <div class="DshDaterange">
-        <template v-if="['time'].includes(subType)">
-            <!-- 时间子类型 -->
-            <TimePicker
-                style="width: 100%;"
-                v-model="value[controlKey]"
-                :placeholder="selfPropsObj._placeholder"
-                type="timerange"
-                :disabled="disabled"
-                :transfer="selfPropsObj._transfer"
-                :transfer-class-name="selfPropsObj._transferClassName"
-                @on-change="change"
-            ></TimePicker>
-        </template>
-
-        <!-- 日期、日期时间、年、月 -->
-        <template v-else-if="['date', 'datetime', 'year', 'month'].includes(subType)">
-            <!-- 整体模式 -->
-            <template v-if="showMode === 'whole'">
-                <DatePicker
-                    v-if="['date', 'datetime'].includes(subType)"
-                    class="DshDate-edit"
-                    :value="curValList"
-                    :type="`${subType}range`"
-                    :disabled="disabled"
-                    :options="options"
-                    :open="open"
-                    :transfer="selfPropsObj._transfer"
-                    :transfer-class-name="selfPropsObj._transferClassName"
-                    @on-change="changeVal($event, 'List')"
-                    @on-open-change="changeOpen($event, '')"
-                >
-                    <dsh-control-input
-                        :class="{
-                            ...commonClass,
-                            'bri-control-nodata': this.$isEmptyData(this.curValList)
-                        }"
-                        :value="mulShowVal"
-                        :disabled="disabled"
-                        :propsObj="selfPropsObj"
-                        @clear="clickClear([], 'List')"
-                        @click.native="changeOpen(true, '')"
-                    ></dsh-control-input>
-                </DatePicker>
-            </template>
-
-            <!-- 默认模式 -->
-            <template v-else>
-                <DatePicker
-                    class="DshDaterange-left"
-                    :value="curVal0"
-                    :type="subType"
-                    :disabled="disabled"
-                    :options="options0"
-                    :open="open0"
-                    :transfer="selfPropsObj._transfer"
-                    :transfer-class-name="selfPropsObj._transferClassName"
-                    @on-change="changeVal($event, 0)"
-                    @on-open-change="changeOpen($event, 0)"
-                >
-                    <dsh-control-input
-                        :class="{
-                            ...commonClass,
-                            'bri-control-nodata': this.$isEmptyData(this.curVal0)
-                        }"
-                        :value="showVal0"
-                        :disabled="disabled"
-                        :propsObj="selfPropsObj"
-                        @clear="clickClear('', 0)"
-                        @click.native="changeOpen(true, 0)"
-                    ></dsh-control-input>
-                </DatePicker>
-
-                <span class="DshDaterange-center"> — </span>
-
-                <DatePicker
-                    class="DshDaterange-right"
-                    :value="curVal1"
-                    :type="subType"
-                    :disabled="disabled"
-                    :options="options1"
-                    :open="open1"
-                    :transfer="selfPropsObj._transfer"
-                    :transfer-class-name="selfPropsObj._transferClassName"
-                    @on-change="changeVal($event, 1)"
-                    @on-open-change="changeOpen($event, 1)"
-                >
-                    <dsh-control-input
-                        :class="{
-                            ...commonClass,
-                            'bri-control-nodata': this.$isEmptyData(this.curVal1)
-                        }"
-                        :value="showVal1"
-                        :disabled="disabled"
-                        :propsObj="selfPropsObj"
-                        @clear="clickClear('', 1)"
-                        @click.native="changeOpen(true, 1)"
-                    ></dsh-control-input>
-                </DatePicker>
-            </template>
-        </template>
-    </div>
-</template>
-
-<script>
-    import dateMixin from "../../mixins/dateMixin.js";
-
-    export default {
-        name: "DshDaterange",
-        mixins: [
-            dateMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    // _icon: "ios-calendar-outline",
-                    _showMode: "default", // "default", "whole"
-
-                    ...this.basePropsObj
-                };
-            },
-            showMode () {
-                return this.selfPropsObj._showMode;
-            },
-
-            options () {
-                return this.getOptions();
-            },
-            options0 () {
-                return this.getOptions(0);
-            },
-            options1 () {
-                return this.getOptions(1);
-            }
-        },
-        created () {},
-        methods: {
-            /* -------- 方法 ------- */
-            getOptions (index) {
-                const compareDate = this[`curVal${index === 0 ? 1 : 0}`];
-                const compareDateStr = this.$transformToDateStr(compareDate, "/", this.subType);
-                const compareOperator = index === 0 ? "ltAet" : "gtAet";
-
-                return {
-                    shortcuts: this.getShortCuts(index),
-                    disabledDate: (date) => {
-                        const curDateStr = this.$transformToDateStr(date, "/", this.subType);
-                        const rangeBool = this.$isWithinRange(curDateStr, this.selfPropsObj._minDate, this.selfPropsObj._maxDate);
-                        const compareBool = compareDateStr
-                            ? !this.$isComparedAccord(curDateStr, compareDateStr, compareOperator, "date", this.subType, this.subType)
-                            : false;
-
-                        return !rangeBool || compareBool;
-                    }
-                };
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshDaterange {
-        width: 100%;
-        display: flex;
-        align-items: center;
-
-        &-left,
-        &-right {
-            flex: 7;
-            min-width: 0px;
-        }
-
-        &-center {
-            flex: 1;
-            min-width: 10px;
-            text-align: center;
-            color: @textColor;
-        }
-    }
-</style>
+<template>
+    <div class="DshDaterange">
+        <template v-if="['time'].includes(subType)">
+            <!-- 时间子类型 -->
+            <TimePicker
+                style="width: 100%;"
+                v-model="value[controlKey]"
+                :placeholder="selfPropsObj._placeholder"
+                type="timerange"
+                :disabled="disabled"
+                :transfer="selfPropsObj._transfer"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                @on-change="change"
+            ></TimePicker>
+        </template>
+
+        <!-- 日期、日期时间、年、月 -->
+        <template v-else-if="['date', 'datetime', 'year', 'month'].includes(subType)">
+            <!-- 整体模式 -->
+            <template v-if="showMode === 'whole'">
+                <DatePicker
+                    v-if="['date', 'datetime'].includes(subType)"
+                    class="DshDate-edit"
+                    :value="curValList"
+                    :type="`${subType}range`"
+                    :disabled="disabled"
+                    :options="options"
+                    :open="open"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    @on-change="changeVal($event, 'List')"
+                    @on-open-change="changeOpen($event, '')"
+                >
+                    <dsh-control-input
+                        :class="{
+                            ...commonClass,
+                            'bri-control-nodata': this.$isEmptyData(this.curValList)
+                        }"
+                        :value="mulShowVal"
+                        :disabled="disabled"
+                        :propsObj="selfPropsObj"
+                        @clear="clickClear([], 'List')"
+                        @click.native="changeOpen(true, '')"
+                    ></dsh-control-input>
+                </DatePicker>
+            </template>
+
+            <!-- 默认模式 -->
+            <template v-else>
+                <DatePicker
+                    class="DshDaterange-left"
+                    :value="curVal0"
+                    :type="subType"
+                    :disabled="disabled"
+                    :options="options0"
+                    :open="open0"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    @on-change="changeVal($event, 0)"
+                    @on-open-change="changeOpen($event, 0)"
+                >
+                    <dsh-control-input
+                        :class="{
+                            ...commonClass,
+                            'bri-control-nodata': this.$isEmptyData(this.curVal0)
+                        }"
+                        :value="showVal0"
+                        :disabled="disabled"
+                        :propsObj="selfPropsObj"
+                        @clear="clickClear('', 0)"
+                        @click.native="changeOpen(true, 0)"
+                    ></dsh-control-input>
+                </DatePicker>
+
+                <span class="DshDaterange-center"> — </span>
+
+                <DatePicker
+                    class="DshDaterange-right"
+                    :value="curVal1"
+                    :type="subType"
+                    :disabled="disabled"
+                    :options="options1"
+                    :open="open1"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    @on-change="changeVal($event, 1)"
+                    @on-open-change="changeOpen($event, 1)"
+                >
+                    <dsh-control-input
+                        :class="{
+                            ...commonClass,
+                            'bri-control-nodata': this.$isEmptyData(this.curVal1)
+                        }"
+                        :value="showVal1"
+                        :disabled="disabled"
+                        :propsObj="selfPropsObj"
+                        @clear="clickClear('', 1)"
+                        @click.native="changeOpen(true, 1)"
+                    ></dsh-control-input>
+                </DatePicker>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+    import dateMixin from "../../mixins/dateMixin.js";
+
+    export default {
+        name: "DshDaterange",
+        mixins: [
+            dateMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    // _icon: "ios-calendar-outline",
+                    _showMode: "default", // "default", "whole"
+
+                    ...this.basePropsObj
+                };
+            },
+            showMode () {
+                return this.selfPropsObj._showMode;
+            },
+
+            options () {
+                return this.getOptions();
+            },
+            options0 () {
+                return this.getOptions(0);
+            },
+            options1 () {
+                return this.getOptions(1);
+            }
+        },
+        created () {},
+        methods: {
+            /* -------- 方法 ------- */
+            getOptions (index) {
+                const compareDate = this[`curVal${index === 0 ? 1 : 0}`];
+                const compareDateStr = this.$transformToDateStr(compareDate, "/", this.subType);
+                const compareOperator = index === 0 ? "ltAet" : "gtAet";
+
+                return {
+                    shortcuts: this.getShortCuts(index),
+                    disabledDate: (date) => {
+                        const curDateStr = this.$transformToDateStr(date, "/", this.subType);
+                        const rangeBool = this.$isWithinRange(curDateStr, this.selfPropsObj._minDate, this.selfPropsObj._maxDate);
+                        const compareBool = compareDateStr
+                            ? !this.$isComparedAccord(curDateStr, compareDateStr, compareOperator, "date", this.subType, this.subType)
+                            : false;
+
+                        return !rangeBool || compareBool;
+                    }
+                };
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshDaterange {
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        &-left,
+        &-right {
+            flex: 7;
+            min-width: 0px;
+        }
+
+        &-center {
+            flex: 1;
+            min-width: 10px;
+            text-align: center;
+            color: @textColor;
+        }
+    }
+</style>