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/receiptPaymentHistory/index.vue | 191 ++++++++++++++++++++++++++++++----------------- 1 files changed, 123 insertions(+), 68 deletions(-) diff --git a/src/views/salesManagement/receiptPaymentHistory/index.vue b/src/views/salesManagement/receiptPaymentHistory/index.vue index 290fb31..5dd4e7a 100644 --- a/src/views/salesManagement/receiptPaymentHistory/index.vue +++ b/src/views/salesManagement/receiptPaymentHistory/index.vue @@ -1,119 +1,174 @@ <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-form :model="searchForm" :inline="true"> + <el-form-item label="瀹㈡埛鍚嶇О"> + <el-input + v-model="searchForm.searchText" + style="width: 240px" + placeholder="杈撳叆瀹㈡埛鍚嶇О鎼滅储" + @change="handleQuery" + clearable + :prefix-icon="Search" + /> + </el-form-item> + <el-form-item label="鍥炴鏃ユ湡"> + <el-date-picker + v-model="searchForm.receiptPaymentDate" + value-format="YYYY-MM-DD" + format="YYYY-MM-DD" + type="daterange" + start-placeholder="寮�濮嬫椂闂�" + end-placeholder="缁撴潫鏃堕棿" + clearable + @change="changeDateRange" + @clear="clearRange" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="handleQuery"> 鎼滅储 </el-button> + </el-form-item> + </el-form> <div class="table_list"> - <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" - :isShowSummary="isShowSummarySon" - :summaryMethod="summarizeMainTable1" - :handleSelectionChange="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination" - :total="total"></PIMTable> + <PIMTable + :column="tableColumn" + :tableData="tableData" + :page="page" + :isSelection="true" + :isShowSummary="isShowSummarySon" + :summaryMethod="summarizeMainTable1" + :handleSelectionChange="handleSelectionChange" + :tableLoading="tableLoading" + @pagination="pagination" + :total="total" + ></PIMTable> </div> </div> </template> <script setup> -import { ref } from 'vue' +import { ref } from "vue"; import { Search } from "@element-plus/icons-vue"; -import { - receiptPaymentHistoryListPage -} from "@/api/salesManagement/receiptPayment.js"; -const { proxy } = getCurrentInstance() +import { receiptPaymentHistoryListPage } from "@/api/salesManagement/receiptPayment.js"; +import useFormData from "@/hooks/useFormData"; +import dayjs from "dayjs"; + +const { proxy } = getCurrentInstance(); const tableColumn = ref([ { - label: '鍥炴鏃ユ湡', - prop: 'receiptPaymentDate', + label: "鍥炴鏃ユ湡", + prop: "receiptPaymentDate", }, { - label: '瀹㈡埛鍚嶇О', - prop: 'customerName', + label: "瀹㈡埛鍚嶇О", + prop: "customerName", }, { - label: '鍥炴閲戦', - prop: 'receiptPaymentAmount', + label: "鍥炴閲戦锛堝厓锛�", + prop: "receiptPaymentAmount", formatData: (params) => { return parseFloat(params).toFixed(2); - } + }, }, { - label: '鍥炴鏂瑰紡', - prop: 'receiptPaymentType', - dataType: 'tag', + label: "鍥炴鏂瑰紡", + prop: "receiptPaymentType", + dataType: "tag", formatData: (params) => { if (params == 0) { - return '鐢垫眹'; + return "鐢垫眹"; } else if (params == 1) { - return '鎵垮厬'; + return "鎵垮厬"; } else { - return null + return null; } }, formatType: (params) => { - return "info" - } + return "info"; + }, }, { - label: '鐧昏浜�', - prop: 'registrant' + label: "鐧昏浜�", + prop: "registrant", }, { - label: '鐧昏鏃ユ湡', - prop: 'createTime' - } -]) -const tableData = ref([]) -const selectedRows = ref([]) -const tableLoading = ref(false) + label: "鐧昏鏃ユ湡", + prop: "createTime", + }, +]); +const tableData = ref([]); +const selectedRows = ref([]); +const tableLoading = ref(false); const page = reactive({ current: 1, size: 100, -}) -const total = ref(0) -const data = reactive({ - searchForm: { - searchText: '', - }, -}) -const { searchForm } = toRefs(data) -const { receipt_payment_type } = proxy.useDict("receipt_payment_type") +}); +const total = ref(0); + +const { form: searchForm } = useFormData({ + searchText: undefined, + receiptPaymentDate: [ + dayjs().startOf("month").format("YYYY-MM-DD"), + dayjs().endOf("month").format("YYYY-MM-DD"), + ], + receiptPaymentDateStart: dayjs().startOf("month").format("YYYY-MM-DD"), + receiptPaymentDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"), +}); +const { receipt_payment_type } = proxy.useDict("receipt_payment_type"); const isShowSummarySon = ref(true); // 鏌ヨ鍒楄〃 /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { - page.current = 1 - getList() -} + page.current = 1; + getList(); +}; const pagination = (obj) => { page.current = obj.page; page.size = obj.limit; - getList() -} + getList(); +}; const getList = () => { - tableLoading.value = true - receiptPaymentHistoryListPage({ ...searchForm.value, ...page }).then(res => { - tableLoading.value = false - tableData.value = res.records - total.value = res.total - }) -} + tableLoading.value = true; + const { receiptPaymentDate, ...rest } = searchForm; + receiptPaymentHistoryListPage({ ...rest, ...page }).then((res) => { + tableLoading.value = false; + tableData.value = res.records; + total.value = res.total; + }); +}; // 瀛愯〃鍚堣鏂规硶 const summarizeMainTable1 = (param) => { - return proxy.summarizeTable(param, ['receiptPaymentAmount'], { + return proxy.summarizeTable(param, ["receiptPaymentAmount"], { ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� }); }; // 琛ㄦ牸閫夋嫨鏁版嵁 const handleSelectionChange = (selection) => { - selectedRows.value = selection -} -getList() + selectedRows.value = selection; +}; + +const changeDateRange = (date) => { + if (date) { + searchForm.receiptPaymentDateStart = date[0]; + searchForm.receiptPaymentDateEnd = date[1]; + getList(); + } +}; + +const clearRange = () => { + searchForm.receiptPaymentDate = []; + searchForm.receiptPaymentDateStart = undefined; + searchForm.receiptPaymentDateEnd = undefined; + getList(); +}; + +onMounted(() => { + getList(); +}); </script> -<style scoped lang="scss"></style> +<style scoped lang="scss"> +.table_list { + margin-top: unset; +} +</style> -- Gitblit v1.9.3