fix 动态绑定ref值修复

@@ -27,9 +27,9 @@
       <van-form @submit="onSubmit">
         <van-cell-group :border="false">
           <component
-            :id="item.key"
-            :ref="item.component_props.name"
             v-for="(item, index) in formData"
+            :id="item.key"
+            :ref="(el) => setRefMap(el, item)"
             :key="index"
             :is="item.component"
             :item="item"
@@ -49,6 +49,16 @@
   </div>
 </template>
 
+<script>
+export default {
+  mounted() {
+    setTimeout(() => {
+      // console.warn(this.$refs);
+    }, 100);
+  },
+};
+</script>
+
 <script setup>
 import "@vant/touch-emulator";
 import { createComponentType } from "@/hooks/useComponentType";
@@ -115,6 +125,30 @@ const formatData = (data) => {
   return arr;
 };
 
+// 处理没有绑定值的组件的赋值
+// 图片上传，文件上传，电子签名，评分组件
+const image_uploader = ref([]);
+const file_uploader = ref([]);
+const sign = ref([]);
+const rate_picker = ref([]);
+// 动态绑定ref数据
+const setRefMap = (el, item) => {
+  if (el) {
+    if (item.component_props.name === "image_uploader") {
+      image_uploader.value.push(el);
+    }
+    if (item.component_props.name === "file_uploader") {
+      file_uploader.value.push(el);
+    }
+    if (item.component_props.name === "sign") {
+      sign.value.push(el);
+    }
+    if (item.component_props.name === "rate_picker") {
+      rate_picker.value.push(el);
+    }
+  }
+};
+
 onMounted(async () => {
   const { data } = await queryFormAPI({ form_code: $route.query.code });
   const form_data = data[0];
@@ -168,13 +202,6 @@ onMounted(async () => {
   createComponentType(formData.value);
 });
 
-// 处理没有绑定值的组件的赋值
-// 图片上传，文件上传，电子签名，评分组件
-const image_uploader = ref(null);
-const file_uploader = ref(null);
-const sign = ref(null);
-const rate_picker = ref(null);
-
 // 操作绑定自定义字段回调
 const onActive = (item) => {
   if (item.key === "image_uploader") {
@@ -251,30 +278,26 @@ const validOther = () => {
 const onSubmit = async (values) => {
   // 合并自定义字段到提交表单字段
   postData.value = _.assign(postData.value, values);
-  // 格式化value值为json格式, 提交格式有问题
-  // for (let key in postData.value) {
-  //   key = JSON.stringify(key);
-  //   // postData.value[key] = postData.value[key];
-  // }
   // 检查非表单输入项
   if (validOther().status) {
     // 通过验证
     const result = await addFormDataAPI({
       form_code: $route.query.code,
-      // data: JSON.stringify(postData.value),
       data: postData.value,
     });
     if (result.code) {
       showSuccessToast("提交成功");
     }
-    // console.warn(postData.value);
-    // console.warn("通过验证");
   } else {
     console.warn(validOther().key + "不通过验证");
-    // 图片上传控件报错提示
-    if (validOther().key === "image_uploader") {
-      showFailToast("图片上传为空");
-    }
+    // // 图片上传控件报错提示
+    // if (validOther().key === "image_uploader") {
+    //   showFailToast("图片上传为空");
+    // }
+    // // 文件上传控件报错提示
+    // if (validOther().key === "file_uploader") {
+    //   showFailToast("文件上传为空");
+    // }
   }
 };
 </script>