技术资料附件预览

src/view/yunyin/shengchanguanli/gongdanziliao.vue

@@ -672,9 +672,10 @@
 			        <el-table-column align="left"  label="建档用户" prop="sys_id" width="120"/>
 			        <el-table-column align="left"  label="建档日期" prop="sys_rq" width="160" />
 			        <el-table-column align="left"  label="更新日期" prop="mod_rq" width="160" />
-			  				<el-table-column fixed="right" label="操作" width="100">
+			  				<el-table-column fixed="right" label="操作" width="160">
 			  				    <template v-slot="{ row }">
-			  				      <button @click="jsfj_del(row)">删除</button>
+			  				      <el-button size="small" type="primary" plain @click="jsfj_preview(row)">预览</el-button>
+			  				      <el-button size="small" type="danger" plain @click="jsfj_del(row)">删除</el-button>
 			  				    </template>
 			  				  </el-table-column>
 			      </el-table>
@@ -1396,6 +1397,29 @@
   <div id="luckyexcel" style="width: 100%;height: 90vh;"></div>
 </el-dialog>
 
+<!-- 附件预览弹窗（占满整个屏幕） -->
+<el-dialog
+  v-model="jsfjPreviewVisible"
+  :title="jsfjPreviewTitle"
+  destroy-on-close
+  fullscreen
+  @closed="jsfjPreviewClose"
+>
+  <div style="width: 100%; height: calc(100vh - 60px); display: flex; flex-direction: column;">
+    <!-- 自定义标题条：工单编号 + 成品名称 -->
+    <div style="background:#1e88e5;color:#fff;padding:10px 16px;font-size:14px;display:flex;gap:24px;flex-shrink:0;">
+      <span>工单编号：<strong>{{ jsfjPreviewGdbh }}</strong></span>
+      <span v-if="jsfjPreviewCpmc">成品名称：<strong>{{ jsfjPreviewCpmc }}</strong></span>
+    </div>
+    <iframe
+      v-if="jsfjPreviewUrl"
+      :src="jsfjPreviewUrl"
+      style="width: 100%; flex: 1; border: none; display: block;"
+    />
+    <div v-else style="text-align: center; padding: 40px; color: #999;">无法预览此文件</div>
+  </div>
+</el-dialog>
+
 <!-- 糊盒工单工艺复制 -->
 <el-dialog v-model="cpgyfzlist" title="糊盒工单工艺复制"  style="width: 35%;min-width: 700px;top: 15%;">
 				<el-form-item label="参照糊盒工单:" prop="originalName" class="mab">
@@ -4591,14 +4615,47 @@ const initJsfjformdata = () => {
 //技术附件弹窗取消
 const jsfjcloseDialog = () => {
   jsfjdialogFormVisible.value = false
+  initJsfjformdata()
+}
+
+//预览附件弹窗状态
+const jsfjPreviewVisible = ref(false)
+const jsfjPreviewUrl = ref('')
+const jsfjPreviewTitle = ref('附件预览')
+const jsfjPreviewGdbh = ref('')
+const jsfjPreviewCpmc = ref('')
+const jsfjPreviewClose = () => {
+  if (jsfjPreviewUrl.value) {
+    URL.revokeObjectURL(jsfjPreviewUrl.value.split('#')[0])
+    jsfjPreviewUrl.value = ''
+  }
+}
+
+//预览附件（附件内容为 base64 data URL）
+const jsfj_preview = (row) => {
+  const content = row.附件内容
+  if (!content) {
+    ElMessage({ type: 'warning', message: '附件内容为空' })
+    return
+  }
+  // base64 → Uint8Array → Blob → blob URL
+  const b64 = content.includes(',') ? content.split(',')[1] : content
+  const binaryStr = atob(b64)
+  const len = binaryStr.length
+  const bytes = new Uint8Array(len)
+  for (let i = 0; i < len; i++) bytes[i] = binaryStr.charCodeAt(i)
+  const blob = new Blob([bytes], { type: 'application/pdf' })
+  const blobUrl = URL.createObjectURL(blob)
+  jsfjPreviewTitle.value = `附件预览 - ${row.附件备注 || '未命名'}`
+  jsfjPreviewGdbh.value = _Gd_gdbh.value || ''
+  jsfjPreviewCpmc.value = _Gd_cpmc.value || ''
+  jsfjPreviewUrl.value = blobUrl
+  jsfjPreviewVisible.value = true
 }
+
 const uploadExcel = (event) =>{
 	const files = event.target.files;
-	let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
-	// if(suffix!="xlsx"){
-	// 	alert("Currently only supports the import of xlsx files");
-	// 	return;
-	// }
+	if (!files || !files.length) return
 	jsfjformdata.value.附件内容 = files[0]
 	jsfjformdata.value.附件类型 = 'XLSX'
 }