✨ feat: 新增评分模块

hookehuyr
Commit a7e4727aff01e1492bf0ce3511abd7faa5c3fc6a a7e4727a 1 parent 2344a121
Showing 4 changed files with 95 additions and 12 deletions
src/components/RatePickerField/index.vue
src/hooks/useComponentType.js
src/main.js
src/views/index.vue
--- a/src/components/RatePickerField/index.vue 0 → 100644
View file @a7e4727
+++ b/src/components/RatePickerField/index.vue 0 → 100644
View file @a7e4727
+<!--
+ * @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>
--- a/src/hooks/useComponentType.js
View file @a7e4727
+++ b/src/hooks/useComponentType.js
View file @a7e4727
@@ -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;
+    }
   })
 }
--- a/src/main.js
View file @a7e4727
+++ b/src/main.js
View file @a7e4727
@@ -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');
--- a/src/views/index.vue
View file @a7e4727
+++ b/src/views/index.vue
View file @a7e4727
 <!--
  * @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',
+    key: 'rate',
-    value: '2022-06-01 12:00',
+    value: '',
-    label: '日期时间',
+    label: '评分',
-    placeholder: '请选择日期时间',
+    placeholder: '请选择评分',
     component_props: {
-      name: 'datetime_picker',
+      name: 'rate_picker',
-      title: '请选择',
+      count: 10
-      minDate: new Date(),
     },
     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>