功能：新增托盘业务报表页面

2026-07-27 11:14:36 +08:00
parent 85faef213e
commit 8361c11c4c
9 changed files with 1049 additions and 2 deletions
@@ -0,0 +1,148 @@
+<template>
+  <div class="app-container">
+    <el-form ref="queryRef" :model="queryParams" :inline="true" label-width="76px">
+      <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 label="客户ID" prop="customerId">
+        <el-input-number v-model="queryParams.customerId" :min="1" :controls="false" placeholder="请输入客户ID" />
+      </el-form-item>
+      <el-form-item label="现场ID" prop="siteId">
+        <el-input-number v-model="queryParams.siteId" :min="1" :controls="false" placeholder="请输入现场ID" />
+      </el-form-item>
+      <el-form-item label="产线ID" prop="lineId">
+        <el-input-number v-model="queryParams.lineId" :min="1" :controls="false" placeholder="请输入产线ID" />
+      </el-form-item>
+      <el-form-item label="托盘编号" prop="palletCode">
+        <el-input v-model="queryParams.palletCode" placeholder="请输入托盘编号" clearable maxlength="64" @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="菌种ID" prop="strainId">
+        <el-input-number v-model="queryParams.strainId" :min="1" :controls="false" placeholder="请输入菌种ID" />
+      </el-form-item>
+      <el-form-item label="生产批次" prop="batchNo">
+        <el-input v-model="queryParams.batchNo" placeholder="请输入生产批次" clearable maxlength="64" @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['report:consumption:list']">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery" v-hasPermi="['report:consumption:list']">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
+    <el-table v-loading="loading" :data="reportList">
+      <template #empty><el-empty description="暂无产线消耗数据" /></template>
+      <el-table-column label="使用记录号" prop="usageNo" min-width="150" :show-overflow-tooltip="true" />
+      <el-table-column label="使用时间" prop="occurredAt" width="180">
+        <template #default="scope">{{ parseTime(scope.row.occurredAt) }}</template>
+      </el-table-column>
+      <el-table-column label="客户" min-width="130" :show-overflow-tooltip="true">
+        <template #default="scope">{{ scope.row.customerName || `#${scope.row.customerId}` }}</template>
+      </el-table-column>
+      <el-table-column label="现场" min-width="130" :show-overflow-tooltip="true">
+        <template #default="scope">{{ scope.row.siteName || `#${scope.row.siteId}` }}</template>
+      </el-table-column>
+      <el-table-column label="产线" min-width="130" :show-overflow-tooltip="true">
+        <template #default="scope">{{ scope.row.lineName || `#${scope.row.lineId}` }}</template>
+      </el-table-column>
+      <el-table-column label="托盘" prop="palletCode" min-width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="菌种" min-width="150" :show-overflow-tooltip="true">
+        <template #default="scope">{{ scope.row.strainName || scope.row.strainCode || `#${scope.row.strainId}` }}</template>
+      </el-table-column>
+      <el-table-column label="生产批次" prop="batchNo" min-width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="使用包数" prop="usedPackages" width="100" align="right" />
+      <el-table-column label="使用后余量" prop="remainingPackagesAfter" width="110" align="right" />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page="queryParams.pageNum"
+      :limit="queryParams.pageSize"
+      @update:page="handleCurrentChange"
+      @update:limit="handleSizeChange"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script setup name="ReportConsumption">
+import { listConsumptionReport } from '@/api/report/consumption'
+
+const { proxy } = getCurrentInstance()
+const reportList = ref([])
+const loading = ref(false)
+const loadError = ref('')
+const total = ref(0)
+const dateRange = ref([])
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  beginTime: undefined,
+  endTime: undefined,
+  customerId: undefined,
+  siteId: undefined,
+  lineId: undefined,
+  palletCode: undefined,
+  strainId: undefined,
+  batchNo: undefined
+})
+let listGeneration = 0
+
+function invalidateListRequest() {
+  listGeneration += 1
+  loading.value = false
+}
+
+function isCurrentListRequest(listContext) {
+  return listContext.generation === listGeneration
+}
+
+function getList() {
+  const listContext = {
+    generation: ++listGeneration,
+    query: proxy.addDateRange({ ...queryParams.value }, dateRange.value)
+  }
+  loading.value = true
+  loadError.value = ''
+  listConsumptionReport(listContext.query).then((response) => {
+    if (!isCurrentListRequest(listContext)) return
+    reportList.value = Array.isArray(response.rows) ? response.rows : []
+    total.value = response.total
+  }).catch(() => {
+    if (!isCurrentListRequest(listContext)) return
+    reportList.value = []
+    total.value = 0
+    loadError.value = '产线消耗报表加载失败，请稍后重试'
+  }).finally(() => {
+    if (!isCurrentListRequest(listContext)) return
+    loading.value = false
+  })
+}
+
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryRef')
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+function handleSizeChange(pageSize) {
+  queryParams.value.pageSize = pageSize
+  queryParams.value.pageNum = 1
+}
+
+function handleCurrentChange(pageNum) {
+  queryParams.value.pageNum = pageNum
+}
+
+onBeforeUnmount(() => {
+  invalidateListRequest()
+})
+
+getList()
+</script>