# 增值税对比页面优化

## 涉及页面

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

## API

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /purchase/report/listVat | 增值税按月汇总（原有） |
| GET | /purchase/report/listVatDetail | 增值税明细-按发票/订单展示（新增） |

### 增值税明细接口

**请求参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| page | Page | 否 | 分页参数 |
| month | String | 否 | 月份筛选（yyyy-MM），为空则查询全部 |

**响应格式：**
```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. 页面布局改造 - 左侧列表 + 右侧柱状图

```html
<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 数据

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

### 3. 方法

```js
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 筛选参数为空时查询全部数据