From ee6f8c315926a871f11a96a69702efcef4d0b49f Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期一, 26 五月 2025 13:49:03 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev --- src/views/procurementManagement/paymentLedger/index.vue | 249 +++++++++++++++++++++++++++++++++++-------------- 1 files changed, 176 insertions(+), 73 deletions(-) diff --git a/src/views/procurementManagement/paymentLedger/index.vue b/src/views/procurementManagement/paymentLedger/index.vue index 628ea90..18c0176 100644 --- a/src/views/procurementManagement/paymentLedger/index.vue +++ b/src/views/procurementManagement/paymentLedger/index.vue @@ -2,111 +2,214 @@ <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> + <el-col :span="14"> + <div class="table_list"> + <el-table + ref="multipleTable" + 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" + 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" + > + </el-table-column> + </el-table> + </div> + </el-col> + <el-col :span="10"> + <div class="table_list"> + <PIMTable + :column="tableColumnSon" + :tableData="tableDataSon" + :page="pageSon" + :isSelection="false" + :tableLoading="tableLoadingSon" + :isShowSummary="isShowSummarySon" + ></PIMTable> + </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> <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 } from "@/api/procurementManagement/paymentLedger.js"; 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', +]); +const tableData = ref([]); +const tableLoading = ref(false); +const data = reactive({ + searchForm: { + supplierNameOrContractNo: "", }, - { - 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 data = reactive({ - searchForm: { - supplierName: '', +}); +const total = ref(0); +const isShowSummary = ref(true); +const { searchForm } = toRefs(data); +const rowClick = (row) => { + tableDataSon.value = Array.isArray(row.details) ? row.details : []; +}; +// 瀛愭ā鍧� +const tableColumnSon = ref([ + { + label: "浠樻鏃ユ湡", + prop: "paymentDate", }, -}) -const { searchForm } = toRefs(data) + { + label: "寮�绁ㄦ暟", + prop: "voteCount", + }, + { + label: "浠樻閲戦(鍏�)", + prop: "paymentAmount", + }, + { + label: "搴斾粯閲戦(鍏�)", + prop: "payableAmount", + }, +]); +const tableDataSon = ref([]); +const tableLoadingSon = ref(false); +const isShowSummarySon = ref(true); +const detailPageNum = ref(1); +const detailPageSize = ref(10); -// 鏌ヨ鍒楄〃 /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { - page.current = 1 - getList() -} -const setTableData = (data) => { - tableData1.value = data.details -} -const pagination = ({ current, limit }) => { + page.current = 1; + getList(); +}; +const paginationSearch = ({ current, limit }) => { page.current = current; page.size = limit; - getList() -} + tableDataSon.value = []; + getList(); +}; const getList = () => { - tableLoading.value = true - paymentLedgerList({...searchForm.value, ...page}).then(res => { - tableLoading.value = false - tableData.value = res.data - total.value = res.total - }) -} -getList() + tableLoading.value = false; + 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; + }); +}; + +getList(); </script> <style scoped lang="scss"> -.table_list { +.el-row { + .el-col-14 { + .table_list { + padding-right: 0px; + } + } + .el-col-10 { + .table_list { + padding-left: 0px; + } + } +} +.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; +} +.table_list { + height: calc(100vh - 13.5em); + overflow: auto; } </style> -- Gitblit v1.9.3