hookehuyr

fix 动态绑定ref值修复

...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
27 <van-form @submit="onSubmit"> 27 <van-form @submit="onSubmit">
28 <van-cell-group :border="false"> 28 <van-cell-group :border="false">
29 <component 29 <component
30 - :id="item.key"
31 - :ref="item.component_props.name"
32 v-for="(item, index) in formData" 30 v-for="(item, index) in formData"
31 + :id="item.key"
32 + :ref="(el) => setRefMap(el, item)"
33 :key="index" 33 :key="index"
34 :is="item.component" 34 :is="item.component"
35 :item="item" 35 :item="item"
...@@ -49,6 +49,16 @@ ...@@ -49,6 +49,16 @@
49 </div> 49 </div>
50 </template> 50 </template>
51 51
52 +<script>
53 +export default {
54 + mounted() {
55 + setTimeout(() => {
56 + // console.warn(this.$refs);
57 + }, 100);
58 + },
59 +};
60 +</script>
61 +
52 <script setup> 62 <script setup>
53 import "@vant/touch-emulator"; 63 import "@vant/touch-emulator";
54 import { createComponentType } from "@/hooks/useComponentType"; 64 import { createComponentType } from "@/hooks/useComponentType";
...@@ -115,6 +125,30 @@ const formatData = (data) => { ...@@ -115,6 +125,30 @@ const formatData = (data) => {
115 return arr; 125 return arr;
116 }; 126 };
117 127
128 +// 处理没有绑定值的组件的赋值
129 +// 图片上传,文件上传,电子签名,评分组件
130 +const image_uploader = ref([]);
131 +const file_uploader = ref([]);
132 +const sign = ref([]);
133 +const rate_picker = ref([]);
134 +// 动态绑定ref数据
135 +const setRefMap = (el, item) => {
136 + if (el) {
137 + if (item.component_props.name === "image_uploader") {
138 + image_uploader.value.push(el);
139 + }
140 + if (item.component_props.name === "file_uploader") {
141 + file_uploader.value.push(el);
142 + }
143 + if (item.component_props.name === "sign") {
144 + sign.value.push(el);
145 + }
146 + if (item.component_props.name === "rate_picker") {
147 + rate_picker.value.push(el);
148 + }
149 + }
150 +};
151 +
118 onMounted(async () => { 152 onMounted(async () => {
119 const { data } = await queryFormAPI({ form_code: $route.query.code }); 153 const { data } = await queryFormAPI({ form_code: $route.query.code });
120 const form_data = data[0]; 154 const form_data = data[0];
...@@ -168,13 +202,6 @@ onMounted(async () => { ...@@ -168,13 +202,6 @@ onMounted(async () => {
168 createComponentType(formData.value); 202 createComponentType(formData.value);
169 }); 203 });
170 204
171 -// 处理没有绑定值的组件的赋值
172 -// 图片上传,文件上传,电子签名,评分组件
173 -const image_uploader = ref(null);
174 -const file_uploader = ref(null);
175 -const sign = ref(null);
176 -const rate_picker = ref(null);
177 -
178 // 操作绑定自定义字段回调 205 // 操作绑定自定义字段回调
179 const onActive = (item) => { 206 const onActive = (item) => {
180 if (item.key === "image_uploader") { 207 if (item.key === "image_uploader") {
...@@ -251,30 +278,26 @@ const validOther = () => { ...@@ -251,30 +278,26 @@ const validOther = () => {
251 const onSubmit = async (values) => { 278 const onSubmit = async (values) => {
252 // 合并自定义字段到提交表单字段 279 // 合并自定义字段到提交表单字段
253 postData.value = _.assign(postData.value, values); 280 postData.value = _.assign(postData.value, values);
254 - // 格式化value值为json格式, 提交格式有问题
255 - // for (let key in postData.value) {
256 - // key = JSON.stringify(key);
257 - // // postData.value[key] = postData.value[key];
258 - // }
259 // 检查非表单输入项 281 // 检查非表单输入项
260 if (validOther().status) { 282 if (validOther().status) {
261 // 通过验证 283 // 通过验证
262 const result = await addFormDataAPI({ 284 const result = await addFormDataAPI({
263 form_code: $route.query.code, 285 form_code: $route.query.code,
264 - // data: JSON.stringify(postData.value),
265 data: postData.value, 286 data: postData.value,
266 }); 287 });
267 if (result.code) { 288 if (result.code) {
268 showSuccessToast("提交成功"); 289 showSuccessToast("提交成功");
269 } 290 }
270 - // console.warn(postData.value);
271 - // console.warn("通过验证");
272 } else { 291 } else {
273 console.warn(validOther().key + "不通过验证"); 292 console.warn(validOther().key + "不通过验证");
274 - // 图片上传控件报错提示 293 + // // 图片上传控件报错提示
275 - if (validOther().key === "image_uploader") { 294 + // if (validOther().key === "image_uploader") {
276 - showFailToast("图片上传为空"); 295 + // showFailToast("图片上传为空");
277 - } 296 + // }
297 + // // 文件上传控件报错提示
298 + // if (validOther().key === "file_uploader") {
299 + // showFailToast("文件上传为空");
300 + // }
278 } 301 }
279 }; 302 };
280 </script> 303 </script>
......