增值税对比页面优化

涉及页面

• 决策分析 - 增值税对比页面

API

增值税明细接口

请求参数：

响应格式：
json { "code": 200, "msg": "操作成功", "data": { "records": [ { "invoiceNo": "FP20260801001", "salesContractNo": "HT20260801", "supplierName": "供应商A", "customerName": null, "orderType": "进项", "invoiceDate": "2026-08-01", "taxRate": 13.00, "jTaxAmount": 1300.00, "xTaxAmount": 0.00, "taxAmount": 1300.00 }, { "invoiceNo": "XS20260801001", "salesContractNo": "XS-HT20260801", "supplierName": null, "customerName": "客户B", "orderType": "销项", "invoiceDate": "2026-08-03", "taxRate": 13.00, "jTaxAmount": 0.00, "xTaxAmount": 2600.00, "taxAmount": 2600.00 } ], "total": 100 } }

前端修改点

1. 页面布局改造 - 左侧列表 + 右侧柱状图

<el-row :gutter="20">
  <!-- 左侧：增值税明细列表 -->
  <el-col :span="14">
    <el-card>
      <div slot="header">
        <span>增值税明细</span>
        <el-select v-model="queryMonth" placeholder="选择月份" clearable style="float: right; width: 150px;">
          <el-option v-for="m in monthOptions" :key="m" :label="m" :value="m" />
        </el-select>
      </div>
      <el-table :data="vatDetailList" border v-loading="loading">
        <el-table-column prop="orderType" label="类型" width="60">
          <template slot-scope="scope">
            <el-tag :type="scope.row.orderType === '进项' ? 'info' : 'warning'" size="small">
              {{ scope.row.orderType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="invoiceNo" label="发票号" width="140" />
        <el-table-column prop="salesContractNo" label="合同号" width="140" />
        <el-table-column prop="supplierName" label="供应商" />
        <el-table-column prop="customerName" label="客户" />
        <el-table-column prop="invoiceDate" label="开票日期" width="110" />
        <el-table-column prop="taxRate" label="税率(%)" width="80" />
        <el-table-column prop="taxAmount" label="税额" width="120">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.orderType === '进项' ? '#409EFF' : '#E6A23C' }">
              {{ scope.row.taxAmount }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 50]"
        :page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next" />
    </el-card>
  </el-col>

  <!-- 右侧：柱状对比图 -->
  <el-col :span="10">
    <el-card>
      <div slot="header"><span>进销项增值税对比</span></div>
      <div ref="vatChart" style="height: 400px;"></div>
    </el-card>
  </el-col>
</el-row>

2. data 数据

data() {
  return {
    queryMonth: '',
    monthOptions: [],
    vatDetailList: [],
    loading: false,
    page: { current: 1, size: 20, total: 0 },
  }
}

3. 方法

async loadVatDetail() {
  this.loading = true;
  try {
    const res = await this.$http.get('/purchase/report/listVatDetail', {
      params: {
        current: this.page.current,
        size: this.page.size,
        month: this.queryMonth || null,
      }
    });
    this.vatDetailList = res.data.records || [];
    this.page.total = res.data.total || 0;
    this.renderChart();
  } finally {
    this.loading = false;
  }
},

renderChart() {
  const chart = this.$echarts.init(this.$refs.vatChart);
  // 按订单类型分组统计
  const inputItems = this.vatDetailList.filter(i => i.orderType === '进项');
  const outputItems = this.vatDetailList.filter(i => i.orderType === '销项');
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['进项税额', '销项税额'] },
    xAxis: { type: 'category', data: this.vatDetailList.map(i => i.invoiceNo) },
    yAxis: { type: 'value', name: '税额(元)' },
    series: [
      {
        name: '进项税额',
        type: 'bar',
        data: this.vatDetailList.map(i => i.orderType === '进项' ? i.taxAmount : 0),
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '销项税额',
        type: 'bar',
        data: this.vatDetailList.map(i => i.orderType === '销项' ? i.taxAmount : 0),
        itemStyle: { color: '#E6A23C' }
      }
    ]
  });
},

handleSizeChange(val) { this.page.size = val; this.loadVatDetail(); },
handleCurrentChange(val) { this.page.current = val; this.loadVatDetail(); },

注意事项

• 列表展示每条发票/订单级别的税额明细（而非以前只按月汇总）
• 进项税来自采购发票（invoice_ledger），销项税来自销售开票（ticket_registration）
• 右侧柱状图使用 ECharts 实现，按发票号分组展示进销对比
• month 筛选参数为空时查询全部数据