From 487719b3188aaafcca49104b4ce62035dc29e953 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 21 Apr 2021 15:45:38 +0800
Subject: [PATCH] 实现表单日期时间选择组件
---
forms/datePicker/CDateTimeAction.vue | 135 ++++++++++++++++++++++
forms/datePicker/cDatePicker.scss | 31 +++++
forms/imagePicker/CImagePicker.vue | 2
forms/datePicker/index.js | 4
forms/datePicker/CDatePicker.vue | 78 +++++++++++++
forms/datePicker/cDateTimeAction.scss | 70 +++++++++++
forms/datePicker/cDateRangeAction.scss | 1
7 files changed, 319 insertions(+), 2 deletions(-)
diff --git a/forms/datePicker/CDatePicker.vue b/forms/datePicker/CDatePicker.vue
new file mode 100644
index 0000000..8521004
--- /dev/null
+++ b/forms/datePicker/CDatePicker.vue
@@ -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>
\ No newline at end of file
diff --git a/forms/datePicker/CDateTimeAction.vue b/forms/datePicker/CDateTimeAction.vue
new file mode 100644
index 0000000..4418f01
--- /dev/null
+++ b/forms/datePicker/CDateTimeAction.vue
@@ -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>
\ No newline at end of file
diff --git a/forms/datePicker/cDatePicker.scss b/forms/datePicker/cDatePicker.scss
new file mode 100644
index 0000000..31efb78
--- /dev/null
+++ b/forms/datePicker/cDatePicker.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/forms/datePicker/cDateRangeAction.scss b/forms/datePicker/cDateRangeAction.scss
index 2dc4c66..5d2abba 100644
--- a/forms/datePicker/cDateRangeAction.scss
+++ b/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 {
diff --git a/forms/datePicker/cDateTimeAction.scss b/forms/datePicker/cDateTimeAction.scss
new file mode 100644
index 0000000..55227f4
--- /dev/null
+++ b/forms/datePicker/cDateTimeAction.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/forms/datePicker/index.js b/forms/datePicker/index.js
index 66810ea..ee6d0c7 100644
--- a/forms/datePicker/index.js
+++ b/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,
}
\ No newline at end of file
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index 4d692f3..a9da799 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/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';
--
Gitblit v1.9.1