From d9b5c1f1310a4449ba3ffbefc9b15ec246789d53 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期一, 20 四月 2026 13:35:23 +0800
Subject: [PATCH] feat: 添加报价单导入功能
---
src/views/salesManagement/salesQuotation/index.vue | 367 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 325 insertions(+), 42 deletions(-)
diff --git a/src/views/salesManagement/salesQuotation/index.vue b/src/views/salesManagement/salesQuotation/index.vue
index d6f6c80..455ce72 100644
--- a/src/views/salesManagement/salesQuotation/index.vue
+++ b/src/views/salesManagement/salesQuotation/index.vue
@@ -38,6 +38,9 @@
<el-button style="float: right;" type="primary" @click="handleAdd">
鏂板鎶ヤ环
</el-button>
+ <el-button style="float: right;" type="primary" @click="handleImport">
+ 瀵煎叆鏂囦欢
+ </el-button>
</el-col>
</el-row>
@@ -70,8 +73,8 @@
</el-table-column>
<el-table-column label="鎿嶄綔" width="200" fixed="right" align="center">
<template #default="scope">
- <el-button link type="primary" @click="handleView(scope.row)">鏌ョ湅</el-button>
<el-button link type="primary" @click="handleEdit(scope.row)" :disabled="!['寰呭鎵�','鎷掔粷'].includes(scope.row.status)">缂栬緫</el-button>
+ <el-button link type="primary" @click="handleView(scope.row)" style="color: #67C23A">鏌ョ湅</el-button>
<el-button link type="danger" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
</template>
</el-table-column>
@@ -231,43 +234,52 @@
<el-table :data="form.products" border style="width: 100%" class="product-table" v-if="form.products.length > 0">
<el-table-column prop="product" label="浜у搧鍚嶇О" width="200">
<template #default="scope">
- <el-tree-select
- v-model="scope.row.productId"
- placeholder="璇烽�夋嫨"
- clearable
- check-strictly
- @change="getModels($event, scope.row)"
- :data="productOptions"
- :render-after-expand="false"
- style="width: 100%"
- />
+ <el-form-item :prop="`products.${scope.$index}.productId`" class="product-table-form-item">
+ <el-tree-select
+ v-model="scope.row.productId"
+ placeholder="璇烽�夋嫨"
+ clearable
+ check-strictly
+ @change="getModels($event, scope.row)"
+ :data="productOptions"
+ :render-after-expand="false"
+ style="width: 100%"
+ />
+ </el-form-item>
</template>
</el-table-column>
- <el-table-column prop="specification" label="瑙勬牸鍨嬪彿" width="150">
+ <el-table-column prop="specification" label="瑙勬牸鍨嬪彿" width="200">
<template #default="scope">
- <el-select
- v-model="scope.row.specificationId"
- placeholder="璇烽�夋嫨"
- clearable
- @change="getProductModel($event, scope.row)"
- >
- <el-option
- v-for="item in scope.row.modelOptions || []"
- :key="item.id"
- :label="item.model"
- :value="item.id"
- />
- </el-select>
+ <el-form-item :prop="`products.${scope.$index}.specificationId`" class="product-table-form-item">
+ <el-select
+ v-model="scope.row.specificationId"
+ placeholder="璇烽�夋嫨"
+ clearable
+ @change="getProductModel($event, scope.row)"
+ style="width: 100%"
+ >
+ <el-option
+ v-for="item in scope.row.modelOptions || []"
+ :key="item.id"
+ :label="item.model"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
</template>
</el-table-column>
<el-table-column prop="unit" label="鍗曚綅">
<template #default="scope">
- <el-input v-model="scope.row.unit" placeholder="鍗曚綅" />
+ <el-form-item :prop="`products.${scope.$index}.unit`" class="product-table-form-item">
+ <el-input v-model="scope.row.unit" placeholder="鍗曚綅" clearable/>
+ </el-form-item>
</template>
</el-table-column>
<el-table-column prop="unitPrice" label="鍗曚环">
<template #default="scope">
- <el-input-number v-model="scope.row.unitPrice" :min="0" :precision="2" style="width: 100%" />
+ <el-form-item :prop="`products.${scope.$index}.unitPrice`" class="product-table-form-item">
+ <el-input-number v-model="scope.row.unitPrice" :min="0" :precision="2" style="width: 100%" />
+ </el-form-item>
</template>
</el-table-column>
<el-table-column label="鎿嶄綔" width="80" align="center">
@@ -303,6 +315,106 @@
</el-card>
</el-form>
</div>
+ </FormDialog>
+
+ <FormDialog v-model="importDialogVisible" title="瀵煎叆鎶ヤ环鍗�" width="85%" :close-on-click-modal="false" @close="importDialogVisible = false" @confirm="handleImportSubmit" @cancel="importDialogVisible = false">
+ <!-- 瀹℃壒浜轰俊鎭� -->
+ <el-card class="form-card" shadow="hover">
+ <template #header>
+ <div class="card-header-wrapper">
+ <el-icon class="card-icon"><UserFilled /></el-icon>
+ <span class="card-title">瀹℃壒浜洪�夋嫨</span>
+ <el-button type="primary" size="small" @click="addImportApproverNode" class="header-btn">
+ <el-icon><Plus /></el-icon>
+ 鏂板鑺傜偣
+ </el-button>
+ </div>
+ </template>
+ <div class="form-content">
+ <el-row>
+ <el-col :span="24">
+ <el-form-item>
+ <div class="approver-nodes-container">
+ <div
+ v-for="(node, index) in importApproverNodes"
+ :key="node.id"
+ class="approver-node-item"
+ >
+ <div class="approver-node-label">
+ <span class="node-step">{{ index + 1 }}</span>
+ <span class="node-text">瀹℃壒浜�</span>
+ <el-icon class="arrow-icon"><ArrowRight /></el-icon>
+ </div>
+ <el-select
+ v-model="node.userId"
+ placeholder="閫夋嫨浜哄憳"
+ class="approver-select"
+ clearable
+ >
+ <el-option
+ v-for="user in userList"
+ :key="user.userId"
+ :label="user.nickName"
+ :value="user.userId"
+ />
+ </el-select>
+ <el-button
+ type="danger"
+ size="small"
+ :icon="Delete"
+ @click="removeImportApproverNode(index)"
+ v-if="importApproverNodes.length > 1"
+ class="remove-btn"
+ >鍒犻櫎</el-button>
+ </div>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </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="闄勪欢鏉愭枡" prop="files">
+ <el-upload
+ v-model:file-list="importFileList"
+ :limit="1"
+ ref="fileUpload"
+ :auto-upload="false"
+ :on-change="handleFileChange"
+ :on-exceed="handleExceed"
+ :on-remove="handleRemove"
+ :on-preview="handlePreview"
+ :show-file-list="true"
+ >
+ <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">
+ 鏀寔鏂囨。锛坸ls, xlsx锛夋牸寮�
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </div>
+ </el-card>
</FormDialog>
<!-- 鏌ョ湅璇︽儏瀵硅瘽妗� -->
@@ -345,15 +457,17 @@
</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, Download, View } 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 {getQuotationList,addQuotation,updateQuotation,deleteQuotation, importQuotation} from '@/api/salesManagement/salesQuotation.js'
import {userListNoPage} from "@/api/system/user.js";
import {customerList} from "@/api/salesManagement/salesLedger.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
+
+const { proxy } = getCurrentInstance();
// 鍝嶅簲寮忔暟鎹�
const loading = ref(false)
@@ -373,7 +487,16 @@
})
const dialogVisible = ref(false)
+const importDialogVisible = ref(false)
const viewDialogVisible = ref(false)
+const importFileList = ref([])
+const importApproverNodes = ref([
+ { id: 1, userId: null }
+])
+let nextImportApproverId = 2
+
+const fileUpload = ref(null)
+
const dialogTitle = ref('鏂板鎶ヤ环')
const form = reactive({
quotationNo: '',
@@ -393,13 +516,30 @@
totalAmount: 0
})
-const rules = {
+const baseRules = {
customer: [{ required: true, message: '璇烽�夋嫨瀹㈡埛', trigger: 'change' }],
salesperson: [{ required: true, message: '璇烽�夋嫨涓氬姟鍛�', trigger: 'change' }],
quotationDate: [{ required: true, message: '璇烽�夋嫨鎶ヤ环鏃ユ湡', trigger: 'change' }],
validDate: [{ required: true, message: '璇烽�夋嫨鏈夋晥鏈�', trigger: 'change' }],
paymentMethod: [{ required: true, message: '璇疯緭鍏ヤ粯娆炬柟寮�', trigger: 'blur' }]
}
+
+const productRowRules = {
+ productId: [{ required: true, message: '璇烽�夋嫨浜у搧鍚嶇О', trigger: 'change' }],
+ specificationId: [{ required: true, message: '璇烽�夋嫨瑙勬牸鍨嬪彿', trigger: 'change' }],
+ unit: [{ required: true, message: '璇峰～鍐欏崟浣�', trigger: 'blur' }],
+ unitPrice: [{ required: true, message: '璇峰～鍐欏崟浠�', trigger: 'change' }]
+}
+const rules = computed(() => {
+ const r = { ...baseRules }
+ ;(form.products || []).forEach((_, i) => {
+ r[`products.${i}.productId`] = productRowRules.productId
+ r[`products.${i}.specificationId`] = productRowRules.specificationId
+ r[`products.${i}.unit`] = productRowRules.unit
+ r[`products.${i}.unitPrice`] = productRowRules.unitPrice
+ })
+ return r
+})
const userList = ref([]);
const customerOption = ref([]);
@@ -424,18 +564,125 @@
approverNodes.value.splice(index, 1)
}
+// 瀵煎叆寮圭獥瀹℃壒浜鸿妭鐐圭浉鍏�
+function addImportApproverNode() {
+ importApproverNodes.value.push({ id: nextImportApproverId++, userId: null })
+}
+
+function removeImportApproverNode(index) {
+ importApproverNodes.value.splice(index, 1)
+}
+
+function triggerRemoveImportFile(file) {
+ const index = importFileList.value.indexOf(file)
+ if (index !== -1) {
+ importFileList.value.splice(index, 1)
+ }
+}
+
+async function handleImportSubmit() {
+ if (importFileList.value.length === 0) {
+ ElMessage.warning('璇烽�夋嫨瑕佸鍏ョ殑鏂囦欢')
+ return
+ }
+
+ const hasEmptyApprover = importApproverNodes.value.some(node => !node.userId)
+ if (hasEmptyApprover) {
+ ElMessage.error('璇蜂负鎵�鏈夊鎵硅妭鐐归�夋嫨瀹℃壒浜猴紒')
+ return
+ }
+
+ const selectedFile = importFileList.value[0]
+ const rawFile = selectedFile?.raw || selectedFile
+ if (!validateImportFile(rawFile)) {
+ return
+ }
+
+ const formData = new FormData()
+ formData.append('file', rawFile)
+
+ // 瀹℃牳浜� IDs锛屼互閫楀彿鍒嗗壊
+ const approveUserIds = importApproverNodes.value.map(node => node.userId).join(',')
+ formData.append('approveUserIdsJson', approveUserIds)
+
+ loading.value = true
+ try {
+ const res = await importQuotation(formData)
+ if (res.code === 200) {
+ ElMessage.success('瀵煎叆鎴愬姛')
+ importDialogVisible.value = false
+ handleSearch()
+ }
+ } catch (error) {
+ console.error('瀵煎叆澶辫触:', error)
+ } finally {
+ loading.value = false
+ }
+}
+
+const validateImportFile = (file) => {
+ const fileName = file?.name || ''
+ const isExcel = /\.(xls|xlsx)$/i.test(fileName)
+ if (!isExcel) {
+ ElMessage.error('浠呮敮鎸� xls/xlsx 鏍煎紡鏂囦欢')
+ return false
+ }
+
+ const isLt100M = (file?.size || 0) / 1024 / 1024 < 100
+ if (!isLt100M) {
+ ElMessage.error('涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 100MB!')
+ return false
+ }
+ return true
+}
+
+const handleExceed = (files) => {
+ // 杈惧埌涓婇檺鏃讹紝鏂版枃浠舵浛鎹㈡棫鏂囦欢
+ const file = files?.[0]
+ if (!file || !validateImportFile(file)) return
+ fileUpload.value?.clearFiles()
+ fileUpload.value?.handleStart(file)
+ importFileList.value = fileUpload.value?.uploadFiles?.slice(-1) || []
+}
+
+const handleFileChange = (file, list) => {
+ const currentFile = file?.raw || file
+ if (!validateImportFile(currentFile)) {
+ fileUpload.value?.handleRemove?.(file)
+ importFileList.value = []
+ return
+ }
+ importFileList.value = (list || []).slice(-1)
+}
+
+const handleRemove = (file, list) => {
+ importFileList.value = list
+};
+
+ // 澶勭悊鏂囦欢绉婚櫎
+function triggerRemoveFile(file) {
+ fileUpload.value?.handleRemove?.(file) || proxy.$refs.fileUpload?.handleRemove?.(file);
+}
+
+// 鏂囦欢棰勮
+function handlePreview(file) {
+ const url = getUploadFileUrl(file)
+ if (!url) return
+ filePreviewRef.value?.open?.(url)
+}
+
+// 鏂囦欢棰勮/涓嬭浇
+const handleDownload = (file) => {
+ const url = getUploadFileUrl(file)
+ if (!url) return
+ proxy?.$modal?.loading?.("姝ｅ湪涓嬭浇鏂囦欢锛岃绋嶅��...")
+ proxy.$download.name(url);
+ proxy?.$modal?.closeLoading?.()
+}
+
// 璁＄畻灞炴��
const filteredList = computed(() => {
let list = quotationList.value
- if (searchForm.quotationNo) {
- list = list.filter(item => item.quotationNo.includes(searchForm.quotationNo))
- }
- if (searchForm.customer) {
- list = list.filter(item => item.customer === searchForm.customer)
- }
- if (searchForm.status) {
- list = list.filter(item => item.status === searchForm.status)
- }
return list
})
@@ -454,6 +701,27 @@
searchForm.quotationNo = ''
searchForm.customer = ''
searchForm.status = ''
+ // 閲嶇疆鍒扮涓�椤靛苟閲嶆柊鏌ヨ
+ pagination.currentPage = 1
+ handleSearch()
+}
+
+// 瀵煎叆鏂囦欢
+const handleImport = async () => {
+ importFileList.value = []
+
+ // 鉁� 娓呯┖鈥滃鍏ョ敤鈥濈殑瀹℃壒浜�
+ importApproverNodes.value = [{ id: 1, userId: null }]
+ nextImportApproverId = 2
+
+ let userLists = await userListNoPage();
+ importDialogVisible.value = true
+
+ userList.value = (userLists.data || []).map(item => ({
+ userId: item.userId,
+ nickName: item.nickName || '',
+ userName: item.userName || ''
+ }));
}
const handleAdd = async () => {
@@ -774,7 +1042,7 @@
ElMessage.warning('璇疯嚦灏戞坊鍔犱竴涓骇鍝�')
return
}
-
+
// 瀹℃壒浜哄繀濉牎楠�
const hasEmptyApprover = approverNodes.value.some(node => !node.userId)
if (hasEmptyApprover) {
@@ -822,10 +1090,14 @@
const handleCurrentChange = (val) => {
pagination.currentPage = val.page
pagination.pageSize = val.limit
+ // 鍒嗛〉鍙樺寲鏃堕噸鏂版煡璇㈠垪琛�
+ handleSearch()
}
const handleSearch = ()=>{
const params = {
- ...pagination,
+ // 鍚庣鍒嗛〉鍙傛暟锛歝urrent / size
+ current: pagination.currentPage,
+ size: pagination.pageSize,
...searchForm
}
getQuotationList(params).then(res=>{
@@ -956,6 +1228,17 @@
padding: 8px 0;
}
+.product-table-form-item {
+ margin-bottom: 0;
+ :deep(.el-form-item__content) {
+ margin-left: 0 !important;
+ }
+ :deep(.el-form-item__label) {
+ width: auto;
+ min-width: auto;
+ }
+}
+
.approver-nodes-container {
display: flex;
flex-wrap: wrap;
--
Gitblit v1.9.3