✨ feat(预约时间控件): 自定义表单项钩子函数改造

+<!--
+ * @Date: 2023-03-28 15:38:09
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-28 16:10:58
+ * @FilePath: /data-table/src/components/AppointmentField/MyComponent.vue
+ * @Description: 自定义组件
+-->
+<template>
+  <div style="width: 100%;">
+    <van-row v-for="(opt, index) in props.component_props.options" :key="index">
+      <van-col span="7">
+        <div style="font-size: 1rem; line-height: 3;">{{ opt.title }}</div>
+      </van-col>
+      <van-col span="17">
+        <van-field
+          v-model="opt.value"
+          is-link
+          readonly
+          :placeholder="opt.placeholder"
+          @click="onClick(index, opt)"
+          :border="false"
+        />
+      </van-col>
+    </van-row>
+  </div>
+  <van-popup v-model:show="showPicker" position="bottom">
+    <van-picker
+      :title="props.component_props.appointment_title"
+      :columns="columns"
+      @confirm="onConfirm"
+      @cancel="showPicker = false"
+    />
+  </van-popup>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue'
+import { useCustomFieldValue } from '@vant/use';
+import { styleColor } from "@/constant.js";
+import { showDialog } from 'vant';
+
+// 获取父组件传值
+const props = inject('props');
+
+const showPicker = ref(false);
+const picker_value = ref('');
+const columns = ref([]);
+const current_index = ref(0);
+
+const onClick = (index, opt) => {
+  if (opt.disabled) {
+    showDialog({
+      title: '温馨提示',
+      message: '暂时不能预约！',
+      theme: 'round-button',
+      width: '320px',
+      confirmButtonColor: styleColor.baseColor
+    }).then(() => {
+      // on close
+    });
+    return false;
+  }
+  current_index.value = index;
+  columns.value = props.component_props.options[index]['columns'];
+  showPicker.value = true;
+}
+
+const onConfirm = ({ selectedOptions }) => {
+  props.component_props.options.forEach(item => {
+    item.value = ''
+  })
+  props.component_props.options[current_index.value]['value'] = selectedOptions[0]?.text;
+  picker_value.value = selectedOptions[0]?.value;
+  showPicker.value = false;
+};
+
+// 此处传入的值会替代 Field 组件内部的 value
+useCustomFieldValue(() => picker_value.value);
+</script>
+
+<style lang="less" scoped>
+
+:deep(.van-cell--clickable) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+}
+</style>

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-27 17:52:50
+ * @LastEditTime: 2023-03-28 16:16:47
  * @FilePath: /data-table/src/components/AppointmentField/index.vue
- * @Description: 描述文本控件
+ * @Description: 预约时间控件
 -->
 <template>
   <div class="Appointment-field-page">
@@ -11,99 +11,46 @@
       <span v-if="item.component_props.required">&nbsp;*</span>
       {{ item.component_props.label }}
     </div>
-    <van-row v-for="(opt, index) in item.component_props.options" :key="index" style="padding: 0 1rem 0rem 1rem;">
-      <van-col span="6">
-        <div style="font-size: 1rem; line-height: 3;">{{ opt.title }}</div>
-      </van-col>
-      <van-col span="18">
-        <van-field
-          v-model="opt.value"
-          is-link
-          readonly
-          :placeholder="opt.placeholder"
-          @click="onClick(index, opt)"
-          :border="false"
-          style="width: 100%;"
-        />
-      </van-col>
-    </van-row>
-    <div
-      v-if="show_empty"
-      class="van-field__error-message"
-      style="padding: 0 1rem 1rem 1rem"
-    >
-      预约时间不能为空
-    </div>
+    <van-field :name="item.name" :rules="rules">
+      <template #input>
+        <my-component />
+      </template>
+    </van-field>
   </div>
-  <van-popup v-model:show="showPicker" position="bottom">
-    <van-picker
-      :title="item.component_props.appointment_title"
-      :columns="columns"
-      @confirm="onConfirm"
-      @cancel="showPicker = false"
-    />
-  </van-popup>
 </template>
 
 <script setup>
-import { styleColor } from "@/constant.js";
-import { showDialog } from 'vant';
+import { provide } from 'vue'
+import MyComponent from './MyComponent.vue';
 
 const props = defineProps({
   item: Object,
 });
-const emit = defineEmits(["active"]);
-const showPicker = ref(false);
-const picker_value = ref(props.item.component_props.default);
-const columns = ref([])
-const current_index = ref(0)
-const show_empty = ref(false);
-
-const onClick = (index, opt) => {
-  if (opt.disabled) {
-    showDialog({
-      title: '温馨提示',
-      message: '暂时不能预约！',
-      theme: 'round-button',
-      width: '320px',
-      confirmButtonColor: styleColor.baseColor
-    }).then(() => {
-      // on close
-    });
-    return false;
-  }
-  current_index.value = index;
-  columns.value = props.item.component_props.options[index]['columns'];
-  showPicker.value = true
-}
 
-const onConfirm = ({ selectedOptions }) => {
-  props.item.component_props.options.forEach(item => {
-    item.value = ''
-  })
-  props.item.component_props.options[current_index.value]['value'] = selectedOptions[0]?.text;
-  picker_value.value = selectedOptions[0]?.value;
-  showPicker.value = false;
-  // 触发点自定义监听事件，配合规则显示隐藏其他字段
-  props.item.value = { key: props.item.key, value: picker_value.value, type: "appointment" };
-  emit("active", props.item.value);
-};
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 
-const validAppointment = () => {
-  // 必填项
-  if (props.item.component_props.required && !picker_value.value) {
-    show_empty.value = true;
+// 注入子组件属性
+provide('props', props.item);
+
+// 规则校验
+const required = props.item.component_props.required;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
   } else {
-    show_empty.value = false;
+    return true;
   }
-  return !show_empty.value;
 };
-
-defineExpose({ validAppointment });
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "必填项不能为空";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
 </script>
 
 <style lang="less" scoped>
@@ -123,10 +70,4 @@ defineExpose({ validAppointment });
 //   border-radius: 0.25rem;
 //   padding: 0.25rem 0.5rem;
 // }
-:deep(.van-cell--clickable) {
-  border: 1px solid #eaeaea;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  margin-top: 0.5rem;
-}
 </style>