From 7c86b549b27bd54f6bd5de81c13f8242f91c87ff Mon Sep 17 00:00:00 2001 From: 张诺 <zhang_12370@163.com> Date: 星期一, 16 六月 2025 18:03:27 +0800 Subject: [PATCH] 优化文件上传组件及表格显示 --- src/views/salesOutbound/components/formDia.vue | 203 +++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 164 insertions(+), 39 deletions(-) diff --git a/src/views/salesOutbound/components/formDia.vue b/src/views/salesOutbound/components/formDia.vue index 2984136..8607196 100644 --- a/src/views/salesOutbound/components/formDia.vue +++ b/src/views/salesOutbound/components/formDia.vue @@ -1,13 +1,13 @@ <template> <div> - <el-dialog :title="operationType === 'add' ? '鏂板鍑哄簱' : '缂栬緫鍑哄簱'" + <el-dialog :title="operationType === 'add' ? '鏂板閿�鍞嚭搴�' : '缂栬緫閿�鍞嚭搴�'" v-model="dialogVisitable" width="800px" @close="cancel"> - <el-form :model="form" :rules="rules" ref="userRef" label-width="100px"> + <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> <el-row> <el-col :span="12"> - <el-form-item label="閿�鍞棩鏈�" prop="userName"> + <el-form-item label="閿�鍞棩鏈�" prop="saleDate"> <el-date-picker - v-model="form.userName" + v-model="form.saleDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" @@ -18,13 +18,13 @@ </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="瀹㈡埛" prop="nickName"> - <el-select v-model="form.nickName" placeholder="璇烽�夋嫨瀹㈡埛"> + <el-form-item label="瀹㈡埛" prop="customerId"> + <el-select v-model="form.customerId" placeholder="璇烽�夋嫨瀹㈡埛"> <el-option v-for="item in customerOptions" - :key="item.value" - :label="item.label" - :value="item.value" + :key="item.id" + :label="item.customerName" + :value="item.id" /> </el-select> </el-form-item> @@ -32,44 +32,80 @@ </el-row> <el-row> <el-col :span="12"> - <el-form-item label="鐓ょ" prop="type"> - <el-select v-model="form.nickName" placeholder="璇烽�夋嫨鐓ょ"> + <el-form-item label="鐓ょ" prop="coalId"> + <el-select v-model="form.coalId" placeholder="璇烽�夋嫨鐓ょ" @change="setInfo"> <el-option - v-for="item in typeOptions" - :key="item.value" - :label="item.label" - :value="item.value" + v-for="item in coalOptions" + :key="item.id" + :label="item.coal" + :value="item.id" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="鍗曚綅" prop="nickName"> - <el-input v-model="form.nickName" placeholder="璇疯緭鍏ュ崟浣�" maxlength="30" /> + <el-form-item label="鍗曚綅" prop="unit"> + <el-input v-model="form.unit" placeholder="璇疯緭鍏ュ崟浣�" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> - <el-form-item label="閿�鍞暟閲�" prop="userName"> - <el-input v-model="form.userName" placeholder="璇疯緭鍏ラ攢鍞暟閲�" maxlength="30" type="number" /> + <el-form-item label="搴撳瓨鏁伴噺" prop="inventoryQuantity"> + <el-input v-model="form.inventoryQuantity" placeholder="璇疯緭鍏ラ攢鍞暟閲�" maxlength="30" type="number" /> </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="閿�鍞崟浠�" prop="userName"> - <el-input v-model="form.userName" placeholder="璇疯緭鍏ラ攢鍞崟浠�(鍚◣)" maxlength="30" type="number" /> + <el-form-item label="鍗曚环(鍚◣)" prop="priceIncludingTax"> + <el-input v-model="form.priceIncludingTax" placeholder="璇疯緭鍏ラ攢鍞崟浠�(鍚◣)" maxlength="30" type="number" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> - <el-form-item label="閿�鍞�讳环" prop="userName"> - <el-input v-model="form.userName" placeholder="璇疯緭鍏ラ攢鍞�讳环(鍚◣)" maxlength="30" type="number" /> + <el-form-item label="閿�鍞暟閲�" prop="saleQuantity"> + <el-input v-model="form.saleQuantity" placeholder="璇疯緭鍏ラ攢鍞暟閲�" maxlength="30" type="number" /> </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="鐑��" prop="userName"> - <el-input v-model="form.userName" placeholder="璇疯緭鍏ョ儹鍊�" maxlength="30" /> + <el-form-item label="閿�鍞崟浠�(鍚◣)" prop="salePrice" @change="mathProfit"> + <el-input v-model="form.salePrice" placeholder="璇疯緭鍏ラ攢鍞崟浠�(鍚◣)" maxlength="30" type="number" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="閿�鍞�讳环(鍚◣)" prop="totalAmount"> + <el-input v-model="form.totalAmount" placeholder="璇疯緭鍏ラ攢鍞�讳环(鍚◣)" maxlength="30" type="number" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="杩愯垂" prop="freight"> + <el-input v-model="form.freight" placeholder="璇疯緭鍏ラ攢鍞�讳环(鍚◣)" maxlength="30" type="number" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="璐攢鐓ょ◣鐜�(%)" prop="taxCoal"> + <el-input v-model="form.taxCoal" placeholder="璇疯緭鍏ラ攢鍞�讳环(鍚◣)" maxlength="30" type="number" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="杩愯緭绋庣巼(%)" prop="taxTrans"> + <el-input v-model="form.taxTrans" placeholder="璇疯緭鍏ラ攢鍞�讳环(鍚◣)" maxlength="30" type="number" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="姣涘埄娑�" prop="grossProfit"> + <el-input v-model="form.grossProfit" placeholder="姣涘埄娑�" maxlength="30" type="number" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍑�鍒╂鼎" prop="netProfit"> + <el-input v-model="form.netProfit" placeholder="鍑�鍒╂鼎" maxlength="30" type="number" /> </el-form-item> </el-col> </el-row> @@ -85,43 +121,132 @@ </template> <script setup> -import {ref, reactive} from "vue"; +import {reactive, ref} from "vue"; +import {addOrEditSalesRecord, customerList, officialList} from "../../../api/salesOutbound/index.js"; +import useUserStore from '@/store/modules/user' + const { proxy } = getCurrentInstance() const emit = defineEmits() - +const userStore = useUserStore() const dialogVisitable = ref(false); const operationType = ref('add'); const customerOptions = ref([]) // 瀹㈡埛涓嬫媺妗� -const typeOptions = ref([]) // 鐓ょ涓嬫媺妗� +const coalOptions = ref([]) // 鐓ょ涓嬫媺妗� const data = reactive({ - form: {}, + form: { + saleDate: '', + customerId: '', + coalId: '', + unit: '', + saleQuantity: '', + salePrice: '', + totalAmount: '', + freight: '', + taxCoal: '', + taxTrans: '', + grossProfit: '', + netProfit: '', + inventoryQuantity: '', + priceIncludingTax: '', + }, rules: { - userName: [{ required: true, message: "鐧诲綍璐﹀彿涓嶈兘涓虹┖", trigger: "blur" },], - nickName: [{ required: true, message: "鐢ㄦ埛濮撳悕涓嶈兘涓虹┖", trigger: "blur" }], - roleIds: [{ required: true, message: "瑙掕壊涓嶈兘涓虹┖", trigger: "change" }], - deptId: [{ required: true, message: "閮ㄩ棬涓嶈兘涓虹┖", trigger: "change" }], - password: [{ required: true, message: "鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, { min: 5, max: 20, message: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" }], + saleDate: [{ required: true, message: "璇烽�夋嫨鏃ユ湡", trigger: "change" },], } }) const { form, rules } = toRefs(data) // 鎵撳紑寮规 -const openDialog = (type, row) => { - console.log('openDialog', type, row) +const openDialog = async (type, row) => { dialogVisitable.value = true + form.value.saleDate = proxy.getCurrentDate() + customerList().then((res) => { + customerOptions.value = res.data + }) + officialList().then((res) => { + coalOptions.value = res.data + }) + let res = await userStore.getInfo() + form.value.registrantId = res.user.userId + form.value.taxCoal = 13 + form.value.taxTrans = 9 + form.value.freight = 20 + if (type === 'edit') { + form.value = {...row} + } +} +// 澶嶅埗鐓ょ鐩稿叧淇℃伅 +const setInfo = (val) => { + const index = coalOptions.value.findIndex(item => item.id === val) + if (index > -1) { + form.value.inventoryQuantity = coalOptions.value[index].inventoryQuantity + form.value.priceIncludingTax = coalOptions.value[index].priceIncludingTax + form.value.unit = coalOptions.value[index].unit + } + if (!val) { + form.value.inventoryQuantity = '' + form.value.priceIncludingTax = '' + form.value.unit = '' + } +} +// 璁$畻 +const mathProfit = () => { + form.value.totalAmount = form.value.saleQuantity * form.value.salePrice + // 杈撳叆鏁版嵁 + const purchaseTons = form.value.inventoryQuantity; // 搴撳瓨鏁伴噺 + const saleTons = form.value.saleQuantity; // 閿�鍞暟閲� + const purchasePricePerTon = form.value.priceIncludingTax; // 鍚◣鍗曚环 + const transportPricePerTon = form.value.freight; // 杩愯垂 + const salePricePerTon = form.value.salePrice; // 閿�鍞崟浠凤紙鍏�/鍚級 + const coalTaxRate = form.value.taxCoal / 100; // 璐攢鐓ょ◣鐜囷紙13%锛� + const transportTaxRate = form.value.taxTrans / 100; // 杩愯緭绋庣巼锛�9%锛� + const surchargeRate = 0.12; // 澧炲�肩◣闄勫姞绋庣巼锛�12%锛� + const stampDutyRate = 3 / 10000; // 鍗拌姳绋庣◣鐜囷紙0.03%锛� + const waterFundRate = 5 / 10000; // 姘村埄鍩洪噾璐圭巼锛�0.05%锛� + +// 璁$畻涓嶅惈绋庝环鏍煎強杩涢」/閿�椤圭◣棰� + const A = purchasePricePerTon / (1 + coalTaxRate); // 璐叅涓嶅惈绋庡崟浠� + const B = A * coalTaxRate * purchaseTons; // 璐叅杩涢」绋庨 + const C = transportPricePerTon / (1 + transportTaxRate); // 杩愯垂涓嶅惈绋庡崟浠� + const D = C * transportTaxRate * purchaseTons; // 杩愯垂杩涢」绋庨 + const E = salePricePerTon / (1 + coalTaxRate); // 閿�鍞笉鍚◣鍗曚环 + const F = E * coalTaxRate * saleTons; // 閿�椤圭◣棰� + +// 姣涘埄娑� = 閿�鍞敹鍏� - 鎴愭湰鎴愭湰锛堣喘鐓�+杩愯垂锛夌殑鎴愭湰閮ㄥ垎 + const G = E * saleTons - A * saleTons - C * saleTons; + form.value.grossProfit = G.toFixed(2); + +// 搴旂即绾冲鍊肩◣ = 閿�椤圭◣ - 鍙姷鎵h繘椤圭◣锛堟寜閿�鍞噺姣斾緥璁$畻锛� + const H = F - (A * coalTaxRate * saleTons) - (C * transportTaxRate * saleTons); + +// 澧炲�肩◣闄勫姞绋� + const K = H * surchargeRate; + +// 鍗拌姳绋庯細璐�佽繍銆侀攢涓夋柟閲戦鍚堣 脳 绋庣巼 + const M = (purchasePricePerTon * saleTons + + transportPricePerTon * saleTons + + salePricePerTon * saleTons) * stampDutyRate; + +// 姘村埄寤鸿鍩洪噾锛氶攢鍞敹鍏� 脳 璐圭巼 + const P = E * saleTons * waterFundRate; + +// 鍑�鍒╂鼎 = 姣涘埄娑� - 鍚勭被绋庤垂锛堥檮鍔犵◣銆佸嵃鑺辩◣銆佹按鍒╁熀閲戯級 + form.value.netProfit = (G - K - M - P).toFixed(2); } // 鎻愪氦鍚堝苟琛ㄥ崟 const submitForm = () => { - proxy.$refs["userRef"].validate(valid => { + proxy.$refs["formRef"].validate(valid => { if (valid) { - + addOrEditSalesRecord(form.value).then(() => { + cancel() + proxy.$modal.msgSuccess('鎻愪氦鎴愬姛') + }) } }) } // 鍏抽棴鍚堝苟琛ㄥ崟 const cancel = () => { - proxy.resetForm("userRef") + proxy.resetForm("formRef") dialogVisitable.value = false emit('closeDia') } -- Gitblit v1.9.3