change - add附件预览组件，四楼激光测试SOP预览

hw-ui/src/components/viewFile/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="bottom">
+    <!-- 文件展示的 Dialog -->
+    <el-dialog
+      :visible.sync="showFileDialog"
+      :title="thisTitle"
+      width="30%"
+      @close="closeDialog"
+    >
+      <div v-for="(file, index) in fileList" :key="index" class="file-item">
+        <!-- 如果是图片类型，使用 el-image 展示缩略图并可点击预览 -->
+        <el-image
+          v-if="isAssetTypeAnImage(file.name)"
+          :src="file.url"
+          :preview-src-list="getPreviewSrcList()"
+          class="image-preview"
+        />
+        <!-- 如果不是图片类型，展示文件名并提供下载 -->
+        <el-link
+          v-else
+          :href="file.url"
+          target="_blank"
+          class="file-link"
+        >
+          {{ file.name }}
+          <el-icon><i class="el-icon-download"></i></el-icon>
+        </el-link>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showFileDialog = false">取 消</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {getToken} from "@/utils/auth";
+
+export default {
+  props: {
+    showFileDialog: {
+      type: Boolean,
+      default: false,
+    },
+    thisTitle: {
+      type: String,
+      default: false,
+    },
+    fileListData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    // 监听父组件传来的 fileListData，并同步更新 fileList
+    fileListData: {
+      handler(newVal) {
+        this.fileList = newVal;
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      pictureDetailModel: false,
+      dialogImageUrl: '',
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      // 文件列表，包含图片和非图片文件
+      fileList: [{name: '', url: '',}],
+    };
+  },
+  methods: {
+    // 判断文件是否为图片
+    isAssetTypeAnImage(fileName) {
+      const imageExtensions = ['jpg', 'jpeg', 'png'];
+      const ext = fileName.split('.').pop().toLowerCase();
+      return imageExtensions.includes(ext);
+    },
+    // 获取图片文件的 URL 列表，用于图片预览
+    getPreviewSrcList() {
+      return this.fileList
+        .filter(file => this.isAssetTypeAnImage(file.name))
+        .map(file => file.url);
+    },
+    // 下载非图片文件
+    handleDownload(file) {
+      window.open(file.url);
+    },
+    // 关闭文件展示的 Dialog
+    closeDialog() {
+      this.$emit('update:showFileDialog', false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.file-container {
+  display: flex;          /* 设置为 flex 布局 */
+  flex-wrap: wrap;       /* 允许换行 */
+  gap: 10px;             /* 控制项之间的间距 */
+  justify-content: flex-start; /* 左对齐 */
+}
+
+.file-item {
+  display: flex;
+  align-items: center;    /* 垂直居中对齐 */
+}
+
+.image-preview {
+  width: 100px;          /* 缩略图宽度 */
+  height: 100px;         /* 缩略图高度 */
+  object-fit: cover;     /* 保持图片比例 */
+}
+
+.file-link {
+  display: block;
+  margin-bottom: 10px;
+}
+</style>

hw-ui/src/views/board/fourthFloor/laserLight.vue

@@ -197,7 +197,7 @@
       <el-row>
         <el-button type="primary">首页</el-button>
         <el-button type="success" @click="handleRawInstock">板材入库</el-button>
-        <el-button type="info">SOP预览</el-button>
+        <el-button type="info" @click="handleViewSOP">SOP预览</el-button>
         <el-button type="danger" @click="logout">退出</el-button>
       </el-row>
     </div>
@@ -238,6 +238,10 @@
       <WorkshopNotice :visible.sync="showTableDialog" :noticeListData="noticeListData"></WorkshopNotice>
     </div>
 
+    <div id="viewFile">
+      <ViewFile :showFileDialog.sync="showFileDialog" :fileListData="fileListData" :thisTitle="thisTitle"></ViewFile>
+    </div>
+
   </div>
 </template>
 
@@ -261,6 +265,8 @@ import {monitorSerialData} from "@/utils/serial"
 import {addWmslocation, updateWmslocation} from "@/api/wms/wmslocation";
 import WorkshopNotice from "@/components/workshopNotice/index.vue";
 import {noticeData} from "@/utils/notice"
+import ViewFile from "@/components/viewFile/index.vue";
+import {getDispatchSOPAttachList} from "@/api/mes/productplan";
 
 const setState = (e) => {
   if (e === '1') {
@@ -279,7 +285,8 @@ export default {
   mixins: [monitorSerialData, noticeData],
   components: {
     Chart,
-    WorkshopNotice
+    WorkshopNotice,
+    ViewFile
   },
   data() {
     return {
@@ -341,7 +348,15 @@ export default {
         RETURN: "3",//退库
       },
 
-      submitLoading: false
+      submitLoading: false,
+      // 存储选中的行
+      selectedRows: {},
+      //显示预览文件
+      showFileDialog: false,
+      //显示预览文件标题
+      thisTitle: "查看SOP附件",
+      //预览文件数据列表
+      fileListData: [],
     }
   },
   async mounted() {
@@ -564,6 +579,8 @@ export default {
       })
     },
     getOrderInfo(e) {
+      console.log("当前选择行：", e)
+      this.selectedRows = e;
       this.getInfo(e)
       getNewestProductPlanDetailJoinAttach({planId: e.planId}).then(val => {
         if (val.data) {
@@ -1193,12 +1210,29 @@ export default {
           this.wmsForm.materialBarcode = this.serialData;
         }
       }
+    },
+    /** SOP预览*/
+    handleViewSOP(){
+      this.fileListData = [];
+      getDispatchSOPAttachList(this.selectedRows.dispatchCode, this.selectedRows.processId).then(res => {
+        let attachList = res.data;
+        let thisFileList = [];
+        attachList.forEach(e => {
+          let previewFile = {};
+          previewFile.url = e.attachPath;
+          previewFile.name = e.attachName;
+          thisFileList.push(previewFile);
+        })
+        console.log("thisFileList：", thisFileList)
+        if (thisFileList.length > 0){
+          this.fileListData = thisFileList;
+          this.showFileDialog = true;
+        } else {
+          this.$modal.msgWarning("此派工派工单号无SOP附件！");
+        }
+      })
     }
-
+  },
-
-  }
-  ,
-
 
 }
 </script>