✨ feat: 新增日期时间选择控件

hookehuyr
Commit 2344a121ea522e0b7313e2a68c8a5bf119457f84 2344a121 1 parent 213ae2c2
Showing 4 changed files with 85 additions and 5 deletions
src/components/DateTimePickerField/index.vue
src/hooks/useComponentType.js
src/main.js
src/views/index.vue
--- a/src/components/DateTimePickerField/index.vue 0 → 100644
View file @2344a12
+++ b/src/components/DateTimePickerField/index.vue 0 → 100644
View file @2344a12
+<!--
+ * @Date: 2022-09-08 15:02:45
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-08 15:18:22
+ * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="datetime-picker">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required"
+      :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker-group :title="item.component_props.title" :tabs="['选择日期', '选择时间']" @confirm="onConfirm"
+        @cancel="onCancel">
+        <van-date-picker v-model="currentDate" :min-date="item.component_props.minDate" />
+        <van-time-picker v-model="currentTime" />
+      </van-picker-group>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { showToast } from 'vant';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  item: Object
+})
+const showPicker = ref(false);
+
+const currentDate = ref([]);
+const currentTime = ref([]);
+
+const onConfirm = () => {
+  props.item.value = `${currentDate.value.join('-')} ${currentTime.value.join(':')}`;
+  showPicker.value = false;
+};
+const onCancel = () => {
+  showPicker.value = false;
+};
+
+onMounted(() => {
+  // 获取值定位显示
+  const datetime = props.item.value.split(' ');
+  currentDate.value = datetime[0]?.split('-');
+  currentTime.value = datetime[1]?.split(':');
+})
+</script>
+
+<style lang="less" scoped>
+.datetime-picker {
+.label {
+  padding: 1rem 1rem 0 1rem;
+  font-size: 0.9rem;
+  font-weight: bold;
+
+  span {
+    color: red;
+  }
+}
+}
+</style>
--- a/src/hooks/useComponentType.js
View file @2344a12
+++ b/src/hooks/useComponentType.js
View file @2344a12
@@ -8,6 +8,7 @@ import PickerField from '@/components/PickerField/index.vue'
 import AreaPickerField from '@/components/AreaPickerField/index.vue'
 import DatePickerField from '@/components/DatePickerField/index.vue'
 import TimePickerField from '@/components/TimePickerField/index.vue'
+import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
 import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
@@ -24,6 +25,7 @@ import SignField from '@/components/SignField/index.vue'
  * @type area_picker 地址选择器 AreaPickerField
  * @type date_picker 日期选择器 DatePickerField
  * @type time_picker 时间选择器 TimePickerField
+ * @type datetime_picker 日期时间选择器 DateTimePickerField
  * @type image_uploader 图片上传 ImageUploaderField
  * @type phone 手机输入框 PhoneField
  * @type email 邮箱输入框 EmailField
@@ -71,6 +73,9 @@ export function createComponentType(data) {
     if (item.component_props.name === 'time_picker') {
       item.component = TimePickerField;
     }
+    if (item.component_props.name === 'datetime_picker') {
+      item.component = DateTimePickerField;
+    }
     if (item.component_props.name === 'image_uploader') {
       item.component = ImageUploaderField;
     }
--- a/src/main.js
View file @2344a12
+++ b/src/main.js
View file @2344a12
@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 10:05:14
+ * @LastEditTime: 2022-09-08 15:06:26
  * @FilePath: /data-table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
 app.config.globalProperties.$http = axios; // 关键语句
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup);
 app.use(vueEsign)
 app.mount('#app');
--- a/src/views/index.vue
View file @2344a12
+++ b/src/views/index.vue
View file @2344a12
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 14:31:33
+ * @LastEditTime: 2022-09-08 15:22:09
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -172,7 +172,7 @@ onMounted(() => {
   //   },
   // },
   // {
-  //   key: 'datetime',
+  //   key: 'date',
   //   value: '2022-10',
   //   label: '日期选择',
   //   placeholder: '请选择日期',
@@ -205,6 +205,18 @@ onMounted(() => {
   //     multiple: false
   //   }
   // }
+  {
+    key: 'datetime',
+    value: '2022-06-01 12:00',
+    label: '日期时间',
+    placeholder: '请选择日期时间',
+    component_props: {
+      name: 'datetime_picker',
+      title: '请选择',
+      minDate: new Date(),
+    },
+    required: true,
+  }
   ];
   // 生成自定义组件
   createComponentType(mockData.value)