From 6e30fb16e72db22a119285cb5b757b7a5e1b2206 Mon Sep 17 00:00:00 2001
From: 曹睿 <360930172@qq.com>
Date: 星期三, 18 六月 2025 16:35:14 +0800
Subject: [PATCH] fix: 修复之前剩下的要求

---
 src/views/procurementManagement/paymentHistory/index.vue |  182 ++++++++++++++++++++++++++++++---------------
 1 files changed, 121 insertions(+), 61 deletions(-)

diff --git a/src/views/procurementManagement/paymentHistory/index.vue b/src/views/procurementManagement/paymentHistory/index.vue
index 13b5100..aa64726 100644
--- a/src/views/procurementManagement/paymentHistory/index.vue
+++ b/src/views/procurementManagement/paymentHistory/index.vue
@@ -1,106 +1,166 @@
 <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.paymentDate"
+          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"
+          style="margin-left: 10px"
+        >
+          鎼滅储
+        </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 {
-  paymentHistoryListPage
-} from "@/api/procurementManagement/paymentEntry.js";
-const { proxy } = getCurrentInstance()
+import { paymentHistoryListPage } from "@/api/procurementManagement/paymentEntry.js";
+import useFormData from "@/hooks/useFormData";
+import dayjs from "dayjs";
+
+const { proxy } = getCurrentInstance();
 const isShowSummarySon = ref(true);
 const tableColumn = ref([
   {
-    label: '浠樻鏃ユ湡',
-    prop: 'paymentDate',
+    label: "浠樻鏃ユ湡",
+    prop: "paymentDate",
   },
   {
-    label: '渚涘簲鍟嗗悕绉�',
-    prop: 'supplierName',
+    label: "渚涘簲鍟嗗悕绉�",
+    prop: "supplierName",
   },
   {
-    label: '浠樻閲戦',
-    prop: 'currentPaymentAmount',
+    label: "浠樻閲戦",
+    prop: "currentPaymentAmount",
     formatData: (params) => {
       return parseFloat(params).toFixed(2);
-    }
+    },
   },
   {
-    label: '浠樻鏂瑰紡',
-    prop: 'paymentMethod'
+    label: "浠樻鏂瑰紡",
+    prop: "paymentMethod",
   },
   {
-    label: '鐧昏浜�',
-    prop: 'registrant'
+    label: "鐧昏浜�",
+    prop: "registrant",
   },
   {
-    label: '鐧昏鏃ユ湡',
-    prop: 'registrationtDate'
-  }
-])
-const tableData = ref([])
-const selectedRows = ref([])
-const tableLoading = ref(false)
+    label: "鐧昏鏃ユ湡",
+    prop: "registrationtDate",
+  },
+]);
+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 total = ref(0);
+const { form: searchForm } = useFormData({
+  searchText: undefined,
+  paymentDate: [
+    dayjs().startOf("month").format("YYYY-MM-DD"),
+    dayjs().endOf("month").format("YYYY-MM-DD"),
+  ],
+  paymentDateStart: dayjs().startOf("month").format("YYYY-MM-DD"),
+  paymentDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"),
+});
 
 // 鏌ヨ鍒楄〃
 /** 鎼滅储鎸夐挳鎿嶄綔 */
 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
-  paymentHistoryListPage({ ...searchForm.value, ...page }).then(res => {
-    tableLoading.value = false
-    tableData.value = res.records
-    total.value = res.total
-  })
-}
+  tableLoading.value = true;
+  const { paymentDate, ...rest } = searchForm;
+  paymentHistoryListPage({ ...rest, ...page }).then((res) => {
+    tableLoading.value = false;
+    tableData.value = res.records;
+    total.value = res.total;
+  });
+};
 // 瀛愯〃鍚堣鏂规硶
 const summarizeMainTable1 = (param) => {
-  return proxy.summarizeTable(param, ['currentPaymentAmount'], {
+  return proxy.summarizeTable(param, ["currentPaymentAmount"], {
     ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
     futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
   });
 };
 // 琛ㄦ牸閫夋嫨鏁版嵁
 const handleSelectionChange = (selection) => {
-  selectedRows.value = selection
-}
-getList()
+  selectedRows.value = selection;
+};
+
+const changeDateRange = (date) => {
+  if (date) {
+    searchForm.paymentDateStart = date[0];
+    searchForm.paymentDateEnd = date[1];
+    getList();
+  }
+};
+
+const clearRange = () => {
+  searchForm.paymentDate = [];
+  searchForm.paymentDateStart = undefined;
+  searchForm.paymentDateEnd = undefined;
+  getList();
+};
+
+onMounted(() => {
+  getList();
+});
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.table_list {
+  margin-top: unset;
+}
+</style>

--
Gitblit v1.9.3