feat(wms): 新增发货报表页面及图表组件
新增发货报表页面，包含时间趋势折线图和维度汇总柱状图 添加报表数据统计展示和明细表格功能 优化库存汇总页面，增加冷硬卷、冷轧卷等分类统计 重构发货报表页面布局和交互逻辑
This commit is contained in:
砂糖
@@ -1,220 +1,204 @@
|
||||
<template>
|
||||
<div class="delivery-report" v-loading="loading">
|
||||
<!-- 时间筛选 -->
|
||||
<div class="filter-container">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
<el-button type="primary" @click="getReport">查询</el-button>
|
||||
<el-button @click="resetDate">重置</el-button>
|
||||
</div>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<el-row>
|
||||
<el-form label-width="80px" inline>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeStart" type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeEnd" type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="入场钢卷号" prop="endTime">
|
||||
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
|
||||
placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前钢卷号" prop="endTime">
|
||||
<el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="逻辑库位" prop="endTime">
|
||||
<warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
|
||||
style="width: 100%; display: inline-block; width: 200px;" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="endTime">
|
||||
<el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="endTime">
|
||||
<memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
|
||||
placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材质" prop="endTime">
|
||||
<muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
|
||||
placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="厂家" prop="endTime">
|
||||
<muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
|
||||
:options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="endTime">
|
||||
<el-button type="primary" @click="getList">查询</el-button>
|
||||
<el-button type="primary" @click="exportData">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<!-- 汇总信息 -->
|
||||
<el-card class="summary-card" v-if="summary">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>发货报表汇总</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item label="总运单数">{{ summary.waybillCount || 0 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总卷数">{{ summary.coilCount || 0 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总重量(吨)">{{ formatWeight(summary.totalWeight) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="日均运单数">{{ formatDailyValue(summary.dailyWaybillCount) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="日均卷数">{{ formatDailyValue(summary.dailyCoilCount) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="日均重量(吨)">{{ formatWeight(summary.dailyWeight) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开始时间" :span="2">{{ summary.startTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间" :span="2">{{ summary.endTime || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-descriptions title="统计信息" :column="3" border>
|
||||
<el-descriptions-item label="总钢卷数量">{{ summary.totalCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总重">{{ summary.totalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="均重">{{ summary.avgWeight }}t</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 详细数据表格 -->
|
||||
<el-card class="table-card" v-if="details && details.length > 0">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>产品发货明细</span>
|
||||
<span>共 {{ details.length }} 种产品</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
:data="details"
|
||||
style="width: 100%"
|
||||
stripe
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column prop="productName" label="产品名称" min-width="120" fixed="left" />
|
||||
<!-- <el-table-column prop="waybillCount" label="运单数量" min-width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.waybillCount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="coilCount" label="卷数" min-width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.coilCount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalWeight" label="总重量(吨)" min-width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatWeight(row.totalWeight) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="dailyWaybillCount" label="日均运单数" min-width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDailyValue(row.dailyWaybillCount) }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="dailyCoilCount" label="日均卷数" min-width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDailyValue(row.dailyCoilCount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dailyWeight" label="日均重量(吨)" min-width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatWeight(row.dailyWeight) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
|
||||
<el-col :span="12">
|
||||
<line-chart :data="list"></line-chart>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<bar-chart :data="list"></bar-chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-card v-else-if="!loading">
|
||||
<el-empty description="暂无数据" />
|
||||
</el-card>
|
||||
<el-descriptions title="明细信息" :column="3" border>
|
||||
</el-descriptions>
|
||||
<el-table :data="list" border height="calc(100vh - 320px)">
|
||||
<el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
|
||||
<template slot-scope="scope">
|
||||
<coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
|
||||
<template slot-scope="scope">
|
||||
<coil-no :coil-no="scope.row.currentCoilNo"></coil-no>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" />
|
||||
<el-table-column label="逻辑库位" align="center" prop="warehouseName" />
|
||||
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
|
||||
<el-table-column label="产品类型" align="center" width="250">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
|
||||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="重量 (吨)" align="center" prop="netWeight" />
|
||||
<el-table-column label="长度 (米)" align="center" prop="length" />
|
||||
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
|
||||
<el-table-column label="发货时间" align="center" prop="exportTime" />
|
||||
<el-table-column label="出库状态" align="center" prop="status">
|
||||
<!-- 0在库，1已出库 -->
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status === 0 ? '在库' : '已出库' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="更新人" align="center" prop="updateByName" />
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeliveryReport } from '@/api/wms/deliveryPlan'
|
||||
import { listCoilWithIds } from "@/api/wms/coil";
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
|
||||
import MemoInput from "@/components/MemoInput";
|
||||
import MutiSelect from "@/components/MutiSelect";
|
||||
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
|
||||
import BarChart from "./charts/bar.vue";
|
||||
import LineChart from "./charts/line.vue";
|
||||
|
||||
export default {
|
||||
name: 'DeliveryReport',
|
||||
components: {
|
||||
ProductInfo,
|
||||
RawMaterialInfo,
|
||||
CoilNo,
|
||||
MemoInput,
|
||||
MutiSelect,
|
||||
WarehouseSelect,
|
||||
BarChart,
|
||||
LineChart,
|
||||
},
|
||||
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
|
||||
data() {
|
||||
// 工具函数：个位数补零，保证格式统一（比如 9 → 09，5 → 05）
|
||||
const addZero = (num) => num.toString().padStart(2, '0')
|
||||
|
||||
const now = new Date() // 当前本地北京时间
|
||||
// 核心：获取【昨天】的日期对象（自动处理跨月/跨年，无边界问题）
|
||||
const yesterday = new Date(now)
|
||||
yesterday.setDate(yesterday.getDate() - 1)
|
||||
|
||||
// 昨天的年、月、日（补零格式化）
|
||||
const yesYear = yesterday.getFullYear()
|
||||
const yesMonth = addZero(yesterday.getMonth() + 1)
|
||||
const yesDay = addZero(yesterday.getDate())
|
||||
|
||||
// 今天的年、月、日（补零格式化）
|
||||
const nowYear = now.getFullYear()
|
||||
const nowMonth = addZero(now.getMonth() + 1)
|
||||
const nowDay = addZero(now.getDate())
|
||||
|
||||
// ✅ 目标时间区间：昨天早上6点 至 今天早上6点
|
||||
const startTime = `${yesYear}-${yesMonth}-${yesDay} 06:00:00`
|
||||
const endTime = `${nowYear}-${nowMonth}-${nowDay} 06:00:00`
|
||||
return {
|
||||
summary: null,
|
||||
details: [],
|
||||
dateRange: [],
|
||||
loading: false
|
||||
list: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 9999,
|
||||
status: 1,
|
||||
byExportTimeStart: startTime,
|
||||
byExportTimeEnd: endTime,
|
||||
selectType: 'product',
|
||||
enterCoilNo: '',
|
||||
currentCoilNo: '',
|
||||
warehouseId: '',
|
||||
productName: '',
|
||||
itemSpecification: '',
|
||||
itemMaterial: '',
|
||||
itemManufacturer: '',
|
||||
},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initDateRange()
|
||||
this.getReport()
|
||||
computed: {
|
||||
summary() {
|
||||
// 总钢卷数量、总重、均重
|
||||
const totalCount = this.list.length
|
||||
const totalWeight = this.list.reduce((acc, cur) => acc + parseFloat(cur.netWeight), 0)
|
||||
const avgWeight = totalCount > 0 ? (totalWeight / totalCount).toFixed(2) : 0
|
||||
return {
|
||||
totalCount,
|
||||
totalWeight: totalWeight.toFixed(2),
|
||||
avgWeight,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化日期范围（当月）
|
||||
initDateRange() {
|
||||
const now = new Date()
|
||||
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||
// const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
|
||||
const today = new Date()
|
||||
|
||||
this.dateRange = [
|
||||
this.formatDate(firstDay),
|
||||
this.formatDate(today)
|
||||
]
|
||||
},
|
||||
|
||||
// 格式化日期为 YYYY-MM-dd
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
|
||||
// 处理日期变化
|
||||
handleDateChange() {
|
||||
this.getReport()
|
||||
},
|
||||
|
||||
// 重置日期
|
||||
resetDate() {
|
||||
this.initDateRange()
|
||||
this.getReport()
|
||||
},
|
||||
|
||||
// 获取报表数据
|
||||
async getReport() {
|
||||
if (!this.dateRange || this.dateRange.length !== 2) {
|
||||
this.$message.warning('请选择日期范围')
|
||||
return
|
||||
}
|
||||
|
||||
getList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const query = {
|
||||
startTime: `${this.dateRange[0]} 00:00:00`,
|
||||
endTime: `${this.dateRange[1]} 23:59:59`
|
||||
}
|
||||
|
||||
const res = await getDeliveryReport(query)
|
||||
this.summary = res.data?.summary || null
|
||||
this.details = res.data?.details || []
|
||||
} catch (error) {
|
||||
console.error('获取发货报表失败:', error)
|
||||
this.$message.error('获取数据失败')
|
||||
this.summary = null
|
||||
this.details = []
|
||||
} finally {
|
||||
listCoilWithIds({
|
||||
...this.queryParams
|
||||
}).then(res => {
|
||||
this.list = res.rows
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 格式化重量显示
|
||||
formatWeight(weight) {
|
||||
if (!weight && weight !== 0) return '0.000'
|
||||
const num = Number(weight)
|
||||
return isNaN(num) ? '0.000' : num.toFixed(3)
|
||||
// 导出
|
||||
exportData() {
|
||||
this.download('wms/materialCoil/export', {
|
||||
coilIds: this.list.map(item => item.coilId).join(','),
|
||||
status: 1
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
// 格式化日均值显示
|
||||
formatDailyValue(value) {
|
||||
if (!value && value !== 0) return '0.00'
|
||||
const num = Number(value)
|
||||
return isNaN(num) ? '0.00' : num.toFixed(2)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delivery-report {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__label) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__content) {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user