✨ feat(下拉控件): 自定义表单项钩子函数改造

+<!--
+ * @Date: 2023-03-29 14:55:46
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-29 15:05:01
+ * @FilePath: /data-table/src/components/PickerField/MyComponent.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div style="width: 100%;">
+    <van-field
+      v-model="picker_value"
+      is-link
+      readonly
+      :name="props.key"
+      :required="props.component_props.required"
+      :placeholder="props.component_props.placeholder"
+      @click="showPicker = true"
+      :border="false"
+    />
+    <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker
+        :columns="props.component_props.options"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useCustomFieldValue } from '@vant/use';
+
+// 获取父组件传值
+const props = inject('props');
+
+const showPicker = ref(false);
+const picker_value = ref(props.component_props.default);
+
+const onConfirm = ({ selectedOptions }) => {
+  picker_value.value = selectedOptions[0]?.value;
+  showPicker.value = false;
+  // 触发点自定义监听事件，配合规则显示隐藏其他字段
+  // props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
+  // emit("active", props.item.value);
+  // if (add_info_key.value === props.item.value) {
+  //   has_add_info.value = true;
+  // }
+};
+
+// 此处传入的值会替代 Field 组件内部的 value
+useCustomFieldValue(() => picker_value.value);
+
+// 绑定值发生变化时回调，处理选项为其他时的输入项录入
+// const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
+// const add_info = ref('');
+// const add_info_name = ref(props.item.key + '#');
+// const add_info_key = ref('其他'); // TODO: 以后动态获取
+
+// onMounted(() => {
+  // add_info_name.value = `${props.item.key}#${add_info_key.value}`
+  // props.item.component_props.options = props.item.component_props.options.map((opt) => {
+  //   return {
+  //     text: opt,
+  //     value: opt,
+  //   };
+  // });
+// });
+</script>
+
+<style lang="less" scoped>
+
+</style>

 <!--
  * @Date: 2022-08-30 13:46:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-27 16:55:35
+ * @LastEditTime: 2023-03-29 15:07:12
  * @FilePath: /data-table/src/components/PickerField/index.vue
  * @Description: 单列选择器组件
 -->
@@ -11,68 +11,29 @@
       <span v-if="item.component_props.required">&nbsp;*</span>
       {{ item.component_props.label }}
     </div>
-    <van-field
-      v-model="picker_value"
-      is-link
-      readonly
-      :name="item.key"
-      :required="item.component_props.required"
-      :placeholder="item.component_props.placeholder"
-      :rules="item.rules"
-      @click="showPicker = true"
-      :border="false"
-    />
-    <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
-    <van-popup v-model:show="showPicker" position="bottom">
-      <van-picker
-        :columns="item.component_props.options"
-        @confirm="onConfirm"
-        @cancel="showPicker = false"
-      />
-    </van-popup>
+    <van-field :name="item.name" :rules="item.rules" style="padding: 0;">
+      <template #input>
+        <my-component />
+      </template>
+    </van-field>
   </div>
 </template>
 
 <script setup>
+import MyComponent from './MyComponent.vue';
+
 const props = defineProps({
   item: Object,
 });
-const emit = defineEmits(["active"]);
-
-// 绑定值发生变化时回调，处理选项为其他时的输入项录入
-// const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
-// const add_info = ref('');
-// const add_info_name = ref(props.item.key + '#');
-// const add_info_key = ref('其他'); // TODO: 以后动态获取
 
-onMounted(() => {
-  // add_info_name.value = `${props.item.key}#${add_info_key.value}`
-  // props.item.component_props.options = props.item.component_props.options.map((opt) => {
-  //   return {
-  //     text: opt,
-  //     value: opt,
-  //   };
-  // });
-});
+// 注入子组件属性
+provide('props', props.item);
 
-const selectedValues = ref("");
-const showPicker = ref(false);
-const picker_value = ref(props.item.component_props.default);
-
-const onConfirm = ({ selectedOptions }) => {
-  picker_value.value = selectedOptions[0]?.value;
-  showPicker.value = false;
-  // 触发点自定义监听事件，配合规则显示隐藏其他字段
-  props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
-  emit("active", props.item.value);
-  // if (add_info_key.value === props.item.value) {
-  //   has_add_info.value = true;
-  // }
-};
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-29 13:19:06
+ * @LastEditTime: 2023-03-29 15:05:26
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -437,9 +437,6 @@ const onActive = (item) => {
   if (item.key === "sign") {
     postData.value[item.filed_name] = item.value;
   }
-  if (item.type === "picker") { // 下拉框控件
-    postData.value = _.assign(postData.value, { [item.key]: item.value });
-  }
   if (item.type === "radio") { // 单选控件
     postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
   }