erp-next/ruoyi-ui/src/views/bid/order/closeDate.vue

<template>
  <div class="jd-cd-page">
    <!-- ═══ JD 统计卡片 ═══ -->
    <el-row :gutter="12" class="stat-row">
      <el-col :span="6" v-for="c in statCards" :key="c.key">
        <div class="stat-card">
          <div class="stat-body"><div class="stat-num">{{ stats[c.key] != null ? stats[c.key] : '-' }}</div><div class="stat-lbl">{{ c.label }}</div></div>
          <i :class="c.icon" class="stat-icon"></i>
        </div>
      </el-col>
    </el-row>

    <!-- ═══ JD 筛选栏 ═══ -->
    <div class="jd-filter">
      <div class="filter-left">
        <el-input v-model="q.doNo" placeholder="搜索单号" clearable size="small" class="filter-input" @keyup.enter.native="handleSearch" />
        <el-select v-model="q.deliveryStatus" placeholder="状态" clearable size="small" style="width:100px" @change="getList">
          <el-option label="已签收(待结单)" value="history" />
          <el-option label="已结单" value="closed" />
        </el-select>
        <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
        <el-button size="small" @click="resetSearch">重置</el-button>
      </div>
      <div class="filter-right">
        <el-button size="small" icon="el-icon-refresh" @click="getList">刷新</el-button>
      </div>
    </div>

    <div class="cd-body">
      <!-- ═══ 左侧列表 ═══ -->
      <div class="cd-left">
        <div class="left-header">
          <span class="left-title">已签收待结单</span>
        </div>
        <el-table ref="table" v-loading="loading" :data="list" border stripe size="small"
          @selection-change="onSelectionChange" class="jd-table"
          style="width:100%" :row-class-name="rowClass">
          <el-table-column type="selection" width="38" align="center" />
          <el-table-column label="单号" width="130">
            <template slot-scope="s">
              <span class="order-link">{{ s.row.doNo }}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商" prop="supplierName" min-width="120" show-overflow-tooltip />
          <el-table-column label="交货期" prop="deliveryDate" width="85" align="center" />
          <el-table-column label="收货日期" width="115" align="center">
            <template slot-scope="s">
              <el-date-picker v-model="s.row._editDate" type="date" value-format="yyyy-MM-dd"
                size="mini" style="width:105px" placeholder="选择日期" :clearable="true"
                @change="onDateChange(s.row)" />
            </template>
          </el-table-column>
          <el-table-column label="周期" width="75" align="center">
            <template slot-scope="s">
              <span :class="cycleClass(s.row._cycleDays)">{{ s.row._cycleDays != null ? s.row._cycleDays + '天' : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="差异" width="75" align="center">
            <template slot-scope="s">
              <span :class="diffClass(s.row._diffDays)">{{ s.row._diffDays != null ? diffLabel(s.row._diffDays) : '-' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-if="!loading && list.length === 0" description="暂无数据" style="padding:40px 0" />
        <pagination v-show="total>0" :total="total" :page.sync="q.pageNum" :limit.sync="q.pageSize" @pagination="getList" />
      </div>

      <!-- ═══ 右侧操作区 ═══ -->
      <div class="cd-right">
        <div class="right-panel">
          <div class="right-title">批量操作</div>
          <div class="right-section">
            <div class="rs-header">已选择 <b>{{ selected.length }}</b> 条</div>
            <div v-if="selected.length" class="rs-list">
              <div v-for="r in selected" :key="r.doId" class="rs-item">{{ r.doNo }}</div>
            </div>
            <div v-else class="rs-empty">请在左侧勾选订单</div>
          </div>
          <div class="right-section">
            <div class="rs-header">批量设置收货日期</div>
            <div class="rs-date-row">
              <el-date-picker v-model="batchDate" type="date" value-format="yyyy-MM-dd" size="small" style="width:140px" placeholder="选择日期" />
              <el-button size="small" @click="applyBatchDate" :disabled="!selected.length || !batchDate">应用到选中</el-button>
            </div>
            <div class="rs-quick">
              <el-button size="mini" @click="batchDate = todayStr()">今天</el-button>
              <el-button size="mini" @click="batchDate = yesterdayStr()">昨天</el-button>
            </div>
          </div>
          <div class="right-section">
            <div class="rs-header">批量确认结单</div>
            <el-button type="primary" size="small" style="width:100%" @click="batchConfirm"
              :disabled="!selected.length || !allHaveDate">确认结单 ({{ selected.length }})</el-button>
            <div v-if="selected.length && !allHaveDate" class="rs-warn">有订单未设置收货日期</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listDelivery, setCloseDate, batchSetCloseDate } from "@/api/bid/delivery"
import request from '@/utils/request'

export default {
  name: "CloseDate",
  data() {
    return {
      loading: false, list: [], total: 0, stats: {},
      selected: [],
      batchDate: null,
      q: { pageNum: 1, pageSize: 50, doNo: "", deliveryStatus: "history" },
      statCards: [
        { key: "pendingClose", label: "已收货未结单", icon: "el-icon-document", color: "#e4393c" },
        { key: "todayClosed", label: "今日结单", icon: "el-icon-circle-check", color: "#67c23a" },
        { key: "weekClosed", label: "本周结单", icon: "el-icon-data-line", color: "#e6a23c" },
        { key: "avgCycleDays", label: "平均周期(天)", icon: "el-icon-time", color: "#8e44ad" }
      ]
    }
  },
  computed: {
    allHaveDate() { return this.selected.every(r => r._editDate) }
  },
  created() { this.getList(); this.getStats() },
  methods: {
    getList() {
      this.loading = true
      listDelivery(this.q).then(r => {
        this.list = (r.rows || []).map(d => ({
          ...d,
          deliveryDate: d.deliveryDate ? d.deliveryDate.substring(0, 10) : '',
          _editDate: d.actualCloseDate ? d.actualCloseDate.substring(0, 10) : '',
          _cycleDays: null,
          _diffDays: null
        })).map(d => { this.calcRow(d); return d })
        this.total = r.total || 0; this.loading = false
      }).catch(() => { this.loading = false })
    },
    getStats() {
      request({ url: '/bid/delivery/closeDate/stats', method: 'get' }).then(r => { this.stats = r.data || {} }).catch(() => {})
    },
    handleSearch() { this.q.pageNum = 1; this.getList() },
    resetSearch() { this.q.doNo = ""; this.q.deliveryStatus = ""; this.handleSearch() },
    onSelectionChange(rows) { this.selected = rows },
    rowClass({ row }) { return this.selected.includes(row) ? 'selected-row' : '' },

    onDateChange(row) { this.calcRow(row) },
    calcRow(row) {
      if (!row.deliveryDate || !row._editDate) { row._cycleDays = null; row._diffDays = null; return }
      const cd = new Date(row._editDate)
      // 履约周期以约定交货日为起点，存在延期日期时以延期日期替代计算差异
      const baseDate = row.delayDate || row.deliveryDate
      const dd = new Date(baseDate)
      row._cycleDays = Math.round((cd - dd) / 86400000)
      row._diffDays = row._cycleDays
    },
    cycleClass(d) { if (d === null) return ''; return d <= 0 ? 'diff-early' : 'diff-late' },
    diffClass(d) { if (d === null) return ''; return d <= 0 ? 'diff-early' : 'diff-late' },
    diffLabel(d) { if (d === 0) return '准时'; if (d < 0) return '提前' + Math.abs(d) + '天'; return '延期' + d + '天' },

    todayStr() { const d = new Date(); return d.toISOString().slice(0, 10) },
    yesterdayStr() { const d = new Date(); d.setDate(d.getDate() - 1); return d.toISOString().slice(0, 10) },
    applyBatchDate() {
      if (!this.batchDate || !this.selected.length) return
      this.selected.forEach(r => { r._editDate = this.batchDate; this.calcRow(r) })
      this.$modal.msgSuccess("已应用到 " + this.selected.length + " 条")
    },
    batchConfirm() {
      if (!this.selected.length) return
      if (!this.allHaveDate) { this.$modal.msgError("有订单未设置收货日期"); return }
      this.$modal.confirm("确认批量结单 " + this.selected.length + " 条？").then(() => {
        const ids = this.selected.map(r => r.doId)
        return batchSetCloseDate(ids, this.selected[0]._editDate)
      }).then(() => {
        this.$modal.msgSuccess("批量结单成功"); this.getList(); this.getStats(); this.selected = []
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.jd-cd-page { padding: 12px; min-height: calc(100vh - 84px); }

.stat-row { margin-bottom: 12px !important; }

.jd-filter { display: flex; align-items: center; background: #ffffff; padding: 10px 16px; border-radius: 2px; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.filter-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-right { margin-left: auto; }
.filter-input { width: 130px; }

.cd-body { display: flex; gap: 12px; align-items: flex-start; }

.cd-left { flex: 1; background: #fff; border-radius: 2px; border: 1px solid #e5e5e5; padding: 14px; }
.left-header { display: flex; align-items: center; margin-bottom: 12px; }
.left-title { font-size: 14px; font-weight: 700; color: #333; }

.jd-table { border: none !important; }

.cd-right { width: 320px; flex-shrink: 0; background: #fff; border-radius: 2px; border: 1px solid #e5e5e5; padding: 16px; }
.right-title { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #e4393c; }
.right-section { margin-bottom: 20px; }
.rs-header { font-size: 12px; color: #666; margin-bottom: 8px; }
.rs-list { max-height: 150px; overflow-y: auto; border: 1px solid #e5e5e5; border-radius: 2px; padding: 4px; }
.rs-item { padding: 4px 8px; font-size: 12px; color: #333; border-bottom: 1px solid #ffffff; }
.rs-item:last-child { border-bottom: none; }
.rs-empty { text-align: center; padding: 20px; color: #999; font-size: 12px; }
.rs-date-row { display: flex; gap: 6px; margin-bottom: 8px; }
.rs-quick { display: flex; gap: 6px; }
.rs-warn { font-size: 11px; color: #f56c6c; margin-top: 6px; }

.order-link { color: #e4393c; cursor: pointer; }
.order-link:hover { color: #e4393c; }

::v-deep .selected-row td { background: #fafafa !important; }

.diff-early { color: #67c23a; font-weight: 600; }
.diff-late { color: #f56c6c; font-weight: 600; }
</style>