Files
klp-oa/klp-ui/src/views/wms/report/delivery.vue
砂糖 3e640b4a4d feat: 新增业务员、合同号查询与展示,优化钢卷管理功能
1.  在钢卷相关API中新增对saleName和contractNo字段的过滤逻辑,避免数据覆盖
2.  多个报表页面新增业务员和合同号查询条件
3.  钢卷物料页面重构表单布局,新增生产耗时计算、合同绑定功能
4.  告警页面优化UI展示,新增详情弹窗和备注处理流程
5.  多处代码格式化与注释优化
2026-06-22 14:42:46 +08:00

276 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container" v-loading="loading">
<el-row>
<el-form label-width="80px" inline>
<el-form-item label="时间范围" prop="timeRange">
<time-range-picker v-model="queryParams" start-key="byExportTimeStart" end-key="byExportTimeEnd"
:default-start-time="defaultStartTime" :default-end-time="defaultEndTime" @quick-select="handleQuery" />
</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 label="品质" prop="endTime">
<muti-select v-model="queryParams.qualityStatusCsv" :options="dict.type.coil_quality_status"
placeholder="请选择品质" clearable />
</el-form-item>
<el-form-item label="业务员" prop="saleName">
<el-input style="width: 200px;" v-model="queryParams.saleName" placeholder="请输入业务员" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="合同号" prop="contractNo">
<el-input style="width: 200px;" v-model="queryParams.contractNo" 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-button type="primary" @click="settingVisible = true">列设置</el-button>
<el-button type="primary" @click="saveReport">保存报表</el-button>
</el-form-item>
</el-form>
</el-row>
<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-descriptions title="明细信息" :column="3" border>
</el-descriptions>
<coil-table :columns="deliveryColumns" :data="list" :total="total" :page-size="pageSize"
@current-change="handlePageChange" @size-change="handleSizeChange"></coil-table>
<el-dialog title="列设置" :visible.sync="settingVisible" width="50%">
<el-radio-group v-model="activeColumnConfig">
<el-radio-button label="coil-report-delivery">发货明细配置</el-radio-button>
</el-radio-group>
<columns-setting :reportType="activeColumnConfig"></columns-setting>
</el-dialog>
</div>
</template>
<script>
import { listWithBindInfoCoil, listLightCoil } 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 ColumnsSetting from "@/views/wms/report/components/setting/columns.vue";
import CoilTable from "@/views/wms/report/components/coilTable/index.vue";
import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
import { saveReportFile } from "@/views/wms/report/js/reportFile";
export default {
components: {
ProductInfo,
RawMaterialInfo,
CoilNo,
MemoInput,
MutiSelect,
WarehouseSelect,
ColumnsSetting,
CoilTable,
TimeRangePicker,
},
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status'],
data() {
// 工具函数:个位数补零,保证格式统一(比如 9 → 095 → 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} 07:00:00`
const endTime = `${nowYear}-${nowMonth}-${nowDay} 07:00:00`
return {
activeColumnConfig: 'coil-report-delivery',
settingVisible: false,
list: [],
lightList: [],
defaultStartTime: startTime,
defaultEndTime: endTime,
queryParams: {
status: 1,
dataType: 1,
selectType: 'product',
enterCoilNo: '',
currentCoilNo: '',
warehouseId: '',
productName: '',
itemSpecification: '',
itemMaterial: '',
itemManufacturer: '',
},
pageNum: 1,
pageSize: 100,
total: 0,
loading: false,
deliveryColumns: [],
}
},
computed: {
summary() {
// 总钢卷数量、总重、均重(基于轻量全量列表)
const totalCount = this.lightList.length
const totalWeight = this.lightList.reduce((acc, cur) => acc + parseFloat(cur.netWeight), 0)
const avgWeight = totalCount > 0 ? (totalWeight / totalCount).toFixed(2) : 0
return {
totalCount,
totalWeight: totalWeight.toFixed(2),
avgWeight,
}
},
coilIds() {
return this.lightList.map(item => item.coilId).join(',')
},
},
methods: {
// 加载列设置
loadColumns() {
this.deliveryColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-delivery') || '[]') || []
},
// 统一查询入口
handleQuery() {
this.getList()
},
getList() {
this.loading = true
this.pageNum = 1
Promise.all([
this.fetchLightList(),
this.fetchDetailList()
]).finally(() => {
this.loading = false
})
},
// 轻量全量接口,用于统计计算
fetchLightList() {
return listLightCoil({
...this.queryParams
}).then(res => {
this.lightList = (res || []).map(item => {
const [thickness, width] = item.specification?.split('*') || []
return {
...item,
computedThickness: parseFloat(thickness),
computedWidth: parseFloat(width),
}
})
})
},
// 分页明细接口,用于表格展示
fetchDetailList() {
return listWithBindInfoCoil({
...this.queryParams,
includeBindInfo: true,
pageNum: this.pageNum,
pageSize: this.pageSize,
}).then(res => {
this.total = res.total || 0
this.list = (res.rows || []).map(item => {
const [thickness, width] = item.specification?.split('*') || []
return {
...item,
computedThickness: parseFloat(thickness),
computedWidth: parseFloat(width),
}
})
})
},
// 切换页码
handlePageChange(pageNum) {
this.pageNum = pageNum
this.loading = true
this.fetchDetailList().finally(() => {
this.loading = false
})
},
// 切换每页条数
handleSizeChange(pageSize) {
this.pageSize = pageSize
this.pageNum = 1
this.loading = true
this.fetchDetailList().finally(() => {
this.loading = false
})
},
// 导出
exportData() {
this.download('wms/materialCoil/exportDelivery', {
coilIds: this.coilIds,
// 传了status为1则会使用发货时间作为筛选条件查询且导出后的excel会包含发货时间和发货人
status: 1
}, `materialCoil_${new Date().getTime()}.xlsx`)
},
saveReport() {
this.loading = true
saveReportFile(this.coilIds, {
reportParams: this.queryParams,
reportType: '发货报表',
}).then(res => {
this.$message({
message: '保存成功',
type: 'success',
})
}).catch(err => {
this.$message({
message: '保存失败',
type: 'error',
})
}).finally(() => {
this.loading = false
})
}
},
mounted() {
this.getList()
this.loadColumns()
}
}
</script>
<style scoped></style>