From 62e9986b6d2d20e61a3b65745af33165c9f1534b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 07 四月 2026 10:01:14 +0800
Subject: [PATCH] 军泰 1.产品维护上传修改
---
src/views/basicData/product/index.vue | 131 +++++++++++++++++++++++++++++++-
src/components/filePreview/index.vue | 56 +++----------
2 files changed, 137 insertions(+), 50 deletions(-)
diff --git a/src/components/filePreview/index.vue b/src/components/filePreview/index.vue
index cda5b56..bca7d73 100644
--- a/src/components/filePreview/index.vue
+++ b/src/components/filePreview/index.vue
@@ -6,9 +6,9 @@
<img :src="imgUrl" alt="Image Preview" />
</div>
- <!-- PDF棰勮鎻愮ず -->
- <div v-if="isPdf" style="height: 100vh; display: flex; align-items: center; justify-content: center;">
- <p>姝ｅ湪鍑嗗PDF棰勮...</p>
+ <!-- PDF棰勮 -->
+ <div v-if="isPdf" class="pdf-preview-wrapper">
+ <iframe :src="fileUrl" class="pdf-preview-frame" frameborder="0"></iframe>
</div>
<!-- Word鏂囨。棰勮 -->
@@ -53,7 +53,7 @@
</template>
<script setup>
-import { ref, computed, getCurrentInstance, watch } from 'vue';
+import { ref, computed, getCurrentInstance } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
import VueOfficeExcel from '@vue-office/excel';
@@ -112,45 +112,6 @@
return isImage.value || isPdf.value || isDoc.value || isXls.value || isZipOrRar.value;
});
-// 鍔ㄦ�佸垱寤篴鏍囩骞惰烦杞瑙圥DF
-const previewPdf = (url) => {
- // 鍒涘缓a鏍囩
- const link = document.createElement('a');
- // 璁剧疆PDF鏂囦欢URL
- link.href = url;
- // 鍦ㄦ柊鏍囩椤垫墦寮�
- link.target = '_blank';
- // 瀹夊叏灞炴�э紝闃叉鏂伴〉闈㈣闂師椤甸潰
- link.rel = 'noopener noreferrer';
- // 鍙�夛細璁剧疆閾炬帴鏂囨湰
- link.textContent = '棰勮PDF';
- // 灏哸鏍囩娣诲姞鍒伴〉闈紙閮ㄥ垎娴忚鍣ㄨ姹傚繀椤诲湪DOM涓級
- document.body.appendChild(link);
- // 瑙﹀彂鐐瑰嚮浜嬩欢
- link.click();
- // 绉婚櫎a鏍囩锛屾竻鐞咲OM
- document.body.removeChild(link);
-};
-
-
-// 鐩戝惉PDF鐘舵�佸彉鍖栵紝鑷姩瑙﹀彂璺宠浆
-watch(
- () => isPdf.value,
- (newVal) => {
-
- // 褰撶‘璁ゆ槸PDF涓旀枃浠禪RL鏈夋晥鏃�
- if (newVal && fileUrl.value) {
- // 鍏抽棴瀵硅瘽妗�
- dialogVisible.value = false;
- // 鍔犱釜灏忓欢杩熺‘淇濈姸鎬佹洿鏂板畬鎴�
- setTimeout(() => {
- previewPdf(fileUrl.value);
- fileUrl.value = '';
- }, 100);
- }
- }
-);
-
// 鏂规硶瀹氫箟
const renderedHandler = () => {
console.log("娓叉煋瀹屾垚");
@@ -194,6 +155,15 @@
margin: 0 auto;
}
+.pdf-preview-wrapper {
+ height: 100vh;
+}
+
+.pdf-preview-frame {
+ width: 100%;
+ height: 100%;
+}
+
.oneLine {
overflow: hidden;
white-space: nowrap;
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index b2e169a..a084226 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -144,10 +144,11 @@
:data="upload.data"
:on-success="handleDrawingUploadSuccess"
:on-remove="handleDrawingRemove"
+ :on-preview="handleDrawingPreview"
:before-upload="handleDrawingBeforeUpload"
:limit="5"
accept=".pdf,.jpg,.jpeg,.png,.dwg"
- list-type="picture-card"
+ list-type="text"
>
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
<template #tip>
@@ -156,6 +157,29 @@
</div>
</template>
</el-upload>
+ <div v-if="drawingFileList.length" class="drawing-preview-list">
+ <div
+ v-for="file in drawingFileList"
+ :key="file.uid || file.id || file.name"
+ class="drawing-preview-card"
+ @click="handleDrawingPreview(file)"
+ >
+ <img
+ v-if="isImageFile(file)"
+ :src="getDrawingFileUrl(file)"
+ :alt="file.name"
+ class="drawing-preview-image"
+ />
+ <div
+ v-else
+ class="drawing-preview-placeholder"
+ :class="`is-${getDrawingFileExtension(file)}`"
+ >
+ {{ getDrawingFileExtension(file).toUpperCase() }}
+ </div>
+ <div class="drawing-preview-name">{{ file.name }}</div>
+ </div>
+ </div>
</el-form-item>
</el-form>
</FormDialog>
@@ -194,6 +218,7 @@
</template>
</el-upload>
</FormDialog>
+ <filePreview ref="filePreviewRef" />
</div>
</template>
@@ -204,6 +229,7 @@
import { Plus } from "@element-plus/icons-vue";
import { getToken } from "@/utils/auth.js";
import FormDialog from "@/components/Dialog/FormDialog.vue";
+import filePreview from "@/components/filePreview/index.vue";
import {
addOrEditProductModel,
delProduct,
@@ -215,6 +241,7 @@
const { proxy } = getCurrentInstance();
const importUploadRef = ref(null);
+const filePreviewRef = ref(null);
const modelDia = ref(false);
const importDia = ref(false);
@@ -617,6 +644,9 @@
console.log('涓婁紶鎴愬姛鍝嶅簲', response);
console.log('response.data', response.data);
if (response.code === 200) {
+ file.url = response.data?.tempPath || file.url;
+ file.name = response.data?.originalName || file.name;
+ file.tempId = response.data?.tempId;
// 鏀寔澶氭枃浠讹紝杩藉姞鍒版暟缁�
modelForm.value.tempFileIds.push(response.data?.tempId);
modelForm.value.salesLedgerFiles.push({
@@ -629,6 +659,32 @@
} else {
proxy.$modal.msgError(response.msg || "涓婁紶澶辫触");
}
+};
+
+const getDrawingFileUrl = (file) => {
+ return file.url || file.response?.data?.tempPath || file.tempPath || "";
+};
+
+const getDrawingFileName = (file) => {
+ return file.name || file.originalName || getDrawingFileUrl(file).split("/").pop() || "";
+};
+
+const getDrawingFileExtension = (file) => {
+ const name = getDrawingFileName(file).split("?")[0];
+ const nameParts = name.split(".");
+ return nameParts.length > 1 ? nameParts.pop().toLowerCase() : "file";
+};
+
+const isImageFile = (file) => {
+ return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(getDrawingFileExtension(file));
+};
+
+const handleDrawingPreview = (file) => {
+ const fileUrl = getDrawingFileUrl(file);
+ if (!fileUrl) {
+ return;
+ }
+ filePreviewRef.value?.open(fileUrl);
};
const handleDrawingRemove = (file) => {
@@ -698,15 +754,76 @@
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
- width: 148px;
- height: 148px;
+ width: 88px;
+ height: 88px;
text-align: center;
- line-height: 148px;
+ line-height: 88px;
}
-:deep(.el-upload--picture-card) {
- width: 148px;
- height: 148px;
+:deep(.el-upload--text) {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 88px;
+ height: 88px;
+ border: 1px dashed #dcdfe6;
+ border-radius: 8px;
+}
+
+:deep(.el-upload-list--text) {
+ margin-top: 8px;
+}
+
+.drawing-preview-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 12px;
+}
+
+.drawing-preview-card {
+ width: 120px;
+ cursor: pointer;
+}
+
+.drawing-preview-image,
+.drawing-preview-placeholder {
+ width: 120px;
+ height: 120px;
+ border: 1px solid #dcdfe6;
+ border-radius: 8px;
+ background: #f5f7fa;
+}
+
+.drawing-preview-image {
+ object-fit: cover;
+}
+
+.drawing-preview-placeholder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: 600;
+ color: #606266;
+}
+
+.drawing-preview-placeholder.is-pdf {
+ color: #f56c6c;
+ background: #fef0f0;
+}
+
+.drawing-preview-placeholder.is-dwg {
+ color: #409eff;
+ background: #ecf5ff;
+}
+
+.drawing-preview-name {
+ margin-top: 6px;
+ font-size: 12px;
+ line-height: 1.4;
+ color: #606266;
+ word-break: break-all;
}
:deep(.el-upload__tip) {
--
Gitblit v1.9.3