From 4e64eeb2a807adc9153fd9cd61b498b99c1f6f2c Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 17 六月 2025 11:06:22 +0800
Subject: [PATCH] 完成库存管理前端页面
---
src/views/procurementManagement/paymentLedger/index.vue | 153 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 111 insertions(+), 42 deletions(-)
diff --git a/src/views/procurementManagement/paymentLedger/index.vue b/src/views/procurementManagement/paymentLedger/index.vue
index 18c0176..b0f9a92 100644
--- a/src/views/procurementManagement/paymentLedger/index.vue
+++ b/src/views/procurementManagement/paymentLedger/index.vue
@@ -17,11 +17,12 @@
</div>
<div></div>
</div>
- <el-row>
+ <el-row :gutter="20">
<el-col :span="14">
<div class="table_list">
<el-table
ref="multipleTable"
+ border
v-loading="tableLoading"
:data="tableData"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
@@ -31,6 +32,7 @@
tooltip-effect="dark"
@row-click="rowClick"
:show-summary="isShowSummary"
+ :summary-method="summarizeMainTable"
class="lims-table"
>
<el-table-column
@@ -55,33 +57,40 @@
:sortable="!!item.sortable"
:type="item.type"
:width="item.width"
+ :formatter="formattedNumber"
>
</el-table-column>
</el-table>
+ <pagination
+ v-show="total > 0"
+ @pagination="paginationSearch"
+ :total="total"
+ :layout="page.layout"
+ :page="page.current"
+ :limit="page.size"
+ />
</div>
</el-col>
<el-col :span="10">
<div class="table_list">
<PIMTable
:column="tableColumnSon"
- :tableData="tableDataSon"
- :page="pageSon"
+ :tableData="originalTableDataSon"
:isSelection="false"
:tableLoading="tableLoadingSon"
:isShowSummary="isShowSummarySon"
+ :summaryMethod="summarizeMainTable1"
></PIMTable>
+ <pagination
+ v-show="sonTotal > 0"
+ :total="sonTotal"
+ @pagination="sonPaginationSearch"
+ :layout="page.layout"
+ :page="sonPage.current"
+ :limit="sonPage.size"
+ />
</div>
</el-col>
- <div class="el-pagination">
- <pagination
- v-show="total > 0"
- @pagination="paginationSearch"
- :total="total"
- :layout="page.layout"
- :page="page.current"
- :limit="page.size"
- />
- </div>
</el-row>
</div>
</template>
@@ -89,7 +98,8 @@
<script setup>
import { ref, toRefs } from "vue";
import { Search } from "@element-plus/icons-vue";
-import { paymentLedgerList } from "@/api/procurementManagement/paymentLedger.js";
+import { paymentLedgerList,paymentRecordList } from "@/api/procurementManagement/paymentLedger.js";
+import Pagination from "../../../components/PIMTable/Pagination.vue";
const tableColumn = ref([
{
@@ -118,52 +128,89 @@
});
const page = reactive({
current: 1,
- size: 10,
+ size: 100,
+});
+const sonPage = reactive({
+ current: 1,
+ size: 100,
});
const total = ref(0);
+const sonTotal = ref(0);
const isShowSummary = ref(true);
const { searchForm } = toRefs(data);
+const currentSupplierId = ref('')
const rowClick = (row) => {
- tableDataSon.value = Array.isArray(row.details) ? row.details : [];
+ currentSupplierId.value = row.supplierId;
+ getPaymenRecordtList(row.supplierId)
};
// 瀛愭ā鍧�
const tableColumnSon = ref([
{
- label: "浠樻鏃ユ湡",
- prop: "paymentDate",
+ label: "鍙戠敓鏃ユ湡",
+ prop: "happenTime",
},
{
- label: "寮�绁ㄦ暟",
- prop: "voteCount",
+ label: "鍙戠エ閲戦(鍏�)",
+ prop: "invoiceAmount",
+ formatData: (params) => {
+ return parseFloat(params).toFixed(2);
+ }
},
{
label: "浠樻閲戦(鍏�)",
- prop: "paymentAmount",
+ prop: "currentPaymentAmount",
+ formatData: (params) => {
+ return parseFloat(params).toFixed(2);
+ }
},
{
label: "搴斾粯閲戦(鍏�)",
prop: "payableAmount",
+ formatData: (params) => {
+ return parseFloat(params).toFixed(2);
+ }
},
]);
const tableDataSon = ref([]);
+const originalTableDataSon = ref([]);
const tableLoadingSon = ref(false);
const isShowSummarySon = ref(true);
const detailPageNum = ref(1);
const detailPageSize = ref(10);
+const { proxy } = getCurrentInstance()
+// 涓昏〃鍚堣鏂规硶
+const summarizeMainTable = (param) => {
+ return proxy.summarizeTable(param, ['invoiceAmount', 'paymentAmount', 'payableAmount'], {
+ ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
+ futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
+ });
+};
+// 瀛愯〃鍚堣鏂规硶
+const summarizeMainTable1 = (param) => {
+ let summarizeTable = proxy.summarizeTable(param, ['invoiceAmount', 'currentPaymentAmount'], {
+ ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
+ futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
+ });
+ if(originalTableDataSon.value.length > 0) {
+ summarizeTable[summarizeTable.length -1] = originalTableDataSon.value[originalTableDataSon.value.length - 1].payableAmount.toFixed(2)
+ }else {
+ summarizeTable[summarizeTable.length -1] = 0.00
+ }
+ return summarizeTable
+};
/** 鎼滅储鎸夐挳鎿嶄綔 */
const handleQuery = () => {
page.current = 1;
getList();
};
-const paginationSearch = ({ current, limit }) => {
- page.current = current;
- page.size = limit;
- tableDataSon.value = [];
+const paginationSearch = ( obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
getList();
};
const getList = () => {
- tableLoading.value = false;
+ tableLoading.value = true;
paymentLedgerList({
...searchForm.value,
...page,
@@ -174,25 +221,51 @@
tableLoading.value = false;
tableData.value = result.records || [];
total.value = result.total || 0;
+ if(tableData.value.length > 0) {
+ getPaymenRecordtList(tableData.value[0].supplierId);
+ currentSupplierId.value = tableData.value[0].supplierId
+ }
+
});
};
+const getPaymenRecordtList = (supplierId) => {
+ tableLoadingSon.value = true;
+ paymentRecordList(supplierId).then(res => {
+ tableLoadingSon.value = false;
+ tableDataSon.value = res.data
+ handlePagination({ page: 1, limit: sonPage.size });
+ sonTotal.value = res.data.length
+ }).catch((e) => {
+ tableLoadingSon.value = false;
+ })
+}
+const handlePagination = ({ page, limit }) => {
+ sonPage.current = page;
+ sonPage.size = limit;
+
+ const start = (page - 1) * limit;
+ const end = start + limit;
+
+ originalTableDataSon.value = tableDataSon.value.slice(start, end);
+}
+
+const sonPaginationSearch = (pagination) => {
+ // 鎺ユ敹鍒嗛〉鍣ㄥ弬鏁� { page, limit }
+ handlePagination(pagination);
+}
+const formattedNumber = (row, column, cellValue) => {
+ if (column.property !== 'supplierName') {
+ return parseFloat(cellValue).toFixed(2);
+ } else {
+ return cellValue
+ }
+};
getList();
</script>
<style scoped lang="scss">
-.el-row {
- .el-col-14 {
- .table_list {
- padding-right: 0px;
- }
- }
- .el-col-10 {
- .table_list {
- padding-left: 0px;
- }
- }
-}
+
.el-pagination {
width: 100%;
height: 55px;
@@ -207,9 +280,5 @@
}
.pagination-container {
margin-top: 0;
-}
-.table_list {
- height: calc(100vh - 13.5em);
- overflow: auto;
}
</style>
--
Gitblit v1.9.3