bj_power/bj_power_wms_client/frontend/src/pages/Ledger.vue

<script setup>
defineOptions({ name: 'Ledger' })
import { onMounted, reactive, ref } from 'vue'
import request from '../utils/request'
import { fmtTime } from '../utils/format'
import PageHelp from '../components/PageHelp.vue'
import { helpLedger } from '../help'

const orderNo = ref('')
const materialCode = ref('')
const loading = ref(false)
const queried = ref(false)
const usingDemo = ref(false)
const rows = ref([])
const total = ref(0)
const page = reactive({ current: 1, size: 20 })

function gapOf(row) {
  return Math.max((row.totalQty || 0) - (row.outQty || 0), 0)
}

// 当真实台账为空（或无符合条件数据）时，注入一组演示记录，方便查看展示效果
function demoRows() {
  const now = Date.now()
  const mk = (order, code, name, totalQty, outQty, status, remark, days) => ({
    orderNo: order, materialCode: code, materialName: name,
    totalQty, outQty, status, remark, isDemo: true, createdAt: now - days * 86400000
  })
  return [
    mk('WO20260903001', 'ST-A100', '结构件-A型立柱', 240, 240, '领料完结', '已全部领料', 0),
    mk('WO20260903001', 'ST-B200', '结构件-B型横梁', 180, 120, '进行中', '余量 60 待领', 0),
    mk('WO20260903001', 'ST-C300', '结构件-C型底座', 90, 90, '领料完结', '', 1),
    mk('WO20260902017', 'PR-S100', '精密件-伺服电机主轴', 56, 36, '进行中', '余量 20 待领', 1),
    mk('WO20260902017', 'PR-S200', '精密件-编码器', 56, 0, '进行中', '尚未开始领料', 2),
    mk('WO20260902018', 'ST-D400', '结构件-D型支撑', 300, 210, '进行中', '余量 90 待领', 2),
    mk('WO20260901045', 'PR-S300', '精密件-减速箱体', 24, 24, '领料完结', '', 5),
    mk('WO20260901045', 'ST-E500', '结构件-E型端盖', 60, 40, '进行中', '', 5)
  ]
}

async function load() {
  loading.value = true
  try {
    const data = await request.get('/ledger/query', {
      params: {
        orderNo: orderNo.value.trim() || undefined,
        materialCode: materialCode.value.trim() || undefined,
        page: page.current,
        pageSize: page.size
      }
    })
    const real = data?.list || []
    if (real.length) {
      rows.value = real
      total.value = data?.total || 0
      usingDemo.value = false
    } else {
      // 无真实台账 → 展示演示数据（标注），便于查看效果
      rows.value = demoRows()
      total.value = rows.value.length
      usingDemo.value = true
    }
    queried.value = true
  } finally {
    loading.value = false
  }
}

function search() {
  page.current = 1
  load()
}

onMounted(load)

function statusTag(s) {
  return s === '领料完结' ? 'success' : s === '进行中' ? 'primary' : 'info'
}
</script>

<template>
  <div>
    <el-card shadow="never" class="mb12">
      <el-form inline @submit.prevent="search">
        <el-form-item label="工单号">
          <el-input v-model="orderNo" placeholder="工单号（可空，查全部）" clearable
                    style="width:210px" @keyup.enter="search" />
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model="materialCode" placeholder="物料编码（可空）" clearable
                    style="width:180px" @keyup.enter="search" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="queried" shadow="never">
      <template #header>
        工单备料台账（共 {{ total }} 条）
        <el-tag v-if="usingDemo" type="warning" size="small" style="margin-left:8px">演示数据</el-tag>
      </template>
      <el-table :data="rows" border v-loading="loading" empty-text="暂无台账数据">
        <el-table-column prop="orderNo" label="工单号" min-width="150" />
        <el-table-column prop="materialCode" label="物料编码" min-width="150" />
        <el-table-column prop="materialName" label="物料名称" min-width="150">
          <template #default="{ row }">{{ row.materialName || '-' }}</template>
        </el-table-column>
        <el-table-column prop="totalQty" label="需求总量" width="100" align="center" />
        <el-table-column prop="outQty" label="已出库" width="90" align="center" />
        <el-table-column label="缺口" width="90" align="center">
          <template #default="{ row }">{{ gapOf(row) }}</template>
        </el-table-column>
        <el-table-column label="状态" width="110" align="center">
          <template #default="{ row }">
            <el-tag :type="statusTag(row.status)" size="small">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="140">
          <template #default="{ row }">{{ row.remark || '-' }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="165" align="center">
          <template #default="{ row }">{{ fmtTime(row.createdAt) }}</template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination background layout="total, prev, pager, next" :total="total"
                       :current-page="page.current" :page-size="page.size"
                       @current-change="(p) => { page.current = p; load() }" />
      </div>
    </el-card>

    <el-card v-else shadow="never">
      <el-skeleton :rows="6" animated />
    </el-card>
  </div>
  <PageHelp :data="helpLedger" />
</template>

<style scoped>
.mb12 { margin-bottom: 12px; }
.pager { display: flex; justify-content: flex-end; margin-top: 10px; }
</style>