✨ feat: 新增时间选择控件

hookehuyr
Commit 02bd527d888720d1e3849ba87a51e01777a952c7 02bd527d 1 parent f84bc281
Showing 4 changed files with 90 additions and 18 deletions
src/components/TimePickerField/index.vue
src/hooks/useComponentType.js
src/main.js
src/views/index.vue
--- a/src/components/TimePickerField/index.vue 0 → 100644
View file @02bd527
+++ b/src/components/TimePickerField/index.vue 0 → 100644
View file @02bd527
+<!--
+ * @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>
--- a/src/hooks/useComponentType.js
View file @02bd527
+++ b/src/hooks/useComponentType.js
View file @02bd527
@@ -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;
     }
--- a/src/main.js
View file @02bd527
+++ b/src/main.js
View file @02bd527
@@ -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');
--- a/src/views/index.vue
View file @02bd527
+++ b/src/views/index.vue
View file @02bd527
 <!--
  * @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',
+  //   key: 'sign',
-    value: '',
+  //   value: '',
-    label: '电子签名',
+  //   label: '电子签名',
-    placeholder: '',
+  //   placeholder: '',
-    component: '',
+  //   component: '',
-    component_props: {
+  //   component_props: {
-      name: 'sign',
+  //     name: 'sign',
-    },
+  //   },
-    required: true,
+  //   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 = () => {
-  // 检查电子签名输入项
+  // 检验没有绑定name的输入项
-  const flag = sign.value[0].validSign();
+  let flag = true;
+  if (sign.value) { // 检验电子签名
+    flag = sign.value[0].validSign();
+  }
   return flag;
 }
 </script>