✨ feat: 新增时间选择控件

+<!--
+ * @Date: 2022-08-31 11:45:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-08 10:06:46
+ * @FilePath: /data-table/src/components/TimePickerField/index.vue
+ * @Description: 日期选择组件
+-->
+<template>
+  <div class="time-picker-field">
+    <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-time-picker v-model="currentTime" :title="item.component_props.title" :columns-type="item.component_props.columns_type" @confirm="onConfirm"
+        @cancel="showPicker = false" />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  item: Object
+})
+
+const showPicker = ref(false);
+const currentTime = ref([]);
+
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+  props.item.value = selectedValues[0] + ':' + selectedValues[1];
+  showPicker.value = false;
+};
+
+onMounted(() => {
+  currentTime.value = props.item.value.split(':')
+})
+</script>
+
+<style lang="less" scoped>
+.time-picker-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -7,6 +7,7 @@ import CheckboxField from '@/components/CheckboxField/index.vue'
 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 ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
@@ -22,6 +23,7 @@ import SignField from '@/components/SignField/index.vue'
  * @type picker 单列选择器 PickerField
  * @type area_picker 地址选择器 AreaPickerField
  * @type date_picker 日期选择器 DatePickerField
+ * @type time_picker 时间选择器 TimePickerField
  * @type image_uploader 图片上传 ImageUploaderField
  * @type phone 手机输入框 PhoneField
  * @type email 邮箱输入框 EmailField
@@ -66,6 +68,9 @@ export function createComponentType(data) {
     if (item.component_props.name === 'date_picker') {
       item.component = DatePickerField;
     }
+    if (item.component_props.name === 'time_picker') {
+      item.component = TimePickerField;
+    }
     if (item.component_props.name === 'image_uploader') {
       item.component = ImageUploaderField;
     }

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 15:14:40
+ * @LastEditTime: 2022-09-08 10:05:14
  * @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 } 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 } 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);
+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(vueEsign)
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 16:47:28
+ * @LastEditTime: 2022-09-08 10:17:43
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -138,17 +138,17 @@ onMounted(() => {
   //   ],
   //   required: true,
   // },
-  {
-    key: 'sign',
-    value: '',
-    label: '电子签名',
-    placeholder: '',
-    component: '',
-    component_props: {
-      name: 'sign',
-    },
-    required: true,
-  },
+  // {
+  //   key: 'sign',
+  //   value: '',
+  //   label: '电子签名',
+  //   placeholder: '',
+  //   component: '',
+  //   component_props: {
+  //     name: 'sign',
+  //   },
+  //   required: true,
+  // },
   // {
   //   key: 'city',
   //   value: '天津市/天津市/和平区',
@@ -172,6 +172,18 @@ onMounted(() => {
   //     columns_type: ['year', 'month']
   //   },
   // },
+  {
+    key: 'time',
+    value: '',
+    label: '时间选择',
+    placeholder: '请选择时间',
+    component_props: {
+      name: 'time_picker',
+      title: '请选择',
+      columns_type: ['hour', 'minute']
+    },
+    required: true,
+  },
   // {
   //   key: 'image_src',
   //   value: '',
@@ -192,11 +204,11 @@ const sign = ref(null);
 const onSubmit = (values) => {
   // 合并自定义字段到提交表单字段
   postData.value = _.assign(postData.value, values);
-  // console.warn(postData.value);
   // console.warn(mockData.value);
   // 检查非表单输入项
   if (validOther()) { // 通过验证
     console.warn('通过验证');
+    console.warn(postData.value);
   } else {
     console.warn('不通过验证');
   }
@@ -210,8 +222,11 @@ const onActive = (item) => {
 }
 
 const validOther = () => {
-  // 检查电子签名输入项
-  const flag = sign.value[0].validSign();
+  // 检验没有绑定name的输入项
+  let flag = true;
+  if (sign.value) { // 检验电子签名
+    flag = sign.value[0].validSign();
+  }
   return flag;
 }
 </script>