盘带报废查看详情

src/views/repairTest/inventoryScrap/component/queryToolsApply.vue

@@ -7,7 +7,7 @@
       :inline="true"
       label-width="120px"
     >
-    <el-form-item prop="keyword">
+      <el-form-item prop="keyword" >
         <el-input
           v-model="maForm.keyword"
           placeholder="请输入关键字"
@@ -17,7 +17,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
+      <el-form-item >
         <el-button
           type="primary"
           icon="el-icon-search"
@@ -29,7 +29,7 @@
           >重置
         </el-button>
       </el-form-item>
-          <el-form-item label="附件" prop="bmFileInfos">
+      <el-form-item label="附件" prop="bmFileInfos">
           <el-upload
             :action="uploadUrl"
             :file-list="maForm.bmFileInfos"
@@ -39,10 +39,8 @@
             :limit="5"
             list-type="picture-card"
             accept=".png, .jpg, .jpeg, .pdf"
-            :on-change="handleChangeBusinessList"
             :class="{ disabledFbs: uploadDisabled }"
             :on-preview="picturePreviewFbs"
-            :on-remove="handleRemoveElectricianImgList"
           >
             <!-- 文件格式下载，图片格式预览 -->
             <div slot="file" slot-scope="{ file }">
@@ -58,9 +56,6 @@
                 <span v-else class="el-upload-list__item-preview" @click="picturePreviewFbs(file)">
                   <i class="el-icon-zoom-in" />
                 </span>
-                <span class="el-upload-list__item-delete" @click="handleRemoveElectricianImgList(file)">
-                  <i class="el-icon-delete" />
-                </span>
               </span>
             </div>
             <i class="el-icon-plus avatar-uploader-icon"></i>
@@ -127,12 +122,18 @@
         :show-overflow-tooltip="true"
       />
     </el-table>
+        <!-- 图片查看弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" width="600px" height="600px">
+      <img width="100%" height="500px" :src="dialogImageUrl" />
+    </el-dialog>
   </div>
+  
 </template>
 
 <script>
 
 import {  getScrapInfo } from '@/api/repairTest/inventoryScrap'
+import { downloadFile, downloadFileData } from '@/utils/download'
 import { getToken } from "@/utils/auth";
 export default {
   name: "QueryTools",
@@ -175,9 +176,28 @@ export default {
         keyword: "",
         bmFileInfos: []
       },
+      urlTemp: '',
+       //图片查看弹窗
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadKey: Date.now(),
+      //上传
+      // upload: {
+      //   // 设置上传的请求头部
+      //   headers: {Authorization: 'Bearer ' + getToken()},
+      //   // 上传的地址
+      //   url: process.env.VUE_APP_BASE_API + '/file/upload'
+      // },
+      uploadUrl: process.env.VUE_APP_BASE_API + '/system/user/imgUpLoad' // 上传的图片服务器地址
+    
     };
   },
-  computed: {},
+  computed: {
+    //图片上传1张后，隐藏上传框
+    uploadDisabled() {
+      return this.maForm.bmFileInfos && this.maForm.bmFileInfos.length <= 5
+    },
+  },
   mounted() {
     this.taskId = this.queryTaskId;
     this.getTaskInfo();
@@ -205,18 +225,76 @@ export default {
       });
     },
 
-    /** 导出按钮操作 */
+    isImage(file) {
-    handleExport() {
+      this.urlTemp = require('@/assets/file.png')
-      this.download(
+      if (this.updataIf(file)) {
-        "/material/lease_apply_info/exportDetails",
+        return false
-        { id: this.id },
+      } else {
-        `盘点报废详情_${new Date().getTime()}.xlsx`
+        return true
-      );
+      }
     },
+
+    // 判断文件类型,图片预览，文件下载
+    updataIf(e) {
+      if (e.fileName) {
+        const parts = e.fileName.split('.')
+        const extension = parts.pop()
+        if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        const parts = e.name.split('.')
+        const extension = parts.pop()
+        if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
+          return false
+        } else {
+          return true
+        }
+      }
+    },
+
+    //上传组件-图片查看
+    picturePreviewFbs(file) {
+      console.log("yyyyyyyyyy",file)
+      this.dialogImageUrl = file.url.replaceAll('#', '%23')
+      const parts = file.name.split('.')
+      const extension = parts.pop()
+      if (extension === 'pdf') {
+        const windowName = file.name
+        window.open(file.url, windowName)
+      } else {
+        this.dialogVisible = true
+      }
+    },
+    handleDownload(file) {
+      console.log(file)
+      if (file.status === 'ready') {
+        downloadFile({ fileName: file.name, fileData: file.raw, fileType: 'application/vnd.ms-excel;charset=utf-8' })
+      } else if (file.status === 'success') {
+        downloadFileData({ fileName: file.name, fileUrl: file.url })
+        // downloadFileData({ fileName: file.name,fileUrl:file.url })
+      }
+    },
+
+    /** 导出按钮操作 */
+    // handleExport() {
+    //   this.download(
+    //     "/material/lease_apply_info/exportDetails",
+    //     { id: this.id },
+    //     `盘点报废详情_${new Date().getTime()}.xlsx`
+    //   );
+    // },
   },
 };
 </script>
 <style lang="scss" scoped>
+::v-deep.disabledFbs {
+  .el-upload--picture-card {
+    display: none;
+  }
+}
 ::v-deep.el-table .fixed-width .el-button--mini {
   width: 60px !important;
   margin-bottom: 10px;