fix
pyt
2025-03-21 7d75017af75cddab54f9d2572ff56d85147414d4
fix
1个文件已修改
1个文件已添加
216 ■■■■■ 已修改文件
src/api/payment-details/list.js 18 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/payment-details/index.vue 198 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/payment-details/list.js
New file
@@ -0,0 +1,18 @@
import request from '@/utils/request'
// 各季度应付款明细列表
export function list(data) {
  return request({
    url: '/report/page',
    method: 'post',
    data
  })
}
// 导出为Excel
export function exportExcel(data) {
  return request({
    url: '/report/exports',
    method: 'post',
    data
  })
}
src/views/payment-details/index.vue
@@ -3,7 +3,7 @@
        <!-- 搜索区域 -->
        <el-form :inline="true" :model="queryParams" class="search-form">
            <el-form-item label="镇街">
                <el-input v-model="queryParams.town" placeholder="请输入" clearable size="small" />
                <el-input v-model="queryParams.street" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
@@ -16,7 +16,7 @@
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-amount">{{ statistics.compensationSum }}</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">补偿资金总金额</div>
                    </div>
@@ -25,7 +25,7 @@
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-amount">{{ statistics.downPaymentAmount }}</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">累计拨款金额</div>
                    </div>
@@ -34,7 +34,7 @@
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-amount">{{ statistics.subsidyAmount }}</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">过渡补贴金额</div>
                    </div>
@@ -43,7 +43,7 @@
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-amount">{{ statistics.quarterPayAmount }}</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">季度拨款金额</div>
                    </div>
@@ -62,37 +62,23 @@
        <el-table v-loading="loading" :data="tableData" border style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa' }">
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column prop="town" label="镇(街道)" min-width="100" align="center" />
            <el-table-column prop="people" label="人数" min-width="80" align="center" />
            <el-table-column prop="total" label="补偿资金总额(万元)" min-width="150" align="center" />
            <el-table-column prop="street" label="镇(街道)" min-width="100" align="center" />
            <el-table-column prop="currentCount" label="人数" min-width="80" align="center" />
            <el-table-column prop="compensationSum" label="补偿资金总额(万元)" min-width="150" align="center" />
            <el-table-column label="首笔款(万元)" min-width="100" align="center">
                <el-table-column prop="prepay" label="25%暂付款" min-width="100" align="center" />
                <el-table-column prop="transition" label="过渡补贴" min-width="100" align="center" />
                <el-table-column prop="downPaymentAmount" label="25%暂付款" min-width="100" align="center" />
                <el-table-column prop="subsidyAmount" label="过渡补贴" min-width="100" align="center" />
            </el-table-column>
            <el-table-column label="每季度需支付款项(万元)" min-width="100" align="center">
                <!-- 2025年 -->
                <el-table-column label="2025年1月" prop="pay2025_01" min-width="100" align="center" />
                <el-table-column label="2025年4月" prop="pay2025_04" min-width="100" align="center" />
                <el-table-column label="2025年7月" prop="pay2025_07" min-width="100" align="center" />
                <el-table-column label="2025年10月" prop="pay2025_10" min-width="100" align="center" />
                <!-- 2026年 -->
                <el-table-column label="2026年1月" prop="pay2026_01" min-width="100" align="center" />
                <el-table-column label="2026年4月" prop="pay2026_04" min-width="100" align="center" />
                <el-table-column label="2026年7月" prop="pay2026_07" min-width="100" align="center" />
                <el-table-column label="2026年10月" prop="pay2026_10" min-width="100" align="center" />
                <!-- 2027年 -->
                <el-table-column label="2027年1月" prop="pay2027_01" min-width="100" align="center" />
                <el-table-column label="2027年4月" prop="pay2027_04" min-width="100" align="center" />
                <el-table-column label="2027年7月" prop="pay2027_07" min-width="100" align="center" />
                <el-table-column label="2027年10月" prop="pay2027_10" min-width="100" align="center" />
                <!-- 2028年 -->
                <el-table-column label="2028年1月" prop="pay2028_01" min-width="100" align="center" />
                <el-table-column label="2028年4月" prop="pay2028_04" min-width="100" align="center" />
                <el-table-column label="2028年7月" prop="pay2028_07" min-width="100" align="center" />
                <el-table-column label="2028年10月" prop="pay2028_10" min-width="100" align="center" />
                <template v-for="(quarter, index) in quarters">
                    <el-table-column
                        :key="index"
                        :label="formatQuarterLabel(quarter)"
                        :prop="quarter"
                        min-width="100"
                        align="center"
                    />
                </template>
            </el-table-column>
            <!-- 操作列 -->
@@ -111,6 +97,7 @@
</template>
<script>
import { list, exportExcel } from '@/api/payment-details/list'
export default {
    name: "PaymentDetails",
    data() {
@@ -119,120 +106,60 @@
            loading: false,
            // 总条数
            total: 800,
            // 季度数组
            quarters: [],
            // 统计数据
            statistics: {
                compensationSum: 0,
                downPaymentAmount: 0,
                subsidyAmount: 0,
                quarterPayAmount: 0
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                town: "",
                street: "",
            },
            // 表格数据
            tableData: [
                {
                    town: "美阳街道",
                    people: 614,
                    total: 546,
                    prepay: 464,
                    transition: 123,
                    pay2025_01: "67.890",
                    pay2025_04: "23.456",
                    pay2025_07: "34.678",
                    pay2025_10: "45.123",
                    pay2026_01: "89.012",
                    pay2026_04: "10.234",
                    pay2026_07: "98.765",
                    pay2026_10: "54.321",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
                {
                    town: "美欣街道",
                    people: 997,
                    total: 151,
                    prepay: 426,
                    transition: 22,
                    pay2025_01: "76.543",
                    pay2025_04: "76.543",
                    pay2025_07: "76.543",
                    pay2025_10: "76.543",
                    pay2026_01: "76.543",
                    pay2026_04: "76.543",
                    pay2026_07: "76.543",
                    pay2026_10: "76.543",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
                {
                    town: "大划街道",
                    people: 408,
                    total: 120,
                    prepay: 327,
                    transition: 223,
                    pay2025_01: "76.543",
                    pay2025_04: "76.543",
                    pay2025_07: "76.543",
                    pay2025_10: "76.543",
                    pay2026_01: "76.543",
                    pay2026_04: "76.543",
                    pay2026_07: "76.543",
                    pay2026_10: "76.543",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
                {
                    town: "XX街道",
                    people: 271,
                    total: 764,
                    prepay: 327,
                    transition: 223,
                    pay2025_01: "76.543",
                    pay2025_04: "76.543",
                    pay2025_07: "76.543",
                    pay2025_10: "76.543",
                    pay2026_01: "76.543",
                    pay2026_04: "76.543",
                    pay2026_07: "76.543",
                    pay2026_10: "76.543",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
            ],
            tableData: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 格式化季度标签
        formatQuarterLabel(quarter) {
            const [year, month] = quarter.split('-');
            const monthMap = {
                '01': '1月',
                '04': '4月',
                '07': '7月',
                '10': '10月'
            };
            return `${year}年${monthMap[month]}`;
        },
        // 获取列表数据
        getList() {
            this.loading = true;
            // 模拟接口调用
            setTimeout(() => {
            list(this.queryParams).then(res => {
                this.loading = false;
            }, 500);
                if (res.code === 200) {
                    // 更新统计数据
                    this.statistics = res.data.reportSumResponse;
                    // 更新季度数组
                    this.quarters = res.data.quarters;
                    // 直接使用后端返回的数据
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        // 查询按钮
        handleQuery() {
@@ -244,16 +171,18 @@
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                town: "",
                street: "",
            };
            this.getList();
        },
        // 详情操作
        handleReview(row) {
            console.log(row);
            this.$router.push({
                path: '/payment-details/detail',
                query: {
                    town: row.town,
                    street: row.street,
                    id: row.id
                }
            });
@@ -261,6 +190,9 @@
        // 导出Excel
        handleExport() {
            this.$message.success("导出Excel功能");
            exportExcel().then(res => {
                console.log(res);
            });
        },
        // 分页大小改变
        handleSizeChange(val) {