Showing
1 changed file
with
44 additions
and
21 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment