| | |
| | | <el-row :gutter="20" class="search-row"> |
| | | <el-col :span="8"> |
| | | <el-input |
| | | v-model="searchForm.product" |
| | | placeholder="请输入产品名称" |
| | | v-model="searchForm.quotationNo" |
| | | placeholder="请输入报价单号" |
| | | clearable |
| | | @keyup.enter="handleSearch(true)" |
| | | @keyup.enter="handleSearch" |
| | | > |
| | | <template #prefix> |
| | | <el-icon><Search /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-button type="primary" @click="handleSearch(true)">搜索</el-button> |
| | | <el-col :span="8"> |
| | | <el-select v-model="searchForm.customerId" placeholder="请选择客户" clearable> |
| | | <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.id"> |
| | | {{ |
| | | item.customerName + "——" + item.taxpayerIdentificationNumber |
| | | }} |
| | | </el-option> |
| | | </el-select> |
| | | </el-col> |
| | | <!-- <el-col :span="6">--> |
| | | <!-- <el-select v-model="searchForm.status" placeholder="请选择报价状态" clearable>--> |
| | | <!-- <el-option label="草稿" value="草稿"></el-option>--> |
| | | <!-- <el-option label="已发送" value="已发送"></el-option>--> |
| | | <!-- <el-option label="客户确认" value="客户确认"></el-option>--> |
| | | <!-- <el-option label="已过期" value="已过期"></el-option>--> |
| | | <!-- </el-select>--> |
| | | <!-- </el-col>--> |
| | | <el-col :span="8"> |
| | | <el-button type="primary" @click="handleSearch">搜索</el-button> |
| | | <el-button @click="resetSearch">重置</el-button> |
| | | <el-button style="float: right;" type="primary" @click="handleAdd"> |
| | | 新增报价 |
| | |
| | | stripe |
| | | height="calc(100vh - 22em)" |
| | | > |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column prop="product" label="产品名称" min-width="180" show-overflow-tooltip /> |
| | | <el-table-column prop="specification" label="规格型号" min-width="140" show-overflow-tooltip /> |
| | | <el-table-column prop="paper" label="纸张" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column prop="paperWeight" label="定量" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="unitPrice" label="单价" width="120" align="right"> |
| | | <template #default="{ row }">{{ formatMoney(row.unitPrice) }}</template> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column prop="quotationNo" label="报价单号" /> |
| | | <el-table-column prop="customer" label="客户名称" /> |
| | | <el-table-column prop="salesperson" label="业务员" width="100" /> |
| | | <el-table-column prop="quotationDate" label="报价日期" width="120" /> |
| | | <el-table-column prop="validDate" label="有效期至" width="120" /> |
| | | <el-table-column prop="status" label="审批状态" width="120" align="center"> |
| | | <template #default="{ row }"> |
| | | <el-tag :type="getStatusType(row.status)" disable-transitions> |
| | | {{ row.status || '--' }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="printingFee" label="印版费" width="120" align="right"> |
| | | <template #default="{ row }">{{ formatMoney(row.printingFee) }}</template> |
| | | <el-table-column prop="totalAmount" label="报价金额" width="120"> |
| | | <template #default="scope"> |
| | | ¥{{ scope.row.totalAmount.toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="dieCuttingFee" label="刀版费" width="120" align="right"> |
| | | <template #default="{ row }">{{ formatMoney(row.dieCuttingFee) }}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="grindingFee" label="磨具费" width="120" align="right"> |
| | | <template #default="{ row }">{{ formatMoney(row.grindingFee) }}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="quantity" label="数量" width="90" align="right" /> |
| | | <el-table-column label="操作" width="200" fixed="right" align="center"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="handleEdit(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> |
| | |
| | | <FormDialog v-model="dialogVisible" :title="dialogTitle" width="85%" :close-on-click-modal="false" @close="dialogVisible = false" @confirm="handleSubmit" @cancel="dialogVisible = false"> |
| | | <div class="quotation-form-container"> |
| | | <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="quotation-form"> |
| | | <!-- 基本信息 --> |
| | | <el-card class="form-card" shadow="hover"> |
| | | <template #header> |
| | | <div class="card-header-wrapper"> |
| | | <el-icon class="card-icon"><Document /></el-icon> |
| | | <span class="card-title">基本信息</span> |
| | | </div> |
| | | </template> |
| | | <div class="form-content"> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户名称" prop="customerId"> |
| | | <el-select v-model="form.customerId" placeholder="请选择客户" style="width: 100%" clearable filterable> |
| | | <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="业务员" prop="salesperson"> |
| | | <el-select v-model="form.salesperson" placeholder="请选择业务员" style="width: 100%" clearable filterable> |
| | | <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" |
| | | :value="item.nickName" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="报价日期" prop="quotationDate"> |
| | | <el-date-picker |
| | | v-model="form.quotationDate" |
| | | type="date" |
| | | placeholder="选择报价日期" |
| | | style="width: 100%" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="有效期至" prop="validDate"> |
| | | <el-date-picker |
| | | v-model="form.validDate" |
| | | type="date" |
| | | placeholder="选择有效期" |
| | | style="width: 100%" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="付款方式" prop="paymentMethod"> |
| | | <el-input v-model="form.paymentMethod" placeholder="请输入付款方式" clearable /> |
| | | </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"><Box /></el-icon> |
| | | <span class="card-title">产品信息</span> |
| | | <el-button type="primary" size="small" @click="addProduct" class="header-btn" :disabled="isEdit"> |
| | | <el-button type="primary" size="small" @click="addProduct" class="header-btn"> |
| | | <el-icon><Plus /></el-icon> |
| | | 添加产品 |
| | | </el-button> |
| | |
| | | </el-table-column> |
| | | <el-table-column prop="specification" label="规格型号" width="200"> |
| | | <template #default="scope"> |
| | | <el-form-item :prop="`products.${scope.$index}.specificationId`" class="product-table-form-item"> |
| | | <el-form-item :prop="`products.${scope.$index}.productModelId`" class="product-table-form-item"> |
| | | <el-select |
| | | v-model="scope.row.specificationId" |
| | | v-model="scope.row.productModelId" |
| | | placeholder="请选择" |
| | | clearable |
| | | @change="getProductModel($event, scope.row)" |
| | |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="paper" label="纸张" width="180"> |
| | | <template #default="scope"> |
| | | <el-form-item :prop="`products.${scope.$index}.paper`" class="product-table-form-item"> |
| | | <el-input v-model="scope.row.paper" placeholder="纸张" clearable /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="paperWeight" label="定量" width="140"> |
| | | <template #default="scope"> |
| | | <el-form-item :prop="`products.${scope.$index}.paperWeight`" class="product-table-form-item"> |
| | | <el-input v-model="scope.row.paperWeight" placeholder="定量" clearable /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="unitPrice" label="单价"> |
| | | <template #default="scope"> |
| | | <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 prop="printingFee" label="印版费" width="140"> |
| | | <template #default="scope"> |
| | | <el-form-item :prop="`products.${scope.$index}.printingFee`" class="product-table-form-item"> |
| | | <el-input-number v-model="scope.row.printingFee" :min="0" :precision="2" style="width: 100%" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="dieCuttingFee" label="刀版费" width="140"> |
| | | <template #default="scope"> |
| | | <el-form-item :prop="`products.${scope.$index}.dieCuttingFee`" class="product-table-form-item"> |
| | | <el-input-number v-model="scope.row.dieCuttingFee" :min="0" :precision="2" style="width: 100%" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="grindingFee" label="磨具费" width="140"> |
| | | <template #default="scope"> |
| | | <el-form-item :prop="`products.${scope.$index}.grindingFee`" class="product-table-form-item"> |
| | | <el-input-number v-model="scope.row.grindingFee" :min="0" :precision="2" style="width: 100%" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </template> |
| | | <div class="form-content"> |
| | | <el-form-item label="备注" prop="remark"> |
| | | <el-input |
| | | type="textarea" |
| | | v-model="form.remark" |
| | | placeholder="请输入备注信息(选填)" |
| | | <el-input |
| | | type="textarea" |
| | | v-model="form.remark" |
| | | placeholder="请输入备注信息(选填)" |
| | | :rows="4" |
| | | maxlength="500" |
| | | show-word-limit |
| | |
| | | |
| | | <!-- 查看详情对话框 --> |
| | | <el-dialog v-model="viewDialogVisible" title="报价详情" width="800px"> |
| | | <el-descriptions :column="2" border> |
| | | <el-descriptions-item label="报价单号">{{ currentQuotation.quotationNo }}</el-descriptions-item> |
| | | <el-descriptions-item label="客户名称">{{ currentQuotation.customer }}</el-descriptions-item> |
| | | <el-descriptions-item label="业务员">{{ currentQuotation.salesperson }}</el-descriptions-item> |
| | | <el-descriptions-item label="报价日期">{{ currentQuotation.quotationDate }}</el-descriptions-item> |
| | | <el-descriptions-item label="有效期至">{{ currentQuotation.validDate }}</el-descriptions-item> |
| | | <el-descriptions-item label="付款方式">{{ currentQuotation.paymentMethod }}</el-descriptions-item> |
| | | <!-- <el-descriptions-item label="报价状态">--> |
| | | <!-- <el-tag :type="getStatusType(currentQuotation.status)">{{ currentQuotation.status }}</el-tag>--> |
| | | <!-- </el-descriptions-item>--> |
| | | <el-descriptions-item label="报价总额" :span="2"> |
| | | <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">¥{{ currentQuotation.totalAmount?.toFixed(2) }}</span> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | |
| | | <div style="margin: 20px 0;"> |
| | | <h4>产品明细</h4> |
| | | <el-table :data="currentQuotation.products" border style="width: 100%"> |
| | | <el-table-column prop="product" label="产品名称" /> |
| | | <el-table-column prop="specification" label="规格型号" /> |
| | | <el-table-column prop="unit" label="单位" /> |
| | | <el-table-column prop="paper" label="纸张" /> |
| | | <el-table-column prop="paperWeight" label="定量" /> |
| | | <el-table-column prop="unitPrice" label="单价"> |
| | | <template #default="scope"> |
| | | ¥{{ scope.row.unitPrice.toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="printingFee" label="印版费"> |
| | | <template #default="scope"> |
| | | ¥{{ Number(scope.row.printingFee || 0).toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="dieCuttingFee" label="刀版费"> |
| | | <template #default="scope"> |
| | | ¥{{ Number(scope.row.dieCuttingFee || 0).toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="grindingFee" label="磨具费"> |
| | | <template #default="scope"> |
| | | ¥{{ Number(scope.row.grindingFee || 0).toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div v-if="currentQuotation.remark" style="margin-top: 12px;"> |
| | | |
| | | <div v-if="currentQuotation.remark" style="margin-top: 20px;"> |
| | | <h4>备注</h4> |
| | | <p>{{ currentQuotation.remark }}</p> |
| | | </div> |
| | |
| | | <script setup> |
| | | import { ref, reactive, computed, onMounted, markRaw, shallowRef } from 'vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { Search, Box, EditPen, Plus } from '@element-plus/icons-vue' |
| | | import { Search, Document, Box, EditPen, Plus } from '@element-plus/icons-vue' |
| | | import Pagination from '@/components/PIMTable/Pagination.vue' |
| | | import FormDialog from '@/components/Dialog/FormDialog.vue' |
| | | import { |
| | | quotationProductListPage, |
| | | getQuotationProductInfo, |
| | | addOrUpdateQuotationProduct, |
| | | editQuotationProduct, |
| | | deleteQuotationProduct |
| | | } from '@/api/salesManagement/salesQuotationProduct.js' |
| | | import {getQuotationList,addQuotation,updateQuotation,deleteQuotation} from '@/api/salesManagement/salesQuotation.js' |
| | | import {modelList, productTreeList} from "@/api/basicData/product.js"; |
| | | // import {listCustomerPrivatePool} from "@/api/basicData/customerFile.js"; |
| | | import {listCustomer} from "@/api/basicData/customer.js"; |
| | | import { userListNoPage } from "@/api/system/user.js"; |
| | | |
| | | // 响应式数据 |
| | | const loading = ref(false) |
| | | const searchForm = reactive({ |
| | | product: '' |
| | | quotationNo: '', |
| | | customerId: '', |
| | | status: '' |
| | | }) |
| | | |
| | | const quotationList = ref([]) |
| | | const userList = ref([]) |
| | | const productOptions = ref([]); |
| | | const modelOptions = ref([]); |
| | | const modelOptions = ref([]); |
| | | const pagination = reactive({ |
| | | total: 3, |
| | | currentPage: 1, |
| | |
| | | const dialogTitle = ref('新增报价') |
| | | const form = reactive({ |
| | | quotationNo: '', |
| | | customerId: undefined, |
| | | customer: '', |
| | | salesperson: '', |
| | | quotationDate: '', |
| | |
| | | totalAmount: 0 |
| | | }) |
| | | |
| | | const baseRules = {} |
| | | 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' }], |
| | | productModelId: [{ required: true, message: '请选择规格型号', trigger: 'change' }], |
| | | unit: [{ required: true, message: '请填写单位', trigger: 'blur' }], |
| | | unitPrice: [{ required: true, message: '请填写单价', trigger: 'change' }] |
| | | } |
| | |
| | | const r = { ...baseRules } |
| | | ;(form.products || []).forEach((_, i) => { |
| | | r[`products.${i}.productId`] = productRowRules.productId |
| | | r[`products.${i}.specificationId`] = productRowRules.specificationId |
| | | r[`products.${i}.productModelId`] = productRowRules.productModelId |
| | | r[`products.${i}.unit`] = productRowRules.unit |
| | | r[`products.${i}.unitPrice`] = productRowRules.unitPrice |
| | | }) |
| | |
| | | |
| | | // 计算属性 |
| | | const filteredList = computed(() => { |
| | | const keyword = String(searchForm.product || '').trim() |
| | | if (!keyword) return quotationList.value |
| | | return quotationList.value.filter((row) => { |
| | | const p = String(row?.product || '').toLowerCase() |
| | | return p.includes(keyword.toLowerCase()) |
| | | }) |
| | | let list = quotationList.value |
| | | return list |
| | | }) |
| | | |
| | | // 方法 |
| | | const formatMoney = (value) => `¥${Number(value || 0).toFixed(2)}` |
| | | const getStatusType = (status) => { |
| | | const statusMap = { |
| | | '待审批': 'info', |
| | | '审核中': 'primary', |
| | | '通过': 'success', |
| | | '拒绝': 'danger' |
| | | } |
| | | return statusMap[status] || 'info' |
| | | } |
| | | |
| | | const resetSearch = () => { |
| | | searchForm.product = '' |
| | | searchForm.quotationNo = '' |
| | | searchForm.customer = '' |
| | | searchForm.status = '' |
| | | // 重置到第一页并重新查询 |
| | | pagination.currentPage = 1 |
| | | handleSearch() |
| | |
| | | resetForm() |
| | | dialogVisible.value = true |
| | | getProductOptions(); |
| | | // listCustomerPrivatePool({current: -1,size:-1}).then((res) => { |
| | | // customerOption.value = res.data.records; |
| | | // }); |
| | | fetchCustomerOptions() |
| | | } |
| | | |
| | | const fetchCustomerOptions = () => { |
| | | if (customerOption.value.length > 0) return |
| | | listCustomer({current: -1,size:-1, type: 0}).then((res) => { |
| | | customerOption.value = res.data.records; |
| | | }); |
| | | } |
| | | const getProductOptions = () => { |
| | | // 返回 Promise,便于编辑时 await 确保能反显 |
| | |
| | | if (children && children.length > 0) { |
| | | newItem.children = convertIdToValue(children); |
| | | } |
| | | |
| | | |
| | | return newItem; |
| | | }); |
| | | } |
| | |
| | | row.productId = ''; |
| | | row.product = ''; |
| | | row.modelOptions = []; |
| | | row.specificationId = ''; |
| | | row.productModelId = ''; |
| | | row.specification = ''; |
| | | row.unit = ''; |
| | | return; |
| | |
| | | if (!row) return; |
| | | // 如果清空选择,则清空相关字段 |
| | | if (!value) { |
| | | row.specificationId = ''; |
| | | row.productModelId = ''; |
| | | row.specification = ''; |
| | | row.unit = ''; |
| | | return; |
| | | } |
| | | // 更新 specificationId(v-model 已经自动更新,这里确保一致性) |
| | | row.specificationId = value; |
| | | // 更新 productModelId(v-model 已经自动更新,这里确保一致性) |
| | | row.productModelId = value; |
| | | const modelOptions = row.modelOptions || []; |
| | | const index = modelOptions.findIndex((item) => item.id === value); |
| | | if (index !== -1) { |
| | |
| | | } |
| | | return null; // 没有找到节点,返回null |
| | | }; |
| | | const mapProductItem = (product) => ({ |
| | | id: product?.id || '', |
| | | salesQuotationId: product?.salesQuotationId || '', |
| | | productId: product?.productId || '', |
| | | product: product?.product || product?.productName || '', |
| | | specificationId: product?.specificationId || '', |
| | | specification: product?.specification || '', |
| | | quantity: product?.quantity || 0, |
| | | unit: product?.unit || '', |
| | | paper: product?.paper || '', |
| | | paperWeight: product?.paperWeight || '', |
| | | unitPrice: product?.unitPrice || 0, |
| | | printingFee: Number(product?.printingFee || 0), |
| | | dieCuttingFee: Number(product?.dieCuttingFee || 0), |
| | | grindingFee: Number(product?.grindingFee || 0), |
| | | amount: product?.amount || 0 |
| | | }) |
| | | |
| | | const mapQuotationItem = (item) => ({ |
| | | id: item?.id, |
| | | salesQuotationId: item?.salesQuotationId || '', |
| | | product: item?.product || '', |
| | | specification: item?.specification || '', |
| | | unit: item?.unit || '', |
| | | paper: item?.paper || '', |
| | | paperWeight: item?.paperWeight || '', |
| | | unitPrice: Number(item?.unitPrice || 0), |
| | | printingFee: Number(item?.printingFee || 0), |
| | | dieCuttingFee: Number(item?.dieCuttingFee || 0), |
| | | grindingFee: Number(item?.grindingFee || 0), |
| | | quantity: Number(item?.quantity || 0), |
| | | amount: Number(item?.amount || 0), |
| | | createTime: item?.createTime || '', |
| | | quotationNo: item?.quotationNo || '', |
| | | customer: item?.customer || '', |
| | | salesperson: item?.salesperson || '', |
| | | quotationDate: item?.quotationDate || '', |
| | | validDate: item?.validDate || '', |
| | | paymentMethod: item?.paymentMethod || '', |
| | | status: item?.status || '草稿', |
| | | approveUserIds: item?.approveUserIds || '', |
| | | remark: item?.remark || '', |
| | | products: Array.isArray(item?.products) && item.products.length > 0 |
| | | ? item.products.map(mapProductItem) |
| | | : [mapProductItem(item)], |
| | | subtotal: item?.subtotal || 0, |
| | | freight: item?.freight || 0, |
| | | otherFee: item?.otherFee || 0, |
| | | discountRate: item?.discountRate || 0, |
| | | discountAmount: item?.discountAmount || 0, |
| | | totalAmount: item?.totalAmount || 0 |
| | | }) |
| | | |
| | | const calcTotalAmountFromProducts = (products) => { |
| | | return (products || []).reduce((sum, product) => { |
| | | const price = Number(product.unitPrice) || 0 |
| | | const printingFee = Number(product.printingFee) || 0 |
| | | const dieCuttingFee = Number(product.dieCuttingFee) || 0 |
| | | const grindingFee = Number(product.grindingFee) || 0 |
| | | return sum + price + printingFee + dieCuttingFee + grindingFee |
| | | }, 0) |
| | | } |
| | | |
| | | const buildProductPayload = (product) => { |
| | | const quantity = Number(product?.quantity || 0) |
| | | const unitPrice = Number(product?.unitPrice || 0) |
| | | const printingFee = Number(product?.printingFee || 0) |
| | | const dieCuttingFee = Number(product?.dieCuttingFee || 0) |
| | | const grindingFee = Number(product?.grindingFee || 0) |
| | | return { |
| | | id: product?.id || undefined, |
| | | salesQuotationId: product?.salesQuotationId || form.salesQuotationId || null, |
| | | product: product?.product || '', |
| | | specification: product?.specification || '', |
| | | unit: product?.unit || '', |
| | | paper: product?.paper || '', |
| | | paperWeight: product?.paperWeight || '', |
| | | unitPrice, |
| | | printingFee, |
| | | dieCuttingFee, |
| | | grindingFee, |
| | | quantity, |
| | | amount: Number(product?.amount ?? quantity * unitPrice), |
| | | remark: product?.remark ?? form.remark ?? '' |
| | | const handleView = (row) => { |
| | | // 只复制需要的字段,避免将组件引用放入响应式对象 |
| | | currentQuotation.value = { |
| | | quotationNo: row.quotationNo || '', |
| | | customer: row.customer || '', |
| | | salesperson: row.salesperson || '', |
| | | quotationDate: row.quotationDate || '', |
| | | validDate: row.validDate || '', |
| | | paymentMethod: row.paymentMethod || '', |
| | | status: row.status || '', |
| | | remark: row.remark || '', |
| | | products: row.products ? row.products.map(product => ({ |
| | | productId: product.productId || '', |
| | | product: product.product || product.productName || '', |
| | | productModelId: product.productModelId || '', |
| | | specification: product.specification || '', |
| | | quantity: product.quantity || 0, |
| | | unit: product.unit || '', |
| | | unitPrice: product.unitPrice || 0, |
| | | amount: product.amount || 0 |
| | | })) : [], |
| | | totalAmount: row.totalAmount || 0 |
| | | } |
| | | } |
| | | |
| | | const handleView = async (row) => { |
| | | let source = row |
| | | if (row?.id) { |
| | | try { |
| | | const res = await getQuotationProductInfo(row.id) |
| | | source = res?.data || row |
| | | } catch (error) { |
| | | source = row |
| | | } |
| | | } |
| | | source.totalAmount = source.totalAmount || calcTotalAmountFromProducts(source?.products || [source]) |
| | | currentQuotation.value = mapQuotationItem(source) |
| | | viewDialogVisible.value = true |
| | | } |
| | | |
| | |
| | | form.id = row.id || form.id || null |
| | | // 先加载产品树数据,否则 el-tree-select 无法反显产品名称 |
| | | await getProductOptions() |
| | | let source = row |
| | | if (row?.id) { |
| | | try { |
| | | const res = await getQuotationProductInfo(row.id) |
| | | source = res?.data || row |
| | | } catch (error) { |
| | | source = row |
| | | } |
| | | } |
| | | source.totalAmount = source.totalAmount || calcTotalAmountFromProducts(source?.products || [source]) |
| | | |
| | | const sourceProducts = Array.isArray(source?.products) && source.products.length > 0 |
| | | ? source.products |
| | | : [source] |
| | | await fetchCustomerOptions() |
| | | |
| | | // 只复制需要的字段,避免将组件引用放入响应式对象 |
| | | form.quotationNo = source.quotationNo || '' |
| | | form.customer = source.customer || '' |
| | | form.salesperson = source.salesperson || '' |
| | | form.quotationDate = source.quotationDate || '' |
| | | form.validDate = source.validDate || '' |
| | | form.paymentMethod = source.paymentMethod || '' |
| | | form.status = source.status || '草稿' |
| | | form.remark = source.remark || '' |
| | | form.products = await Promise.all(sourceProducts.map(async (product) => { |
| | | form.quotationNo = row.quotationNo || '' |
| | | form.customer = row.customer || '' |
| | | form.customerId = row.customerId || undefined |
| | | form.salesperson = row.salesperson || '' |
| | | form.quotationDate = row.quotationDate || '' |
| | | form.validDate = row.validDate || '' |
| | | form.paymentMethod = row.paymentMethod || '' |
| | | form.status = row.status || '草稿' |
| | | form.remark = row.remark || '' |
| | | form.products = row.products ? await Promise.all(row.products.map(async (product) => { |
| | | const productName = product.product || product.productName || '' |
| | | // 优先用 productId;如果只有名称,尝试反查 id 以便树选择器反显 |
| | | const resolvedProductId = product.productId |
| | | ? Number(product.productId) |
| | | : findNodeIdByLabel(productOptions.value, productName) || '' |
| | | |
| | | |
| | | // 如果有产品ID,加载对应的规格型号列表 |
| | | let modelOptions = []; |
| | | let resolvedSpecificationId = product.specificationId || ''; |
| | | |
| | | let resolvedProductModelId = product.productModelId || ''; |
| | | |
| | | if (resolvedProductId) { |
| | | try { |
| | | const res = await modelList({ id: resolvedProductId }); |
| | | modelOptions = res || []; |
| | | |
| | | // 如果返回的数据没有 specificationId,但有 specification 名称,根据名称查找 ID |
| | | if (!resolvedSpecificationId && product.specification) { |
| | | |
| | | // 如果返回的数据没有 productModelId,但有 specification 名称,根据名称查找 ID |
| | | if (!resolvedProductModelId && product.specification) { |
| | | const foundModel = modelOptions.find(item => item.model === product.specification); |
| | | if (foundModel) { |
| | | resolvedSpecificationId = foundModel.id; |
| | | resolvedProductModelId = foundModel.id; |
| | | } |
| | | } |
| | | } catch (error) { |
| | | console.error('加载规格型号失败:', error); |
| | | } |
| | | } |
| | | |
| | | |
| | | return { |
| | | productId: resolvedProductId, |
| | | product: productName, |
| | | specificationId: resolvedSpecificationId, |
| | | productModelId: resolvedProductModelId, |
| | | specification: product.specification || '', |
| | | quantity: product.quantity || 0, |
| | | unit: product.unit || '', |
| | | paper: product.paper || '', |
| | | paperWeight: product.paperWeight || '', |
| | | unitPrice: product.unitPrice || 0, |
| | | printingFee: Number(product.printingFee || 0), |
| | | dieCuttingFee: Number(product.dieCuttingFee || 0), |
| | | grindingFee: Number(product.grindingFee || 0), |
| | | amount: product.amount || 0, |
| | | modelOptions: modelOptions // 为每行添加独立的规格型号列表 |
| | | } |
| | | })) |
| | | form.subtotal = source.subtotal || 0 |
| | | form.freight = source.freight || 0 |
| | | form.otherFee = source.otherFee || 0 |
| | | form.discountRate = source.discountRate || 0 |
| | | form.discountAmount = source.discountAmount || 0 |
| | | form.totalAmount = source.totalAmount || 0 |
| | | })) : [] |
| | | form.subtotal = row.subtotal || 0 |
| | | form.freight = row.freight || 0 |
| | | form.otherFee = row.otherFee || 0 |
| | | form.discountRate = row.discountRate || 0 |
| | | form.discountAmount = row.discountAmount || 0 |
| | | form.totalAmount = row.totalAmount || 0 |
| | | |
| | | dialogVisible.value = true |
| | | } |
| | |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | if (!row?.id) { |
| | | ElMessage.warning('未获取到可删除的产品ID') |
| | | return |
| | | const index = quotationList.value.findIndex(item => item.id === row.id) |
| | | if (index > -1) { |
| | | deleteQuotation(row.id).then(res=>{ |
| | | // console.log(res) |
| | | if(res.code===200){ |
| | | ElMessage.success('删除成功') |
| | | handleSearch() |
| | | } |
| | | }) |
| | | // quotationList.value.splice(index, 1) |
| | | // pagination.total-- |
| | | // ElMessage.success('删除成功') |
| | | } |
| | | deleteQuotationProduct([row.id]).then(res=>{ |
| | | if(res.code===200){ |
| | | ElMessage.success('删除成功') |
| | | handleSearch() |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | const resetForm = () => { |
| | | form.id = null |
| | | form.customer = '' |
| | | form.salesperson = '' |
| | | form.quotationDate = '' |
| | |
| | | } |
| | | |
| | | const addProduct = () => { |
| | | if (isEdit.value) { |
| | | ElMessage.warning('编辑时不允许新增产品') |
| | | return |
| | | } |
| | | form.products.push({ |
| | | productId: '', |
| | | product: '', |
| | | productName: '', |
| | | specificationId: '', |
| | | specification: '', |
| | | productModelId: '', |
| | | quantity: 1, |
| | | unit: '', |
| | | paper: '', |
| | | paperWeight: '', |
| | | unitPrice: 0, |
| | | printingFee: 0, |
| | | dieCuttingFee: 0, |
| | | grindingFee: 0, |
| | | amount: 0, |
| | | modelOptions: [] // 为每行添加独立的规格型号列表 |
| | | }) |
| | |
| | | // 计算所有产品的单价总和 |
| | | form.totalAmount = form.products.reduce((sum, product) => { |
| | | const price = Number(product.unitPrice) || 0 |
| | | const printingFee = Number(product.printingFee) || 0 |
| | | const dieCuttingFee = Number(product.dieCuttingFee) || 0 |
| | | const grindingFee = Number(product.grindingFee) || 0 |
| | | return sum + price + printingFee + dieCuttingFee + grindingFee |
| | | return sum + price |
| | | }, 0) |
| | | |
| | | form.customer = customerOption.value.find(item => item.id === form.customerId)?.customerName || '' |
| | | if (isEdit.value) { |
| | | const editingItem = form.products[0] || {} |
| | | const payload = buildProductPayload({ |
| | | ...editingItem, |
| | | id: editingItem.id || form.id |
| | | }) |
| | | editQuotationProduct(payload).then((res) => { |
| | | if (res?.code === 200) { |
| | | ElMessage.success('编辑成功') |
| | | dialogVisible.value = false |
| | | handleSearch() |
| | | } |
| | | }) |
| | | // 编辑 |
| | | const index = quotationList.value.findIndex(item => item.id === editId.value) |
| | | if (index > -1) { |
| | | updateQuotation(form).then(res=>{ |
| | | // console.log(res) |
| | | if(res.code===200){ |
| | | ElMessage.success('编辑成功') |
| | | dialogVisible.value = false |
| | | handleSearch() |
| | | } |
| | | }) |
| | | } |
| | | } else { |
| | | const payloadList = form.products.map((item) => buildProductPayload(item)) |
| | | addOrUpdateQuotationProduct(payloadList).then((res) => { |
| | | if (res?.code === 200) { |
| | | // 新增 |
| | | addQuotation(form).then(res=>{ |
| | | if(res.code===200){ |
| | | ElMessage.success('新增成功') |
| | | dialogVisible.value = false |
| | | handleSearch() |
| | |
| | | // 分页变化时重新查询列表 |
| | | handleSearch() |
| | | } |
| | | const handleSearch = (resetPage = false)=>{ |
| | | if (resetPage) { |
| | | pagination.currentPage = 1 |
| | | } |
| | | const handleSearch = ()=>{ |
| | | const params = { |
| | | // 后端分页参数:current / size |
| | | current: pagination.currentPage, |
| | | size: pagination.pageSize, |
| | | ...searchForm |
| | | } |
| | | quotationProductListPage(params).then(res=>{ |
| | | getQuotationList(params).then(res=>{ |
| | | // console.log(res) |
| | | if(res.code===200){ |
| | | const records = res.data.records || [] |
| | | quotationList.value = records.map((item) => { |
| | | const mapped = mapQuotationItem(item) |
| | | mapped.totalAmount = calcTotalAmountFromProducts(mapped.products) |
| | | return mapped |
| | | }) |
| | | // 只复制需要的字段,避免将组件引用或其他对象放入响应式对象 |
| | | quotationList.value = (res.data.records || []).map(item => ({ |
| | | id: item.id, |
| | | quotationNo: item.quotationNo || '', |
| | | customer: item.customer || '', |
| | | customerId: item.customerId || undefined, |
| | | salesperson: item.salesperson || '', |
| | | quotationDate: item.quotationDate || '', |
| | | validDate: item.validDate || '', |
| | | paymentMethod: item.paymentMethod || '', |
| | | status: item.status || '草稿', |
| | | // 审批人(用于编辑时反显) |
| | | approveUserIds: item.approveUserIds || '', |
| | | remark: item.remark || '', |
| | | products: item.products ? item.products.map(product => ({ |
| | | productId: product.productId || '', |
| | | product: product.product || product.productName || '', |
| | | productModelId: product.productModelId || '', |
| | | specification: product.specification || '', |
| | | quantity: product.quantity || 0, |
| | | unit: product.unit || '', |
| | | unitPrice: product.unitPrice || 0, |
| | | amount: product.amount || 0 |
| | | })) : [], |
| | | subtotal: item.subtotal || 0, |
| | | freight: item.freight || 0, |
| | | otherFee: item.otherFee || 0, |
| | | discountRate: item.discountRate || 0, |
| | | discountAmount: item.discountAmount || 0, |
| | | totalAmount: item.totalAmount || 0 |
| | | })) |
| | | pagination.total = res.data.total |
| | | } |
| | | }) |
| | | // customerList().then((res) => { |
| | | // customerOption.value = res; |
| | | // }); |
| | | } |
| | | |
| | | const getUserList = async () => { |
| | |
| | | onMounted(()=>{ |
| | | getUserList() |
| | | handleSearch() |
| | | fetchCustomerOptions() |
| | | }) |
| | | </script> |
| | | |
| | |
| | | padding: 10px 0; |
| | | max-height: calc(100vh - 200px); |
| | | overflow-y: auto; |
| | | |
| | | |
| | | &::-webkit-scrollbar { |
| | | width: 6px; |
| | | height: 6px; |
| | | } |
| | | |
| | | |
| | | &::-webkit-scrollbar-thumb { |
| | | background: #c1c1c1; |
| | | border-radius: 3px; |
| | | |
| | | |
| | | &:hover { |
| | | background: #a8a8a8; |
| | | } |
| | |
| | | margin-bottom: 24px; |
| | | border-radius: 8px; |
| | | transition: all 0.3s ease; |
| | | |
| | | |
| | | &:hover { |
| | | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; |
| | | } |
| | | |
| | | |
| | | :deep(.el-card__header) { |
| | | padding: 16px 20px; |
| | | background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%); |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | |
| | | |
| | | :deep(.el-card__body) { |
| | | padding: 20px; |
| | | } |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | |
| | | |
| | | .card-icon { |
| | | font-size: 18px; |
| | | color: #409eff; |
| | | } |
| | | |
| | | |
| | | .card-title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: #303133; |
| | | flex: 1; |
| | | } |
| | | |
| | | |
| | | .header-btn { |
| | | margin-left: auto; |
| | | } |
| | |
| | | .product-table { |
| | | :deep(.el-table__header) { |
| | | background-color: #f5f7fa; |
| | | |
| | | |
| | | th { |
| | | background-color: #f5f7fa !important; |
| | | color: #606266; |
| | | font-weight: 600; |
| | | } |
| | | } |
| | | |
| | | |
| | | :deep(.el-table__row) { |
| | | &:hover { |
| | | background-color: #f5f7fa; |
| | | } |
| | | } |
| | | |
| | | |
| | | :deep(.el-table__cell) { |
| | | padding: 12px 0; |
| | | } |