From 4b1304917b0b16b09dd50191fab59d96933c0cf3 Mon Sep 17 00:00:00 2001 From: 曹睿 <360930172@qq.com> Date: 星期二, 17 六月 2025 17:31:11 +0800 Subject: [PATCH] feat: 6月15日任务完90% --- src/views/salesManagement/receiptPayment/index.vue | 567 +++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 379 insertions(+), 188 deletions(-) diff --git a/src/views/salesManagement/receiptPayment/index.vue b/src/views/salesManagement/receiptPayment/index.vue index 8057675..4c6fd8d 100644 --- a/src/views/salesManagement/receiptPayment/index.vue +++ b/src/views/salesManagement/receiptPayment/index.vue @@ -1,126 +1,296 @@ <template> <div class="app-container"> <div class="search_form"> - <div> - <span class="search_title">鍥炴鐧昏锛�</span> - <el-input - v-model="searchForm.searchText" - style="width: 240px" - placeholder="杈撳叆瀹㈡埛鍚嶇О/鍚堝悓鍙锋悳绱�" - @change="handleQuery" - clearable - prefix-icon="Search" - /> - <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button> - </div> - <div> - <el-button type="primary" @click="openForm('add')">鏂板鍥炴</el-button> - </div> + <el-form :inline="true" :model="searchForm" style="width: 100%"> + <el-row justify="space-between"> + <el-col :span="20"> + <el-form-item label="鍥炴鐧昏"> + <el-input + v-model="searchForm.searchText" + style="width: 240px" + placeholder="杈撳叆瀹㈡埛鍚嶇О/鍚堝悓鍙锋悳绱�" + clearable + prefix-icon="Search" + @change="handleQuery" + /> + </el-form-item> + <el-form-item label="涓嶆樉绀哄緟鍥炴"> + <el-checkbox + v-model="searchForm.status" + :label="0" + @change="handleQuery" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="handleQuery"> 鎼滅储 </el-button> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item style="float: right; margin-right: unset"> + <el-button type="primary" @click="openForm('add')"> + 鏂板鍥炴 + </el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> </div> <div class="table_list"> - <el-table :data="tableData" border v-loading="tableLoading" - @selection-change="handleSelectionChange" - :row-key="row => row.id" - show-summary - :summary-method="summarizeMainTable" - :expand-row-keys="expandedRowKeys" - @expand-change="expandChange" - height="calc(100vh - 18.5em)"> + <el-table + :data="tableData" + border + v-loading="tableLoading" + @selection-change="handleSelectionChange" + :row-key="(row) => row.id" + show-summary + :summary-method="summarizeMainTable" + :expand-row-keys="expandedRowKeys" + @expand-change="expandChange" + height="calc(100vh - 18.5em)" + > <el-table-column align="center" type="selection" width="55" /> <el-table-column type="expand"> <template #default="props"> - <el-table :data="props.row.children" border - show-summary - :summary-method="summarizeChildrenTable"> - <el-table-column align="center" label="搴忓彿" type="index" width="60" /> + <el-table + :data="props.row.children" + border + show-summary + :summary-method="summarizeChildrenTable" + > + <el-table-column + align="center" + label="搴忓彿" + type="index" + width="60" + /> <el-table-column label="鍥炴鏃ユ湡" prop="receiptPaymentDate" /> <el-table-column label="鍥炴閲戦" prop="receiptPaymentAmount"> <template #default="scope"> - <el-input v-model="scope.row.receiptPaymentAmount" :disabled="!scope.row.editType"></el-input> + <el-input + v-model="scope.row.receiptPaymentAmount" + :disabled="!scope.row.editType" + ></el-input> </template> </el-table-column> - <el-table-column label="鍥炴鏂瑰紡" prop="receiptPaymentType" > + <el-table-column label="鍥炴鏂瑰紡" prop="receiptPaymentType"> <template #default="scope"> - <el-select v-model="scope.row.receiptPaymentType" placeholder="璇烽�夋嫨" clearable :disabled="!scope.row.editType"> - <el-option v-for="item in receipt_payment_type" :key="item.value" :label="item.label" :value="item.value"/> + <el-select + v-model="scope.row.receiptPaymentType" + placeholder="璇烽�夋嫨" + clearable + :disabled="!scope.row.editType" + > + <el-option + v-for="item in receipt_payment_type" + :key="item.value" + :label="item.label" + :value="item.value" + /> </el-select> </template> </el-table-column> <el-table-column label="鐧昏浜�" prop="registrant" /> - <el-table-column label="鐧昏鏃ユ湡" prop="createTime" /> + <el-table-column label="鐧昏鏃ユ湡" prop="createTime" /> <el-table-column label="鎿嶄綔" width="150"> <template #default="scope"> - <el-button link type="primary" size="small" @click="changeEditType(scope.row)" v-if="!scope.row.editType">缂栬緫</el-button> - <el-button link type="primary" size="small" @click="saveReceiptPayment(scope.row)" v-if="scope.row.editType">淇濆瓨</el-button> - <el-button link type="primary" size="small" @click="delReceiptRecord(scope.row)">鍒犻櫎</el-button> + <el-button + link + type="primary" + size="small" + @click="changeEditType(scope.row)" + v-if="!scope.row.editType" + >缂栬緫</el-button + > + <el-button + link + type="primary" + size="small" + @click="saveReceiptPayment(scope.row)" + v-if="scope.row.editType" + >淇濆瓨</el-button + > + <el-button + link + type="primary" + size="small" + @click="delReceiptRecord(scope.row)" + >鍒犻櫎</el-button + > </template> </el-table-column> </el-table> </template> </el-table-column> <el-table-column align="center" label="搴忓彿" type="index" width="60" /> - <el-table-column label="閿�鍞悎鍚屽彿" prop="salesContractNo" show-overflow-tooltip/> - <el-table-column label="瀹㈡埛鍚堝悓鍙�" prop="customerContractNo" show-overflow-tooltip/> - <el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" show-overflow-tooltip/> - <el-table-column label="浜у搧澶х被" prop="productCategory" show-overflow-tooltip/> - <el-table-column label="鍙戠エ鍙�" prop="invoiceNo" show-overflow-tooltip/> - <el-table-column label="鍙戠エ閲戦(鍏�)" prop="invoiceTotal" show-overflow-tooltip :formatter="formattedNumber"/> - <el-table-column label="绋庣巼" prop="taxRate" show-overflow-tooltip/> - <el-table-column label="鍥炴閲戦(鍏�)" prop="receiptPaymentAmountTotal" show-overflow-tooltip :formatter="formattedNumber"/> - <el-table-column label="寰呭洖娆鹃噾棰�(鍏�)" prop="noReceiptAmount" show-overflow-tooltip :formatter="formattedNumber"/> + <el-table-column + label="閿�鍞悎鍚屽彿" + prop="salesContractNo" + show-overflow-tooltip + /> + <el-table-column + label="瀹㈡埛鍚堝悓鍙�" + prop="customerContractNo" + show-overflow-tooltip + /> + <el-table-column + label="瀹㈡埛鍚嶇О" + prop="customerName" + show-overflow-tooltip + /> + <el-table-column + label="椤圭洰鍚嶇О" + prop="customerName" + show-overflow-tooltip + /> + <el-table-column + label="浜у搧澶х被" + prop="productCategory" + show-overflow-tooltip + /> + <el-table-column + label="鍙戠エ鍙�" + prop="invoiceNo" + show-overflow-tooltip + /> + <el-table-column + label="鍙戠エ閲戦(鍏�)" + prop="invoiceTotal" + show-overflow-tooltip + :formatter="formattedNumber" + /> + <el-table-column label="绋庣巼" prop="taxRate" show-overflow-tooltip /> + <el-table-column + label="鍥炴閲戦(鍏�)" + prop="receiptPaymentAmountTotal" + show-overflow-tooltip + :formatter="formattedNumber" + /> + <el-table-column + label="寰呭洖娆鹃噾棰�(鍏�)" + prop="noReceiptAmount" + show-overflow-tooltip + > + <template #default="{ row, column }"> + <el-text type="danger"> + {{ formattedNumber(row, column, row.noReceiptAmount) }} + </el-text> + </template> + </el-table-column> </el-table> - <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" :page="page.current" - :limit="page.size" @pagination="paginationChange" /> + <pagination + v-show="total > 0" + :total="total" + layout="total, sizes, prev, pager, next, jumper" + :page="page.current" + :limit="page.size" + @pagination="paginationChange" + /> </div> - <el-dialog v-model="dialogFormVisible" title="鏂板鍙戠エ鍙烽〉闈�" width="70%" @close="closeDia"> - <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> + <el-dialog + v-model="dialogFormVisible" + title="鏂板鍙戠エ鍙烽〉闈�" + width="70%" + @close="closeDia" + > + <el-form + :model="form" + label-width="140px" + label-position="top" + :rules="rules" + ref="formRef" + > <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="閿�鍞悎鍚屽彿锛�" prop="salesContractNo"> - <el-input v-model="form.salesContractNo" placeholder="鑷姩濉厖" disabled /> + <el-input + v-model="form.salesContractNo" + placeholder="鑷姩濉厖" + disabled + /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="瀹㈡埛鍚嶇О锛�" prop="customerName"> - <el-input v-model="form.customerName" placeholder="鑷姩濉厖" disabled /> + <el-input + v-model="form.customerName" + placeholder="鑷姩濉厖" + disabled + /> </el-form-item> </el-col> </el-row> <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="鍙戠エ鍙凤細" prop="invoiceNo"> - <el-input v-model="form.invoiceNo" placeholder="鑷姩濉厖" disabled/> + <el-input + v-model="form.invoiceNo" + placeholder="鑷姩濉厖" + disabled + /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鍙戠エ閲戦(鍏�)锛�" prop="invoiceTotal"> - <el-input type="number" v-model="form.invoiceTotal" placeholder="鑷姩濉厖" :step="0.01" disabled/> + <el-input + type="number" + v-model="form.invoiceTotal" + placeholder="鑷姩濉厖" + :step="0.01" + disabled + /> </el-form-item> </el-col> </el-row> <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="绋庣巼锛�" prop="taxRate"> - <el-input type="number" v-model="form.taxRate" placeholder="鑷姩濉厖" :step="0.01" disabled/> + <el-input + type="number" + v-model="form.taxRate" + placeholder="鑷姩濉厖" + :step="0.01" + disabled + /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鏈鍥炴閲戦锛�" prop="receiptPaymentAmount"> - <el-input type="number" min="0" v-model="form.receiptPaymentAmount" placeholder="璇疯緭鍏�" :step="0.01" clearable/> + <el-input + type="number" + min="0" + v-model="form.receiptPaymentAmount" + placeholder="璇疯緭鍏�" + :step="0.01" + clearable + /> </el-form-item> </el-col> </el-row> <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="鍥炴褰㈠紡锛�" prop="receiptPaymentType"> - <el-select v-model="form.receiptPaymentType" placeholder="璇烽�夋嫨" clearable> - <el-option v-for="item in receipt_payment_type" :key="item.value" :label="item.label" :value="item.value"/> + <el-select + v-model="form.receiptPaymentType" + placeholder="璇烽�夋嫨" + clearable + > + <el-option + v-for="item in receipt_payment_type" + :key="item.value" + :label="item.label" + :value="item.value" + /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鐧昏浜猴細" prop="registrant"> - <el-input v-model="form.registrant" placeholder="璇疯緭鍏�" clearable disabled/> + <el-input + v-model="form.registrant" + placeholder="璇疯緭鍏�" + clearable + disabled + /> </el-form-item> </el-col> </el-row> @@ -128,13 +298,13 @@ <el-col :span="12"> <el-form-item label="鏉ユ鏃ユ湡锛�" prop="receiptPaymentDate"> <el-date-picker - style="width: 100%" - v-model="form.receiptPaymentDate" - value-format="YYYY-MM-DD" - format="YYYY-MM-DD" - type="date" - placeholder="璇烽�夋嫨" - clearable + style="width: 100%" + v-model="form.receiptPaymentDate" + value-format="YYYY-MM-DD" + format="YYYY-MM-DD" + type="date" + placeholder="璇烽�夋嫨" + clearable /> </el-form-item> </el-col> @@ -151,45 +321,48 @@ </template> <script setup> -import pagination from '@/components/PIMTable/Pagination.vue' -import { ref } from 'vue' +import pagination from "@/components/PIMTable/Pagination.vue"; +import { ref } from "vue"; import { receiptPaymentSaveOrUpdate, bindInvoiceNoRegPage, invoiceInfo, receiptPaymentHistoryListNoPage, - receiptPaymentDel + receiptPaymentDel, } from "../../../api/salesManagement/receiptPayment.js"; -import useUserStore from '@/store/modules/user' -import { ElMessage,ElMessageBox } from 'element-plus' -const userStore = useUserStore() -const { proxy } = getCurrentInstance() -const tableData = ref([]) -const selectedRows = ref([]) -const tableLoading = ref(false) +import useUserStore from "@/store/modules/user"; +import { ElMessage, ElMessageBox } from "element-plus"; +import useFormData from "@/hooks/useFormData"; + +const userStore = useUserStore(); +const { proxy } = getCurrentInstance(); +const tableData = ref([]); +const selectedRows = ref([]); +const tableLoading = ref(false); const page = reactive({ current: 1, size: 100, -}) -const total = ref(0) -const expandedRowKeys = ref([]) +}); +const total = ref(0); +const expandedRowKeys = ref([]); // 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁 -const dialogFormVisible = ref(false) +const dialogFormVisible = ref(false); const data = reactive({ searchForm: { - searchText: '', + searchText: "", + status: false, }, form: { - salesContractNo: '', - customerName: '', - invoiceNo: '', - invoiceTotal: '', - taxRate: '', - receiptPaymentAmount: '', - receiptPaymentType: '', - registrant: '', - receiptPaymentDate: '' + salesContractNo: "", + customerName: "", + invoiceNo: "", + invoiceTotal: "", + taxRate: "", + receiptPaymentAmount: "", + receiptPaymentType: "", + registrant: "", + receiptPaymentDate: "", }, rules: { salesContractNo: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], @@ -197,14 +370,21 @@ invoiceNo: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], invoiceTotal: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], taxRate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - receiptPaymentAmount: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - receiptPaymentType: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + receiptPaymentAmount: [ + { required: true, message: "璇烽�夋嫨", trigger: "change" }, + ], + receiptPaymentType: [ + { required: true, message: "璇烽�夋嫨", trigger: "change" }, + ], registrant: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - receiptPaymentDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - } -}) -const { searchForm, form, rules } = toRefs(data) -const { receipt_payment_type } = proxy.useDict("receipt_payment_type") + receiptPaymentDate: [ + { required: true, message: "璇烽�夋嫨", trigger: "change" }, + ], + }, +}); +const { form, rules } = toRefs(data); +const { form: searchForm, resetForm } = useFormData(data.searchForm); +const { receipt_payment_type } = proxy.useDict("receipt_payment_type"); const formattedNumber = (row, column, cellValue) => { return parseFloat(cellValue).toFixed(2); @@ -212,151 +392,162 @@ // 鏌ヨ鍒楄〃 /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { - page.current = 1 - getList() -} + page.current = 1; + getList(); +}; const paginationChange = (obj) => { page.current = obj.page; page.size = obj.limit; - getList() -} + getList(); +}; const getList = () => { - expandedRowKeys.value = [] - tableLoading.value = true - bindInvoiceNoRegPage({...searchForm.value, ...page}).then(res => { - tableLoading.value = false - tableData.value = res.data.records - total.value = res.data.total - }).catch(() => { - tableLoading.value = false - }) -} + expandedRowKeys.value = []; + tableLoading.value = true; + bindInvoiceNoRegPage({ ...searchForm, ...page }) + .then((res) => { + tableLoading.value = false; + tableData.value = res.data.records; + total.value = res.data.total; + }) + .catch(() => { + tableLoading.value = false; + }); +}; // 灞曞紑琛� const expandChange = (row, expandedRows) => { if (expandedRows.length > 0) { - expandedRowKeys.value = [] + expandedRowKeys.value = []; try { - receiptPaymentHistoryListNoPage({invoiceLedgerId: row.id, - type: 1 }).then(res => { - const index = tableData.value.findIndex(item => item.id === row.id); + receiptPaymentHistoryListNoPage({ + invoiceLedgerId: row.id, + type: 1, + }).then((res) => { + const index = tableData.value.findIndex((item) => item.id === row.id); if (index > -1) { - if(res?.length > 0) { - res.forEach(item => { - item.editType = false - }) + if (res?.length > 0) { + res.forEach((item) => { + item.editType = false; + }); } tableData.value[index].children = res; } - expandedRowKeys.value.push(row.id) - }) + expandedRowKeys.value.push(row.id); + }); } catch (error) { - console.log(error) + console.log(error); } } else { - expandedRowKeys.value = [] + expandedRowKeys.value = []; } -} +}; // 琛ㄦ牸閫夋嫨鏁版嵁 const handleSelectionChange = (selection) => { - console.log('selection', selection) - selectedRows.value = selection.filter(item => item.customerContractNo !== null); -} + console.log("selection", selection); + selectedRows.value = selection.filter( + (item) => item.customerContractNo !== null + ); +}; // 涓昏〃鍚堣鏂规硶 const summarizeMainTable = (param) => { - return proxy.summarizeTable(param, ['invoiceTotal', 'receiptPaymentAmountTotal', 'noReceiptAmount'], { - ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� - futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� - }); + return proxy.summarizeTable( + param, + ["invoiceTotal", "receiptPaymentAmountTotal", "noReceiptAmount"], + { + ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + } + ); }; // 瀛愯〃鍚堣鏂规硶 const summarizeChildrenTable = (param) => { - return proxy.summarizeTable(param, ['receiptPaymentAmount']); -} + return proxy.summarizeTable(param, ["receiptPaymentAmount"]); +}; // 鎵撳紑寮规 const openForm = () => { - form.value = {} - if(selectedRows.value.length !== 1) { - proxy.$modal.msgError("璇烽�夋嫨涓�鏉℃暟鎹�") - return + form.value = {}; + if (selectedRows.value.length !== 1) { + proxy.$modal.msgError("璇烽�夋嫨涓�鏉℃暟鎹�"); + return; } // - console.log('(selectedRows.value',selectedRows.value) - if(selectedRows.value[0].noReceiptAmount === 0){ - proxy.$modal.msgError("寰呭洖娆鹃噾棰濅负0鍏�") - return + console.log("(selectedRows.value", selectedRows.value); + if (selectedRows.value[0].noReceiptAmount === 0) { + proxy.$modal.msgError("寰呭洖娆鹃噾棰濅负0鍏�"); + return; } - invoiceInfo({id: selectedRows.value[0].id}).then(res => { - form.value = {...res.data} - form.value.invoiceLedgerId = form.value.id - form.value.id = '' - form.value.registrant = userStore.nickName - }) - dialogFormVisible.value = true -} + invoiceInfo({ id: selectedRows.value[0].id }).then((res) => { + form.value = { ...res.data }; + form.value.invoiceLedgerId = form.value.id; + form.value.id = ""; + form.value.registrant = userStore.nickName; + }); + dialogFormVisible.value = true; +}; // 鎻愪氦琛ㄥ崟 const submitForm = () => { - proxy.$refs["formRef"].validate(valid => { + proxy.$refs["formRef"].validate((valid) => { if (valid) { - receiptPaymentSaveOrUpdate(form.value).then(res => { - proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") - closeDia() - getList() - }) + receiptPaymentSaveOrUpdate(form.value).then((res) => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛"); + closeDia(); + getList(); + }); } - }) -} + }); +}; // 鍏抽棴寮规 const closeDia = () => { - proxy.resetForm("formRef") - dialogFormVisible.value = false -} + proxy.resetForm("formRef"); + dialogFormVisible.value = false; +}; // 鍒犻櫎鍥炴璁板綍 const delReceiptRecord = (row) => { - console.log('row',row) + console.log("row", row); ElMessageBox.confirm("纭鍒犻櫎璇ヨ褰曞悧锛�", "鎻愮ず", { confirmButtonText: "纭畾", cancelButtonText: "鍙栨秷", type: "warning", }) - .then(async () => { - try { - let ids = [] - ids.push(row.id) - await receiptPaymentDel(ids); - ElMessage.success("鍒犻櫎鎴愬姛"); - getList(); - } catch (error) { - console.error("鍒犻櫎澶辫触:", error); - ElMessage.error("鍒犻櫎澶辫触"); - } - }) - .catch(() => { - ElMessage.info("宸插彇娑堝垹闄�"); - }); - -} + .then(async () => { + try { + let ids = []; + ids.push(row.id); + await receiptPaymentDel(ids); + ElMessage.success("鍒犻櫎鎴愬姛"); + getList(); + } catch (error) { + console.error("鍒犻櫎澶辫触:", error); + ElMessage.error("鍒犻櫎澶辫触"); + } + }) + .catch(() => { + ElMessage.info("宸插彇娑堝垹闄�"); + }); +}; // 缂栬緫淇敼鐘舵�� const changeEditType = (row) => { - row.editType = !row.editType -} + row.editType = !row.editType; +}; // 淇濆瓨鍥炴璁板綍 const saveReceiptPayment = (row) => { let updateData = { - id:row.id, + id: row.id, receiptPaymentType: row.receiptPaymentType, - receiptPaymentAmount: row.receiptPaymentAmount - } - receiptPaymentSaveOrUpdate(updateData).then(res => { - row.editType = !row.editType - }) -} + receiptPaymentAmount: row.receiptPaymentAmount, + }; + receiptPaymentSaveOrUpdate(updateData).then((res) => { + row.editType = !row.editType; + }); +}; -getList() +getList(); </script> <style scoped lang="scss"> - +.table_list { + margin-top: unset; +} </style> -- Gitblit v1.9.3