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 | 322 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 247 insertions(+), 75 deletions(-)
diff --git a/src/views/procurementManagement/paymentLedger/index.vue b/src/views/procurementManagement/paymentLedger/index.vue
index 628ea90..b0f9a92 100644
--- a/src/views/procurementManagement/paymentLedger/index.vue
+++ b/src/views/procurementManagement/paymentLedger/index.vue
@@ -2,111 +2,283 @@
<div class="app-container">
<div class="search_form">
<div>
- <span class="search_title">渚涘簲鍟嗘。妗堬細</span>
+ <span class="search_title">渚涘簲鍟嗗悕绉�:</span>
<el-input
- v-model="searchForm.supplierName"
- style="width: 240px"
- placeholder="杈撳叆渚涘簲鍟嗗悕绉版悳绱�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
+ v-model="searchForm.supplierNameOrContractNo"
+ style="width: 240px"
+ placeholder="杈撳叆渚涘簲鍟嗗悕绉�"
+ @change="handleQuery"
+ clearable
+ :prefix-icon="Search"
/>
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+ >鎼滅储</el-button
+ >
</div>
+ <div></div>
</div>
- <div class="table_list">
- <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isShowSummary="true" style="width: 50%" :highlightCurrentRow="true"
- :tableLoading="tableLoading" @pagination="pagination" :total="total" :row-click="setTableData"></PIMTable>
- <PIMTable :column="tableColumn1" :tableData="tableData1" :isShowSummary="true" style="width: 50%"></PIMTable>
- </div>
+ <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' }"
+ height="calc(100vh - 18.5em)"
+ :highlight-current-row="true"
+ style="width: 100%"
+ tooltip-effect="dark"
+ @row-click="rowClick"
+ :show-summary="isShowSummary"
+ :summary-method="summarizeMainTable"
+ class="lims-table"
+ >
+ <el-table-column
+ align="center"
+ label="搴忓彿"
+ type="index"
+ width="60"
+ />
+ <el-table-column
+ v-for="(item, index) in tableColumn"
+ :key="index"
+ :column-key="item.columnKey"
+ :filter-method="item.filterHandler"
+ :filter-multiple="item.filterMultiple"
+ :filtered-value="item.filteredValue"
+ :filters="item.filters"
+ :fixed="item.fixed"
+ :label="item.label"
+ :prop="item.prop"
+ show-overflow-tooltip
+ :align="item.align"
+ :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="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>
+ </el-row>
</div>
</template>
<script setup>
-import { ref } from 'vue'
-import {Search} from "@element-plus/icons-vue";
-import {paymentLedgerList} from "@/api/procurementManagement/paymentLedger.js";
+import { ref, toRefs } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { paymentLedgerList,paymentRecordList } from "@/api/procurementManagement/paymentLedger.js";
+import Pagination from "../../../components/PIMTable/Pagination.vue";
const tableColumn = ref([
{
- label: '渚涘簲鍟嗗悕绉�',
- prop: 'supplierName',
+ label: "渚涘簲鍟嗗悕绉�",
+ prop: "supplierName",
},
{
- label: '鏉ョエ閲戦(鍏�)',
- prop: 'invoiceAmount'
+ label: "鍙戠エ閲戦(鍏�)",
+ prop: "invoiceAmount",
},
{
- label: '浠樻閲戦(鍏�)',
- prop: 'paymentAmount'
+ label: "浠樻閲戦(鍏�)",
+ prop: "paymentAmount",
},
{
- label: '搴斾粯娆鹃噾棰�(鍏�)',
- prop: 'payableAmount'
+ label: "搴斾粯閲戦(鍏�)",
+ prop: "payableAmount",
},
-])
-const tableColumn1 = ref([
- {
- label: '鍙戠敓鏃ユ湡',
- prop: 'createTime',
- },
- {
- label: '鏉ョエ鏁�',
- prop: 'voteCount'
- },
- {
- label: '浠樻閲戦(鍏�)',
- prop: 'paymentAmount'
- },
- {
- label: '搴斾粯娆鹃噾棰�(鍏�)',
- prop: 'payableAmount'
- },
-])
-const tableData = ref([])
-const tableData1 = ref([])
-const tableLoading = ref(false)
-const page = reactive({
- current: 1,
- size: 10,
-})
-const total = ref(0)
-
-// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
+]);
+const tableData = ref([]);
+const tableLoading = ref(false);
const data = reactive({
searchForm: {
- supplierName: '',
+ supplierNameOrContractNo: "",
},
-})
-const { searchForm } = toRefs(data)
+});
+const page = reactive({
+ current: 1,
+ 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) => {
+ currentSupplierId.value = row.supplierId;
+ getPaymenRecordtList(row.supplierId)
+};
+// 瀛愭ā鍧�
+const tableColumnSon = ref([
+ {
+ label: "鍙戠敓鏃ユ湡",
+ prop: "happenTime",
+ },
+ {
+ label: "鍙戠エ閲戦(鍏�)",
+ prop: "invoiceAmount",
+ formatData: (params) => {
+ return parseFloat(params).toFixed(2);
+ }
+ },
+ {
+ label: "浠樻閲戦(鍏�)",
+ 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 setTableData = (data) => {
- tableData1.value = data.details
-}
-const pagination = ({ current, limit }) => {
- page.current = current;
- page.size = limit;
- getList()
-}
+ page.current = 1;
+ getList();
+};
+const paginationSearch = ( obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
const getList = () => {
- tableLoading.value = true
- paymentLedgerList({...searchForm.value, ...page}).then(res => {
- tableLoading.value = false
- tableData.value = res.data
- total.value = res.total
+ tableLoading.value = true;
+ paymentLedgerList({
+ ...searchForm.value,
+ ...page,
+ detailPageNum: detailPageNum.value, // 鏂板
+ detailPageSize: detailPageSize.value, // 鏂板
+ }).then((res) => {
+ let result = res.data;
+ 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;
})
}
-getList()
+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">
-.table_list {
+
+.el-pagination {
+ width: 100%;
+ height: 55px;
display: flex;
+ justify-content: flex-end;
+ float: right;
+ flex-direction: row;
+ align-items: center;
+ background: #fff;
+ margin: -20px 0 0 0;
+ padding: 0 20px;
+}
+.pagination-container {
+ margin-top: 0;
}
</style>
--
Gitblit v1.9.3