【修改】展示上传文件

src/views/supply/sales/components/sales_detail.vue

@@ -40,7 +40,27 @@
           </el-col>
         </el-row>
       </div>
-
+      <div class="main-title">
+        <div class="title">附件</div>
+      </div>
+      <el-row class="img-box">
+        <el-col :span="24" class="item">
+          <div class="value" style="height: 150px">
+            <el-image
+              style="height: 120px; widht: 120px"
+              v-if="checkFileType(detailData.fileUrl) == 'image'"
+              :src="$imageUrl + detailData.fileUrl"
+              fit="fill"
+              :preview-src-list="srcList"
+            />
+            <img class="file" src="@/assets/common/word.png" v-if="checkFileType(detailData.fileUrl) == 'word'" />
+            <img class="file" src="@/assets/common/excel.png" v-if="checkFileType(detailData.fileUrl) == 'excel'" />
+            <img class="file" src="@/assets/common/ppt.png" v-if="checkFileType(detailData.fileUrl) == 'ppt'" />
+            <img class="file" src="@/assets/common/pdf.png" v-if="checkFileType(detailData.fileUrl) == 'pdf'" />
+            <img v-if="checkFileType(detailData.fileUrl) == 'file'" class="file aaa" src="@/assets/common/zip.jpeg" />
+          </div>
+        </el-col>
+      </el-row>
       <div class="main-title">
         <div class="title">货品信息</div>
       </div>
@@ -248,7 +268,8 @@ export default {
       printObj: {
         id: 'printMe'
       },
-      detailData: {}
+      detailData: {},
+      srcList: []
     }
   },
 
@@ -274,6 +295,26 @@ export default {
         this.goBack()
         this.$parent.getList()
       })
+    }, // 检查文件类型
+    checkFileType(url) {
+      if (!url) return ''
+      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
+
+      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
+        return 'image'
+      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
+        return 'word'
+      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
+        return 'excel'
+      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
+        return 'ppt'
+      } else if (['pdf'].includes(fileSuffix)) {
+        return 'pdf'
+      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
+        return 'file'
+      } else {
+        return ''
+      }
     },
     // 获取详情
     getDetail() {
@@ -284,7 +325,9 @@ export default {
             item.sums2 = ['payAmount', 'price']
           })
         }
+
         this.detailData = res.data
+        this.srcList = [this.$imageUrl + this.detailData.fileUrl]
       })
     }
   }
@@ -301,4 +344,9 @@ export default {
     }
   }
 }
+.img-box {
+  height: 150px;
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/supply/sales/components/sales_examine.vue

@@ -37,7 +37,27 @@
         </el-col>
       </el-row>
     </div>
-
+    <div class="main-title">
+      <div class="title">附件</div>
+    </div>
+    <el-row class="img-box">
+      <el-col :span="24" class="item">
+        <div class="value" style="height: 150px">
+          <el-image
+            style="height: 120px; widht: 120px"
+            v-if="checkFileType(detailData.fileUrl) == 'image'"
+            :src="$imageUrl + detailData.fileUrl"
+            fit="fill"
+            :preview-src-list="srcList"
+          />
+          <img class="file" src="@/assets/common/word.png" v-if="checkFileType(detailData.fileUrl) == 'word'" />
+          <img class="file" src="@/assets/common/excel.png" v-if="checkFileType(detailData.fileUrl) == 'excel'" />
+          <img class="file" src="@/assets/common/ppt.png" v-if="checkFileType(detailData.fileUrl) == 'ppt'" />
+          <img class="file" src="@/assets/common/pdf.png" v-if="checkFileType(detailData.fileUrl) == 'pdf'" />
+          <img v-if="checkFileType(detailData.fileUrl) == 'file'" class="file aaa" src="@/assets/common/zip.jpeg" />
+        </div>
+      </el-col>
+    </el-row>
     <div class="main-title">
       <div class="title">货品信息</div>
     </div>
@@ -172,6 +192,7 @@ export default {
       userName: JSON.parse(localStorage.getItem('supply_user')).nickName,
       detailData: {},
       formLoading: false,
+      srcList: [],
       examineForm: {
         remark: ''
       }
@@ -198,6 +219,26 @@ export default {
       var currentdate = year + seperator1 + month + seperator1 + strDate
       return currentdate
     },
+    checkFileType(url) {
+      if (!url) return ''
+      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
+
+      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
+        return 'image'
+      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
+        return 'word'
+      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
+        return 'excel'
+      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
+        return 'ppt'
+      } else if (['pdf'].includes(fileSuffix)) {
+        return 'pdf'
+      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
+        return 'file'
+      } else {
+        return ''
+      }
+    },
 
     // 返回列表
     goBack() {
@@ -214,6 +255,7 @@ export default {
           })
         }
         this.detailData = res.data
+        this.srcList = [this.$imageUrl + this.detailData.fileUrl]
       })
     },
 
@@ -266,4 +308,9 @@ export default {
     padding-left: 10px;
   }
 }
+.img-box {
+  height: 150px;
+  display: flex;
+  align-items: center;
+}
 </style>