| | |
| | | style="max-width: 400px; margin: 0 auto" |
| | | > |
| | | <el-form-item label="供应商名称" prop="supplierId"> |
| | | <el-select v-model="form.supplierId" placeholder="请选择供应商"> |
| | | <el-select v-model="form.supplierId" placeholder="请选择供应商" :disabled="isViewMode"> |
| | | <el-option :label="item.label" v-for="item in supplyList" :key="item.value" :value="item.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="煤种" prop="coalId"> |
| | | <el-select v-model="form.coalId" placeholder="请选择煤种"> |
| | | <el-select v-model="form.coalId" placeholder="请选择煤种" :disabled="isViewMode"> |
| | | <el-option :label="item.label" v-for="item in coalList" :key="item.value" :value="item.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | v-model.number="form.purchaseQuantity" |
| | | placeholder="请输入" |
| | | @blur="handleQuantityBlur" |
| | | :disabled="isViewMode" |
| | | > |
| | | <template v-slot:suffix> |
| | | <i style="font-style: normal">吨</i> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item |
| | | > |
| | | </el-form-item> |
| | | <el-form-item label="税率" prop="taxRate"> |
| | | <el-input |
| | | v-model.number="form.taxRate" |
| | | placeholder="请输入税率" |
| | | @blur="handleTaxRateBlur" |
| | | :disabled="isViewMode" |
| | | > |
| | | <template v-slot:suffix> |
| | | <i style="font-style: normal">%</i> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="单价(不含税)" prop="priceExcludingTax"> |
| | | <el-form-item label="单价(含税)" prop="priceIncludingTax"> |
| | | <el-input |
| | | v-model.number="form.priceExcludingTax" |
| | | placeholder="请输入" |
| | | v-model.number="form.priceIncludingTax" |
| | | placeholder="请输入含税单价" |
| | | @blur="handlePriceBlur" |
| | | :disabled="isViewMode" |
| | | > |
| | | <template v-slot:suffix> |
| | | <i style="font-style: normal">元</i> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="单价(含税)" prop="priceIncludingTax"> |
| | | <el-form-item label="单价(不含税)" prop="priceExcludingTax"> |
| | | <el-input |
| | | v-model.number="form.priceIncludingTax" |
| | | v-model.number="form.priceExcludingTax" |
| | | placeholder="自动计算" |
| | | disabled |
| | | > |
| | | <template v-slot:suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <el-input |
| | | v-model.number="form.totalPriceExcludingTax" |
| | | placeholder="自动计算" |
| | | disabled |
| | | > |
| | | <template v-slot:suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <el-input |
| | | v-model.number="form.totalPriceIncludingTax" |
| | | placeholder="自动计算" |
| | | disabled |
| | | > |
| | | <template v-slot:suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="登记人" prop="registrantId"> |
| | | <el-input v-model="form.registrantId" disabled placeholder="请输入"/> |
| | | <el-input :value="match(form.registrantId)" v-model.number="form.registrantId" disabled placeholder="请输入"/> |
| | | </el-form-item> |
| | | <el-form-item label="登记日期" prop="registrationDate"> |
| | | <el-date-picker |
| | |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <!-- 重置和取消 --> |
| | | <el-button @click="handleClose" v-if="title.includes('新增')" |
| | | <el-button @click="handleClose" v-if="title.includes('新增') || title.includes('查看')" |
| | | >取消 |
| | | </el-button |
| | | > |
| | |
| | | >重置 |
| | | </el-button |
| | | > |
| | | <el-button type="primary" @click="handleSubmit">确认</el-button> |
| | | <el-button type="primary" v-if="!isViewMode" @click="handleSubmit">确认</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | }); |
| | | const supplyList = ref([]); |
| | | const coalList = ref([]); |
| | | const isViewMode = computed(() => props.title.includes("查看")); |
| | | // 获取供应商下拉和煤种下拉 |
| | | const getDropdownData = async () => { |
| | | try { |
| | |
| | | defineExpose({ |
| | | getDropdownData, |
| | | }); |
| | | // 数值格式化工具函数 |
| | | const toFixed = (num, precision = 2) => { |
| | | if (isNaN(num) || num === null || num === undefined || num === "") { |
| | | return 0; |
| | | } |
| | | return ( |
| | | Math.floor(parseFloat(num) * Math.pow(10, precision)) / |
| | | Math.pow(10, precision) |
| | | ); |
| | | return Number((Math.floor(parseFloat(num) * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(precision)); |
| | | }; |
| | | // 含税单价计算 |
| | | const unitPriceWithTax = computed(() => { |
| | | const priceExcludingTax = parseFloat(form.value.priceExcludingTax) || 0; |
| | | const taxRate = parseFloat(form.value.taxRate) || 0; |
| | | if (!priceExcludingTax || !taxRate) { |
| | | return 0; |
| | | } |
| | | const result = priceExcludingTax * (1 + taxRate / 100); |
| | | return toFixed(result, 2); |
| | | }); |
| | | |
| | | // 含税总价计算 |
| | | const totalUnitPriceWithTax = computed(() => { |
| | | const priceExcludingTax = parseFloat(form.value.priceExcludingTax) || 0; |
| | | const taxRate = parseFloat(form.value.taxRate) || 0; |
| | | const purchaseQuantity = parseFloat(form.value.purchaseQuantity) || 0; |
| | | // 安全获取数值 |
| | | const safeNumber = (value) => { |
| | | const num = parseFloat(value); |
| | | return isNaN(num) ? 0 : num; |
| | | }; |
| | | |
| | | if (!priceExcludingTax || !taxRate || !purchaseQuantity) { |
| | | return 0; |
| | | } |
| | | // 计算逻辑 - 基于含税单价计算不含税价格 |
| | | const calculatePrices = () => { |
| | | const priceIncludingTax = safeNumber(form.value.priceIncludingTax); // 含税单价 |
| | | const taxRate = safeNumber(form.value.taxRate); // 税率 |
| | | const quantity = safeNumber(form.value.purchaseQuantity); // 采购数量 |
| | | |
| | | const unitPriceWithTaxValue = priceExcludingTax * (1 + taxRate / 100); |
| | | const result = unitPriceWithTaxValue * purchaseQuantity; |
| | | return toFixed(result, 2); |
| | | }); |
| | | // 1. 根据含税单价和税率计算不含税单价 |
| | | // 不含税单价 = 含税单价 / (1 + 税率/100) |
| | | const priceExcludingTax = priceIncludingTax && taxRate |
| | | ? toFixed(priceIncludingTax / (1 + taxRate / 100), 2) |
| | | : 0; |
| | | |
| | | // 不含税总价计算 |
| | | const taxExclusiveTotalPrice = computed(() => { |
| | | const purchaseQuantity = parseFloat(form.value.purchaseQuantity) || 0; |
| | | const priceExcludingTax = parseFloat(form.value.priceExcludingTax) || 0; |
| | | // 2. 计算不含税总价 = 不含税单价 × 数量 |
| | | const totalPriceExcludingTax = priceExcludingTax && quantity |
| | | ? toFixed(priceExcludingTax * quantity, 2) |
| | | : 0; |
| | | |
| | | if (!purchaseQuantity || !priceExcludingTax) { |
| | | return 0; |
| | | } |
| | | // 3. 计算含税总价 = 含税单价 × 数量 |
| | | const totalPriceIncludingTax = priceIncludingTax && quantity |
| | | ? toFixed(priceIncludingTax * quantity, 2) |
| | | : 0; |
| | | |
| | | const result = purchaseQuantity * priceExcludingTax; |
| | | return toFixed(result, 2); |
| | | }); |
| | | // 更新表单数据 |
| | | form.value.priceExcludingTax = priceExcludingTax; |
| | | form.value.totalPriceExcludingTax = totalPriceExcludingTax; |
| | | form.value.totalPriceIncludingTax = totalPriceIncludingTax; |
| | | }; |
| | | |
| | | // 监听计算值变化,同步到 form 对象中 |
| | | watch(unitPriceWithTax, (newValue) => { |
| | | form.value.priceIncludingTax = newValue; |
| | | }); |
| | | |
| | | watch(totalUnitPriceWithTax, (newValue) => { |
| | | form.value.totalPriceIncludingTax = newValue; |
| | | }); |
| | | |
| | | watch(taxExclusiveTotalPrice, (newValue) => { |
| | | form.value.totalPriceExcludingTax = newValue; |
| | | }); |
| | | // 监听表单对象变化,用于处理编辑模式下的数据加载和实时计算 |
| | | watch( |
| | | () => [form.value.priceIncludingTax, form.value.taxRate, form.value.purchaseQuantity], |
| | | () => { |
| | | // 防抖处理,避免频繁计算 |
| | | nextTick(() => { |
| | | calculatePrices(); |
| | | }); |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | const userStore = useUserStore(); |
| | | const userInfo = ref({}); |
| | | |
| | | // 处理税率输入框失焦,确保精度 |
| | | const match = () => { |
| | | return userInfo.value.nickName || "未知用户"; |
| | | }; |
| | | // 处理税率输入框失焦事件 |
| | | const handleTaxRateBlur = () => { |
| | | if ( |
| | | form.value.taxRate !== null && |
| | | form.value.taxRate !== undefined && |
| | | form.value.taxRate !== "" |
| | | ) { |
| | | if (form.value.taxRate !== null && form.value.taxRate !== undefined && form.value.taxRate !== "") { |
| | | form.value.taxRate = toFixed(parseFloat(form.value.taxRate), 2); |
| | | // watch 会自动触发 calculatePrices,不需要手动调用 |
| | | } |
| | | }; |
| | | |
| | | // 处理不含税单价输入框失焦,确保精度 |
| | | // 处理含税单价输入框失焦事件 |
| | | const handlePriceBlur = () => { |
| | | if ( |
| | | form.value.priceExcludingTax !== null && |
| | | form.value.priceExcludingTax !== undefined && |
| | | form.value.priceExcludingTax !== "" |
| | | ) { |
| | | form.value.priceExcludingTax = toFixed( |
| | | parseFloat(form.value.priceExcludingTax), |
| | | 2 |
| | | ); |
| | | if (form.value.priceIncludingTax !== null && form.value.priceIncludingTax !== undefined && form.value.priceIncludingTax !== "") { |
| | | form.value.priceIncludingTax = toFixed(parseFloat(form.value.priceIncludingTax), 2); |
| | | // watch 会自动触发 calculatePrices,不需要手动调用 |
| | | } |
| | | }; |
| | | |
| | | // 处理采购数量输入框失焦,确保精度 |
| | | // 处理采购数量输入框失焦事件 |
| | | const handleQuantityBlur = () => { |
| | | if ( |
| | | form.value.purchaseQuantity !== null && |
| | | form.value.purchaseQuantity !== undefined && |
| | | form.value.purchaseQuantity !== "" |
| | | ) { |
| | | form.value.purchaseQuantity = toFixed( |
| | | parseFloat(form.value.purchaseQuantity), |
| | | 3 |
| | | ); // 数量保留3位小数 |
| | | if (form.value.purchaseQuantity !== null && form.value.purchaseQuantity !== undefined && form.value.purchaseQuantity !== "") { |
| | | form.value.purchaseQuantity = toFixed(parseFloat(form.value.purchaseQuantity), 3); // 数量保留3位小数 |
| | | // watch 会自动触发 calculatePrices,不需要手动调用 |
| | | } |
| | | }; |
| | | |
| | | onMounted(async () => { |
| | | let res = await userStore.getInfo(); |
| | | userInfo.value = res; |
| | | getDropdownData() |
| | | userInfo.value = res.user; |
| | | await getDropdownData(); |
| | | // 组件加载完成后触发一次计算 |
| | | calculatePrices(); |
| | | }); |
| | | const rules = { |
| | | supplierName: [ |