供应商比选材料 附件优化

src/main/resources/templates/admin/business/process-edit.ftl

@@ -297,11 +297,26 @@
                   <el-upload :file-list="scope.row.fileList"
                              :limit="10" size="mini" name="files[]" action="${base}/file/upload"
                              accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp"
+                             :before-upload="beforeUpload" :show-file-list="false"
                              :on-remove="(_, fileList) => handleSupplierMaterialRemove(scope, fileList)"
                              :before-remove="(file, fileList) => beforeSupplierMaterialRemove(scope, file, fileList)"
                              :on-success="(response, file, fileList) => handleSupplierMaterialFileUploaded(scope, response, file, fileList)"
                              :on-exceed="(files, fileList) => handleSupplierMaterialExceed(scope, files, fileList)">
                     <el-button size="small" type="text">上传附件</el-button>
+
+                    <el-popover placement="top-end" title="已经上传的附件" width="200" trigger="hover">
+                      <el-button size="small" type="text" slot="reference">上传附件</el-button>
+                        <#--展示已经上传的文件-->
+                      <div v-if="scope.row.attachment">
+                        <el-tag size="small" v-for="attachment in scope.row.attachment"
+                                @close="removeSupplierMaterialAttachment(scope, attachment)">
+                          <a :href="attachment.uri">
+                            <i class="el-icon-document"></i> {{attachment.name}}
+                          </a>
+                        </el-tag>
+                      </div>
+                      <span v-else>暂未上传</span>
+                    </el-popover>
                   </el-upload>
 
                 </template>
@@ -551,6 +566,7 @@
     }
 
     const methods = {
+      isNotEmpty,
       changeMode(mode) {
         this.mode = mode
       },
@@ -918,13 +934,6 @@
           return ret
         }
 
-        const mapAttachment = attachments => {
-          return attachments && JSON.stringify(attachments.map(file => ({
-            uri: file.response.data.url,
-            name: file.response.data.originName
-          })))
-        }
-
         const form = {
           ...processForm,
           processType,
@@ -947,7 +956,7 @@
             details: computePurchaseAmountDetail(detail.budgetCostId)
           })),
           supplierMaterials: supplierMaterialsForm.filter(hasProperties).map(item => ({
-            ...item, attachment: mapAttachment(item.attachment)
+            ...item, attachment: JSON.stringify(item.attachment)
           })),
         }
 
@@ -1036,6 +1045,10 @@
         scope.row['attachment'] = fileList
       },
 
+      removeSupplierMaterialAttachment(scope, attachmentToRemove) {
+        scope.row['attachment'] = scope.row['attachment'].filter(item => item === attachmentToRemove)
+      },
+
       handleSupplierMaterialExceed(scope, files, fileList) {
         this.$message.warning("当前限制选择只能选择10个文件");
         scope.row['attachment'] = fileList
@@ -1051,7 +1064,17 @@
 
       handleSupplierMaterialFileUploaded(scope, response, file, fileList) {
         if (response.success) {
-          scope.row['attachment'] = fileList
+          let attachments = scope.row['attachment']
+          if (isEmpty(attachments)) {
+            attachments = []
+            scope.row['attachment'] = attachments
+          }
+          attachments.push({
+            uri: response.data.url,
+            name: file.name
+          })
+
+          this.$message.success("上传成功");
         }
         else {
           this.$message.warning("上传失败");

src/main/resources/templates/admin/business/process-new.ftl

@@ -409,19 +409,27 @@
               </el-table-column>
               <el-table-column prop="attachment" label="附件" align="center" width="150">
                 <template slot-scope="scope">
-                  <el-tag size="small" v-if="scope.row.attachment">
+                  <el-upload :limit="10" size="mini" name="files[]" action="${base}/file/upload"
-                    <a :href="scope.row.attachment.uri">
-                      <i class="el-icon-document"></i> {{scope.row.attachment.name}}
-                    </a>
-                  </el-tag>
-                  <el-upload v-else :limit="10" size="mini" name="files[]" action="${base}/file/upload"
                              accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp"
+                             :before-upload="beforeUpload" :show-file-list="false"
                              :on-remove="(_, fileList) => handleSupplierMaterialRemove(scope, fileList)"
                              :before-remove="(file, fileList) => beforeSupplierMaterialRemove(scope, file, fileList)"
                              :on-success="(response, file, fileList) => handleSupplierMaterialFileUploaded(scope, response, file, fileList)"
-                             :on-exceed="(files, fileList) => handleSupplierMaterialExceed(scope, files, fileList)"
+                             :on-exceed="(files, fileList) => handleSupplierMaterialExceed(scope, files, fileList)">
-                  >
+                    <el-popover placement="top-end" title="已经上传的附件" width="200" trigger="hover">
-                    <el-button size="small" type="text">上传附件</el-button>
+                      <el-button size="small" type="text" slot="reference">上传附件</el-button>
+                        <#--展示已经上传的文件-->
+                      <div v-if="scope.row.attachment">
+                        <el-tag size="small" v-for="attachment in scope.row.attachment"
+                                @close="removeSupplierMaterialAttachment(scope, attachment)">
+                          <a :href="attachment.uri">
+                            <i class="el-icon-document"></i> {{attachment.name}}
+                          </a>
+                        </el-tag>
+                      </div>
+                      <span v-else>暂未上传</span>
+                    </el-popover>
+
                   </el-upload>
 
                 </template>
@@ -680,6 +688,7 @@
       isEmpty,
       isBlank,
       hasText,
+      isNotEmpty,
       changeMode(mode) {
         this.mode = mode
       },
@@ -1094,12 +1103,6 @@
           return ret
         }
 
-        const mapAttachment = attachments => {
-          return attachments && JSON.stringify(attachments.map(file => ({
-            uri: file.response.data.url,
-            name: file.response.data.originName
-          })))
-        }
         const form = {
           ...processForm,
           processType,
@@ -1120,7 +1123,7 @@
           })),
           // 剔除空行
           supplierMaterials: supplierMaterialsForm.filter(hasProperties).map(item => ({
-            ...item, attachment: mapAttachment(item.attachment)
+            ...item, attachment: JSON.stringify(item.attachment) // 转化为 字符串
           })),
         }
         const loading = this.$loading({
@@ -1217,12 +1220,16 @@
       },
 
       handleSupplierMaterialRemove(scope, fileList) {
-        scope.row['fileList'] = fileList
+        scope.row['attachment'] = fileList
+      },
+
+      removeSupplierMaterialAttachment(scope, attachmentToRemove) {
+        scope.row['attachment'] = scope.row['attachment'].filter(item => item === attachmentToRemove)
       },
 
       handleSupplierMaterialExceed(scope, files, fileList) {
         this.$message.warning("当前限制选择只能选择10个文件");
-        scope.row['fileList'] = fileList
+        scope.row['attachment'] = fileList
       },
 
       beforeSupplierMaterialRemove(scope, file, fileList) {
@@ -1235,9 +1242,18 @@
 
       handleSupplierMaterialFileUploaded(scope, response, file, fileList) {
         if (response.success) {
-          scope.row['fileList'] = fileList
+          console.log(fileList)
+          let attachments = scope.row['attachment']
+          if (isEmpty(attachments)) {
+            attachments = []
+            scope.row['attachment'] = attachments
+          }
+          attachments.push({
+            uri: response.data.url,
+            name: file.name
+          })
 
-          this.fileListSupplierMaterial = fileList
+          this.$message.success("上传成功");
         }
         else {
           this.$message.warning("上传失败");