bug解决

src/components/ShowFormData.vue

@@ -51,7 +51,7 @@ const handleClickItem = (showMore) => {
       line-height: 24px;
       .left {
         text-align: right;
-        min-width: 60px;
+        min-width: 80px;
         color: #999999;
       }
       .right {

src/views/JXSK/afterSales/edit.vue

@@ -1,20 +1,8 @@
 <template>
   <div class="form">
-    <van-nav-bar
-      :title="$t('afterSales.name')"
-      :left-text="$t('common.back')"
-      left-arrow
-      @click-left="onClickLeft"
-    >
+    <van-nav-bar :title="$t('afterSales.name')" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft">
     </van-nav-bar>
-    <testForm
-      v-model="formData.data"
-      :formOption="formOption"
-      :formConfig="formConfig"
-      :rules="rules"
-      @onSubmit="onSubmit"
-      ref="formDom"
-    >
+    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" @onSubmit="onSubmit" ref="formDom">
       <template #top>
         <div style="width: 100%">
           <ShowFormData :data="formData.data" :config="topConfig">
@@ -22,55 +10,49 @@
         </div>
       </template>
 
+      <template #file>
+        <div style="width: 100%;">
+          <div v-if="
+            formData.data.fileList && formData.data.fileList.length > 0
+          ">
+            <span v-for="item in formData.data.fileList" :key="item.id" @click="onPreviewFile(item)"
+                  style="margin-right: 10px; cursor: pointer; color: #409eff">
+              {{ item.name }}
+            </span>
+          </div>
+          <div v-else>无</div>
+        </div>
+      </template>
+
+      <template #fileOne>
+        <div style="width: 100%">
+          <van-uploader v-model="formData.data.fileListOne" multiple :show-upload="false" />
+        </div>
+      </template>
+
       <template #list>
         <div style="width: 100%">
           <van-collapse v-model="activeNames">
-            <van-collapse-item
-              v-for="(item, index) in formData.data.bomDetailList"
-              :key="item.id"
-              :name="item.id"
-              :value="'[ ' + item.quantity + ' ]'"
-            >
+            <van-collapse-item v-for="(item, index) in formData.data.bomDetailList" :key="item.id" :name="item.id"
+                               :value="'[ ' + item.quantity + ' ]'">
               <template #title>
                 <div>
-                  <van-icon
-                    name="warning-o"
-                    v-if="
+                  <van-icon name="warning-o" v-if="
                       submitData[item.productId].quantity &&
                       submitData[item.productId].remark &&
                       submitData[item.productId].fileList.length > 0
-                    "
-                    color="#ee0a24"
-                    style="margin-right: 5px"
-                  />
+                    " color="#ee0a24" style="margin-right: 5px" />
 
                   {{ item.productName }}
                 </div>
               </template>
               <div>
-                <van-field
-                  v-model="submitData[item.productId].quantity"
-                  label="售后数量"
-                  type="digit"
-                  placeholder="请输入"
-                  label-align="top"
-                />
-                <van-field
-                  v-model="submitData[item.productId].remark"
-                  label="售后说明"
-                  type="textarea"
-                  placeholder="请输入"
-                  label-align="top"
-                />
+                <van-field v-model="submitData[item.productId].quantity" label="售后数量" type="digit" placeholder="请输入" label-align="top" />
+                <van-field v-model="submitData[item.productId].remark" label="售后说明" type="textarea" placeholder="请输入" label-align="top" />
                 <van-field name="uploader" label="现场照片">
                   <template #input>
-                    <van-uploader
-                      v-model="submitData[item.productId].fileList"
-                      :after-read="afterRead"
-                      multiple
-                      :max-size="5 * 1024 * 1024"
-                      @oversize="onOversize"
-                    />
+                    <van-uploader v-model="submitData[item.productId].fileList" :after-read="afterRead" multiple :max-size="5 * 1024 * 1024"
+                                  @oversize="onOversize" />
                   </template>
                 </van-field>
               </div>
@@ -99,7 +81,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, onMounted } from "vue";
+import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
 import { showSuccessToast, showFailToast } from "vant";
 import { useRoute } from "vue-router";
 import testForm from "@/components/testForm/index.vue";
@@ -110,7 +92,10 @@ const route = useRoute();
 const formDom = ref(null);
 const activeNames = ref([]);
 const formData = reactive({
-  data: {},
+  data: {
+    fileListOne: [],
+    fileList: [],
+  },
 });
 const rules = {
   afterSalesRemark: [
@@ -140,12 +125,17 @@ const formConfig = reactive([
     slotName: "top",
   },
   {
-    type: "upload",
+    type: "slot",
     label: "售后附件",
-    readonly: true,
-    showUpload: false,
-    prop: "fileListOne",
+    slotName: "fileOne",
   },
+  // {
+  //   type: "upload",
+  //   label: "售后附件",
+  //   readonly: true,
+  //   showUpload: false,
+  //   prop: "fileListOne",
+  // },
   {
     type: "title",
     title: "配件问题",
@@ -179,12 +169,16 @@ const formConfig = reactive([
     type: "title",
     title: proxy.t("afterSales.programFile"),
   },
+  // {
+  //   type: "upload",
+  //   label: " ",
+  //   readonly: true,
+  //   showUpload: false,
+  //   prop: "fileList",
+  // },
   {
-    type: "upload",
-    label: " ",
-    readonly: true,
-    showUpload: false,
-    prop: "fileList",
+    type: "slot",
+    slotName: "file",
   },
 ]);
 
@@ -258,20 +252,6 @@ const getDetails = async (id) => {
     };
   });
 
-  proxy
-    .post("/fileInfo/getList", {
-      businessIdList: [id],
-    })
-    .then((fileObj) => {
-      if (fileObj.data && fileObj.data[id]) {
-        formData.data.fileListOne = fileObj.data[id].map((x) => ({
-          raw: x,
-          name: x.fileName,
-          url: x.fileUrl,
-        }));
-      }
-    });
-
   const status = route.query.status;
   proxy.post("/afterSalesRecord/detail", { id }).then(async (res) => {
     if (status == 0) {
@@ -318,16 +298,33 @@ const getDetails = async (id) => {
       }
     }
 
+    proxy
+      .post("/fileInfo/getList", {
+        businessIdList: [id],
+      })
+      .then((fileObj) => {
+        if (fileObj.data && fileObj.data[id]) {
+          formData.data.fileListOne = fileObj.data[id].map((x) => ({
+            raw: x,
+            name: x.fileName,
+            url: x.fileUrl,
+          }));
+          console.log(formData.data.fileListOne, "asda");
+        }
+      });
+
     if (res.data.bomInfoId) {
       proxy
         .post("/fileInfo/getList", { businessIdList: [res.data.bomInfoId] })
         .then((file) => {
           formData.data.fileList = file.data[res.data.bomInfoId].map((x) => ({
             ...x,
+            name: x.fileName,
             url: x.fileUrl,
           }));
         });
     }
+
     let typeName = afterSalesType.value.find((x) => x.value == res.data.type);
     if (typeName) {
       formData.data.typeName = typeName.label;
@@ -483,6 +480,23 @@ const afterRead = (file) => {
 const onOversize = () => {
   showToast("文件大小不能超过 5MB");
 };
+
+watch(
+  () => formData.data.fileList,
+  (val) => {
+    console.log(val, "a");
+  }
+);
+
+const onPreviewFile = (item) => {
+  uni.postMessage({
+    data: {
+      type: "file",
+      url: item.url,
+      name: item.name,
+    },
+  });
+};
 </script>
 <style lang="scss" scoped>
 .form {