bri-components 1.0.0

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

@@ -0,0 +1,148 @@
+<template>
+    <div
+        v-if="show"
+        :class="`DshDate ycFormItem control-${mode}`"
+    >
+        <template v-if="finalCanEdit">
+            <template v-if="['time'].includes(subType)">
+                <TimePicker
+                    style="width: 100%;"
+                    :class="{
+                        'DshDate-time-readonly': $isReadonly(canEdit, selfPropsObj),
+                        'DshDate-time-disabled': $isDisabled(canEdit, selfPropsObj)
+                    }"
+                    v-model="val"
+                    :type="subType"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="!finalCanEdit"
+                    :clearable="selfPropsObj._clearable"
+                    :transfer="selfPropsObj._transfer"
+                    @on-change="change"
+                ></TimePicker>
+            </template>
+
+            <template v-else>
+                <DatePicker
+                    style="width: 100%;"
+                    :class="{
+                        'DshDate-date-readonly': $isReadonly(canEdit, selfPropsObj),
+                        'DshDate-date-disabled': $isDisabled(canEdit, selfPropsObj)
+                    }"
+                    v-model="val"
+                    :type="subType"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="!finalCanEdit"
+                    :clearable="selfPropsObj._clearable"
+                    :options="options"
+                    :transfer="selfPropsObj._transfer"
+                    @on-change="change"
+                ></DatePicker>
+            </template>
+        </template>
+
+        <Ctooltip
+            v-else
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+            :class="commonClass"
+        >
+            <span
+                v-if="showVal"
+                class="dsh-ellipsis hb-show-text"
+                :class="`control-${mode}-text`"
+            >
+                {{ showVal }}
+            </span>
+            <span
+                v-else
+                class="hb-nodata-text dsh-ellipsis"
+                :class="`control-${mode}-text`"
+            >
+                <span>暂无内容</span>
+            </span>
+        </Ctooltip>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshDate",
+        mixins: [controlMixin],
+        props: {
+            allFormList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                show: true
+            };
+        },
+        computed: {
+            val: {
+                get () {
+                    const val = this.value[this.controlKey];
+                    return this.$transformDateCompatible(val, this.subType);
+                },
+                set (val) {
+                    this.value[this.controlKey] = this.$transformDate(val, "-", this.subType);
+                }
+            },
+
+            selfPropsObj () {
+                return {
+                    _transfer: true,
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            subType () {
+                return this.selfPropsObj._dateType;
+            },
+            options () {
+                return {
+                    shortcuts: [],
+                    disabledDate: (date) => {
+                        const resultObj = this.$validateComparedRule(
+                            [this.selfPropsObj],
+                            {
+                                ...this.value,
+                                [this.controlKey]: this.$transformDate(date, "/", this.subType)
+                            },
+                            this.allFormList
+                        );
+                        return !resultObj.bool;
+                    }
+                };
+            },
+
+            showVal () {
+                return this.value[this.controlKey] || "";
+            }
+        },
+        created () {},
+        methods: {},
+        watch: {
+            "propsObj._dateType" () {
+                this.show = false;
+                this.$nextTick(() => {
+                    this.value[this.controlKey] = this.selfPropsObj._default;
+                    this.show = true;
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshDate {
+        width: 100%;
+    }
+</style>

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

@@ -0,0 +1,335 @@
+<template>
+    <div class="DshDaterange">
+        <template v-if="['time', 'timerange'].includes(subType)">
+            <!-- 时间范围 -->
+            <TimePicker
+                style="width: 100%;"
+                v-model="value[controlKey]"
+                :placeholder="selfPropsObj._placeholder"
+                type="timerange"
+                :disabled="!finalCanEdit"
+                :transfer="true"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                @on-change="change"
+            ></TimePicker>
+        </template>
+
+        <!-- 动态日期 -->
+        <template v-else-if="['date', 'datetime', 'daterange', 'datetimerange', 'year', 'month'].includes(subType)">
+            <DatePicker
+                class="DshDaterange-left"
+                :model-value="val0"
+                :placeholder="selfPropsObj._placeholder"
+                :type="subType"
+                :disabled="!finalCanEdit"
+                :options="options0"
+                :open="open0"
+                :transfer="true"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                @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="md-close"
+                            @click.stop="clickClear('', 0)"
+                        />
+                        <Icon
+                            v-show="!val0"
+                            type="ios-calendar-outline"
+                        />
+                    </span>
+                </div>
+            </DatePicker>
+
+            <span class="DshDaterange-center"> — </span>
+
+            <DatePicker
+                class="DshDaterange-right"
+                :model-value="val1"
+                :placeholder="selfPropsObj._placeholder"
+                :type="subType"
+                :disabled="!finalCanEdit"
+                :options="options1"
+                :open="open1"
+                :transfer="true"
+                :transfer-class-name="propsObj._transferClassName"
+                @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="md-close"
+                            @click.stop="clickClear('', 1)"
+                        />
+                        <Icon
+                            v-show="!val1"
+                            type="ios-calendar-outline"
+                        />
+                    </span>
+                </div>
+            </DatePicker>
+        </template>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshDaterange",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {
+                open0: false,
+                open1: false,
+
+                dynDate: [
+                    {
+                        _key: "dyn_today_start",
+                        name: "今天",
+                        numbers: [0],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_today_end",
+                        name: "今天",
+                        numbers: [1],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_now",
+                        name: "现在",
+                        numbers: [0, 1],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_yesterday",
+                        name: "昨天",
+                        numbers: [0],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_subtract_3_days",
+                        name: "三天前",
+                        numbers: [0],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_subtract_7_days",
+                        name: "七天前",
+                        numbers: [0],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_subtract_30_days",
+                        name: "三十天前",
+                        numbers: [0],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_add_3_days",
+                        name: "三天后",
+                        numbers: [1],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_add_7_days",
+                        name: "七天后",
+                        numbers: [1],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_add_30_days",
+                        name: "三十后",
+                        numbers: [1],
+                        dateTypes: ["date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_month_start",
+                        name: "月初",
+                        numbers: [0],
+                        dateTypes: ["month", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_month_end",
+                        name: "月末",
+                        numbers: [1],
+                        dateTypes: ["month", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_quarter_start",
+                        name: "本季初",
+                        numbers: [0],
+                        dateTypes: ["month", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_quarter_end",
+                        name: "本季末",
+                        numbers: [1],
+                        dateTypes: ["month", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_year_start",
+                        name: "年初",
+                        numbers: [0],
+                        dateTypes: ["year", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_year_end",
+                        name: "年末",
+                        numbers: [1],
+                        dateTypes: ["year", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_nextyear_start",
+                        name: "次年初",
+                        numbers: [0],
+                        dateTypes: ["year", "date", "datetime", "daterange", "datetimerange"]
+                    },
+                    {
+                        _key: "dyn_nextyear_end",
+                        name: "次年末",
+                        numbers: [1],
+                        dateTypes: ["year", "date", "datetime", "daterange", "datetimerange"]
+                    }
+                ]
+            };
+        },
+        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"
+                };
+            },
+            subType () {
+                return this.selfPropsObj._dateType; // 5种，"date", "datetime", "year", "month", "time"
+            },
+            useShortcuts () {
+                return this.selfPropsObj._useShortcuts;
+            },
+
+            options0 () {
+                return this.getOptions(0);
+            },
+            options1 () {
+                return this.getOptions(1);
+            },
+            showVal0 () {
+                return this.getShowVal(0);
+            },
+            showVal1 () {
+                return this.getShowVal(1);
+            }
+        },
+        created () {},
+        methods: {
+            // 点击快捷日期
+            clickDynDate (val, index) {
+                this[`val${index}`] = val;
+                this.changeOpen(false, index);
+            },
+            // 点击清空
+            clickClear (val, index) {
+                this[`val${index}`] = val;
+                this.changeOpen(false, index);
+            },
+            // 日期值变化回调
+            changeVal (val, index) {
+                this[`val${index}`] = val;
+                this.subType !== "datetime" && this.changeOpen(false, index);
+            },
+            changeOpen (bool, index) {
+                this[`open${index}`] = bool;
+            },
+
+            /* -------- 方法 ------- */
+            getVal (index) {
+                const val = this.value[this.controlKey][index];
+
+                return this.isDynDateKey(val)
+                    ? val
+                    : this.$transformDateCompatible(val, this.subType);
+            },
+            setVal (val, index) {
+                const newVal = this.isDynDateKey(val) ? val : this.$transformDate(val, "-", this.subType);
+                this.value[this.controlKey] = index === 0
+                    ? [newVal, this.value[this.controlKey][1] || ""]
+                    : [this.value[this.controlKey][0] || "", newVal];
+
+                this.change();
+            },
+            getOptions (index) {
+                const val = this[`val${index === 0 ? 1 : 0}`];
+                const config = { _operator: index === 0 ? "ltAet" : "gtAet", _fieldKey: this.controlKey };
+
+                return {
+                    shortcuts: this.useShortcuts
+                        ? this.dynDate
+                            .filter(dynItem => dynItem.numbers.includes(index) && dynItem.dateTypes.includes(this.subType))
+                            .map(dynItem => ({
+                                text: dynItem.name,
+                                onClick: () => this.clickDynDate(dynItem._key, index)
+                            }))
+                        : [],
+                    disabledDate: (date) => {
+                        return val
+                            ? this.isDynDateKey(val)
+                                ? true
+                                : !this.$isComparedAccord(this.selfPropsObj, this.selfPropsObj, date, val, config).bool
+                            : false;
+                    }
+                };
+            },
+            getShowVal (index) {
+                const val = this[`val${index}`];
+
+                return this.isDynDateKey(val)
+                    ? (this.dynDate.find(dynItem => dynItem._key === val) || { name: `"${val}"dnDate不存在` }).name
+                    : this.$transformDate(val, "-", this.subType);
+            },
+            isDynDateKey (dynKey) {
+                return this.dynDate.some(dynItem => dynItem._key === dynKey);
+            }
+        }
+    };
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+    <div :class="`DshDivider control-${mode}`">
+        <!-- <div class="DshDivider-divider-cli">
+            <p>{{ propsObj._name }}</p>
+        </div> -->
+        <div
+            class="DshDivider-divider"
+            :style="propsObj._tagKind === 'flag' ? { marginRight:'36px' } : {}"
+        >
+            <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>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshDivider",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>