246 lines
9.8 KiB
Vue
246 lines
9.8 KiB
Vue
<template>
|
|
<div class="app-container report-page">
|
|
<el-form ref="queryRef" v-show="showSearch" class="report-filter page-filter" :model="queryParams" :inline="true" label-width="88px">
|
|
<el-form-item label="隧道编号" prop="tunnelCode">
|
|
<el-input v-model="queryParams.tunnelCode" placeholder="请输入隧道编号" clearable maxlength="64" @keyup.enter="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="隧道名称" prop="tunnelName">
|
|
<el-input v-model="queryParams.tunnelName" placeholder="请输入隧道名称" clearable maxlength="100" @keyup.enter="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="内部溯源号" prop="traceNo">
|
|
<el-input v-model="queryParams.traceNo" placeholder="完整溯源号，查询同组多托盘" clearable maxlength="64" @keyup.enter="handleQuery" />
|
|
</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="可选，仅筛选已登记产线" />
|
|
</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>
|
|
<div class="report-filter__footer">
|
|
<el-form-item class="report-filter__date" 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 class="report-filter__actions">
|
|
<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>
|
|
</div>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8 report-toolbar">
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
|
</el-row>
|
|
|
|
<el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
|
|
<el-table v-loading="loading" class="report-table data-table" stripe border height="calc(100vh - 330px)" :data="reportList">
|
|
<el-table-column label="隧道编号" prop="tunnelCode" min-width="130" :show-overflow-tooltip="true">
|
|
<template #default="scope">{{ scope.row.tunnelCode || '未登记' }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="隧道名称" prop="tunnelName" min-width="140" :show-overflow-tooltip="true">
|
|
<template #default="scope">{{ scope.row.tunnelName || '未登记' }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="内部溯源号" prop="traceNo" min-width="180" :show-overflow-tooltip="true">
|
|
<template #default="scope">{{ scope.row.traceNo || '未登记' }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="生产日期" prop="productionDate" width="120">
|
|
<template #default="scope">{{ scope.row.productionDate || '未登记' }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="有效期至" prop="expiryDate" width="120">
|
|
<template #default="scope">{{ scope.row.expiryDate || '未登记' }}</template>
|
|
</el-table-column>
|
|
<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 ? `#${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>
|
|
|
|
<style scoped>
|
|
.report-page { min-width: 0; }
|
|
.report-filter {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 0 14px;
|
|
padding: 16px 16px 4px;
|
|
margin-bottom: 12px;
|
|
background: var(--el-bg-color);
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
border-radius: 6px;
|
|
}
|
|
.report-filter :deep(.el-form-item) { width: 100%; margin-right: 0; margin-bottom: 12px; }
|
|
.report-filter :deep(.el-form-item__content) { flex: 1; min-width: 0; }
|
|
.report-filter :deep(.el-input),
|
|
.report-filter :deep(.el-input-number),
|
|
.report-filter :deep(.el-select),
|
|
.report-filter :deep(.el-date-editor) { width: 100% !important; min-width: 0; }
|
|
.report-filter__footer {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.report-filter__footer :deep(.el-form-item) {
|
|
margin-right: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
.report-filter .report-filter__date {
|
|
flex: 0 1 420px;
|
|
width: 420px;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
.report-filter .report-filter__actions {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
.report-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.report-table :deep(.el-table__header th) { background: var(--el-fill-color-light); font-weight: 600; }
|
|
.report-table :deep(.el-table__cell) { padding: 10px 0; }
|
|
@media (max-width: 900px) {
|
|
.report-filter { grid-template-columns: 1fr; padding: 14px 14px 2px; }
|
|
.report-filter__footer {
|
|
grid-column: 1;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
.report-filter .report-filter__date {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
.report-filter .report-filter__actions { align-self: flex-end; margin-bottom: 12px; }
|
|
.report-toolbar :deep(.el-button) { margin-left: 0; }
|
|
}
|
|
</style>
|
|
|
|
<script setup name="ReportConsumption">
|
|
import { listConsumptionReport } from '@/api/report/consumption'
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
const reportList = ref([])
|
|
const showSearch = ref(true)
|
|
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,
|
|
tunnelCode: undefined,
|
|
tunnelName: undefined,
|
|
traceNo: 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>
|