清单附件回显问题

src/pages/processCenter/pages/creatProcess/bzqdfb/step4.vue

@@ -37,18 +37,40 @@
                   clearable
                 ></el-input>
               </el-form-item>
-              <el-form-item label="附件" prop="modelName" class="add-form-item form-item-disabled">
-                <div class="file-box" v-if="listForm.model">
-                  <p> {{ listForm.modelName }}
+<!--              <el-form-item label="附件" prop="modelName" class="add-form-item form-item-disabled">-->
+<!--                <div class="file-box" v-if="listForm.model">-->
+<!--                  <p> {{ listForm.modelName }}-->
+<!--                    <i-->
+<!--                      title="下载"-->
+<!--                      @click="downloadFile(listForm.model)"-->
+<!--                      class="icon-download"-->
+<!--                      v-btn-permission="''"-->
+<!--                    />-->
+<!--                    <i-->
+<!--                      title="下载带水印"-->
+<!--                      @click="downloadFileByWater(listForm.model,listForm.modelName)"-->
+<!--                      class="icon-download2"-->
+<!--                      v-btn-permission="''"-->
+<!--                    />-->
+<!--                  </p>-->
+<!--                </div>-->
+<!--                <div v-else>-->
+<!--                  暂无数据-->
+<!--                </div>-->
+<!--              </el-form-item>-->
+              <el-form-item label="附件" prop="fileName" class="add-form-item form-item-disabled">
+                <div class="file-box" v-if="fileList.length > 0">
+                  <p v-for="item in fileList"
+                     :key="item.id"> {{ item.name }}
                     <i
                       title="下载"
-                      @click="downloadFile(listForm.model)"
+                      @click="downloadFile(item.id)"
                       class="icon-download"
                       v-btn-permission="''"
                     />
                     <i
                       title="下载带水印"
-                      @click="downloadFileByWater(listForm.model,listForm.modelName)"
+                      @click="downloadFileByWater(item.id, item.name)"
                       class="icon-download2"
                       v-btn-permission="''"
                     />
@@ -255,6 +277,7 @@ export default {
       selectList: [], //选择标准的选择框
       bringData: [],
       commentText: "", //填写会签意见
+      fileList:[],
       page: 1,
       total: 0,
       pageSize: this.$store.getters.userInfo.configContent,
@@ -356,6 +379,9 @@ export default {
         this.listForm.applyUpdUserId = item.applyUpdUserId;
         this.listForm.jlUserId = item.jlUserId;
         this.listForm.zrUserId = item.zrUserId;
+        this.fileIds = item.fileId;
+        console.log(this.fileIds);
+        this.getFileInfo();
       });
     },
     // 请求上传的文件信息
@@ -365,11 +391,15 @@ export default {
       }, {
         _this: this
       }, res => {
-        console.log(res);
         this.$nextTick(() => {
           res.data.map(item => {
-            this.listForm.modelName = item.oldFileName;
-            this.listForm.model = item.id;
+            // 赋值要回显的上传文件内容
+            this.fileList.push({
+              name: item.oldFileName,
+              uid: item.uid,
+              status: item.status,
+              id: item.id
+            });
           });
         });
       }, e => {
@@ -499,6 +529,31 @@ export default {
       padding: 0 20px 0;
     }
   }
+  p {
+    & > a {
+      cursor: pointer;
+    }
+
+    & > i {
+      display: inline-block;
+      margin-left: 3px;
+      width: 18px;
+      height: 16px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: center center;
+      vertical-align: sub;
+      cursor: pointer;
+    }
+
+    .icon-download {
+      background-image: url("~assets/images/shangqi/img/download.png");
+    }
+
+    .icon-download2 {
+      background-image: url("~assets/images/shangqi/img/download2.png");
+    }
+  }
 
   .choiceBtn {
     .el-button--primary {