dtm_vue/src/views/supply/monitor/index.vue

<template>
  <div class="app-container">
    <div class="page-header">
      <h2><i class="el-icon-s-data"></i> 供应商查询、对比与付款计划</h2>
      <p class="page-desc">基于供应商账期、采购订单、采购入库和订单入库合并数据，补充供应商实时查询、对比分析和预计付款计划。</p>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-search"></i> 查询条件</span>
      </div>
      <el-form :inline="true" size="small" class="form-inline">
        <el-form-item label="供应商名称">
          <el-input v-model="query.supplierName" clearable placeholder="输入供应商名称" style="width: 260px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-alert
      class="box-card"
      title="付款计划当前按 实际验收日期 + 供应商账期 推算；如果后续接入发票日期和真实付款日期，可以替换为真实付款计划。"
      type="warning"
      show-icon
      :closable="false"
    />

    <el-tabs v-model="activeTab" type="border-card" class="box-card" @tab-click="handleTabClick">
      <el-tab-pane label="供应商列表" name="list">
        <el-table
          v-loading="loading"
          :data="pagedSupplierList"
          row-key="supplierName"
          border
          highlight-current-row
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="48" reserve-selection />
          <el-table-column prop="supplierName" label="供应商名称" min-width="220" fixed="left" show-overflow-tooltip />
          <el-table-column prop="supplierCode" label="供应商代码" width="110" />
          <el-table-column label="账期" width="90" align="right">
            <template slot-scope="scope">{{ scope.row.termDays || 0 }}天</template>
          </el-table-column>
          <el-table-column label="订单量" prop="orderCount" width="90" align="right" />
          <el-table-column label="订单数量" width="110" align="right">
            <template slot-scope="scope">{{ formatNumber(scope.row.orderQty) }}</template>
          </el-table-column>
          <el-table-column label="入库数量" width="110" align="right">
            <template slot-scope="scope">{{ formatNumber(scope.row.receiptQty) }}</template>
          </el-table-column>
          <el-table-column label="入库金额" width="130" align="right">
            <template slot-scope="scope">¥{{ formatMoney(scope.row.receiptAmount) }}</template>
          </el-table-column>
          <el-table-column label="交付及时率" width="120" align="right">
            <template slot-scope="scope">{{ formatPercent(scope.row.deliveryRate) }}</template>
          </el-table-column>
          <el-table-column label="完成率" width="110" align="right">
            <template slot-scope="scope">{{ formatPercent(scope.row.completionRate) }}</template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrap">
          <el-pagination
            :current-page.sync="pagination.list.page"
            :page-size="pagination.list.size"
            :total="supplierList.length"
            layout="total, prev, pager, next, jumper"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="供应商对比" name="compare">
        <div class="toolbar">
          <span>已选择 {{ selectedSuppliers.length }} 个供应商，支持勾选 2-5 个供应商进行对比。</span>
          <el-button type="primary" size="mini" :disabled="selectedSuppliers.length < 2" @click="loadCompare">生成对比</el-button>
        </div>
        <div class="chart-card">
          <div class="chart-title">供应商核心指标柱状对比</div>
          <div v-if="compareList.length === 0" class="chart-empty">请选择 2-5 个供应商并生成对比</div>
          <div ref="compareChart" class="compare-chart" />
        </div>
        <el-table v-loading="compareLoading" :data="pagedCompareList" border highlight-current-row style="width: 100%">
          <el-table-column prop="supplierName" label="供应商名称" min-width="220" fixed="left" show-overflow-tooltip />
          <el-table-column label="账期" width="90" align="right">
            <template slot-scope="scope">{{ scope.row.termDays || 0 }}天</template>
          </el-table-column>
          <el-table-column label="订单量" prop="orderCount" width="90" align="right" />
          <el-table-column label="订单金额" width="130" align="right">
            <template slot-scope="scope">¥{{ formatMoney(scope.row.orderAmount) }}</template>
          </el-table-column>
          <el-table-column label="入库金额" width="130" align="right">
            <template slot-scope="scope">¥{{ formatMoney(scope.row.receiptAmount) }}</template>
          </el-table-column>
          <el-table-column label="交付及时率" width="120" align="right">
            <template slot-scope="scope">{{ formatPercent(scope.row.deliveryRate) }}</template>
          </el-table-column>
          <el-table-column label="完成率" width="110" align="right">
            <template slot-scope="scope">{{ formatPercent(scope.row.completionRate) }}</template>
          </el-table-column>
          <el-table-column label="未完工数" width="120" align="right">
            <template slot-scope="scope">{{ formatNumber(scope.row.uncompletedQty) }}</template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrap">
          <el-pagination
            :current-page.sync="pagination.compare.page"
            :page-size="pagination.compare.size"
            :total="compareList.length"
            layout="total, prev, pager, next, jumper"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="付款计划" name="payment">
        <el-table v-loading="paymentLoading" :data="pagedPaymentPlan" border highlight-current-row style="width: 100%">
          <el-table-column prop="dueDate" label="预计付款日" width="120" fixed="left" />
          <el-table-column prop="supplierName" label="供应商名称" min-width="220" show-overflow-tooltip />
          <el-table-column label="账期" width="90" align="right">
            <template slot-scope="scope">{{ scope.row.termDays || 0 }}天</template>
          </el-table-column>
          <el-table-column label="预计付款金额" width="150" align="right">
            <template slot-scope="scope">¥{{ formatMoney(scope.row.estimatedPayAmount) }}</template>
          </el-table-column>
          <el-table-column label="入库数量" width="120" align="right">
            <template slot-scope="scope">{{ formatNumber(scope.row.receiptQty) }}</template>
          </el-table-column>
          <el-table-column prop="receiptLines" label="入库行数" width="100" align="right" />
          <el-table-column prop="status" label="状态" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="paymentTag(scope.row.status)" size="mini">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrap">
          <el-pagination
            :current-page.sync="pagination.payment.page"
            :page-size="pagination.payment.size"
            :total="paymentPlan.length"
            layout="total, prev, pager, next, jumper"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSupplyMonitorCompare, getSupplyMonitorSuppliers, getSupplyPaymentPlan } from '@/api/supply'

export default {
  name: 'SupplyMonitorEnhancement',
  data() {
    return {
      activeTab: 'list',
      loading: false,
      compareLoading: false,
      paymentLoading: false,
      compareChart: null,
      query: {
        supplierName: ''
      },
      dateRange: [],
      supplierList: [],
      selectedSuppliers: [],
      compareList: [],
      paymentPlan: [],
      pagination: {
        list: { page: 1, size: 20 },
        compare: { page: 1, size: 20 },
        payment: { page: 1, size: 20 }
      }
    }
  },
  created() {
    this.handleQuery()
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.compareChart) {
      this.compareChart.dispose()
      this.compareChart = null
    }
  },
  computed: {
    pagedSupplierList() {
      return this.slicePage(this.supplierList, this.pagination.list)
    },
    pagedCompareList() {
      return this.slicePage(this.compareList, this.pagination.compare)
    },
    pagedPaymentPlan() {
      return this.slicePage(this.paymentPlan, this.pagination.payment)
    }
  },
  methods: {
    slicePage(list, pager) {
      const start = (pager.page - 1) * pager.size
      return list.slice(start, start + pager.size)
    },
    buildParams() {
      const params = {
        supplierName: this.query.supplierName
      }
      if (this.dateRange && this.dateRange.length === 2) {
        params.startDate = this.dateRange[0]
        params.endDate = this.dateRange[1]
      }
      return params
    },
    handleQuery() {
      this.loadSuppliers()
      if (this.activeTab === 'payment') {
        this.loadPaymentPlan()
      } else {
        this.paymentPlan = []
      }
      this.compareList = []
      this.$nextTick(this.renderCompareChart)
    },
    resetQuery() {
      this.query.supplierName = ''
      this.dateRange = []
      this.handleQuery()
    },
    async loadSuppliers() {
      this.loading = true
      try {
        const res = await getSupplyMonitorSuppliers(this.buildParams())
        this.supplierList = Array.isArray(res.data) ? res.data : []
        this.pagination.list.page = 1
      } finally {
        this.loading = false
      }
    },
    async loadPaymentPlan() {
      this.paymentLoading = true
      try {
        const res = await getSupplyPaymentPlan(this.buildParams())
        this.paymentPlan = Array.isArray(res.data) ? res.data : []
        this.pagination.payment.page = 1
      } finally {
        this.paymentLoading = false
      }
    },
    handleTabClick(tab) {
      if (tab.name === 'payment' && this.paymentPlan.length === 0) {
        this.loadPaymentPlan()
      }
      if (tab.name === 'compare') {
        this.$nextTick(this.renderCompareChart)
      }
    },
    async loadCompare() {
      const supplierNames = this.selectedSuppliers.slice(0, 5).map(item => item.supplierName).join(',')
      this.compareLoading = true
      try {
        const res = await getSupplyMonitorCompare({
          ...this.buildParams(),
          supplierNames
        })
        this.compareList = Array.isArray(res.data) ? res.data : []
        this.pagination.compare.page = 1
        this.activeTab = 'compare'
        this.$nextTick(this.renderCompareChart)
      } finally {
        this.compareLoading = false
      }
    },
    handleSelectionChange(selection) {
      this.selectedSuppliers = selection.slice(0, 5)
    },
    renderCompareChart() {
      const chartEl = this.$refs.compareChart
      if (!chartEl) return
      this.compareChart = echarts.getInstanceByDom(chartEl) || echarts.init(chartEl)
      const names = this.compareList.map(item => item.supplierName)
      this.compareChart.setOption({
        color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c'],
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { top: 0, data: ['订单金额', '入库金额', '交付及时率', '完成率'] },
        grid: { left: 56, right: 24, top: 48, bottom: 64 },
        xAxis: {
          type: 'category',
          data: names,
          axisLabel: { interval: 0, rotate: names.length > 3 ? 20 : 0 }
        },
        yAxis: [
          { type: 'value', name: '金额', axisLabel: { formatter: value => this.compactMoney(value) } },
          { type: 'value', name: '比例', min: 0, max: 100, axisLabel: { formatter: '{value}%' } }
        ],
        series: [
          { name: '订单金额', type: 'bar', data: this.compareList.map(item => Number(item.orderAmount || 0)) },
          { name: '入库金额', type: 'bar', data: this.compareList.map(item => Number(item.receiptAmount || 0)) },
          { name: '交付及时率', type: 'bar', yAxisIndex: 1, data: this.compareList.map(item => Number(item.deliveryRate || 0) * 100) },
          { name: '完成率', type: 'bar', yAxisIndex: 1, data: this.compareList.map(item => Number(item.completionRate || 0) * 100) }
        ]
      }, true)
      this.compareChart.resize()
    },
    handleResize() {
      if (this.compareChart) this.compareChart.resize()
    },
    paymentTag(status) {
      if (status === '已到期') return 'danger'
      if (status === '7天内到期') return 'warning'
      return 'success'
    },
    compactMoney(value) {
      const number = Number(value || 0)
      if (Math.abs(number) >= 10000) {
        return `${this.formatNumber(number / 10000)}万`
      }
      return this.formatNumber(number)
    },
    formatNumber(value) {
      return new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 2 }).format(Number(value || 0))
    },
    formatMoney(value) {
      return new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(value || 0))
    },
    formatPercent(value) {
      return `${this.formatNumber(Number(value || 0) * 100)}%`
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;

  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;

    i {
      margin-right: 8px;
      color: #409eff;
    }
  }

  .page-desc {
    color: #909399;
    font-size: 14px;
    margin: 0;
  }
}

.box-card {
  margin-bottom: 20px;
}

.form-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #606266;
}

.chart-card {
  position: relative;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fff;
}

.chart-title {
  margin-bottom: 8px;
  color: #303133;
  font-weight: 600;
}

.compare-chart {
  width: 100%;
  height: 320px;
}

.chart-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 154px;
  z-index: 2;
  text-align: center;
  color: #909399;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

::v-deep .el-card__header {
  font-weight: bold;
}
</style>