DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch '0.8.X' of https://gitee.com/hdka/klp-oa into 0.8.X

Browse Source
This commit is contained in:
86156
2025-12-09 16:56:44 +08:00
parent a2d0cce233 5308b2a6fa
commit e9a79e4069
16 changed files with 1854 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
klp-ui/src/api/wms/coil.js
View File

@@ -143,7 +143,9 @@ export function listCoilByIds(coilIds) {
url: '/wms/materialCoil/list',
method: 'get',
params: {
coilIds
coilIds,
pageNum: 1,
pageSize: 1000
}
})
}

15
klp-ui/src/api/wms/deliveryPlan.js
View File

@@ -56,4 +56,17 @@ export function getDeliveryReport(query) {
method: 'get',
params: query
})
}
}
/**
* 获取当前可用的钢卷列表
*/
export function listSelectableCoils(planId) {
return request({
url: '/wms/deliveryPlan/selectableCoils',
method: 'get',
params: {
planId: planId
}
})
}

19
klp-ui/src/components/CoilSelector/index.vue
View File

@@ -18,7 +18,7 @@
<el-dialog title="选择钢卷" :visible.sync="dialogVisible" width="900px" :close-on-click-modal="false"
@close="handleClose" append-to-body>
<!-- 搜索区域 -->
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form v-if="!rangeMode" :inline="true" :model="queryParams" class="search-form">
<el-form-item label="卷号">
<el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
@keyup.enter.native="handleQuery" />
@@ -47,7 +47,7 @@
</el-table>
<!-- 分页 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
<pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<div slot="footer" class="dialog-footer">
@@ -91,6 +91,15 @@ export default {
type: Object,
default: null
},
rangeMode: {
type: Boolean,
default: false
},
// 返回选择模式，不再通过list借口获取，而是传入可以选择的钢卷数据
rangeData: {
type: Array,
default: () => []
}
},
data() {
return {
@@ -178,6 +187,12 @@ export default {
methods: {
// 获取钢卷列表
async getList() {
// 如果是范围模式，直接使用传入数据
if (this.rangeMode) {
this.coilList = this.rangeData || [];
this.total = this.coilList.length;
return;
}
try {
this.loading = true;
const params = { ...this.queryParams, ...this.filters };

431
klp-ui/src/views/wms/coil/Inventory/itemSummary.vue Normal file
View File

@@ -0,0 +1,431 @@
<template>
<div class="statistics-container" v-loading="loading">
<!-- 按照物料类型盘点 -->
<!-- 统计方式选择 -->
<el-form inline>
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
<el-form-item label="逻辑库位">
<WarehouseSelect v-model="queryParams.warehouseId" @change="handleWarehouseChange" />
</el-form-item>
<!-- 真实库区 -->
<el-form-item label="真实库区">
<ActualWarehouseSelect
v-model="queryParams.actualWarehouseId"
@change="handleActualWarehouseChange"
:width="220"
/>
</el-form-item>
</el-form>
<!-- el-descriptions 汇总数据 -->
<!-- 汇总数据展示 -->
<div class="summary-container" v-if="list.length > 0">
<h3>数据汇总</h3>
<el-descriptions :column="3" border class="summary-descriptions">
<el-descriptions-item label="总卷数">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="成品卷数">{{ summaryData.productCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="原料卷数">{{ summaryData.rawMaterialCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="总重(t)">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{ summaryData.productTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{ summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 汇总总卷数，成品卷数，原料卷数，总毛重(t)，总净重(t)，成品总毛重(t)，成品总净重(t)，原料总毛重(t)，原料总净重(t) -->
<!-- 数据表格 -->
<div class="table-container">
<el-table max-height="800" :data="list" border stripe style="width: 100%; margin-top: 20px"
@row-click="handleTableRowClick" row-class-name="table-row-hover">
<!-- 物料ID/名称列：仅物料统计时有效 -->
<el-table-column label="物料信息" align="center" min-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 prop="coilCount" label="卷数" align="center" min-width="80"></el-table-column>
<el-table-column prop="totalGrossWeight" label="总毛重(t)" align="center" min-width="120"></el-table-column>
<el-table-column prop="totalNetWeight" label="总净重(t)" align="center" min-width="120"></el-table-column>
<!-- 物料类型列：仅物料统计时有效 -->
<el-table-column prop="itemType" label="物料类型" align="center" min-width="120"
:formatter="formatItemType"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { getMaterialCoilDistributionByType, distributionByActualItemType } from "@/api/wms/coil";
import { listMaterialCoil } from "@/api/wms/coil";
import MaterialSelect from "@/components/KLPService/MaterialSelect";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
export default {
components: {
MaterialSelect,
RawMaterialInfo,
ProductInfo,
WarehouseSelect,
ActualWarehouseSelect,
},
data() {
return {
data() {
return {
// 原有变量保持不变...
summaryData: {
totalCoilCount: 0, // 总卷数
productCoilCount: 0, // 成品卷数
rawMaterialCoilCount: 0, // 原料卷数
totalGrossWeight: 0, // 总毛重(t)
totalNetWeight: 0, // 总净重(t)
productTotalGrossWeight: 0, // 成品总毛重(t)
productTotalNetWeight: 0, // 成品总净重(t)
rawMaterialTotalGrossWeight: 0, // 原料总毛重(t)
rawMaterialTotalNetWeight: 0 // 原料总净重(t)
}
}
},
queryParams: {
statType: '1',
itemType: undefined,
itemId: undefined,
warehouseId: undefined,
actualWarehouseId: undefined,
},
loading: false,
list: [],
// 科技风配色方案（蓝色系为主，体现科技感）
techColors: [
'#165DFF', // 主蓝色
'#36CFC9', // 青绿色
'#4080FF', // 中蓝色
'#0FC6C2', // 深青色
'#6AA1FF', // 浅蓝色
'#2BBEBA', // 浅青色
'#8CAAFF', // 极浅蓝色
'#08A8A5' // 暗青色
],
// 图表实例
treeChart: null,
barChart: null,
pieChart: null,
// 钻取相关数据
dialogVisible: false,
dialogTitle: '',
drillDownLoading: false,
drillDownList: [],
drillDownTotal: 0,
drillDownParams: {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
dataType: 1
},
drillDownQueryParams: {
pageNum: 1,
pageSize: 20
}
}
},
mounted() {
// this.initCharts();
this.getList();
},
beforeDestroy() {
// 销毁图表实例
if (this.treeChart) this.treeChart.dispose();
if (this.barChart) this.barChart.dispose();
if (this.pieChart) this.pieChart.dispose();
window.removeEventListener('resize', this.handleResize);
},
methods: {
// 计算汇总数据
calculateSummary() {
// 初始化汇总数据为0
const summary = {
totalCoilCount: 0,
productCoilCount: 0,
rawMaterialCoilCount: 0,
totalGrossWeight: 0,
totalNetWeight: 0,
productTotalGrossWeight: 0,
productTotalNetWeight: 0,
rawMaterialTotalGrossWeight: 0,
rawMaterialTotalNetWeight: 0
};
// 遍历列表数据累加计算
this.list.forEach(item => {
// 卷数统计
summary.totalCoilCount += item.coilCount || 0;
if (item.itemType === 'product') {
summary.productCoilCount += item.coilCount || 0;
} else if (item.itemType === 'raw_material') {
summary.rawMaterialCoilCount += item.coilCount || 0;
}
// 重量统计（保留2位小数）
const grossWeight = Number(item.totalGrossWeight) || 0;
const netWeight = Number(item.totalNetWeight) || 0;
summary.totalGrossWeight += grossWeight;
summary.totalNetWeight += netWeight;
if (item.itemType === 'product') {
summary.productTotalGrossWeight += grossWeight;
summary.productTotalNetWeight += netWeight;
} else if (item.itemType === 'raw_material') {
summary.rawMaterialTotalGrossWeight += grossWeight;
summary.rawMaterialTotalNetWeight += netWeight;
}
});
// 格式化重量数据为2位小数
Object.keys(summary).forEach(key => {
if (key.includes('Weight')) {
summary[key] = Number(summary[key].toFixed(2));
}
});
this.summaryData = summary;
},
// 处理逻辑库位选择变化
handleWarehouseChange() {
this.queryParams.actualWarehouseId = null; // 清空真实库区
this.queryParams.statType = '1'; // 切换为逻辑库位统计
this.getList();
},
// 处理真实库区选择变化
handleActualWarehouseChange() {
this.queryParams.warehouseId = null; // 清空逻辑库区
this.queryParams.statType = '2'; // 切换为真实库位统计
this.getList();
},
getList() {
this.loading = true;
if (this.queryParams.statType === '1') {
getMaterialCoilDistributionByType(this.queryParams).then(res => {
this.list = res.data || [];
this.calculateSummary(); // 新增：计算汇总数据
this.loading = false;
})
} else if (this.queryParams.statType === '2') {
distributionByActualItemType(this.queryParams).then(res => {
this.list = res.data || [];
this.calculateSummary(); // 新增：计算汇总数据
this.loading = false;
})
}
},
// 获取科技风颜色（循环使用配色方案）
getTechColor(index) {
return this.techColors[index % this.techColors.length];
},
// 生成物料名称（简化版，实际可根据组件返回值优化）
getMaterialName(item) {
if (item.itemType === 'product') {
return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
} else if (item.itemType === 'raw_material') {
return `原材料(${item.itemId.slice(-6)})`;
}
return '未知物料';
},
// 格式化物料类型
formatItemType(row) {
const typeMap = {
'raw_material': '原材料',
'product': '成品'
};
return typeMap[row.itemType] || '未知';
},
// 处理表格行点击
handleTableRowClick(row) {
// 构建点击数据对象
const clickData = {};
if (this.queryParams.statType === '1') {
// 物料统计
clickData.itemType = row.itemType;
clickData.itemId = row.itemId;
clickData.name = this.getMaterialName(row);
} else {
// 仓库统计
clickData.warehouseId = row.warehouseId;
clickData.warehouseName = row.warehouseName;
}
// 调用图表点击处理函数
this.handleChartItemClick(clickData);
},
// 获取钻取数据列表
getDrillDownList() {
this.drillDownLoading = true;
// 构建查询参数
const params = {
...this.drillDownQueryParams,
itemType: this.drillDownParams.itemType,
itemId: this.drillDownParams.itemId,
warehouseId: this.drillDownParams.warehouseId
};
// 调用API获取数据
listMaterialCoil(params).then(res => {
this.drillDownList = res.rows || [];
this.drillDownTotal = res.total || 0;
this.drillDownLoading = false;
}).catch(error => {
console.error('获取钻取数据失败:', error);
this.drillDownLoading = false;
this.$message.error('获取明细数据失败');
});
},
// 处理钻取分页大小变化
handleDrillDownSizeChange(val) {
this.drillDownQueryParams.pageSize = val;
this.getDrillDownList();
},
// 处理钻取当前页变化
handleDrillDownCurrentChange(val) {
this.drillDownQueryParams.pageNum = val;
this.getDrillDownList();
},
// 格式化卷材状态
formatCoilStatus(status) {
const statusMap = {
'IN_STOCK': '在库',
'OUT_STOCK': '出库',
'TRANSFERING': '转移中',
'MAINTAINING': '维护中'
};
return statusMap[status] || '未知';
},
// 获取卷材状态标签类型
getCoilStatusTagType(status) {
const typeMap = {
'IN_STOCK': 'success',
'OUT_STOCK': 'info',
'TRANSFERING': 'warning',
'MAINTAINING': 'danger'
};
return typeMap[status] || 'default';
}
}
}
</script>
<style scoped>
.statistics-container {
padding: 20px;
background-color: #fafafa;
}
.charts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.chart-item {
flex: 1;
min-width: 300px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.chart-box {
width: 100%;
height: 300px;
}
.table-container {
margin-top: 20px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
h3 {
margin: 0 0 15px 0;
font-size: 16px;
color: #1D2129;
font-weight: 500;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
/* 表格行悬停效果 */
.table-row-hover:hover {
background-color: #f5f7fa;
cursor: pointer;
}
/* 钻取弹窗样式 */
.drill-down-content {
padding: 10px 0;
}
.drill-down-header {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.drill-down-header .el-tag {
margin-right: 10px;
margin-bottom: 10px;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
/* 骨架屏样式 */
.demo-skeleton {
padding: 20px 0;
}
/* 汇总区域样式 */
.summary-container {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
margin-top: 20px;
}
.summary-descriptions {
margin-top: 10px;
}
.el-descriptions-item__content {
font-weight: 500;
color: #165DFF;
/* 科技蓝强调汇总数据 */
}
</style>

585
klp-ui/src/views/wms/coil/Inventory/warehouseBox.vue Normal file
View File

@@ -0,0 +1,585 @@
<template>
<div class="statistics-container" v-loading="loading">
<!-- 统计方式选择 -->
<el-form inline>
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
</el-form>
<!-- 图表展示区域 -->
<div class="charts-container">
<!-- 矩形树图 -->
<div class="chart-item">
<h3>{{ queryParams.statType === '1' ? '物料库存分布矩形树图' : '仓库库存分布矩形树图' }}</h3>
<div ref="treeChart" class="chart-box"></div>
</div>
<!-- 柱状图 -->
<div class="chart-item">
<h3>{{ queryParams.statType === '1' ? '物料卷数对比柱状图' : '仓库卷数对比柱状图' }}</h3>
<div ref="barChart" class="chart-box"></div>
</div>
<!-- 饼图 -->
<div class="chart-item">
<h3>{{ queryParams.statType === '1' ? '物料库存占比饼图' : '仓库库存占比饼图' }}</h3>
<div ref="pieChart" class="chart-box"></div>
</div>
</div>
<!-- 数据表格 -->
<div class="table-container">
<el-table
max-height="400"
:data="list"
border
stripe
style="width: 100%; margin-top: 20px"
@row-click="handleTableRowClick"
row-class-name="table-row-hover"
>
<!-- 仓库相关列：仅仓库统计时有效 -->
<el-table-column
v-if="queryParams.statType === '2'"
prop="warehouseName"
label="仓库名称"
align="center"
min-width="150"
></el-table-column>
<!-- 物料类型列：仅物料统计时有效 -->
<el-table-column
v-if="queryParams.statType === '1'"
prop="itemType"
label="物料类型"
align="center"
min-width="120"
:formatter="formatItemType"
></el-table-column>
<!-- 物料ID/名称列：仅物料统计时有效 -->
<el-table-column
v-if="queryParams.statType === '1'"
label="物料信息"
align="center"
min-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 prop="coilCount" label="卷数" align="center" min-width="80"></el-table-column>
<el-table-column prop="totalGrossWeight" label="总毛重(kg)" align="center" min-width="120"></el-table-column>
<el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
</el-table>
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="false"
>
<!-- 使用封装的钻取表格组件 -->
<DrillDownTable
:query-params="drillDownQueryParams"
:item-name="drillDownParams.itemName"
:warehouse-name="drillDownParams.warehouseName"
/>
</el-dialog>
</div>
</div>
</template>
<script>
import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByWarehouse } from "@/api/wms/coil";
import MaterialSelect from "@/components/KLPService/MaterialSelect";
import * as echarts from 'echarts';
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import { findItemWithBom } from "@/store/modules/category";
// 导入封装的钻取表格组件
import DrillDownTable from '../panels/DrillDownTable.vue';
export default {
components: {
MaterialSelect,
RawMaterialInfo,
ProductInfo,
DrillDownTable // 注册组件
},
data() {
return {
queryParams: {
statType: '2',
itemType: undefined,
itemId: undefined,
},
loading: false,
list: [],
// 科技风配色方案（蓝色系为主，体现科技感）
techColors: [
'#165DFF', // 主蓝色
'#36CFC9', // 青绿色
'#4080FF', // 中蓝色
'#0FC6C2', // 深青色
'#6AA1FF', // 浅蓝色
'#2BBEBA', // 浅青色
'#8CAAFF', // 极浅蓝色
'#08A8A5' // 暗青色
],
// 图表实例
treeChart: null,
barChart: null,
pieChart: null,
// 钻取相关数据
dialogVisible: false,
dialogTitle: '',
drillDownParams: {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
},
// 传给钻取表格组件的查询参数
drillDownQueryParams: {
warehouseId: null,
itemType: null,
itemId: null,
}
}
},
mounted() {
this.initCharts();
this.getList();
},
beforeDestroy() {
// 销毁图表实例
if (this.treeChart) this.treeChart.dispose();
if (this.barChart) this.barChart.dispose();
if (this.pieChart) this.pieChart.dispose();
window.removeEventListener('resize', this.handleResize);
},
methods: {
getList() {
this.loading = true;
if (this.queryParams.statType === '1') {
// 物料统计：仓库字段无效，以物料为核心
getMaterialCoilDistributionByType(this.queryParams).then(res => {
this.list = res.data || [];
this.updateCharts();
this.loading = false;
})
} else if (this.queryParams.statType === '2') {
// 仓库统计：物料字段无效，以仓库为核心
getMaterialCoilDistributionByWarehouse(this.queryParams).then(res => {
this.list = res.data || [];
this.updateCharts();
this.loading = false;
})
}
},
// 初始化图表
initCharts() {
this.treeChart = echarts.init(this.$refs.treeChart);
this.barChart = echarts.init(this.$refs.barChart);
this.pieChart = echarts.init(this.$refs.pieChart);
this.handleResize = () => {
this.treeChart.resize();
this.barChart.resize();
this.pieChart.resize();
};
window.addEventListener('resize', this.handleResize);
},
// 更新图表数据
updateCharts() {
this.updateTreeChart();
this.updateBarChart();
this.updatePieChart();
},
// 获取科技风颜色（循环使用配色方案）
getTechColor(index) {
return this.techColors[index % this.techColors.length];
},
// 更新矩形树图
updateTreeChart() {
let treeData;
if (this.queryParams.statType === '1') {
// 物料统计：一级为物料，二级为卷数信息
treeData = {
name: '物料库存总览',
children: this.list.map((item, index) => ({
name: this.getMaterialName(item), // 物料名称
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId,
itemStyle: { color: this.getTechColor(index) }
}))
};
} else {
// 仓库统计：一级为仓库，二级为卷数信息
treeData = {
name: '仓库库存总览',
children: this.list.map((item, index) => ({
name: item.warehouseName || '未知仓库',
value: item.coilCount,
warehouseId: item.warehouseId,
warehouseName: item.warehouseName,
itemStyle: { color: this.getTechColor(index) }
}))
};
}
this.treeChart.setOption({
backgroundColor: 'transparent',
tooltip: {
formatter: params => `${params.data.name}<br>卷数: ${params.data.value}`
},
series: [{
type: 'treemap',
data: [treeData],
roam: false,
label: {
show: true,
color: '#fff', // 文字白色更贴合科技风深色背景
fontWeight: 'bold'
},
emphasis: {
focus: 'descendant',
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
breadcrumb: {
show: true,
itemStyle: { color: '#666' }
},
// 添加点击事件，实现数据钻取
itemStyle: {
cursor: 'pointer'
},
select: {
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 10,
shadowColor: 'rgba(22, 93, 255, 0.5)'
}
}
}]
});
// 绑定点击事件
this.treeChart.off('click');
this.treeChart.on('click', params => {
// 确保点击的是一级节点而不是子节点
if (params.data.children && params.data.children.length > 0) {
this.handleChartItemClick(params.data);
}
});
},
// 更新柱状图
updateBarChart() {
let xAxisData, seriesData;
if (this.queryParams.statType === '1') {
// 物料统计：x轴为物料名称，为数据添加额外信息用于钻取
xAxisData = this.list.map(item => this.getMaterialName(item));
seriesData = this.list.map((item, index) => ({
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId
}));
} else {
// 仓库统计：x轴为仓库名称，为数据添加额外信息用于钻取
xAxisData = this.list.map(item => item.warehouseName || '未知仓库');
seriesData = this.list.map((item, index) => ({
value: item.coilCount,
warehouseId: item.warehouseId,
warehouseName: item.warehouseName
}));
}
this.barChart.setOption({
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: params => {
const data = params[0];
return `${data.name}<br/>卷数: ${data.value}`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xAxisData,
axisLabel: { rotate: 30, color: '#666' },
axisLine: { lineStyle: { color: '#ddd' } }
}],
yAxis: [{
type: 'value',
name: '卷数',
minInterval: 1,
axisLabel: { color: '#666' },
axisLine: { lineStyle: { color: '#ddd' } },
splitLine: { lineStyle: { color: '#f0f0f0' } }
}],
series: [{
name: '卷数',
type: 'bar',
data: seriesData,
itemStyle: {
// 柱状图使用渐变色增强科技感
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#165DFF' },
{ offset: 1, color: '#6AA1FF' }
]),
cursor: 'pointer'
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#0E42D2' },
{ offset: 1, color: '#4080FF' }
])
}
}
}]
});
// 绑定点击事件
this.barChart.off('click');
this.barChart.on('click', params => {
this.handleChartItemClick(params.data);
});
},
// 更新饼图
updatePieChart() {
let pieData;
if (this.queryParams.statType === '1') {
// 物料统计：按物料分组，为数据添加额外信息用于钻取
pieData = this.list.map((item, index) => ({
name: this.getMaterialName(item),
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId,
itemStyle: { color: this.getTechColor(index) }
}));
} else {
// 仓库统计：按仓库分组，为数据添加额外信息用于钻取
pieData = this.list.map((item, index) => ({
name: item.warehouseName || '未知仓库',
value: item.coilCount,
warehouseId: item.warehouseId,
warehouseName: item.warehouseName,
itemStyle: { color: this.getTechColor(index) }
}));
}
this.pieChart.setOption({
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// legend: {
// orient: 'vertical',
// left: 10,
// data: pieData.map(item => item.name),
// textStyle: { color: '#666' }
// },
series: [{
name: '库存分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 6,
borderColor: '#fff',
borderWidth: 2,
cursor: 'pointer',
// 饼图扇区添加光泽感
shadowBlur: 10,
shadowColor: 'rgba(22, 93, 255, 0.2)'
},
label: { show: false },
emphasis: {
label: {
show: true,
fontSize: 16,
fontWeight: 'bold',
color: '#165DFF'
},
itemStyle: {
shadowBlur: 15,
shadowColor: 'rgba(22, 93, 255, 0.5)'
}
},
labelLine: { show: false },
data: pieData
}]
});
// 绑定点击事件
this.pieChart.off('click');
this.pieChart.on('click', params => {
this.handleChartItemClick(params.data);
});
},
// 生成物料名称
getMaterialName(item) {
if (item.itemType === 'product') {
return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
} else if (item.itemType === 'raw_material') {
return `原材料(${item.itemId.slice(-6)})`;
}
return '未知物料';
},
// 格式化物料类型
formatItemType(row) {
const typeMap = {
'raw_material': '原材料',
'product': '成品'
};
return typeMap[row.itemType] || '未知';
},
// 处理图表项点击，实现数据钻取
handleChartItemClick(data) {
// 重置钻取参数
this.drillDownParams = {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
};
// 重置传给子组件的查询参数
this.drillDownQueryParams = {
warehouseId: null,
itemType: null,
itemId: null
};
// 根据数据类型设置钻取参数
if (data.itemType && data.itemId) {
// 物料统计钻取
this.drillDownParams.itemType = data.itemType;
this.drillDownParams.itemId = data.itemId;
this.drillDownQueryParams.itemType = data.itemType;
this.drillDownQueryParams.itemId = data.itemId;
// 从store中获取物料名称
const item = findItemWithBom(data.itemType, data.itemId);
this.drillDownParams.itemName = item ? item.itemName : data.name;
this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
} else if (data.warehouseId && data.warehouseName) {
// 仓库统计钻取
this.drillDownParams.warehouseId = data.warehouseId;
this.drillDownParams.warehouseName = data.warehouseName;
this.drillDownQueryParams.warehouseId = data.warehouseId;
this.dialogTitle = `仓库库存明细 - ${data.warehouseName}`;
}
// 打开弹窗
this.dialogVisible = true;
},
// 处理表格行点击
handleTableRowClick(row) {
// 构建点击数据对象
const clickData = {};
if (this.queryParams.statType === '1') {
// 物料统计
clickData.itemType = row.itemType;
clickData.itemId = row.itemId;
clickData.name = this.getMaterialName(row);
} else {
// 仓库统计
clickData.warehouseId = row.warehouseId;
clickData.warehouseName = row.warehouseName;
}
// 调用图表点击处理函数
this.handleChartItemClick(clickData);
}
}
}
</script>
<style scoped>
.statistics-container {
padding: 20px;
background-color: #fafafa;
}
.charts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.chart-item {
flex: 1;
min-width: 300px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.chart-box {
width: 100%;
height: 300px;
}
.table-container {
margin-top: 20px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
h3 {
margin: 0 0 15px 0;
font-size: 16px;
color: #1D2129;
font-weight: 500;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
/* 表格行悬停效果 */
.table-row-hover:hover {
background-color: #f5f7fa;
cursor: pointer;
}
/* 图表项悬停效果增强 */
:deep(.echarts-tooltip) {
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
</style>

585
klp-ui/src/views/wms/coil/Inventory/warehouseTree.vue Normal file
View File

@@ -0,0 +1,585 @@
<template>
<div class="statistics-container" v-loading="loading">
<!-- 统计方式选择 -->
<el-form inline>
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
</el-form>
<!-- 图表展示区域 -->
<div class="charts-container">
<!-- 矩形树图 -->
<div class="chart-item">
<h3>{{ queryParams.statType === '1' ? '物料库存分布矩形树图' : '仓库库存分布矩形树图' }}</h3>
<div ref="treeChart" class="chart-box"></div>
</div>
<!-- 柱状图 -->
<div class="chart-item">
<h3>{{ queryParams.statType === '1' ? '物料卷数对比柱状图' : '仓库卷数对比柱状图' }}</h3>
<div ref="barChart" class="chart-box"></div>
</div>
<!-- 饼图 -->
<div class="chart-item">
<h3>{{ queryParams.statType === '1' ? '物料库存占比饼图' : '仓库库存占比饼图' }}</h3>
<div ref="pieChart" class="chart-box"></div>
</div>
</div>
<!-- 数据表格 -->
<div class="table-container">
<el-table
max-height="400"
:data="list"
border
stripe
style="width: 100%; margin-top: 20px"
@row-click="handleTableRowClick"
row-class-name="table-row-hover"
>
<!-- 仓库相关列：仅仓库统计时有效 -->
<el-table-column
v-if="queryParams.statType === '2'"
prop="actualWarehouseName"
label="仓库名称"
align="center"
min-width="150"
></el-table-column>
<!-- 物料类型列：仅物料统计时有效 -->
<el-table-column
v-if="queryParams.statType === '1'"
prop="itemType"
label="物料类型"
align="center"
min-width="120"
:formatter="formatItemType"
></el-table-column>
<!-- 物料ID/名称列：仅物料统计时有效 -->
<el-table-column
v-if="queryParams.statType === '1'"
label="物料信息"
align="center"
min-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 prop="coilCount" label="卷数" align="center" min-width="80"></el-table-column>
<el-table-column prop="totalGrossWeight" label="总毛重(kg)" align="center" min-width="120"></el-table-column>
<el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
</el-table>
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="false"
>
<!-- 使用封装的钻取表格组件 -->
<DrillDownTable
:query-params="drillDownQueryParams"
:item-name="drillDownParams.itemName"
:warehouse-name="drillDownParams.actualWarehouseName"
/>
</el-dialog>
</div>
</div>
</template>
<script>
import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByActualWarehouse } from "@/api/wms/coil";
import MaterialSelect from "@/components/KLPService/MaterialSelect";
import * as echarts from 'echarts';
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import { findItemWithBom } from "@/store/modules/category";
// 导入封装的钻取表格组件
import DrillDownTable from '../panels/DrillDownTable.vue';
export default {
components: {
MaterialSelect,
RawMaterialInfo,
ProductInfo,
DrillDownTable // 注册组件
},
data() {
return {
queryParams: {
statType: '2',
itemType: undefined,
itemId: undefined,
},
loading: false,
list: [],
// 科技风配色方案（蓝色系为主，体现科技感）
techColors: [
'#165DFF', // 主蓝色
'#36CFC9', // 青绿色
'#4080FF', // 中蓝色
'#0FC6C2', // 深青色
'#6AA1FF', // 浅蓝色
'#2BBEBA', // 浅青色
'#8CAAFF', // 极浅蓝色
'#08A8A5' // 暗青色
],
// 图表实例
treeChart: null,
barChart: null,
pieChart: null,
// 钻取相关数据
dialogVisible: false,
dialogTitle: '',
drillDownParams: {
itemType: null,
itemId: null,
itemName: '',
actualWarehouseId: null,
actualWarehouseName: '',
},
// 传给钻取表格组件的查询参数
drillDownQueryParams: {
actualWarehouseId: null,
itemType: null,
itemId: null
}
}
},
mounted() {
this.initCharts();
this.getList();
},
beforeDestroy() {
// 销毁图表实例
if (this.treeChart) this.treeChart.dispose();
if (this.barChart) this.barChart.dispose();
if (this.pieChart) this.pieChart.dispose();
window.removeEventListener('resize', this.handleResize);
},
methods: {
getList() {
this.loading = true;
if (this.queryParams.statType === '1') {
// 物料统计：仓库字段无效，以物料为核心
getMaterialCoilDistributionByType(this.queryParams).then(res => {
this.list = res.data || [];
this.updateCharts();
this.loading = false;
})
} else if (this.queryParams.statType === '2') {
// 仓库统计：物料字段无效，以仓库为核心
getMaterialCoilDistributionByActualWarehouse(this.queryParams).then(res => {
this.list = res.data || [];
this.updateCharts();
this.loading = false;
})
}
},
// 初始化图表
initCharts() {
this.treeChart = echarts.init(this.$refs.treeChart);
this.barChart = echarts.init(this.$refs.barChart);
this.pieChart = echarts.init(this.$refs.pieChart);
this.handleResize = () => {
this.treeChart.resize();
this.barChart.resize();
this.pieChart.resize();
};
window.addEventListener('resize', this.handleResize);
},
// 更新图表数据
updateCharts() {
this.updateTreeChart();
this.updateBarChart();
this.updatePieChart();
},
// 获取科技风颜色（循环使用配色方案）
getTechColor(index) {
return this.techColors[index % this.techColors.length];
},
// 更新矩形树图
updateTreeChart() {
let treeData;
if (this.queryParams.statType === '1') {
// 物料统计：一级为物料，二级为卷数信息
treeData = {
name: '物料库存总览',
children: this.list.map((item, index) => ({
name: this.getMaterialName(item), // 物料名称
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId,
itemStyle: { color: this.getTechColor(index) }
}))
};
} else {
// 仓库统计：一级为仓库，二级为卷数信息
treeData = {
name: '仓库库存总览',
children: this.list.map((item, index) => ({
name: item.actualWarehouseName || '未知仓库',
value: item.coilCount,
actualWarehouseId: item.actualWarehouseId,
actualWarehouseName: item.actualWarehouseName,
itemStyle: { color: this.getTechColor(index) }
}))
};
}
this.treeChart.setOption({
backgroundColor: 'transparent',
tooltip: {
formatter: params => `${params.data.name}<br>卷数: ${params.data.value}`
},
series: [{
type: 'treemap',
data: [treeData],
roam: false,
label: {
show: true,
color: '#fff', // 文字白色更贴合科技风深色背景
fontWeight: 'bold'
},
emphasis: {
focus: 'descendant',
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
breadcrumb: {
show: true,
itemStyle: { color: '#666' }
},
// 添加点击事件，实现数据钻取
itemStyle: {
cursor: 'pointer'
},
select: {
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 10,
shadowColor: 'rgba(22, 93, 255, 0.5)'
}
}
}]
});
// 绑定点击事件
this.treeChart.off('click');
this.treeChart.on('click', params => {
// 确保点击的是一级节点而不是子节点
if (params.data.children && params.data.children.length > 0) {
this.handleChartItemClick(params.data);
}
});
},
// 更新柱状图
updateBarChart() {
let xAxisData, seriesData;
if (this.queryParams.statType === '1') {
// 物料统计：x轴为物料名称，为数据添加额外信息用于钻取
xAxisData = this.list.map(item => this.getMaterialName(item));
seriesData = this.list.map((item, index) => ({
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId
}));
} else {
// 仓库统计：x轴为仓库名称，为数据添加额外信息用于钻取
xAxisData = this.list.map(item => item.actualWarehouseName || '未知仓库');
seriesData = this.list.map((item, index) => ({
value: item.coilCount,
actualWarehouseId: item.actualWarehouseId,
actualWarehouseName: item.actualWarehouseName
}));
}
this.barChart.setOption({
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: params => {
const data = params[0];
return `${data.name}<br/>卷数: ${data.value}`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xAxisData,
axisLabel: { rotate: 30, color: '#666' },
axisLine: { lineStyle: { color: '#ddd' } }
}],
yAxis: [{
type: 'value',
name: '卷数',
minInterval: 1,
axisLabel: { color: '#666' },
axisLine: { lineStyle: { color: '#ddd' } },
splitLine: { lineStyle: { color: '#f0f0f0' } }
}],
series: [{
name: '卷数',
type: 'bar',
data: seriesData,
itemStyle: {
// 柱状图使用渐变色增强科技感
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#165DFF' },
{ offset: 1, color: '#6AA1FF' }
]),
cursor: 'pointer'
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#0E42D2' },
{ offset: 1, color: '#4080FF' }
])
}
}
}]
});
// 绑定点击事件
this.barChart.off('click');
this.barChart.on('click', params => {
this.handleChartItemClick(params.data);
});
},
// 更新饼图
updatePieChart() {
let pieData;
if (this.queryParams.statType === '1') {
// 物料统计：按物料分组，为数据添加额外信息用于钻取
pieData = this.list.map((item, index) => ({
name: this.getMaterialName(item),
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId,
itemStyle: { color: this.getTechColor(index) }
}));
} else {
// 仓库统计：按仓库分组，为数据添加额外信息用于钻取
pieData = this.list.map((item, index) => ({
name: item.actualWarehouseName || '未知仓库',
value: item.coilCount,
actualWarehouseId: item.actualWarehouseId,
actualWarehouseName: item.actualWarehouseName,
itemStyle: { color: this.getTechColor(index) }
}));
}
this.pieChart.setOption({
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// legend: {
// orient: 'vertical',
// left: 10,
// data: pieData.map(item => item.name),
// textStyle: { color: '#666' }
// },
series: [{
name: '库存分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 6,
borderColor: '#fff',
borderWidth: 2,
cursor: 'pointer',
// 饼图扇区添加光泽感
shadowBlur: 10,
shadowColor: 'rgba(22, 93, 255, 0.2)'
},
label: { show: false },
emphasis: {
label: {
show: true,
fontSize: 16,
fontWeight: 'bold',
color: '#165DFF'
},
itemStyle: {
shadowBlur: 15,
shadowColor: 'rgba(22, 93, 255, 0.5)'
}
},
labelLine: { show: false },
data: pieData
}]
});
// 绑定点击事件
this.pieChart.off('click');
this.pieChart.on('click', params => {
this.handleChartItemClick(params.data);
});
},
// 生成物料名称
getMaterialName(item) {
if (item.itemType === 'product') {
return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
} else if (item.itemType === 'raw_material') {
return `原材料(${item.itemId.slice(-6)})`;
}
return '未知物料';
},
// 格式化物料类型
formatItemType(row) {
const typeMap = {
'raw_material': '原材料',
'product': '成品'
};
return typeMap[row.itemType] || '未知';
},
// 处理图表项点击，实现数据钻取
handleChartItemClick(data) {
// 重置钻取参数
this.drillDownParams = {
itemType: null,
itemId: null,
itemName: '',
actualWarehouseId: null,
actualWarehouseName: '',
};
// 重置传给子组件的查询参数
this.drillDownQueryParams = {
actualWarehouseId: null,
itemType: null,
itemId: null
};
// 根据数据类型设置钻取参数
if (data.itemType && data.itemId) {
// 物料统计钻取
this.drillDownParams.itemType = data.itemType;
this.drillDownParams.itemId = data.itemId;
this.drillDownQueryParams.itemType = data.itemType;
this.drillDownQueryParams.itemId = data.itemId;
// 从store中获取物料名称
const item = findItemWithBom(data.itemType, data.itemId);
this.drillDownParams.itemName = item ? item.itemName : data.name;
this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
} else if (data.actualWarehouseId && data.actualWarehouseName) {
// 仓库统计钻取
this.drillDownParams.actualWarehouseId = data.actualWarehouseId;
this.drillDownParams.actualWarehouseName = data.actualWarehouseName;
this.drillDownQueryParams.actualWarehouseId = data.actualWarehouseId;
this.dialogTitle = `仓库库存明细 - ${data.actualWarehouseName}`;
}
// 打开弹窗
this.dialogVisible = true;
},
// 处理表格行点击
handleTableRowClick(row) {
// 构建点击数据对象
const clickData = {};
if (this.queryParams.statType === '1') {
// 物料统计
clickData.itemType = row.itemType;
clickData.itemId = row.itemId;
clickData.name = this.getMaterialName(row);
} else {
// 仓库统计
clickData.actualWarehouseId = row.actualWarehouseId;
clickData.actualWarehouseName = row.actualWarehouseName;
}
// 调用图表点击处理函数
this.handleChartItemClick(clickData);
}
}
}
</script>
<style scoped>
.statistics-container {
padding: 20px;
background-color: #fafafa;
}
.charts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.chart-item {
flex: 1;
min-width: 300px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.chart-box {
width: 100%;
height: 300px;
}
.table-container {
margin-top: 20px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
h3 {
margin: 0 0 15px 0;
font-size: 16px;
color: #1D2129;
font-weight: 500;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
/* 表格行悬停效果 */
.table-row-hover:hover {
background-color: #f5f7fa;
cursor: pointer;
}
/* 图表项悬停效果增强 */
:deep(.echarts-tooltip) {
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
</style>

8
klp-ui/src/views/wms/coil/panels/DrillDownTable.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="drill-down-content">
<!-- 钻取条件显示 -->
<div class="drill-down-header">
<!-- <div class="drill-down-header">
<el-tag size="large" v-if="queryParams.itemType">
{{ queryParams.itemType === 'product' ? '成品' : '原材料' }}
</el-tag>
@@ -14,7 +14,7 @@
<el-tag size="large" v-if="actualWarehouseName" type="info">
{{ actualWarehouseName }}
</el-tag>
</div>
</div> -->
<!-- 加载状态 -->
<el-skeleton :loading="loading" animated>
@@ -97,6 +97,7 @@ export default {
type: Object,
default: () => ({
warehouseId: null,
actualWarehouseId: null,
itemType: null,
itemId: null,
actualWarehouseId: null
@@ -153,7 +154,8 @@ export default {
pageSize: this.pageSize,
itemType: this.queryParams.itemType,
itemId: this.queryParams.itemId,
warehouseId: this.queryParams.warehouseId
warehouseId: this.queryParams.warehouseId,
actualWarehouseId: this.queryParams.actualWarehouseId
};
// 调用API获取数据

9
klp-ui/src/views/wms/delivery/components/detailTable.vue
View File

@@ -49,7 +49,7 @@
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="发货钢卷" prop="coilId">
<div style="display: flex; gap: 10px;">
<coil-selector v-model="form.coilId" :use-trigger="true" @select="handleSelect" />
<coil-selector v-model="form.coilId" :use-trigger="true" @select="handleSelect" :rangeMode="true" :rangeData="coilList" />
<el-checkbox v-model="autoFillForm" label="自动填写表单信息" />
</div>
</el-form-item>
@@ -108,6 +108,10 @@ export default {
waybillId: {
type: String,
default: '',
},
coilList: {
type: Array,
default: () => []
}
},
components: {
@@ -273,12 +277,14 @@ export default {
this.getList();
}).finally(() => {
this.buttonLoading = false;
this.$emit('update');
});
} else {
addDeliveryWaybillDetail(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.$emit('add');
}).finally(() => {
this.buttonLoading = false;
});
@@ -296,6 +302,7 @@ export default {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
this.$emit('delete');
}).catch(() => {
}).finally(() => {
this.loading = false;

30
klp-ui/src/views/wms/delivery/components/wayBill.vue
View File

@@ -104,7 +104,7 @@
<div class="waybill-pickup-location">
<!-- <div class="pickup-location-item inline"> -->
<span class="label">取货地点：</span>
<input type="text" class="editable-input full-input transparent-input" />
<input type="text" class="editable-input full-input transparent-input" v-model="localWaybill.pickupLocation" />
<!-- </div> -->
</div>
@@ -159,7 +159,8 @@ export default {
deliveryDay: '',
principal: '',
principalPhone: '',
licensePlate: ''
licensePlate: '',
pickupLocation: ''
},
// 本地可编辑的发货单明细
localWaybillDetails: []
@@ -178,7 +179,8 @@ export default {
deliveryDay: this.getDayFromDate(newVal.deliveryTime) || '',
principal: newVal.principal || '',
principalPhone: newVal.principalPhone || '',
licensePlate: newVal.licensePlate || ''
licensePlate: newVal.licensePlate || '',
pickupLocation: newVal.pickupLocation || ''
};
}
},
@@ -187,6 +189,7 @@ export default {
},
waybillDetails: {
handler(newVal) {
console.log('waybillDetails', newVal);
if (newVal && Array.isArray(newVal)) {
this.localWaybillDetails = [...newVal];
} else {
@@ -222,27 +225,6 @@ export default {
}
return '';
},
// 添加明细
addDetail() {
this.localWaybillDetails.push({
productName: '',
edgeType: '',
packageType: '',
settlementType: '',
rawMaterialFactory: '',
coilNumber: '',
specification: '',
material: '',
quantity: 0,
weight: 0,
unitPrice: 0,
remark: ''
});
},
// 删除明细
deleteDetail(index) {
this.localWaybillDetails.splice(index, 1);
},
// 保存为图片
saveAsImage() {
const node = this.$refs.waybillRef;

2
klp-ui/src/views/wms/delivery/plan/index.vue
View File

@@ -92,7 +92,7 @@
<el-table-column label="厂家" align="center" prop="manufacturer" />
<el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
<el-table-column label="库区" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100">
<el-table-column label="操作" align="center" width="100" fixed="right" v-if="currentPlan.auditStatus != 1">
<template slot-scope="scope">
<el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
</template>

30
klp-ui/src/views/wms/delivery/waybill/index.vue
View File

@@ -80,7 +80,7 @@
<el-divider style="margin: 20px 0;" />
<DeliveryWaybillDetail ref="detailTable" :waybillId="waybillId" />
<DeliveryWaybillDetail ref="detailTable" :waybillId="waybillId" :coilList="coilList" @add="refreshCoilList" @update="refreshCoilList" @delete="refreshCoilList" />
</el-card>
</el-col>
</el-row>
@@ -138,7 +138,8 @@
<script>
import { listDeliveryWaybill, getDeliveryWaybill, delDeliveryWaybill, addDeliveryWaybill, updateDeliveryWaybill } from "@/api/wms/deliveryWaybill";
import { listDeliveryPlan } from "@/api/wms/deliveryPlan"; // 导入发货计划API
import { listDeliveryPlan, listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计划API
import { listCoilByIds } from "@/api/wms/coil";
import { listDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
import MemoInput from "@/components/MemoInput";
import DeliveryWaybillDetail from "../components/detailTable.vue";
@@ -215,7 +216,8 @@ export default {
planName: undefined,
planType: 0,
auditStatus: 1,
}
},
coilList: []
};
},
created() {
@@ -238,6 +240,13 @@ export default {
this.loading = false;
});
},
refreshCoilList() {
if (this.selectedPlan && this.selectedPlan.planId) {
listSelectableCoils(this.selectedPlan.planId).then(response => {
this.coilList = response.data;
});
}
},
/** 完成状态改变时的处理 */
handleStatusChange(row) {
// 确保在更新状态时包含waybillId
@@ -314,6 +323,7 @@ export default {
},
handlePlanSelect(row) {
this.selectedPlan = row;
this.refreshCoilList();
// 更新查询参数，根据选中的planId筛选发货单
this.queryParams.planId = row.planId;
this.waybillId = null;
@@ -398,8 +408,6 @@ export default {
/** 打印发货单 */
handlePrint(row) {
this.loading = true;
// 设置当前发货单
this.currentWaybill = row;
// 获取发货单明细
listDeliveryWaybillDetail({
waybillId: row.waybillId,
@@ -408,6 +416,7 @@ export default {
}).then(response => {
// 处理字段映射，确保与wayBill组件使用的字段名一致
this.currentWaybillDetails = response.rows.map(item => ({
coilId: item.coilId,
productName: item.productName,
edgeType: item.edgeType,
packageType: item.packaging, // 映射packaging到packageType
@@ -421,6 +430,17 @@ export default {
unitPrice: item.unitPrice,
remark: item.remark
}));
const coils = this.currentWaybillDetails.map(item => item.coilId).join(',');
listCoilByIds(coils).then(response => {
// 取前三位, 然后去抽后用;连接
// 设置当前发货单
const actualWahouseNames = [...new Set(response.rows.filter(item => Boolean(item.actualWarehouseName)).map(item => item.actualWarehouseName.slice(0, 3)))].join(';');
this.currentWaybill = {
...row,
pickupLocation: actualWahouseNames || '',
};
});
// 打开打印对话框
this.printDialogVisible = true;
this.loading = false;

11
klp-wms/src/main/java/com/klp/controller/WmsDeliveryPlanController.java
View File

@@ -128,4 +128,15 @@ public class WmsDeliveryPlanController extends BaseController {
}
/**
* 根据计划ID获取可选钢卷列表：计划绑定钢卷 - 明细已绑定钢卷
* @param planId 计划ID
*/
@GetMapping("/selectableCoils")
public R<List<WmsMaterialCoilVo>> getSelectableCoils(@RequestParam @NotNull(message = "planId不能为空") Long planId) {
List<WmsMaterialCoilVo> list = iWmsDeliveryPlanService.getSelectableCoilsByPlanId(planId);
return R.ok(list);
}
}

11
klp-wms/src/main/java/com/klp/domain/bo/WmsMaterialCoilBo.java
View File

@@ -134,6 +134,8 @@ public class WmsMaterialCoilBo extends BaseEntity {
//材料类型
private String materialType;
private String itemName;
/**
* 质量状态（0=正常，1=待检，2=不合格）
@@ -165,5 +167,14 @@ public class WmsMaterialCoilBo extends BaseEntity {
*/
private String coilIds;
// 材质（两表通用字段名：product.material / raw_material.material）
private String itemMaterial;
// 厂家（两表通用字段名：product.manufacturer / raw_material.manufacturer）
private String itemManufacturer;
// 表面处理详情（两表通用字段名：surface_treatment_desc）
private String itemSurfaceTreatmentDesc;
// 锌层厚度（两表通用字段名：zinc_layer）
private String itemZincLayer;
}

3
klp-wms/src/main/java/com/klp/service/IWmsDeliveryPlanService.java
View File

@@ -60,4 +60,7 @@ public interface IWmsDeliveryPlanService {
* 获取发货报表统计信息（包含汇总和按类型统计）
*/
WmsDeliveryReportResultVo getDeliveryReport(Date startTime, Date endTime);
List<WmsMaterialCoilVo> getSelectableCoilsByPlanId(Long planId);
}

66
klp-wms/src/main/java/com/klp/service/impl/WmsDeliveryPlanServiceImpl.java
View File

@@ -5,12 +5,17 @@ import com.klp.common.core.domain.entity.SysUser;
import com.klp.common.core.page.TableDataInfo;
import com.klp.common.core.domain.PageQuery;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.klp.common.utils.StringUtils;
import com.klp.domain.WmsMaterialCoil;
import com.klp.domain.WmsDeliveryWaybill;
import com.klp.domain.WmsDeliveryWaybillDetail;
import com.klp.domain.vo.*;
import com.klp.mapper.WmsMaterialCoilMapper;
import com.klp.mapper.WmsDeliveryWaybillMapper;
import com.klp.mapper.WmsDeliveryWaybillDetailMapper;
import com.klp.system.service.ISysUserService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
@@ -38,6 +43,10 @@ public class WmsDeliveryPlanServiceImpl implements IWmsDeliveryPlanService {
private final WmsMaterialCoilMapper coilMapper;
private final WmsDeliveryWaybillMapper waybillMapper;
private final WmsDeliveryWaybillDetailMapper waybillDetailMapper;
/**
* 查询发货计划
*/
@@ -169,4 +178,61 @@ public class WmsDeliveryPlanServiceImpl implements IWmsDeliveryPlanService {
return result;
}
@Override
public List<WmsMaterialCoilVo> getSelectableCoilsByPlanId(Long planId) {
if (planId == null) {
return Collections.emptyList();
}
WmsDeliveryPlanVo planVo = baseMapper.selectVoById(planId);
if (planVo == null || StringUtils.isBlank(planVo.getCoil())) {
return Collections.emptyList();
}
Set<Long> planCoilIds = Arrays.stream(planVo.getCoil().split(","))
.map(String::trim)
.filter(StringUtils::isNotBlank)
.map(Long::valueOf)
.collect(Collectors.toSet());
if (planCoilIds.isEmpty()) {
return Collections.emptyList();
}
List<WmsDeliveryWaybill> waybills = waybillMapper.selectList(
Wrappers.<WmsDeliveryWaybill>lambdaQuery().eq(WmsDeliveryWaybill::getPlanId, planId)
);
if (waybills == null || waybills.isEmpty()) {
return queryCoilsByIds(planCoilIds);
}
Set<Long> waybillIds = waybills.stream().map(WmsDeliveryWaybill::getWaybillId).collect(Collectors.toSet());
if (waybillIds.isEmpty()) {
return queryCoilsByIds(planCoilIds);
}
List<WmsDeliveryWaybillDetail> details = waybillDetailMapper.selectList(
Wrappers.<WmsDeliveryWaybillDetail>lambdaQuery().in(WmsDeliveryWaybillDetail::getWaybillId, waybillIds)
);
Set<Long> usedCoilIds = details == null ? Collections.emptySet() : details.stream()
.map(WmsDeliveryWaybillDetail::getCoilId)
.filter(Objects::nonNull)
.collect(Collectors.toSet());
planCoilIds.removeAll(usedCoilIds);
if (planCoilIds.isEmpty()) {
return Collections.emptyList();
}
return queryCoilsByIds(planCoilIds);
}
private List<WmsMaterialCoilVo> queryCoilsByIds(Set<Long> coilIds) {
if (coilIds == null || coilIds.isEmpty()) {
return Collections.emptyList();
}
QueryWrapper<WmsMaterialCoil> qw = new QueryWrapper<>();
qw.in("mc.coil_id", coilIds);
qw.eq("mc.del_flag", 0);
//根据创建时间倒叙
qw.orderByDesc("mc.create_time");
// 使用动态联查以返回更完整的钢卷信息
return coilMapper.selectVoListWithDynamicJoin(qw);
}
}

83
klp-wms/src/main/java/com/klp/service/impl/WmsMaterialCoilServiceImpl.java
View File

@@ -2,6 +2,7 @@ package com.klp.service.impl;
import cn.hutool.core.bean.BeanUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.esotericsoftware.minlog.Log;
import com.klp.common.core.domain.entity.SysUser;
import com.klp.common.core.page.TableDataInfo;
import com.klp.common.core.domain.PageQuery;
@@ -13,6 +14,8 @@ import com.klp.common.helper.LoginHelper;
import com.klp.common.utils.StringUtils;
import com.klp.common.utils.spring.SpringUtils;
import com.klp.domain.WmsDeliveryPlan;
import com.klp.domain.WmsProduct;
import com.klp.domain.WmsRawMaterial;
import com.klp.domain.bo.*;
import com.klp.domain.vo.*;
import com.klp.mapper.WmsDeliveryPlanMapper;
@@ -23,6 +26,8 @@ import org.springframework.transaction.annotation.Transactional;
import com.klp.domain.WmsMaterialCoil;
import com.klp.mapper.WmsMaterialCoilMapper;
import com.klp.mapper.WmsStockMapper;
import com.klp.mapper.WmsProductMapper;
import com.klp.mapper.WmsRawMaterialMapper;
import com.klp.mapper.WmsGenerateRecordMapper;
import com.klp.service.IWmsMaterialCoilService;
import com.klp.service.IWmsStockService;
@@ -59,6 +64,8 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
private final IWmsProductService productService;
private final ISysUserService userService;
private final WmsDeliveryPlanMapper deliveryPlanMapper;
private final WmsProductMapper productMapper;
private final WmsRawMaterialMapper rawMaterialMapper;
/**
* 查询钢卷物料表
@@ -330,6 +337,82 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
qw.eq(bo.getStatus() != null, "mc.status", bo.getStatus());
qw.eq(bo.getActualWarehouseId() != null, "mc.actual_warehouse_id", bo.getActualWarehouseId());
qw.eq(StringUtils.isNotBlank(bo.getItemType()), "mc.item_type", bo.getItemType());
// 按 itemType + 细粒度字段筛选（若对应字段非空则拼接条件；为空则不拼）
if (StringUtils.isNotBlank(bo.getItemType())) {
List<Long> matchedItemIds = new ArrayList<>();
boolean hasAnyItemFilter = StringUtils.isNotBlank(bo.getItemMaterial())
|| StringUtils.isNotBlank(bo.getItemManufacturer())
|| StringUtils.isNotBlank(bo.getItemSurfaceTreatmentDesc())
|| StringUtils.isNotBlank(bo.getItemZincLayer())
|| StringUtils.isNotBlank(bo.getItemName()); // 兼容性关键字
if (hasAnyItemFilter) {
try {
if ("product".equals(bo.getItemType())) {
QueryWrapper<WmsProduct> pq = new QueryWrapper<>();
pq.eq("del_flag", 0);
if (StringUtils.isNotBlank(bo.getItemName())) {
pq.like("product_name", bo.getItemName());
}
if (StringUtils.isNotBlank(bo.getItemMaterial())) {
pq.like("material", bo.getItemMaterial());
}
if (StringUtils.isNotBlank(bo.getItemManufacturer())) {
pq.like("manufacturer", bo.getItemManufacturer());
}
if (StringUtils.isNotBlank(bo.getItemSurfaceTreatmentDesc())) {
pq.like("surface_treatment_desc", bo.getItemSurfaceTreatmentDesc());
}
if (StringUtils.isNotBlank(bo.getItemZincLayer())) {
pq.like("zinc_layer", bo.getItemZincLayer());
}
// MyBatis selectList默认返回空列表，无需判null，直接流式提取ID
matchedItemIds = productMapper.selectList(pq).stream()
.map(WmsProduct::getProductId)
.filter(Objects::nonNull) // 过滤null的productId
.collect(Collectors.toList());
} else if ("raw_material".equals(bo.getItemType())) {
QueryWrapper<WmsRawMaterial> rq = new QueryWrapper<>();
rq.eq("del_flag", 0);
if (StringUtils.isNotBlank(bo.getItemName())) {
rq.like("raw_material_name", bo.getItemName());
}
if (StringUtils.isNotBlank(bo.getItemMaterial())) {
rq.like("material", bo.getItemMaterial());
}
if (StringUtils.isNotBlank(bo.getItemManufacturer())) {
rq.like("manufacturer", bo.getItemManufacturer());
}
if (StringUtils.isNotBlank(bo.getItemSurfaceTreatmentDesc())) {
rq.like("surface_treatment_desc", bo.getItemSurfaceTreatmentDesc());
}
if (StringUtils.isNotBlank(bo.getItemZincLayer())) {
rq.like("zinc_layer", bo.getItemZincLayer());
}
// 流式提取rawMaterialId，过滤null
matchedItemIds = rawMaterialMapper.selectList(rq).stream()
.map(WmsRawMaterial::getRawMaterialId)
.filter(Objects::nonNull)
.collect(Collectors.toList());
}
} catch (Exception e) {
// 异常时强制返回空结果，避免查询报错
Log.error("筛选产品/原材料ID失败", e);
matchedItemIds = Collections.emptyList();
}
if (matchedItemIds.isEmpty()) {
// 强制无结果
qw.apply("1 = 0");
return qw;
} else {
// 1. 先排除item_id为null的钢卷（若业务需要）
qw.isNotNull("mc.item_id");
qw.in("mc.item_id", matchedItemIds);
}
}
}
// 修改itemId筛选逻辑，支持逗号分隔的多个ID查询
if (StringUtils.isNotBlank(bo.getItemIds())) {
String[] itemIdArray = bo.getItemIds().split(",");