✨ feat: 新增日期选择控件

hookehuyr
Commit 71a4877355de466c31f8bbe790f82e1d1903800d 71a48773 1 parent f9226e9d
Showing 4 changed files with 100 additions and 20 deletions
src/components/DatePickerField/index.vue
src/hooks/useComponentType.js
src/main.js
src/views/index.vue
--- a/src/components/DatePickerField/index.vue 0 → 100644
View file @71a4877
+++ b/src/components/DatePickerField/index.vue 0 → 100644
View file @71a4877
+<!--
+ * @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>
--- a/src/hooks/useComponentType.js
View file @71a4877
+++ b/src/hooks/useComponentType.js
View file @71a4877
@@ -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;
+    }
   })
 }
--- a/src/main.js
View file @71a4877
+++ b/src/main.js
View file @71a4877
@@ -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');
--- a/src/views/index.vue
View file @71a4877
+++ b/src/views/index.vue
View file @71a4877
 <!--
  * @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)