✨ feat: 新增日期选择控件

+<!--
+ * @Date: 2022-08-31 11:45:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-31 13:33:45
+ * @FilePath: /data-table/src/components/DatePickerField/index.vue
+ * @Description: 日期选择组件
+-->
+<template>
+  <div class="date-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-date-picker v-model="currentDate" :title="item.component_props.title"
+        :min-date="item.component_props.min_date" :max-date="item.component_props.max_date"
+        :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 currentDate = ref([]);
+
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+  props.item.value = selectedValues[0] + '-' + selectedValues[1];
+  showPicker.value = false;
+};
+// console.warn(dayjs().format('YYYY'));
+</script>
+
+<style lang="less" scoped>
+.date-picker-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -6,6 +6,7 @@ import RadioField from '@/components/RadioField/index.vue'
 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'
 
 /**
  * 生成自定义组件类型
@@ -16,6 +17,7 @@ import AreaPickerField from '@/components/AreaPickerField/index.vue'
  * @type checkbox 多选框 CheckboxField
  * @type picker 单列选择器 PickerField
  * @type area_picker 省市区选择器 AreaPickerField
+ * @type date_picker 日期选择器 DatePickerField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -24,34 +26,37 @@ export function createComponentType(data) {
     if (item.required) {
       item.rules = [{ required: true, message: item.placeholder ? item.placeholder : '必填项不能为空' }]
     }
-    if (item.component_type === 'text') {
+    if (item.component_props.name === 'text') {
       item.type = 'text';
       item.name = item.key;
       item.component = TextField;
     }
-    if (item.component_type === 'textarea') {
+    if (item.component_props.name === 'textarea') {
       item.type = 'textarea';
       item.name = item.key;
       item.rows = 2;
       item.autosize = true;
       item.component = TextareaField;
     }
-    if (item.component_type === 'number') {
+    if (item.component_props.name === 'number') {
       item.type = 'number';
       item.name = item.key;
       item.component = TextField;
     }
-    if (item.component_type === 'radio') {
+    if (item.component_props.name === 'radio') {
       item.component = RadioField;
     }
-    if (item.component_type === 'checkbox') {
+    if (item.component_props.name === 'checkbox') {
       item.component = CheckboxField;
     }
-    if (item.component_type === 'picker') {
+    if (item.component_props.name === 'picker') {
       item.component = PickerField;
     }
-    if (item.component_type === 'area_picker') {
+    if (item.component_props.name === 'area_picker') {
       item.component = AreaPickerField;
     }
+    if (item.component_props.name === 'date_picker') {
+      item.component = DatePickerField;
+    }
   })
 }

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 14:33:11
+ * @LastEditTime: 2022-08-31 13:14:09
  * @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 } 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 } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -23,6 +23,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);
+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.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 17:55:45
+ * @LastEditTime: 2022-08-31 13:37:32
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -30,11 +30,13 @@ const mockData = ref([]);
 onMounted(() => {
   mockData.value = [{
     key: 'username',
-    value: '',
+    value: 'test',
     label: '用户名',
     placeholder: '请输入用户名',
     component: '',
-    component_type: 'text',
+    component_props: {
+      name: 'text'
+    },
     required: true,
   }, {
     key: 'age',
@@ -42,7 +44,9 @@ onMounted(() => {
     label: '年龄',
     placeholder: '请输入年龄',
     component: '',
-    component_type: 'number',
+    component_props: {
+      name: 'number'
+    },
     required: false,
   }, {
     key: 'gender',
@@ -50,7 +54,9 @@ onMounted(() => {
     label: '性别',
     placeholder: '',
     component: '',
-    component_type: 'radio',
+    component_props: {
+      name: 'radio'
+    },
     options: [{
       key: '男',
       value: '男'
@@ -64,7 +70,9 @@ onMounted(() => {
     label: '兴趣爱好',
     placeholder: '',
     component: '',
-    component_type: 'checkbox',
+    component_props: {
+      name: 'checkbox'
+    },
     options: [{
       key: '足球',
       value: '足球'
@@ -78,14 +86,18 @@ onMounted(() => {
     label: '留言',
     placeholder: '请输入留言',
     component: '',
-    component_type: 'textarea',
+    component_props: {
+      name: 'textarea'
+    },
   }, {
     key: 'vehicle',
-    value: '',
+    value: '自行车',
     label: '交通工具',
     placeholder: '请选择交通工具',
     component: '',
-    component_type: 'picker',
+    component_props: {
+      name: 'picker'
+    },
     options: [
       { text: '自行车', value: '自行车' },
       { text: '汽车', value: '汽车' },
@@ -98,7 +110,20 @@ onMounted(() => {
     city_code: '120101',
     label: '省市区',
     placeholder: '请选择省市区',
-    component_type: 'area_picker'
+    component_props: {
+      name: 'area_picker'
+    },
+  }, {
+    key: 'datetime',
+    value: [],
+    label: '日期选择',
+    placeholder: '请选择日期',
+    component_props: {
+      name: 'date_picker',
+      title: '请选择',
+      min_date: new Date(),
+      columns_type: ['year', 'month']
+    },
   }];
   // 生成自定义组件
   createComponentType(mockData.value)