src/api/procurementManagement/paymentLedger.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
// é‡‡è´­å°è´¦é¡µé¢æŽ¥å£
import request from '@/utils/request'

// åˆ†é¡µæŸ¥è¯¢
export function paymentLedgerList(query) {
    return request({
        url: '/purchase/paymentRegistration/paymentLedgerList',
        method: 'get',
        params: query
    })
}

 src/api/salesManagement/invoiceLedger.js

@@ -55,3 +55,12 @@
    })
}

// åˆ†é¡µæŸ¥è¯¢
export function invoiceLedgerSalesAccount(query) {
    return request({
        url: '/invoiceLedger/salesAccount',
        method: 'get',
        params: query
    })
}


 src/components/PIMTable/PIMTable.vue

@@ -2,9 +2,9 @@
  <el-table ref="multipleTable" v-loading="tableLoading" :border="border" :data="tableData"
    :header-cell-style="{ background: '#F0F1F5', color: '#333333' }" height="calc(100vh - 18.5em)"
    :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="rowStyle" :row-key="rowKey"
    style="width: 100%" tooltip-effect="dark" @row-click="rowClick" @current-change="currentChange"
    style="width: 100%" tooltip-effect="dark" @row-click="rowClick" @current-change="currentChange" :show-summary="isShowSummary"
    @selection-change="handleSelectionChange" class="lims-table">
    <el-table-column align="center" type="selection" width="55" />
    <el-table-column align="center" type="selection" width="55"  v-if="isSelection"/>
    <el-table-column align="center" label="序号" type="index" width="60" />

    <el-table-column v-for="(item, index) in column" :key="index" :column-key="item.columnKey"
@@ -135,6 +135,14 @@
    type: Boolean,
    default: true
  },
  isSelection: {
    type: Boolean,
    default: false,
  },
  isShowSummary: {
    type: Boolean,
    default: false,
  },
  highlightCurrentRow: {
    type: Boolean,
    default: false
@@ -179,7 +187,6 @@
})

// Data
const btnWidth = ref('120px')
const uploadRefs = ref([])
const currentFiles = ref({})
const uploadKeys = ref({})

 src/views/basicData/customerFile/index.vue

@@ -20,7 +20,7 @@
    </div>
  </div>
  <div class="table_list">
    <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :handleSelectionChange="handleSelectionChange"
    <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" :handleSelectionChange="handleSelectionChange"
              :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable>
  </div>
  <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'" width="70%" @close="closeDia">

 src/views/basicData/supplierManage/index.vue

@@ -20,7 +20,7 @@
      </div>
    </div>
    <div class="table_list">
      <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :handleSelectionChange="handleSelectionChange"
      <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" :handleSelectionChange="handleSelectionChange"
                :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增供应商信息' : '编辑供应商信息'" width="70%" @close="closeDia">
@@ -112,7 +112,7 @@
import { delSupplier} from "@/api/basicData/supplierManageFile.js";
import {ElMessageBox } from "element-plus";
import {userListNoPage} from "@/api/system/user.js";
import {addSupplier,getSupplier,listSupplier,updateSupplier} from "../../../api/basicData/supplierManageFile.js";
import {addSupplier,getSupplier,listSupplier,updateSupplier} from "@/api/basicData/supplierManageFile.js";
const { proxy } = getCurrentInstance()

const tableColumn = ref([

 src/views/procurementManagement/paymentEntry/index.vue

@@ -19,10 +19,10 @@
      </div>
    </div>
    <div class="table_list">
      <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :handleSelectionChange="handleSelectionChange"
      <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" :handleSelectionChange="handleSelectionChange"
                :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增供应商信息' : '编辑供应商信息'" width="60%" @close="closeDia">
    <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增付款登记' : '编辑付款登记'" width="60%" @close="closeDia">
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">

 src/views/procurementManagement/paymentLedger/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,112 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">供应商档案：</span>
        <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 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>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
import {paymentLedgerList} from "@/api/procurementManagement/paymentLedger.js";

const tableColumn = ref([
  {
    label: '供应商名称',
    prop: 'supplierName',
  },
  {
    label: '来票金额(元)',
    prop: 'invoiceAmount'
  },
  {
    label: '付款金额(元)',
    prop: 'paymentAmount'
  },
  {
    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 data = reactive({
  searchForm: {
    supplierName: '',
  },
})
const { searchForm } = toRefs(data)

// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1
  getList()
}
const setTableData = (data) => {
  tableData1.value = data.details
}
const pagination = ({ current, limit }) => {
  page.current = current;
  page.size = limit;
  getList()
}
const getList = () => {
  tableLoading.value = true
  paymentLedgerList({...searchForm.value, ...page}).then(res => {
    tableLoading.value = false
    tableData.value = res.data
    total.value = res.total
  })
}
getList()
</script>

<style scoped lang="scss">
.table_list {
  display: flex;
}
</style>

 src/views/salesManagement/receiptPaymentLedger/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,159 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">回款台账</span>
        <el-input
            v-model="searchForm.searchText"
            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 style="display: flex">
      <div class="table_list">
        <el-table :data="tableData" border v-loading="tableLoading"
                  @selection-change="handleSelectionChange"
                  :row-key="row => row.id"
                  show-summary
                  :summary-method="summarizeMainTable"
                  height="calc(100vh - 18.5em)">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" label="序号" type="index" width="60" />
          <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip/>
          <el-table-column label="开票金额" prop="invoiceAmount" show-overflow-tooltip/>
          <el-table-column label="回款金额" prop="receiptPaymentAmount" show-overflow-tooltip/>
          <el-table-column label="未回款金额" prop="unReceiptPaymentAmount" show-overflow-tooltip/>
        </el-table>
        <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" :page="page.current"
                    :limit="page.size" @pagination="paginationChange" />
      </div>
      <div class="table_list">
        <el-table :data="receiptRecord" border
                  :row-key="row => row.id"
                  show-summary
                  :summary-method="summarizeMainTable"
                  height="calc(100vh - 18.5em)">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" label="序号" type="index" width="60" />
          <el-table-column label="发生日期" prop="receiptPaymentDate" show-overflow-tooltip/>
          <el-table-column label="回款金额" prop="receiptPaymentAmount" show-overflow-tooltip/>
          <el-table-column label="应收金额" prop="invoiceAmount" show-overflow-tooltip/>
        </el-table>
        <pagination v-show="recordTotal > 0" :total="recordTotal" layout="total, sizes, prev, pager, next, jumper" :page="recordPage.current"
                    :limit="recordPage.size" @pagination="paginationChange" />
      </div>
    </div>

  </div>
</template>

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
import {
  invoiceLedgerSalesAccount,
} from "../../../api/salesManagement/invoiceLedger.js";
import {
  receiptPaymentListPage
} from "../../../api/salesManagement/receiptPayment.js";

const tableData = ref([])
const receiptRecord = ref([])
const selectedRows = ref([])
const tableLoading = ref(false)
const page = reactive({
  current: 1,
  size: 10,
})
const recordPage = reactive({
  current: 1,
  size: 10,
})
const total = ref(0)
const recordTotal = ref(0)
const data = reactive({
  searchForm: {
    searchText: '',
    invoiceDate:''
  }
})
const { searchForm } = toRefs(data)
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1
  getList()
}
const paginationChange = ({ current, limit }) => {
  page.current = current;
  page.size = limit;
  getList()
}
const getList = () => {
  tableLoading.value = true
  invoiceLedgerSalesAccount({...searchForm.value, ...page}).then(res => {
    tableLoading.value = false
    tableData.value = res.data.records;
    total.value = res.data.total;
    if(tableData.value.length > 0) {
      receiptPaymentList(recordPage,tableData.value[0].customerId);
    }
  })
}
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}
// ä¸»è¡¨åˆè®¡æ–¹æ³•
const summarizeMainTable = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const prop = column.property;
    if (['invoiceAmount','receiptPaymentAmount','unReceiptPaymentAmount'].includes(prop)) {
      const values = data.map(item => Number(item[prop]));
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((acc, val) => (!isNaN(val) ? acc + val : acc), 0);
      } else {
        sums[index] = '';
      }
    } else {
      sums[index] = '';
    }
  })
  return sums;
};

const receiptPaymentList = (page,id) => {
  const param = {
    customerId:id,
    current: page.current,
    size: page.size,
  }
  receiptPaymentListPage(param).then(res => {
    receiptRecord.value = res.data.records;
    receiptRecord.total = res.data.total;
  })
}


getList()
</script>

<style scoped lang="scss">

.table_list {
  width: 50%;
}

</style>