表单无法回显bug

src/components/formList.vue

@@ -64,7 +64,7 @@
           :label-width="labelWidth"
           type="radio"
         />
-
+
         <!-- 时间戳 -->
         <wd-calendar
           v-if="item.__config__.jnpfKey === 'date'"
@@ -114,10 +114,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  dataForm: {
-    type: Object,
-    default: () => ({}),
-  },
   rules: {
     type: Object,
     default: () => ({}),
@@ -143,20 +139,16 @@ const props = defineProps({
     default: null,
   },
 });
-
-const {
-  refName,
-  formKey,
-  id,
-  dataForm,
-  rules,
-  oldFormData,
-  formItemBorder,
-  labelWidth,
-  filedList,
-  uplodKey,
-} = toRefs(props);
-console.log('🚀 ~ filedList,:', filedList);
+
+const { formKey, id, rules, oldFormData, formItemBorder, labelWidth, filedList, uplodKey } =
+  toRefs(props);
+const dataForm = ref({});
+watch(
+  () => oldFormData.value,
+  (newVal) => {
+    dataForm.value = JSON.parse(newVal || '{}');
+  }
+);
 const form = ref();
 const toast = useToast();
 function handleSubmit() {
@@ -171,8 +163,8 @@ function handleSubmit() {
               fileld: item.fileld,
               url: item.fileld,
             };
-          })
-        }
+          });
+        }
         const params = {
           id: id.value,
           formKey: formKey.value,
@@ -193,26 +185,26 @@ function handleSubmit() {
                 fileld: item.fileld,
                 url: config.baseURL + item.fileld,
               };
-            })
-          }
-
+            });
+          }
+
           if (res.code === 200) {
             toast.success('更新成功');
           } else {
             toast.error('提交失败');
-          }
+          }
         });
-      }
+      }
     })
     .catch((error) => {
       console.log(error, 'error');
-    })
-}
+    });
+}
 watch(
   () => filedList.value,
   (newVal) => {
     initSelectOptions();
-  }
+  }
 );
 function initSelectOptions() {
   filedList.value.forEach((item) => {
@@ -227,7 +219,7 @@ function initSelectOptions() {
             [item.__config__.props.label]: dataForm.value[item.__vModel__],
           },
         ];
-      }
+      }
     } //   DemoApi.getSelectOptionsUrl(item.__config__.propsUrl).then((res) => {
     //     let url = 'bi-api' + res.data.apiUrl;
     //     // 去除第一位的/
@@ -243,18 +235,18 @@ function initSelectOptions() {
     //   item.selectOptions = item.__slot__.options || [];
     // }
   });
-}
-
+}
+
 function handleChangeFile({ fileList }) {
   // 如果不是数组
   const arr = [];
   if (!Array.isArray(fileList)) {
     fileList = [];
-  }
+  }
   for (let i = 0; i < fileList.length; i++) {
     const val = fileList[i];
     const response = JSON.parse(val.response);
-
+
     if (response.code === 200) {
       const obj = {
         url: config.baseURL + response.msg,
@@ -262,10 +254,10 @@ function handleChangeFile({ fileList }) {
         fileld: response.msg,
       };
       arr.push(obj);
-    }
+    }
   }
   dataForm.value[uplodKey.value] = arr;
-}
+}
 </script>
 <style lang="scss" scoped>
 .footer {

src/pages/settlement/form.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="settlement-form">
     <form-list
+      :key="showFormList"
       :id="id"
       :filed-list="formDataSet.fields"
       :form-key="formKey"
-      :data-form="dataForm"
       :uplod-key="544"
       :old-form-data="JSON.stringify(dataForm)"
     />
@@ -14,7 +14,7 @@
 import DemoApi from '@/api/DemoApi';
 import formList from '@/components/formList.vue';
 import config from '@/http/config';
-
+
 const formKey = ref<string>('');
 const id = ref<string>('');
 const filedsData = ref<Object>([]);
@@ -23,10 +23,11 @@ onLoad((option) => {
   filedsData.value = JSON.parse(option.filedsData || '{}');
   id.value = filedsData.value.id;
   init();
-})
+});
 const formDataSet = ref({});
 const dataForm = ref({});
 const rules = ref({});
+const showFormList = ref(1);
 function init() {
   DemoApi.getConfig(formKey.value).then((res) => {
     formDataSet.value = JSON.parse(res.data.formData || '{}');
@@ -39,21 +40,21 @@ function init() {
         rules.value[item.__vModel__] = [
           { required: true, message: item.__config__.label + '未填写' },
         ];
-      }
+      }
     });
-
+
     Object.keys(obj).map((key) => {
       Object.values(filedsData.value).map((item) => {
         if (parseInt(item.fieldId) === parseInt(key)) {
           obj[key] = item.value;
-        }
+        }
       });
       if (objAllSet[key] === 'date') {
         obj[key] = new Date(obj[key]).getTime();
-      }
+      }
       if (objAllSet[key] === 'uploadImg') {
         // 如果返回字符串长度大于3则转成数组
-        if (obj[key]) {
+        if (obj[key] != null && obj[key].indexOf('[') > -1) {
           obj[key] = JSON.parse(obj[key]);
           obj[key] = obj[key].map((item) => {
             return {
@@ -61,13 +62,14 @@ function init() {
               name: item.name,
               fileld: item.fileld,
             };
-          })
+          });
         } else {
           obj[key] = [];
-        }
+        }
       }
     });
     dataForm.value = obj;
-  })
-}
+    showFormList.value += 1;
+  });
+}
 </script>