From 7c2cdcbc7f5585b96fba76a07b0e4417a09c4d7e Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 02 六月 2026 11:06:10 +0800
Subject: [PATCH] 新疆马铃薯 1.过程检验下载添加3个模版

---
 src/views/procurementManagement/paymentLedger/index.vue |  430 ++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 272 insertions(+), 158 deletions(-)

diff --git a/src/views/procurementManagement/paymentLedger/index.vue b/src/views/procurementManagement/paymentLedger/index.vue
index a5a4c40..8ec0dd9 100644
--- a/src/views/procurementManagement/paymentLedger/index.vue
+++ b/src/views/procurementManagement/paymentLedger/index.vue
@@ -1,53 +1,113 @@
 <template>
   <div class="app-container">
-    <div class="search_form">
+    <div class="search_form"
+         style="margin-bottom: 20px;">
       <div>
         <span class="search_title">渚涘簲鍟嗗悕绉�:</span>
-        <el-input
-          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-input v-model="searchForm.supplierName"
+                  style="width: 240px"
+                  placeholder="杈撳叆渚涘簲鍟嗗悕绉�"
+                  @change="handleQuery"
+                  clearable
+                  :prefix-icon="Search" />
+        <el-button type="primary"
+                   @click="handleQuery"
+                   style="margin-left: 10px">鎼滅储</el-button>
       </div>
-      <div>
-      </div>
+      <div></div>
     </div>
-    <el-row>
-      <el-col :span="14">
+    <el-row :gutter="20">
+      <el-col :span="8">
         <div class="table_list">
-          <PIMTable
-            :column="tableColumn"
-            :tableData="tableData"
-            :page="page"
-            :isSelection="false"
-            :handleSelectionChange="handleSelectionChange"
-            :tableLoading="tableLoading"
-            @pagination="pagination"
-            :total="total"
-            :rowClick="rowClick"
-            :isShowSummary="isShowSummary"
-            :highlight-current-row="true"
-          ></PIMTable>
+          <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 label="渚涘簲鍟嗗悕绉�"
+                             prop="supplierName" />
+            <el-table-column label="鍚堝悓閲戦(鍏�)"
+                             prop="contractAmounts"
+                             show-overflow-tooltip
+                             :formatter="formattedNumber" />
+<!--            <el-table-column label="搴斾粯閲戦(鍏�)"-->
+<!--                             prop="payableAmount"-->
+<!--                             show-overflow-tooltip>-->
+<!--              <template #default="{ row, column }">-->
+<!--                <el-text type="danger">-->
+<!--                  {{ formattedNumber(row, column, row.payableAmount) }}-->
+<!--                </el-text>-->
+<!--              </template>-->
+<!--            </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">
+      <el-col :span="16">
         <div class="table_list">
-          <PIMTable
-            :column="tableColumnSon"
-            :tableData="tableDataSon"
-            :page="pageSon"
-            :isSelection="false"
-            :tableLoading="tableLoadingSon"
-            @pagination="paginationSon"
-            :total="totalSon"
-            :isShowSummary="isShowSummarySon"
-          ></PIMTable>
+          <div class="table-header" v-if="selectedSupplierName">
+            <span class="supplier-title">渚涘簲鍟嗭細{{ selectedSupplierName }}</span>
+          </div>
+          <el-table border
+                    v-loading="tableLoadingSon"
+                    :data="originalTableDataSon"
+                    :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+                    height="calc(100vh - 20em)"
+                    style="width: 100%"
+                    tooltip-effect="dark"
+                    :show-summary="isShowSummarySon"
+                    :summary-method="summarizeMainTable1">
+            <el-table-column align="center"
+                             label="搴忓彿"
+                             type="index"
+                             width="60" />
+            <el-table-column label="鍚堝悓绛捐鏃ユ湡"
+                             prop="executionDate"
+                             show-overflow-tooltip/>
+            <el-table-column label="閲囪喘鍚堝悓鍙�"
+                             prop="purchaseContractNumber"
+                             show-overflow-tooltip/>
+            <el-table-column label="椤圭洰鍚嶇О"
+                             prop="projectName"
+                             show-overflow-tooltip/>
+            <el-table-column label="鍚堝悓閲戦(鍏�)"
+                             prop="contractAmount"
+                             show-overflow-tooltip
+                             :formatter="formattedNumber" />
+            <el-table-column label="鏀惰揣鐘舵��"
+                             prop="status"
+                             show-overflow-tooltip
+                             width="100">
+              <template #default="{ row }">
+                <el-tag :type="getReceiptStatusType(row.status)" size="small">
+                  {{ receiptStatusText[row.status] || '鏈煡鐘舵��' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination v-show="sonPage.total > 0"
+                      @pagination="sonPaginationSearch"
+                      :total="sonPage.total"
+                      :layout="sonPage.layout"
+                      :page="sonPage.current"
+                      :limit="sonPage.size" />
         </div>
       </el-col>
     </el-row>
@@ -55,130 +115,184 @@
 </template>
 
 <script setup>
-import { ref, toRefs } from "vue";
-import { Search } from "@element-plus/icons-vue";
-import { paymentLedgerList } from "@/api/procurementManagement/paymentLedger.js";
+  import { ref, toRefs, reactive, getCurrentInstance } from "vue";
+  import { Search } from "@element-plus/icons-vue";
+  import {
+    paymentLedgerList,
+  } from "@/api/procurementManagement/paymentLedger.js";
+  import { gePurchaseListPage } from "@/api/procurementManagement/invoiceEntry.js";
+  import Pagination from "../../../components/PIMTable/Pagination.vue";
 
-const tableColumn = ref([
-  {
-    label: "渚涘簲鍟嗗悕绉�",
-    prop: "supplierName",
-  },
-  {
-    label: "鍙戠エ閲戦(鍏�)",
-    prop: "invoiceAmount",
-  },
-  {
-    label: "浠樻閲戦(鍏�)",
-    prop: "paymentAmount",
-  },
-  {
-    label: "搴斾粯閲戦(鍏�)",
-    prop: "payableAmount",
-  },
-]);
-const tableLoading = ref(false);
-const data = reactive({
-  searchForm: {
-    supplierNameOrContractNo: "",
-  },
-});
-const page = reactive({
-  current: 1,
-  size: 10,
-});
-const total = ref(0);
-const isShowSummary = ref(true);
-const tableData = ref([]);
-const { searchForm } = toRefs(data);
-
-
-import {getInfo} from "@/api/login.js";
-const rowClick = (row) => {
-  tableDataSon.value = Array.isArray(row.details) ? row.details : [];
-  console.log("111",tableDataSon.value);
-};
-
-
-// 瀛愭ā鍧�
-const tableColumnSon = ref([
-  {
-    label: "浠樻鏃ユ湡",
-    prop: "paymentDate",
-  },
-  {
-    label: "寮�绁ㄦ暟",
-    prop: "voteCount",
-  },
-  {
-    label: "浠樻閲戦(鍏�)",
-    prop: "paymentAmount",
-  },
-  {
-    label: "搴斾粯閲戦(鍏�)",
-    prop: "payableAmount",
-  },
-]);
-const tableDataSon = ref([]);
-const tableLoadingSon = ref(false);
-const pageSon = reactive({
-  current: 1,
-  size: 10,
-});
-const totalSon = ref(0);
-const isShowSummarySon = ref(true);
-
-
-
-
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
-  page.current = 1;
-  getList();
-};
-const pagination = ({ current, limit }) => {
-  page.current = current;
-  page.size = limit;
-  getList();
-};
-const paginationSon = ({ current, limit }) => {
-  pageSon.current = current;
-  pageSon.size = limit;
-  getList();
-};
-const getList = () => {
-  tableLoading.value = false;
-  paymentLedgerList({ ...searchForm.value, ...page }).then((res) => {
-    let result = res.data
-    tableLoading.value = false;
-    tableData.value = result;
-    total.value = result.total;
+  const tableData = ref([]);
+  const tableLoading = ref(false);
+  const data = reactive({
+    searchForm: {
+      supplierName: "",
+    },
   });
-};
-// 琛ㄦ牸閫夋嫨鏁版嵁
-const handleSelectionChange = (selection) => {
-  selectedRows.value = selection;
-};
+  const page = reactive({
+    current: 1,
+    size: 100,
+  });
+  const sonPage = reactive({
+    current: 1,
+    size: 10,
+    total: 0,
+    layout: "total, sizes, prev, pager, next, jumper",
+  });
+  const total = ref(0);
+  const isShowSummary = ref(true);
+  const { searchForm } = toRefs(data);
+  const currentSupplierId = ref("");
+  const selectedSupplierName = ref("");
+  const rowClick = row => {
+    currentSupplierId.value = row.supplierId;
+    selectedSupplierName.value = row.supplierName;
+    sonPage.current = 1;
+    getPurchaseList(row.supplierName);
+  };
+  const originalTableDataSon = ref([]);
+  const tableLoadingSon = ref(false);
+  const isShowSummarySon = ref(true);
+  const { proxy } = getCurrentInstance();
 
-getList();
+  // 涓昏〃鍚堣鏂规硶
+  const summarizeMainTable = param => {
+    return proxy.summarizeTable(
+      param,
+      ["contractAmounts", "payableAmount"],
+      {
+        ticketsNum: { noDecimal: true },
+        futureTickets: { noDecimal: true },
+      }
+    );
+  };
+  // 瀛愯〃鍚堣鏂规硶
+  const summarizeMainTable1 = param => {
+    return proxy.summarizeTable(
+      param,
+      ["contractAmount"],
+      {
+        ticketsNum: { noDecimal: true },
+        futureTickets: { noDecimal: true },
+      }
+    );
+  };
+  /** 鎼滅储鎸夐挳鎿嶄綔 */
+  const handleQuery = () => {
+    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 => {
+      let result = res.data;
+      tableLoading.value = false;
+      tableData.value = result.records || [];
+      total.value = result.total || 0;
+      if (tableData.value.length > 0) {
+        currentSupplierId.value = tableData.value[0].supplierId;
+        selectedSupplierName.value = tableData.value[0].supplierName;
+        sonPage.current = 1;
+        getPurchaseList(tableData.value[0].supplierName);
+      } else {
+        originalTableDataSon.value = [];
+        selectedSupplierName.value = "";
+      }
+    });
+  };
+
+  const getPurchaseList = supplierName => {
+    tableLoadingSon.value = true;
+    gePurchaseListPage({
+      supplierName: supplierName,
+      current: sonPage.current,
+      size: sonPage.size,
+    })
+      .then(res => {
+        tableLoadingSon.value = false;
+        let result = res.data;
+        if (Array.isArray(result)) {
+          originalTableDataSon.value = result;
+          sonPage.total = result.length;
+        } else {
+          originalTableDataSon.value = result.records || [];
+          sonPage.total = result.total || 0;
+        }
+      })
+      .catch(e => {
+        tableLoadingSon.value = false;
+      });
+  };
+
+  const sonPaginationSearch = pagination => {
+    sonPage.current = pagination.page;
+    sonPage.size = pagination.limit;
+    getPurchaseList(selectedSupplierName.value);
+  };
+
+  const formattedNumber = (row, column, cellValue) => {
+    if (cellValue !== undefined && cellValue !== null && !isNaN(cellValue)) {
+      return parseFloat(cellValue).toFixed(2);
+    }
+    return "0.00";
+  };
+
+  // 鏀惰揣鐘舵�佹枃鏈槧灏�
+  const receiptStatusText = {
+    1: '寰呮敹璐�',
+    2: '鏀惰揣涓�',
+    3: '宸叉敹璐�'
+  };
+
+  // 鏀惰揣鐘舵�佹爣绛剧被鍨�
+  const getReceiptStatusType = (status) => {
+    const typeMap = {
+      1: 'info',
+      2: 'warning',
+      3: 'success'
+    };
+    return typeMap[status] || 'info';
+  };
+
+  getList();
 </script>
 
 <style scoped lang="scss">
-/* 閫変腑鏌愯鏃剁殑鑳屾櫙鑹�*/
-/* .el-table__body tr.current-row > td {
-  color: #c0c0c0;
-  background: #F6F7FB !important;
-} */
-.el-row {
-  .el-col-14 {
-    .table_list {
-      padding-right: 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-header {
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    .supplier-title {
+      font-weight: bold;
+      font-size: 14px;
+      color: #303133;
     }
   }
-  .el-col-10 {
-    .table_list {
-      padding-left: 0px;
-    }
-  }
-}
 </style>

--
Gitblit v1.9.3