✨ feat: 新增日历选择控件

hookehuyr
Commit c6c35bead6bcf658a9e8d6de6ae82d1237e78d64 c6c35bea 1 parent 3ab96b6f
Showing 4 changed files with 135 additions and 13 deletions
src/components/CalendarField/index.vue
src/hooks/useComponentType.js
src/main.js
src/views/index.vue
--- a/src/components/CalendarField/index.vue 0 → 100644
View file @c6c35be
+++ b/src/components/CalendarField/index.vue 0 → 100644
View file @c6c35be
+<!--
+ * @Date: 2022-09-14 11:00:01
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-14 14:24:41
+ * @FilePath: /data-table/src/components/CalendarField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="calendar-page">
+    <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="show = true" />
+    <van-calendar v-model:show="show"
+      :type="item.component_props.type" :max-range="item.component_props.maxRange"
+      :min-date="item.component_props.minDate" :max-date="item.component_props.maxDate"
+      :formatter="formatter"
+      first-day-of-week="1"
+      @month-show="onMonthShow"
+      @confirm="onConfirm" allow-same-day />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+
+const show = ref(false);
+
+const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+const onConfirm = (value) => {
+  console.warn(props.item.component_props.type);
+  show.value = false;
+  if (props.item.component_props.type === 'range') { // 日期区间
+    const [start, end] = value;
+    props.item.value = `${formatDate(start)} ~ ${formatDate(end)}`;
+  } else if (props.item.component_props.type === 'multiple') { // 多个日期
+    const arr = []
+    value.forEach(element => {
+      arr.push(formatDate(element))
+    });
+    props.item.value = arr.join(',');
+  } else {
+    props.item.value = formatDate(value);
+  }
+};
+
+// 每一格内容格式化
+const formatter = (day) => {
+  const month = day.date.getMonth() + 1;
+  const date = day.date.getDate();
+  const year = day.date.getFullYear();
+
+  if (month === 5) {
+    if (date === 1) {
+      day.topInfo = '劳动节';
+    } else if (date === 4) {
+      day.topInfo = '青年节';
+    } else if (date === 11) {
+      day.text = '今天';
+    }
+  }
+
+  if (month === 10) {
+    if (date === 1) {
+      day.topInfo = '国庆节';
+      day.type = 'disabled'
+    }
+  }
+
+  if (day.type === 'start') {
+    day.bottomInfo = '开始';
+  } else if (day.type === 'end') {
+    day.bottomInfo = '结束';
+  }
+
+  return day;
+};
+
+const onMonthShow = ({ date, title }) => {
+  // console.warn(date);
+  // console.warn(title);
+  if (title === '2022年12月') {
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+.calendar-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>
--- a/src/hooks/useComponentType.js
View file @c6c35be
+++ b/src/hooks/useComponentType.js
View file @c6c35be
@@ -14,6 +14,7 @@ import PhoneField from '@/components/PhoneField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
 import SignField from '@/components/SignField/index.vue'
 import RatePickerField from '@/components/RatePickerField/index.vue'
+import CalendarField from '@/components/CalendarField/index.vue'
 /**
  * 生成自定义组件类型
@@ -32,6 +33,7 @@ import RatePickerField from '@/components/RatePickerField/index.vue'
  * @type email 邮箱输入框 EmailField
  * @type sign 电子签名输入框 SignField
  * @type rate_picker 评分选择器 RatePickerField
+ * @type calendar 日历选择器 CalendarField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -97,5 +99,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = RatePickerField;
     }
+    if (item.component_props.name === 'calendar') {
+      item.name = item.key;
+      item.component = CalendarField;
+    }
   })
 }
--- a/src/main.js
View file @c6c35be
+++ b/src/main.js
View file @c6c35be
@@ -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 15:47:18
+ * @LastEditTime: 2022-09-14 11:05:31
  * @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, PickerGroup, Rate } 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, Rate, Calendar } 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).use(PickerGroup).use(Rate);
+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).use(Rate).use(Calendar);
 app.use(vueEsign)
 app.mount('#app');
--- a/src/views/index.vue
View file @c6c35be
+++ b/src/views/index.vue
View file @c6c35be
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-13 17:46:30
+ * @LastEditTime: 2022-09-14 14:38:05
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -46,19 +46,34 @@ onMounted(() => {
   //   },
   //   required: true,
   // },
+  // {
+  //   key: 'username',
+  //   value: 'test',
+  //   label: '用户名',
+  //   placeholder: '请输入用户名',
+  //   component: '',
+  //   component_props: {
+  //     name: 'text',
+  //     // readonly: true,
+  //     // disabled: true,
+  //     // align: 'left',
+  //   },
+  //   required: true,
+  // },
   {
-    key: 'username',
+    key: 'date',
-    value: 'test',
+    value: '',
-    label: '用户名',
+    label: '日历选择',
-    placeholder: '请输入用户名',
+    placeholder: '请选择日历日期',
     component: '',
     component_props: {
-      name: 'text',
+      name: 'calendar',
-      // readonly: true,
+      type: 'range', // 日期区间 ['multiple', 'range']
-      // disabled: true,
+      minDate: new Date(2022, 0, 1), // 最小日期
-      // align: 'left',
+      maxDate: new Date(2023, 0, 31), // 最大日期
+      maxRange: 5, // 最大可选天数
     },
-    required: true,
+    required: false,
   },
   // {
   //   key: 'email',