| | |
| | | </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)" |
| | |
| | | </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 |
| | |
| | | <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%"> |
| | |
| | | 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 {customerList} from "@/api/salesManagement/salesLedger.js"; |
| | | import {modelList, productTreeList} from "@/api/basicData/product.js"; |
| | | import {listCustomer} from "@/api/basicData/customer.js"; |
| | | import { userListNoPage } from "@/api/system/user.js"; |
| | |
| | | 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: '', |
| | | customerId: undefined, |
| | | customer: '', |
| | | salesperson: '', |
| | | quotationDate: '', |
| | | validDate: '', |
| | |
| | | |
| | | 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 |
| | | }) |
| | |
| | | resetForm() |
| | | dialogVisible.value = true |
| | | getProductOptions(); |
| | | fetchCustomerOptions() |
| | | } |
| | | |
| | | const fetchCustomerOptions = () => { |
| | | if (customerOption.value.length > 0) return |
| | | listCustomer({current: -1,size:-1, type: 0}).then((res) => { |
| | | customerOption.value = res.data.records; |
| | | }); |
| | |
| | | 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) { |
| | |
| | | products: row.products ? row.products.map(product => ({ |
| | | productId: product.productId || '', |
| | | product: product.product || product.productName || '', |
| | | specificationId: product.specificationId || '', |
| | | productModelId: product.productModelId || '', |
| | | specification: product.specification || '', |
| | | quantity: product.quantity || 0, |
| | | unit: product.unit || '', |
| | |
| | | form.id = row.id || form.id || null |
| | | // 先加载产品树数据,否则 el-tree-select 无法反显产品名称 |
| | | await getProductOptions() |
| | | await fetchCustomerOptions() |
| | | |
| | | // 只复制需要的字段,避免将组件引用放入响应式对象 |
| | | 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 || '' |
| | |
| | | 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 || '', |
| | |
| | | productId: '', |
| | | product: '', |
| | | productName: '', |
| | | specificationId: '', |
| | | specification: '', |
| | | productModelId: '', |
| | | quantity: 1, |
| | | unit: '', |
| | | unitPrice: 0, |
| | |
| | | id: item.id, |
| | | quotationNo: item.quotationNo || '', |
| | | customer: item.customer || '', |
| | | customerId: item.customerId || undefined, |
| | | salesperson: item.salesperson || '', |
| | | quotationDate: item.quotationDate || '', |
| | | validDate: item.validDate || '', |
| | |
| | | products: item.products ? item.products.map(product => ({ |
| | | productId: product.productId || '', |
| | | product: product.product || product.productName || '', |
| | | specificationId: product.specificationId || '', |
| | | productModelId: product.productModelId || '', |
| | | specification: product.specification || '', |
| | | quantity: product.quantity || 0, |
| | | unit: product.unit || '', |
| | |
| | | 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; |
| | | } |