From ccd67e291e00a2ad9c29ad8df43de6fab5a4afed Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期四, 09 四月 2026 09:30:08 +0800
Subject: [PATCH] feat(协同审批/报价单): 添加附件上传、预览和下载功能
---
src/views/salesManagement/salesQuotation/index.vue | 149 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 145 insertions(+), 4 deletions(-)
diff --git a/src/views/salesManagement/salesQuotation/index.vue b/src/views/salesManagement/salesQuotation/index.vue
index 5bd5cef..9cf7792 100644
--- a/src/views/salesManagement/salesQuotation/index.vue
+++ b/src/views/salesManagement/salesQuotation/index.vue
@@ -310,6 +310,52 @@
</el-form-item>
</div>
</el-card>
+
+ <el-card class="form-card" shadow="hover">
+ <template #header>
+ <div class="card-header-wrapper">
+ <el-icon class="card-icon"><Paperclip /></el-icon>
+ <span class="card-title">闄勪欢鏉愭枡</span>
+ </div>
+ </template>
+ <div class="form-content">
+ <el-form-item label="闄勪欢">
+ <el-upload
+ v-model:file-list="fileList"
+ :action="upload.url"
+ multiple
+ ref="fileUpload"
+ auto-upload
+ :headers="upload.headers"
+ :before-upload="handleBeforeUpload"
+ :on-error="handleUploadError"
+ :on-success="handleUploadSuccess"
+ :on-remove="handleRemove"
+ :on-preview="handlePreview"
+ >
+ <el-button type="primary">涓婁紶</el-button>
+ <template #file="{ file }">
+ <div style="display:flex; align-items:center; gap: 10px; width: 100%;">
+ <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+ {{ file.name }}
+ </span>
+ <div style="display:flex; align-items:center; gap: 6px;">
+
+ <el-button link type="success" :icon="Download" @click="handleDownload(file)" />
+ <el-button link type="primary" :icon="View" @click="handlePreview(file)" />
+ <el-button link type="danger" :icon="Delete" @click="triggerRemoveFile(file)" />
+ </div>
+ </div>
+ </template>
+ <template #tip>
+ <div class="el-upload__tip">
+ 鏂囦欢鏍煎紡鏀寔 doc锛宒ocx锛寈ls锛寈lsx锛宲pt锛宲ptx锛宲df锛宼xt锛寈ml锛宩pg锛宩peg锛宲ng锛実if锛宐mp锛宺ar锛寊ip锛�7z
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </div>
+ </el-card>
</el-form>
</div>
</FormDialog>
@@ -350,19 +396,25 @@
<p>{{ currentQuotation.remark }}</p>
</div>
</el-dialog>
+
+ <filePreview ref="filePreviewRef" />
</div>
</template>
<script setup>
-import { ref, reactive, computed, onMounted, markRaw, shallowRef } from 'vue'
+import { ref, reactive, computed, onMounted, markRaw, shallowRef, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete } from '@element-plus/icons-vue'
+import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete, Paperclip, View, Download } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
import FormDialog from '@/components/Dialog/FormDialog.vue'
import {getQuotationList,addQuotation,updateQuotation,deleteQuotation} from '@/api/salesManagement/salesQuotation.js'
import {userListNoPage} from "@/api/system/user.js";
-import {customerList} from "@/api/salesManagement/salesLedger.js";
+import { customerList, delLedgerFile } from "@/api/salesManagement/salesLedger.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
+import { getToken } from "@/utils/auth";
+import filePreview from "@/components/filePreview/index.vue";
+
+const { proxy } = getCurrentInstance()
// 鍝嶅簲寮忔暟鎹�
const loading = ref(false)
@@ -384,6 +436,13 @@
const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const dialogTitle = ref('鏂板鎶ヤ环')
+const fileList = ref([])
+const fileUpload = ref()
+const filePreviewRef = ref()
+const upload = reactive({
+ url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
+ headers: { Authorization: "Bearer " + getToken() },
+})
const form = reactive({
quotationNo: '',
customer: '',
@@ -399,7 +458,8 @@
otherFee: 0,
discountRate: 0,
discountAmount: 0,
- totalAmount: 0
+ totalAmount: 0,
+ tempFileIds: []
})
const baseRules = {
@@ -476,10 +536,28 @@
handleSearch()
}
+const normalizeQuotationFiles = (raw) => {
+ const list =
+ (raw && Array.isArray(raw.salesLedgerFiles) && raw.salesLedgerFiles) ||
+ (raw && Array.isArray(raw.quotationFiles) && raw.quotationFiles) ||
+ (raw && Array.isArray(raw.fileList) && raw.fileList) ||
+ (raw && Array.isArray(raw.files) && raw.files) ||
+ []
+ return list
+ .map((item) => ({
+ id: item?.id,
+ name: item?.fileName || item?.name || item?.originalName || item?.filename || "闄勪欢",
+ url: item?.fileUrl || item?.url || item?.path || item?.tempPath,
+ tempId: item?.tempId,
+ }))
+ .filter((i) => i.url)
+}
+
const handleAdd = async () => {
dialogTitle.value = '鏂板鎶ヤ环'
isEdit.value = false
resetForm()
+ fileList.value = []
// 閲嶇疆瀹℃壒浜鸿妭鐐�
approverNodes.value = [{ id: 1, userId: null }]
nextApproverId = 2
@@ -705,6 +783,7 @@
userName: item.userName || ''
}));
+ fileList.value = normalizeQuotationFiles(row)
dialogVisible.value = true
}
@@ -746,6 +825,9 @@
form.discountRate = 0
form.discountAmount = 0
form.totalAmount = 0
+ form.tempFileIds = []
+ form.files = []
+ fileList.value = []
}
const addProduct = () => {
@@ -787,6 +869,57 @@
// 鍙互鏍规嵁瀹㈡埛淇℃伅鑷姩濉厖涓�浜涢粯璁ゅ��
}
+function handleBeforeUpload() {
+ proxy?.$modal?.loading?.("姝ｅ湪涓婁紶鏂囦欢锛岃绋嶅��...")
+ return true
+}
+function handleUploadError() {
+ proxy?.$modal?.closeLoading?.()
+ ElMessage.error("涓婁紶鏂囦欢澶辫触")
+}
+function handleUploadSuccess(res, file) {
+ proxy?.$modal?.closeLoading?.()
+ if (res?.code === 200) {
+ file.tempId = res?.data?.tempId
+ const url = res?.data?.tempPath || res?.data?.url
+ if (url) file.url = url
+ file.name = res?.data?.originalName || file?.name
+ ElMessage.success("涓婁紶鎴愬姛")
+ } else {
+ ElMessage.error(res?.msg || "涓婁紶澶辫触")
+ fileUpload.value?.handleRemove?.(file)
+ }
+}
+function handleRemove(file) {
+ if (!isEdit.value) return
+ if (!file?.id) return
+ delLedgerFile([file.id]).then((res) => {
+ if (res?.code === 200) {
+ ElMessage.success("鍒犻櫎鎴愬姛")
+ } else {
+ ElMessage.error(res?.msg || "鍒犻櫎澶辫触")
+ }
+ }).catch(() => {
+ ElMessage.error("鍒犻櫎澶辫触")
+ })
+}
+
+const handleDownload = (file) => {
+ if (!file?.url) return
+ proxy?.$modal?.loading?.("姝ｅ湪涓嬭浇鏂囦欢锛岃绋嶅��...")
+ proxy.$download.name(file.url);
+ proxy?.$modal?.closeLoading?.()
+}
+
+function handlePreview(file) {
+ const url = file?.url || file?.response?.data?.tempPath || file?.response?.data?.url
+ if (!url) return
+ filePreviewRef.value?.open?.(url)
+}
+function triggerRemoveFile(file) {
+ fileUpload.value?.handleRemove?.(file)
+}
+
const handleSubmit = () => {
formRef.value.validate((valid) => {
if (valid) {
@@ -804,6 +937,13 @@
// 鏀堕泦鎵�鏈夎妭鐐圭殑瀹℃壒浜篿d
form.approveUserIds = approverNodes.value.map(node => node.userId).join(',')
+
+ form.files = fileList.value.map(f => ({
+ tempId: f.tempId,
+ name: f.name,
+ url: f.url,
+ uid: f.uid,
+ })) || []
// 璁＄畻鎵�鏈変骇鍝佺殑鍗曚环鎬诲拰
form.totalAmount = form.products.reduce((sum, product) => {
@@ -868,6 +1008,7 @@
// 瀹℃壒浜猴紙鐢ㄤ簬缂栬緫鏃跺弽鏄撅級
approveUserIds: item.approveUserIds || '',
remark: item.remark || '',
+ salesLedgerFiles: normalizeQuotationFiles(item),
products: item.products ? item.products.map(product => ({
productId: product.productId || '',
product: product.product || product.productName || '',
--
Gitblit v1.9.3