实现表单日期时间选择组件

Tevin

2021-04-21 487719b3188aaafcca49104b4ce62035dc29e953

实现表单日期时间选择组件

 forms/datePicker/CDatePicker.vue

New file
@@ -0,0 +1,78 @@
/**
 * CDatePicker - 选择日期范围操作
 * @author Tevin
 */

<template>
    <view class="c-date-picker">
        <CDateRangeAction
            v-if="mode==='dateRange'"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>handleChange(evt)"
        >
            <AtInput
                ref="input"
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :error="itemRes.error"
                :value="itemRes.formData[itemRes.name]"
            >
                <view class="at-icon at-icon-chevron-right" />
            </AtInput>
        </CDateRangeAction>
        <CDateTimeAction
            v-else-if="mode==='dateTime'"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>handleChange(evt)"
        >
            <AtInput
                ref="input"
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :error="itemRes.error"
                :value="itemRes.formData[itemRes.name]"
            >
                <view class="at-icon at-icon-chevron-right" />
            </AtInput>
        </CDateTimeAction>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput } from 'taro-ui-vue';
import CDateRangeAction from './CDateRangeAction';
import CDateTimeAction from './CDateTimeAction.vue';
import './cDatePicker.scss';

export default {
    name: 'CDatePicker',
    components: {
        AtInput,
        CDateRangeAction,
        CDateTimeAction,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 日期时间选择器模式，包含 date / dateRange / dateTime 三种类型
        mode: {
            type: String,
            default: 'date',
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {
        handleChange(val) {
            this.itemRes.onChange(val);
        },
    },
    mounted() {},
};
</script>

 forms/datePicker/CDateTimeAction.vue

New file
@@ -0,0 +1,135 @@
/**
 * CDateTimeAction - 选择日期范围操作
 * @author Tevin
 */

<template>
    <view class="c-date-time-action">
        <view
            class="c-date-time-slot"
            @tap="evt => handleOpen()"
        >
            <slot />
        </view>
        <view
            class="c-data-time-float"
            ref="floadLayer"
        >
            <AtDrawer
                class="c-data-time-drawer"
                ref="floatDrawer"
                mask
                :show="drawerShow"
                :onClose="evt => drawerShow=false"
            >
                <view class="title">
                    <view>请选择日期时间</view>
                    <AtButton
                        size="small"
                        type="primary"
                        :onClick="evt => handleSelectNow()"
                    >此刻</AtButton>
                </view>
                <view class="date">
                    <picker
                        mode='date'
                        :value="date"
                        @change="evt => handleDateChange(evt.detail.value)"
                    >
                        <view class="item">
                            <view class="label">选择日期</view>
                            <view :class="date?'filled':'empty'">
                                {{ date?date:'请选择日期' }}
                            </view>
                            <view class="at-icon at-icon-chevron-right" />
                        </view>
                    </picker>
                    <picker
                        mode='time'
                        :value="time"
                        @change="evt => handleTimeChange(evt.detail.value)"
                    >
                        <view class="item">
                            <view class="label">选择时间</view>
                            <view :class="time?'filled':'empty'">
                                {{ time?time:'请选择时间' }}
                            </view>
                            <view class="at-icon at-icon-chevron-right" />
                        </view>
                    </picker>
                </view>
                <AtButton
                    class="btn"
                    type="primary"
                    full
                    :circle="false"
                    :onClick="evt => handleFinish()"
                >确定</AtButton>
            </AtDrawer>
        </view>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import moment from 'moment';
import { AtDrawer, AtButton } from 'taro-ui-vue';
import './cDateTimeAction.scss';

export default {
    name: 'CDateTimeAction',
    components: {
        AtDrawer,
        AtButton,
    },
    props: {
        // 项值
        value: null,
        // 变化回调
        onChange: Function,
    },
    data() {
        return {
            drawerShow: false,
            date: '',
            time: '',
        };
    },
    computed: {},
    methods: {
        handleOpen() {
            this.drawerShow = true;
            const curDates = (this.value || ' ').split(' ');
            this.date = curDates[0];
            this.time = curDates[1];
        },
        handleDateChange(date) {
            this.date = date;
        },
        handleTimeChange(time) {
            this.time = time;
        },
        handleSelectNow() {
            const curDates = moment().format('YYYY-MM-DD HH:mm').split(' ');
            this.date = curDates[0];
            this.time = curDates[1];
        },
        handleFinish() {
            this.drawerShow = false;
            if (!this.date && !this.time) {
                this.onChange('');
            } else {
                this.onChange(this.date + ' ' + this.time);
            }
        },
    },
    mounted() {
        const $cFilter = $(this.$refs.floadLayer).parents('.c-filter');
        if ($cFilter.length > 0) {
            $cFilter.eq(0).after(this.$refs.floadLayer);
            $cFilter.parent().css('transform', 'translate(0,0)');
        }
    },
};
</script>

 forms/datePicker/cDatePicker.scss

New file
@@ -0,0 +1,31 @@
/**
 * date picker
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-date-picker {
    .at-input__input {
        .weui-input {
            pointer-events: none;
        }
    }
    .at-input__children {
        &::after {
            display: none;
        }
        .at-icon-chevron-right {
            font-size: 48px;
            color: #ccc;
        }
    }
    .at-input__icon {
        display: none;
    }
    .at-input__container {
        input {
            pointer-events: none;
        }
    }
}

 forms/datePicker/cDateRangeAction.scss

@@ -5,7 +5,6 @@

@import "../../common/sassMixin";

.c-date-range-action {}
.c-data-range-float {
    @include position(fixed, 0 0, 90000);
    .at-drawer .at-drawer__content {

 forms/datePicker/cDateTimeAction.scss

New file
@@ -0,0 +1,70 @@
/**
 * date time action
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-data-time-float {
    @include position(fixed, 0 0, 90000);
    .at-drawer .at-drawer__content {
        width: 100%;
        min-height: 200px;
        bottom: auto;
        transform: translateY(-100%);
    }
    .at-drawer--show .at-drawer__content {
        transform: translateY(0%);
    }
    .c-data-time-drawer {
        .title {
            position: relative;
            height: 110px;
            text-align: center;
            line-height: 110px;
            border-top: 1PX solid #eee;
            border-bottom: 1PX solid #d6e4ef;
            background-color: #f8f8f8;
            .at-button {
                @include position(absolute, 25px n n 18px);
                background-color: #8bbf86;
                border: none;
            }
        }
        .item {
            @include flexbox(flex, flex-start center);
            width: 100%;
            height: 96px;
            padding: 24px 0 24px 24px;
            white-space: nowrap;
            border-bottom: 1PX solid #d6e4ef;
            box-sizing: border-box;
            background-color: #fff;
            .label {
                flex: 2;
            }
            .filled,
            .empty {
                flex: 6;
                text-align: right;
            }
            .empty {
                color: #ccc;
            }
            .at-icon {
                flex: 1;
                font-size: 40px;
                text-align: center;
                color: #999;
            }
        }
        .date {
            padding-bottom: 24px;
            background-color: #f8f8f8;
        }
        .btn {
            background-color: #36a0e7;
            border: none;
        }
    }
}

 forms/datePicker/index.js

@@ -3,8 +3,12 @@
 * @author Tevin
 */

import CDatePicker from '@components/forms/datePicker/CDatePicker.vue';
import CDateRangeAction from '@components/forms/datePicker/CDateRangeAction.vue';
import CDateTimeAction from '@components/forms/datePicker/CDateTimeAction.vue';

export {
    CDatePicker,
    CDateRangeAction,
    CDateTimeAction,
}

 forms/imagePicker/CImagePicker.vue

@@ -39,8 +39,8 @@
</template>

<script>
import { $ } from '@tarojs/extend';
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
import { $fetcherCommon } from '@fetchers/FCommon';
import './cImagePicker.scss';