2024.9.5 生产订单-生产通知单（第二版）

src/views/modules/shopOrder/shopOrder/shopNotice.vue

@@ -3,9 +3,9 @@
     <el-form
       :inline="true"
       label-position="top"
-      style="margin-top: 20px; position: fixed; top: 55px;left: 227px;  z-index: 1000; background-color: white; padding: 10px; width: 100%;min-width: 1028px;max-width: 1292px;border: 3px solid #17B3A3;">
-
-      <el-form-item label="生产订单号(不支持模糊查询)">
+      style="margin-top: 20px; position: fixed; top: 55px; margin-left: -20px; margin-right: 0px;width: 100%; z-index: 1000; background-color: white; padding: 10px; border: 3px solid #17B3A3;"
+    >
+      <el-form-item label="生产订单号(不支持模糊查询)" style="margin-left: 10px">
         <el-input v-model="searchData.orderNo" style="width: 130px"></el-input>
         <el-checkbox
           v-model="searchData.status"
@@ -265,11 +265,11 @@
         align="center"
         width="100">
         <template slot-scope="scope">
-<!--          <a type="primary" @click="openDialog(scope.row)">查看</a>-->
-          <a
-            type="text" size="small"
-            @click="viewSopFile(scope.row)"
-            >查看附件</a>
+          <a type="primary" @click="openDialog(scope.row)">查看</a>
+<!--          <a-->
+<!--            type="text" size="small"-->
+<!--            @click="viewSopFile(scope.row)"-->
+<!--            >查看附件</a>-->
           <a type="text" size="small" @click="downloadFile(scope.row)">下载</a>
         </template>
       </el-table-column>
@@ -286,8 +286,7 @@
       <!-- 弹窗内容，可以根据需求放置附件内容 -->
       <div>
         <!-- 示例：显示 PDF 文件 -->
-<!--        <embed :src="this.pdfUrl" type="application/pdf" width="100%" height="490px">-->
-          <iframe :src="this.pdfUrl" frameborder="0" width="100%" :height="height"></iframe>
+        <embed :src="this.fileURL" type="application/pdf" width="100%" height="490px">
       </div>
 
       <!-- 弹窗的底部操作 -->
@@ -839,22 +838,38 @@ export default {
     },
 
     openDialog(row) {
+      // 预览文件
       let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
-      let pdf = ['pdf']
       let type = ''
       if (image.includes(row.fileType.toLowerCase())) {
-        this.pdfUrl = '/file/' + row.newFileName
+        type = 'image/' + row.fileType
       }
-      else if (pdf.includes(row.fileType.toLowerCase())) {
-        this.pdfUrl = '/file/' + row.newFileName
+      let video = ['mp4', 'avi', 'mov', 'wmv', 'flv']
+      if (video.includes(row.fileType.toLowerCase())) {
+        type = 'video/' + row.fileType
       }
-      else {
-        this.$message({
-          message: '不支持的文件类型',
-          type: 'warning'
-        })
+      let txt = ['txt']
+      if (txt.includes(row.fileType.toLowerCase())) {
+        type = 'text/plain'
+      }
+      let office = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
+      if (office.includes(row.fileType.toLowerCase())) {
+        this.$message.warning(`暂不支持预览${row.fileType.toLowerCase()}文件`)
         return
       }
+      let pdf = ['pdf']
+      if (pdf.includes(row.fileType.toLowerCase())) {
+        type = 'application/pdf'
+      }
+      if (type === ''){
+        this.$message.warning(`暂不支持预览${row.fileType.toLowerCase()}文件`)
+        return;
+      }
+      downLoadObjectFile(row).then(({data}) => {
+        const blob = new Blob([data], {type: type});
+        // 创建URL来生成预览
+        this.fileURL = URL.createObjectURL(blob);
+      })
       this.dialogVisible = true; // 打开弹窗
     },