✨ feat: 新增评分模块

+<!--
+ * @Date: 2022-09-08 15:47:54
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-08 16:20:11
+ * @FilePath: /data-table/src/components/RatePickerField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="rate-field">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-rate v-model="rate_value" :count="item.component_props.count" @change="onChange" style="padding: 1rem;" />
+    <div v-if="show_empty" class="van-field__error-message" style="padding: 0 1rem 1rem 1rem;">评分不能为空</div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+});
+const emit = defineEmits(['active']);
+const show_empty = ref(false);
+const rate_value = ref(0);
+
+const onChange = () => {
+  props.item.value = { key: 'rate', value: rate_value.value };
+  emit('active', props.item.value);
+}
+
+onMounted(() => {
+  props.item.value = { key: 'rate', value: rate_value.value };
+  emit('active', props.item.value);
+});
+
+const validRate = () => {
+  // 必填项
+  if (props.item.required && !rate_value.value) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value
+}
+
+defineExpose({ validRate });
+</script>
+
+<style lang="less" scoped>
+.rate-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -13,6 +13,7 @@ import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 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'
 
 /**
  * 生成自定义组件类型
@@ -30,6 +31,7 @@ import SignField from '@/components/SignField/index.vue'
  * @type phone 手机输入框 PhoneField
  * @type email 邮箱输入框 EmailField
  * @type sign 电子签名输入框 SignField
+ * @type rate_picker 评分选择器 RatePickerField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -91,5 +93,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = SignField;
     }
+    if (item.component_props.name === 'rate_picker') {
+      item.name = item.key;
+      item.component = RatePickerField;
+    }
   })
 }

@@ -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:06:26
+ * @LastEditTime: 2022-09-08 15:47:18
  * @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 } 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 } 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);
+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(vueEsign)
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 15:22:09
+ * @LastEditTime: 2022-09-08 17:50:25
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -205,15 +205,26 @@ onMounted(() => {
   //     multiple: false
   //   }
   // }
+  // {
+  //   key: 'datetime',
+  //   value: '2022-06-01 12:00',
+  //   label: '日期时间',
+  //   placeholder: '请选择日期时间',
+  //   component_props: {
+  //     name: 'datetime_picker',
+  //     title: '请选择',
+  //     minDate: new Date(),
+  //   },
+  //   required: true,
+  // },
   {
-    key: 'datetime',
-    value: '2022-06-01 12:00',
-    label: '日期时间',
-    placeholder: '请选择日期时间',
+    key: 'rate',
+    value: '',
+    label: '评分',
+    placeholder: '请选择评分',
     component_props: {
-      name: 'datetime_picker',
-      title: '请选择',
-      minDate: new Date(),
+      name: 'rate_picker',
+      count: 10
     },
     required: true,
   }
@@ -223,6 +234,7 @@ onMounted(() => {
 })
 
 const sign = ref(null);
+const rate_picker = ref(null);
 
 const onSubmit = (values) => {
   // 合并自定义字段到提交表单字段
@@ -230,8 +242,8 @@ const onSubmit = (values) => {
   // console.warn(mockData.value);
   // 检查非表单输入项
   if (validOther()) { // 通过验证
-    console.warn('通过验证');
     console.warn(postData.value);
+    console.warn('通过验证');
   } else {
     console.warn('不通过验证');
   }
@@ -242,6 +254,9 @@ const onActive = (item) => {
   if (item.key === 'sign') {
     postData.value['sign'] = item.value
   }
+  if (item.key === 'rate') {
+    postData.value['rate'] = item.value
+  }
 }
 
 const validOther = () => {
@@ -250,6 +265,9 @@ const validOther = () => {
   if (sign.value) { // 检验电子签名
     flag = sign.value[0].validSign();
   }
+  if (rate_picker.value) { // 检验评分
+    flag = rate_picker.value[0].validRate();
+  }
   return flag;
 }
 </script>