新疆马铃薯 1.首页问题：挪新系统ui，需要确认一下页面数据完整。 2.协同办公：挪新系统 3.营销管理：客户往来取消回款金额字段，改为点击左侧客户时...

gaoluyang

9 天以前 6a415a072a98d64d2f95d16eef73b6d7270b8d56

 src/views/procurementManagement/paymentLedger/index.vue

@@ -17,7 +17,7 @@
      <div></div>
    </div>
    <el-row :gutter="20">
      <el-col :span="14">
      <el-col :span="8">
        <div class="table_list">
          <el-table ref="multipleTable"
                    border
@@ -42,10 +42,6 @@
                             prop="contractAmounts"
                             show-overflow-tooltip
                             :formatter="formattedNumber" />
            <el-table-column label="付款金额(元)"
                             prop="paymentAmount"
                             show-overflow-tooltip
                             :formatter="formattedNumber" />
            <el-table-column label="应付金额(元)"
                             prop="payableAmount"
                             show-overflow-tooltip>
@@ -64,25 +60,54 @@
                      :limit="page.size" />
        </div>
      </el-col>
      <el-col :span="10">
      <el-col :span="16">
        <div class="table_list">
          <PIMTable rowKey="id"
                    :column="tableColumnSon"
                    :tableData="originalTableDataSon"
                    :isSelection="false"
                    :isShowPagination="true"
                    :page="sonPage"
                    :tableLoading="tableLoadingSon"
                    :isShowSummary="isShowSummarySon"
                    :summaryMethod="summarizeMainTable1"
                    height="calc(100vh - 18.5em)"
                    @pagination="sonPaginationSearch">
            <template #payableAmountSlot="{ row }">
              <el-text type="danger">
                {{ parseFloat(row.payableAmount).toFixed(2) }}
              </el-text>
            </template>
          </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>
@@ -90,12 +115,12 @@
</template>

<script setup>
  import { ref, toRefs } from "vue";
  import { ref, toRefs, reactive, getCurrentInstance } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import {
    paymentLedgerList,
    paymentRecordList,
  } from "@/api/procurementManagement/paymentLedger.js";
  import { gePurchaseListPage } from "@/api/procurementManagement/invoiceEntry.js";
  import Pagination from "../../../components/PIMTable/Pagination.vue";

  const tableData = ref([]);
@@ -119,48 +144,13 @@
  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;
    getPaymenRecordtList(row.supplierId);
    getPurchaseList(row.supplierName);
  };
  // 子模块
  const tableColumnSon = ref([
    {
      label: "合同签订日期",
      prop: "executionDate",
      width: 110,
    },
    {
      label: "采购合同号",
      prop: "purchaseContractNumber",
      width: 150,
    },
    {
      label: "合同金额(元)",
      prop: "contractAmount",
      width: 200,
      formatData: params => {
        return params ? parseFloat(params).toFixed(2) : 0;
      },
    },
    {
      label: "付款金额(元)",
      prop: "paymentAmount",
      width: 200,
      formatData: params => {
        return params ? parseFloat(params).toFixed(2) : 0;
      },
    },
    {
      label: "应付金额(元)",
      dataType: "slot",
      width: 200,
      prop: "payableAmount",
      slot: "payableAmountSlot",
    },
  ]);
  const tableDataSon = ref([]);
  const originalTableDataSon = ref([]);
  const tableLoadingSon = ref(false);
  const isShowSummarySon = ref(true);
@@ -170,32 +160,23 @@
  const summarizeMainTable = param => {
    return proxy.summarizeTable(
      param,
      ["contractAmounts", "paymentAmount", "payableAmount"],
      ["contractAmounts", "payableAmount"],
      {
        ticketsNum: { noDecimal: true }, // 不保留小数
        futureTickets: { noDecimal: true }, // 不保留小数
        ticketsNum: { noDecimal: true },
        futureTickets: { noDecimal: true },
      }
    );
  };
  // 子表合计方法
  const summarizeMainTable1 = param => {
    let summarizeTable = proxy.summarizeTable(
    return proxy.summarizeTable(
      param,
      ["contractAmount", "invoiceAmount", "paymentAmount"],
      ["contractAmount"],
      {
        ticketsNum: { noDecimal: true }, // 不保留小数
        futureTickets: { noDecimal: true }, // 不保留小数
        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.0;
    }
    return summarizeTable;
  };
  /** 搜索按钮操作 */
  const handleQuery = () => {
@@ -219,16 +200,20 @@
      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;
        getPaymenRecordtList(tableData.value[0].supplierId);
        getPurchaseList(tableData.value[0].supplierName);
      } else {
        originalTableDataSon.value = [];
        selectedSupplierName.value = "";
      }
    });
  };

  const getPaymenRecordtList = supplierId => {
  const getPurchaseList = supplierName => {
    tableLoadingSon.value = true;
    paymentRecordList({
      supplierId: supplierId,
    gePurchaseListPage({
      supplierName: supplierName,
      current: sonPage.current,
      size: sonPage.size,
    })
@@ -236,9 +221,8 @@
        tableLoadingSon.value = false;
        let result = res.data;
        if (Array.isArray(result)) {
          tableDataSon.value = result;
          originalTableDataSon.value = result;
          sonPage.total = result.length;
          handlePagination({ page: sonPage.current, limit: sonPage.size });
        } else {
          originalTableDataSon.value = result.records || [];
          sonPage.total = result.total || 0;
@@ -248,30 +232,37 @@
        tableLoadingSon.value = false;
      });
  };
  const handlePagination = ({ page, limit }) => {
    console.log(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 }
    sonPage.current = pagination.page;
    sonPage.size = pagination.limit;
    getPaymenRecordtList(currentSupplierId.value);
    getPurchaseList(selectedSupplierName.value);
  };

  const formattedNumber = (row, column, cellValue) => {
    if (column.property !== "supplierName") {
    if (cellValue !== undefined && cellValue !== null && !isNaN(cellValue)) {
      return parseFloat(cellValue).toFixed(2);
    } else {
      return cellValue;
    }
    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>

@@ -291,4 +282,17 @@
  .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;
    }
  }
</style>