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

feat(wms): 新增钻取表格组件并优化库存明细查看功能

Browse Source 
新增DrillDownTable组件用于展示库存明细数据
重构stock/index.vue和coil/box.vue使用新组件
优化表格行点击事件处理和数据传递逻辑
移除冗余代码并简化钻取参数处理流程
This commit is contained in:
砂糖
2025-10-31 15:16:24 +08:00
parent 77f43fa334
commit 056b6aabac
3 changed files with 348 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
klp-ui/src/views/wms/coil/box.vue
View File

@@ -2,13 +2,6 @@
<div class="statistics-container" v-loading="loading">
<!-- 统计方式选择 -->
<el-form inline>
<!-- <el-form-item label="统计方式" prop="statType">
<el-radio-group v-model="queryParams.statType" @change="getList">
<el-radio label="1">物料</el-radio>
<el-radio label="2">仓库</el-radio>
</el-radio-group>
</el-form-item> -->
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
</el-form>
@@ -35,18 +28,41 @@
<!-- 数据表格 -->
<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
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 === '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>
<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">
<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'" :productId="scope.row.itemId">
<template #default="{ product }">
@@ -67,72 +83,19 @@
<el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
</el-table>
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将itemType和itemId作为条件查询list；
如果当前是仓库统计，将仓库id作为筛选条件 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
<div class="drill-down-content">
<!-- 钻取条件显示 -->
<div class="drill-down-header">
<el-tag size="large" v-if="drillDownParams.itemType">
{{ drillDownParams.itemType === 'product' ? '成品' : '原材料' }}
</el-tag>
<el-tag size="large" v-if="drillDownParams.itemName" type="primary">
{{ drillDownParams.itemName }}
</el-tag>
<el-tag size="large" v-if="drillDownParams.warehouseName" type="success">
{{ drillDownParams.warehouseName }}
</el-tag>
</div>
<!-- 加载状态 -->
<el-skeleton :loading="drillDownLoading" animated>
<template #template>
<div class="demo-skeleton">
<el-skeleton-item variant="p" style="width: 80%" />
<el-skeleton-item variant="text" style="width: 30%" />
<el-skeleton-item variant="text" style="width: 60%" />
</div>
</template>
<!-- 钻取表格 -->
<el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe style="width: 100%"
v-if="!drillDownLoading">
<el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
<el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
<el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
{{ scope.row.itemType == 'product' ? '成品' : '原料' }}
</template>
</el-table-column>
<el-table-column label="产品类型" align="center" min-width="250">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
<template #default="{ product }">
{{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
</template>
</ProductInfo>
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
<template #default="{ material }">
{{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
</template>
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
<el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
</el-table>
</el-skeleton>
<!-- 分页 -->
<div class="pagination-container" v-if="!drillDownLoading && drillDownList.length > 0">
<el-pagination background :current-page.sync="drillDownQueryParams.pageNum"
:page-size.sync="drillDownQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="drillDownTotal"
@size-change="handleDrillDownSizeChange" @current-change="handleDrillDownCurrentChange"></el-pagination>
</div>
</div>
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
<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>
@@ -140,18 +103,20 @@
<script>
import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByWarehouse } from "@/api/wms/coil";
import { listMaterialCoil } 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 {
@@ -180,20 +145,18 @@ export default {
// 钻取相关数据
dialogVisible: false,
dialogTitle: '',
drillDownLoading: false,
drillDownList: [],
drillDownTotal: 0,
drillDownParams: {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
dataType: 1
},
// 传给钻取表格组件的查询参数
drillDownQueryParams: {
pageNum: 1,
pageSize: 20
warehouseId: null,
itemType: null,
itemId: null
}
}
},
@@ -265,12 +228,7 @@ export default {
value: item.coilCount,
itemType: item.itemType,
itemId: item.itemId,
itemStyle: { color: this.getTechColor(index) },
// children: [{
// name: `卷数: ${item.coilCount}`,
// value: item.coilCount,
// itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
// }]
itemStyle: { color: this.getTechColor(index) }
}))
};
} else {
@@ -282,12 +240,7 @@ export default {
value: item.coilCount,
warehouseId: item.warehouseId,
warehouseName: item.warehouseName,
itemStyle: { color: this.getTechColor(index) },
// children: [{
// name: `卷数: ${item.coilCount}`,
// value: item.coilCount,
// itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
// }]
itemStyle: { color: this.getTechColor(index) }
}))
};
}
@@ -497,7 +450,7 @@ export default {
});
},
// 生成物料名称（简化版，实际可根据组件返回值优化）
// 生成物料名称
getMaterialName(item) {
if (item.itemType === 'product') {
return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
@@ -525,7 +478,13 @@ export default {
itemName: '',
warehouseId: null,
warehouseName: '',
dataType: 1
};
// 重置传给子组件的查询参数
this.drillDownQueryParams = {
warehouseId: null,
itemType: null,
itemId: null
};
// 根据数据类型设置钻取参数
@@ -533,23 +492,24 @@ export default {
// 物料统计钻取
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);
console.log('item', item, data);
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.drillDownQueryParams.pageNum = 1;
// 打开弹窗
this.dialogVisible = true;
// 获取钻取数据
this.getDrillDownList();
},
// 处理表格行点击
@@ -570,64 +530,6 @@ export default {
// 调用图表点击处理函数
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';
}
}
}
@@ -683,33 +585,6 @@ h3 {
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;
}
/* 图表项悬停效果增强 */
:deep(.echarts-tooltip) {
border-radius: 6px !important;

202
klp-ui/src/views/wms/coil/panels/DrillDownTable.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<div class="drill-down-content">
<!-- 钻取条件显示 -->
<div class="drill-down-header">
<el-tag size="large" v-if="queryParams.itemType">
{{ queryParams.itemType === 'product' ? '成品' : '原材料' }}
</el-tag>
<el-tag size="large" v-if="itemName" type="primary">
{{ itemName }}
</el-tag>
<el-tag size="large" v-if="warehouseName" type="success">
{{ warehouseName }}
</el-tag>
</div>
<!-- 加载状态 -->
<el-skeleton :loading="loading" animated>
<template #template>
<div class="demo-skeleton">
<el-skeleton-item variant="p" style="width: 80%" />
<el-skeleton-item variant="text" style="width: 30%" />
<el-skeleton-item variant="text" style="width: 60%" />
</div>
</template>
<!-- 钻取表格 -->
<el-table
max-height="400"
v-loading="loading"
:data="list"
border
stripe
style="width: 100%"
v-if="!loading"
>
<el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
<el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
<el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
{{ scope.row.itemType == 'product' ? '成品' : '原料' }}
</template>
</el-table-column>
<el-table-column label="产品类型" align="center" min-width="250">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
<template #default="{ product }">
{{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
</template>
</ProductInfo>
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
<template #default="{ material }">
{{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
</template>
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
<el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
</el-table>
</el-skeleton>
<!-- 分页 -->
<div class="pagination-container" v-if="!loading && list.length > 0">
<el-pagination
background
:current-page.sync="pageNum"
:page-size.sync="pageSize"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
import { listMaterialCoil } from "@/api/wms/coil";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
export default {
components: {
RawMaterialInfo,
ProductInfo
},
props: {
// 查询参数：包含warehouseId, itemType, itemId
queryParams: {
type: Object,
default: () => ({
warehouseId: null,
itemType: null,
itemId: null
})
},
// 物料名称（用于显示标签）
itemName: {
type: String,
default: ''
},
// 仓库名称（用于显示标签）
warehouseName: {
type: String,
default: ''
}
},
data() {
return {
loading: false,
list: [],
total: 0,
pageNum: 1,
pageSize: 20
};
},
watch: {
// 监听查询参数变化，重新加载数据
queryParams: {
deep: true,
handler() {
// 重置页码
this.pageNum = 1;
// 重新加载数据
this.getList();
}
}
},
mounted() {
// 初始加载数据
this.getList();
},
methods: {
getList() {
this.loading = true;
// 构建查询参数
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
itemType: this.queryParams.itemType,
itemId: this.queryParams.itemId,
warehouseId: this.queryParams.warehouseId
};
// 调用API获取数据
listMaterialCoil(params).then(res => {
this.list = res.rows || [];
this.total = res.total || 0;
this.loading = false;
}).catch(error => {
console.error('获取钻取数据失败:', error);
this.loading = false;
this.$message.error('获取明细数据失败');
});
},
// 处理分页大小变化
handleSizeChange(val) {
this.pageSize = val;
this.getList();
},
// 处理当前页变化
handleCurrentChange(val) {
this.pageNum = val;
this.getList();
}
}
};
</script>
<style scoped>
.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;
}
</style>

118
klp-ui/src/views/wms/stock/index.vue
View File

@@ -12,18 +12,14 @@
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!-- 移除仓库筛选项 -->
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
<!-- <el-form-item label="单位" prop="unit">
<el-input v-model="queryParams.unit" placeholder="请输入单位" clearable @keyup.enter.native="handleQuery" />
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
<!-- 合并批次<el-switch v-model="queryParams.mergeBatch" :active-value="1" :inactive-value="0" @change="handleQuery" /> -->
</el-form-item>
</el-form>
<KLPTable v-loading="loading" :data="stockList">
<KLPTable v-loading="loading" :data="stockList" @row-click="handleTableRowClick">
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
<dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
@@ -50,17 +46,17 @@
</el-table-column>
<el-table-column label="库存数量" align="center" prop="totalQuantity" />
<el-table-column label="备注" align="center" prop="remark" />
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleTrace(scope.row)">物料追溯</el-button>
<el-button type="text" size="small" @click="handleDrillDown(scope.row)">查看明细</el-button>
</template>
</el-table-column> -->
</el-table-column>
</KLPTable>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改库存对话框（保持不变） -->
<!-- 添加或修改库存对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="仓库/库区/库位ID" prop="warehouseId">
@@ -102,26 +98,25 @@
<stock-io :data="stockBoxData" @generateBill="handleGenerateBill" />
</el-dialog>
<el-dialog :visible.sync="stockTraceVisible" title="物料追溯" width="800px" append-to-body>
<el-table :data="stockTraceList" style="width: 100%">
<el-table-column label="单据类型" align="center" prop="ioType">
<template slot-scope="scope">
<dict-tag :options="dict.type.stock_io_type" :value="scope.row.ioType" />
</template>
</el-table-column>
<el-table-column label="单据ID" align="center" prop="stockIoId" />
<el-table-column label="单据编号" align="center" prop="stockIoCode" />
<!-- <el-table-column label="创建时间" align="center" prop="createTime" /> -->
<el-table-column label="变更数量" align="center" prop="quantity" />
<el-table-column label="备注" align="center" prop="remark" />
</el-table>
<!-- 钻取明细对话框 -->
<el-dialog
:title="dialogTitle"
:visible.sync="drillDownVisible"
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 { listStock, delStock, addStock, updateStock, getStockTrace } from "@/api/wms/stock";
import { listStock, delStock, addStock, updateStock } from "@/api/wms/stock";
import { addStockIoWithDetail } from "@/api/wms/stockIo";
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import ProductSelect from "@/components/KLPService/ProductSelect";
@@ -131,7 +126,10 @@ import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import BomInfoMini from "@/components/KLPService/Renderer/BomInfoMini";
import StockIo from './panels/stockIo.vue';
import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
import MaterialSelect from "@/components/KLPService/MaterialSelect";
import MaterialSelect from "@/components/KLPService/MaterialSelect";
// 导入钻取表格组件
import DrillDownTable from '../coil/panels/DrillDownTable.vue';
import { findItemWithBom } from "@/store/modules/category";
export default {
name: "Stock",
@@ -145,7 +143,8 @@ export default {
BomInfoMini,
StockIo,
WarehouseTree,
MaterialSelect
MaterialSelect,
DrillDownTable // 注册钻取组件
},
data() {
return {
@@ -208,18 +207,31 @@ export default {
},
// 暂存用于创建出库单或移库单的数据
stockBoxData: [],
stockBoxVisible: false,
// 选中的数据
selectedRows: [],
stockTraceList: [],
stockTraceVisible: false,
// 钻取相关数据
drillDownVisible: false,
dialogTitle: '',
drillDownParams: {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
},
// 传给钻取表格组件的查询参数
drillDownQueryParams: {
warehouseId: null,
itemType: null,
itemId: null
}
};
},
created() {
this.getList();
},
methods: {
/** 查询库存：原材料/产品与库区/库位的存放关系列表 */
/** 查询库存列表 */
getList() {
this.loading = true;
listStock(this.queryParams).then(response => {
@@ -324,7 +336,6 @@ export default {
handleStockBox() {
// 添加到暂存单据中，并且去重,去重依据为stockId是否相同
const list = [...this.selectedRows, ...this.stockBoxData];
console.log(list);
const uniqueStockBoxData = list.filter((item, index, self) =>
index === self.findIndex(t => t.stockId === item.stockId)
);
@@ -339,15 +350,46 @@ export default {
},
handleViewStockBox() {
// 查看暂存单据
console.log(this.stockBoxData);
this.stockBoxVisible = true;
},
handleTrace(row) {
// 查询对应批次号的的出库和入库单据明细并展示
getStockTrace(row.batchNo).then(response => {
this.stockTraceList = response.data;
this.stockTraceVisible = true;
});
/** 处理表格行点击 */
handleTableRowClick(row) {
this.handleDrillDown(row);
},
/** 处理钻取操作 */
handleDrillDown(row) {
// 重置钻取参数
this.drillDownParams = {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
};
// 重置传给子组件的查询参数
this.drillDownQueryParams = {
warehouseId: this.queryParams.warehouseId || row.warehouseId,
itemType: row.itemType,
itemId: row.itemId
};
// 设置钻取参数
this.drillDownParams.itemType = row.itemType;
this.drillDownParams.itemId = row.itemId;
this.drillDownParams.warehouseId = this.queryParams.warehouseId || row.warehouseId;
// 获取物料名称
const item = findItemWithBom(row.itemType, row.itemId);
this.drillDownParams.itemName = item ?
(row.itemType === 'product' ? item.productName : item.rawMaterialName) :
'未知物料';
// 设置对话框标题
this.dialogTitle = `${row.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
// 打开弹窗
this.drillDownVisible = true;
}
}
};
@@ -397,4 +439,4 @@ export default {
display: flex;
flex-direction: column;
}
</style>
</style>