✨ feat(评分控件): 样式和功能调整

hookehuyr
Commit 19b5836ba95fa389c10c849559550cac97d05158 19b5836b 1 parent f31de368
Showing 4 changed files with 35 additions and 29 deletions
components.d.ts
src/components/RatePickerField/index.vue
src/hooks/useComponentType.js
src/pages/table/index.vue
--- a/components.d.ts
View file @19b5836
+++ b/components.d.ts
View file @19b5836
@@ -45,6 +45,7 @@ declare module '@vue/runtime-core' {
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutRadio: typeof import('@nutui/nutui-taro')['Radio']
     NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
+    NutRate: typeof import('@nutui/nutui-taro')['Rate']
     NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
     NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
     NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
--- a/src/components/RatePickerField/index.vue
View file @19b5836
+++ b/src/components/RatePickerField/index.vue
View file @19b5836
 <!--
  * @Date: 2022-09-08 15:47:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-31 22:57:40
+ * @LastEditTime: 2023-04-10 16:01:09
- * @FilePath: /data-table/src/components/RatePickerField/index.vue
+ * @FilePath: /custom_form/src/components/RatePickerField/index.vue
  * @Description: 评分选择控件
 -->
 <template>
   <div v-if="HideShow" class="rate-field">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
+      <text v-if="item.component_props.required">&nbsp;*</text>
       {{ item.component_props.label }}
     </div>
-    <van-rate
+    <nut-rate
       v-model="rate_value"
       :count="item.component_props.data_length"
       :readonly="item.component_props.readonly"
-      :color="styleColor.baseColor"
+      :active-color="styleColor.baseColor"
       @change="onChange"
-      style="padding: 1rem"
+      style="overflow: scroll; width: 100%;"
     />
     <div
-      v-if="show_empty"
+      v-if="show_error"
-      class="van-field__error-message"
+      style="padding: 5px; color: red; font-size: 12px;"
-      style="padding: 0 1rem 1rem 1rem"
     >
-      评分不能为空
+      {{ error_msg }}
     </div>
-    <van-divider />
+    <nut-divider  :style="{ color: '#ebedf0' }" />
   </div>
 </template>
 <script setup>
+import { ref, computed, watch, onMounted, reactive } from "vue";
 import { styleColor } from "@/constant.js";
 const props = defineProps({
@@ -41,7 +41,9 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 const emit = defineEmits(["active"]);
-const show_empty = ref(false);
+// 错误提示
+const show_error = ref(false);
+const error_msg = ref('');
 const rate_value = ref(props.item.component_props.default);
 const onChange = (value) => {
@@ -56,27 +58,30 @@ onMounted(() => {
 const validRate = () => {
   // 必填项
-  if (props.item.component_props.required && !rate_value.value) {
+  if (props.item.component_props.required && !+rate_value.value) {
-    show_empty.value = true;
+    show_error.value = true;
+    error_msg.value = '必填项不能为空'
   } else {
-    show_empty.value = false;
+    show_error.value = false;
+    error_msg.value = ''
   }
-  return !show_empty.value;
+  return !show_error.value;
 };
 defineExpose({ validRate });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .rate-field {
+  margin: 1rem;
   .label {
-    padding: 1rem 1rem 0 1rem;
+  padding-bottom: 20px;
-    font-size: 0.9rem;
+  font-size: 26px;
   font-weight: bold;
-    span {
+  text {
     color: red;
   }
-  }
+}
 }
 </style>
--- a/src/hooks/useComponentType.js
View file @19b5836
+++ b/src/hooks/useComponentType.js
View file @19b5836
@@ -13,7 +13,7 @@ import DateTimePickerField from '@/components/DateTimePickerField/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'
+import RatePickerField from '@/components/RatePickerField/index.vue'
 // import CalendarField from '@/components/CalendarField/index.vue'
 import IdentityField from '@/components/IdentityField/index.vue'
 import NumberField from '@/components/NumberField/index.vue'
@@ -123,10 +123,10 @@ export function createComponentType(data) {
     //   item.name = item.key
     //   item.component = SignField
     // }
-    // if (item.component_props.tag === 'rate') {
+    if (item.component_props.tag === 'rate') {
-    //   item.name = item.key
+      item.name = item.key
-    //   item.component = RatePickerField
+      item.component = RatePickerField
-    // }
+    }
     // if (item.component_props.tag === 'calendar') {
     //   item.name = item.key
     //   item.component = CalendarField
--- a/src/pages/table/index.vue
View file @19b5836
+++ b/src/pages/table/index.vue
View file @19b5836
 <!--
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-04-10 14:38:57
+ * @LastEditTime: 2023-04-10 15:58:46
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
 -->
@@ -202,7 +202,7 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "sign") {
       sign.value.push(el);
     }
-    if (item.component_props.tag === "rate_picker") {
+    if (item.component_props.tag === "rate") {
       rate_picker.value.push(el);
     }
   }
@@ -483,7 +483,7 @@ const onActive = (item) => {
     postData.value[item.filed_name] = item.value;
   }
   if (item.type === "rate") {
-    postData.value = _.assign(postData.value, { [item.key]: item.value });
+    postData.value = Object.assign(postData.value, { [item.key]: item.value });
   }
   if (item.key === "picker") { // 下拉框控件
     postData.value = Object.assign(postData.value, { [item.filed_name]: item.value });