New file |
| | |
| | | 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 |
| | | }) |
| | | } |
| | |
| | | <!-- 搜索区域 --> |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | | |
| | | <!-- 操作列 --> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { list, exportExcel } from '@/api/payment-details/list' |
| | | export default { |
| | | name: "PaymentDetails", |
| | | data() { |
| | |
| | | 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() { |
| | |
| | | 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 |
| | | } |
| | | }); |
| | |
| | | // 导出Excel |
| | | handleExport() { |
| | | this.$message.success("导出Excel功能"); |
| | | exportExcel().then(res => { |
| | | console.log(res); |
| | | }); |
| | | }, |
| | | // 分页大小改变 |
| | | handleSizeChange(val) { |