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

feat(wms): 添加分卷操作的多仓库标签功能

Browse Source 
在分卷操作页面中，根据工序类型动态显示对应的仓库标签，并实现标签切换时自动加载对应仓库的物料列表
This commit is contained in:
砂糖
2025-11-24 17:48:38 +08:00
parent 9d7ce2472d
commit 76c65bd31d
2 changed files with 175 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
klp-ui/src/views/wms/coil/do/split.vue
View File

@@ -1,5 +1,5 @@
<template>
<DoPage :label="actionType" />
<DoPage :label="actionType" :tabs="tabs" />
</template>
<script>
@@ -12,13 +12,50 @@
},
data() {
return {
actionType: '分卷'
actionType: '分卷',
tabs: [],
}
},
watch: {
'$route.query.actionType': {
handler(newVal) {
this.actionType = newVal
this.actionType = newVal;
// 根据名字获取默认的查询参数
const map = {
'酸连轧工序': [
{value: '1988150099140866050', label: '酸连轧成品库'},
{value: '1988150263284953089', label: '镀锌原料库'},
{value: '1988150545175736322', label: '脱脂原料库'},
],
'镀锌工序': [
{value: '1988150263284953089', label: '镀锌原料库'},
{value: '1988150323162836993', label: '镀锌成品库'},
],
'脱脂工序': [
{value: '1988150545175736322', label: '脱脂原料库'},
{value: '1988150586938421250', label: '脱脂成品库'},
],
'退火工序': [
{value: '1988150648993148929', label: '罩式退火原料库'},
{value: '1988150704496373761', label: '罩式退火成品库'},
],
'拉矫平整工序': [
{value: '1988150854442741762', label: '拉矫原料库'},
{value: '1988150915591499777', label: '拉矫成品库'},
],
'双机架工序': [
{value: '1992873386047643650', label: '双机架原料库'},
{value: '1992873437713080322', label: '双机架成品库'},
],
'镀铬工序': [
{value: '1988151076996706306', label: '镀铬原料库'},
{value: '1988151132361519105', label: '镀铬成品库'},
],
}
// 从map中获取默认的查询参数
const defaultWarehouseIds = map[this.actionType] || []
console.log(defaultWarehouseIds, 'defaultWarehouseIds')
this.tabs = defaultWarehouseIds
},
immediate: true
}

304
klp-ui/src/views/wms/coil/panels/do.vue
View File

@@ -5,29 +5,24 @@
<el-col :span="12">
<div class="section-card material-section">
<div class="section-header">
<h3 class="section-title">待领物料列表</h3>
<!-- 当tab数量多余一个时，额外渲染一个el-tab-pane. 当tab切换时，切换对应的物料列表 -->
<el-tabs v-if="tabs.length > 1" v-model="currentTab" type="card" class="material-tabs">
<el-tab-pane v-for="(tab, index) in tabs" :key="tab.value" :label="tab.label"
:name="tab.value"></el-tab-pane>
</el-tabs>
<h3 class="section-title" v-else>待领物料列表</h3>
<el-button size="mini" icon="el-icon-refresh" @click="getMaterialCoil">刷新</el-button>
</div>
<!-- 搜索栏 -->
<el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="query-form">
<el-form-item label="入场钢卷号" prop="enterCoilNo">
<el-input
v-model="materialQueryParams.enterCoilNo"
placeholder="请输入入场钢卷号"
clearable
@keyup.enter.native="handleMaterialQuery"
style="width: 150px;"
/>
<el-input v-model="materialQueryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
@keyup.enter.native="handleMaterialQuery" style="width: 150px;" />
</el-form-item>
<el-form-item label="当前钢卷号" prop="currentCoilNo">
<el-input
v-model="materialQueryParams.currentCoilNo"
placeholder="请输入当前钢卷号"
clearable
@keyup.enter.native="handleMaterialQuery"
style="width: 150px;"
/>
<el-input v-model="materialQueryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
@keyup.enter.native="handleMaterialQuery" style="width: 150px;" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button>
@@ -41,25 +36,18 @@
<i class="el-icon-box"></i>
<p>暂无待领物料</p>
</div>
<div
v-for="(item, index) in materialCoilList"
:key="item.coilId || index"
class="material-card"
>
<div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card">
<div class="card-header">
<div class="header-left">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<span class="material-type">{{ item.materialType || '原料' }}</span>
<el-popover
v-if="item.rawMaterial || item.product"
placement="top"
width="280"
trigger="hover"
popper-class="material-params-popover"
>
<el-popover v-if="item.rawMaterial || item.product" placement="top" width="280" trigger="hover"
popper-class="material-params-popover">
<div class="material-params-content">
<div class="params-title">
{{ item.itemType === 'raw_material' ? (item.rawMaterial && item.rawMaterial.rawMaterialName || '—') : (item.product && item.product.productName || '—') }}
{{ item.itemType === 'raw_material' ? (item.rawMaterial && item.rawMaterial.rawMaterialName ||
'—') : (item.product && item.product.productName || '—') }}
</div>
<div class="params-list">
<div class="param-item" v-if="item.itemType === 'raw_material' && item.rawMaterial">
@@ -135,7 +123,7 @@
</el-popover>
</div>
</div>
<div class="card-body">
<div class="info-list">
<div class="info-item">
@@ -152,7 +140,8 @@
</div>
<div class="info-item">
<span class="info-label">库区：</span>
<span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—' }}</span>
<span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—'
}}</span>
</div>
<div class="info-item">
<span class="info-label">重量：</span>
@@ -160,28 +149,17 @@
</div>
</div>
</div>
<div class="card-footer">
<el-button
type="primary"
icon="el-icon-check"
size="mini"
@click="handlePickMaterial(item)"
:loading="item.picking"
class="action-btn"
>领料</el-button>
<el-button type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(item)"
:loading="item.picking" class="action-btn">领料</el-button>
</div>
</div>
</div>
<!-- 分页 -->
<pagination
v-show="materialTotal > 0"
:total="materialTotal"
:page.sync="materialQueryParams.pageNum"
:limit.sync="materialQueryParams.pageSize"
@pagination="getMaterialCoil"
/>
<pagination v-show="materialTotal > 0" :total="materialTotal" :page.sync="materialQueryParams.pageNum"
:limit.sync="materialQueryParams.pageSize" @pagination="getMaterialCoil" />
</div>
</el-col>
@@ -196,13 +174,8 @@
<!-- 搜索栏 -->
<el-form :model="actionQueryParams" ref="actionQueryForm" size="small" :inline="true" class="query-form">
<el-form-item label="钢卷号" prop="currentCoilNo">
<el-input
v-model="actionQueryParams.currentCoilNo"
placeholder="请输入钢卷号"
clearable
@keyup.enter.native="handleActionQuery"
style="width: 150px;"
/>
<el-input v-model="actionQueryParams.currentCoilNo" placeholder="请输入钢卷号" clearable
@keyup.enter.native="handleActionQuery" style="width: 150px;" />
</el-form-item>
<el-form-item label="操作状态" prop="actionStatus">
<el-select v-model="actionQueryParams.actionStatus" placeholder="请选择状态" clearable style="width: 120px;">
@@ -224,15 +197,10 @@
<i class="el-icon-document"></i>
<p>暂无待操作任务</p>
</div>
<div
v-for="(item, index) in pendingActionList"
:key="item.actionId || index"
class="action-card"
:class="{
'urgent-card': item.priority === 2,
'important-card': item.priority === 1
}"
>
<div v-for="(item, index) in pendingActionList" :key="item.actionId || index" class="action-card" :class="{
'urgent-card': item.priority === 2,
'important-card': item.priority === 1
}">
<div class="card-header">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<div class="status-tags">
@@ -244,12 +212,13 @@
<el-tag v-else-if="item.priority === 1" type="warning" size="mini">重要</el-tag>
</div>
</div>
<div class="card-body">
<div class="info-list">
<div class="info-item">
<span class="info-label">类型：</span>
<dict-tag :options="dict.type.action_type" :value="item.actionType" class="action-type-tag"></dict-tag>
<dict-tag :options="dict.type.action_type" :value="item.actionType"
class="action-type-tag"></dict-tag>
</div>
<div class="info-item">
<span class="info-label">来源：</span>
@@ -276,64 +245,34 @@
</div>
</div>
</div>
<div class="card-footer">
<!-- 待处理状态显示操作按钮 -->
<template v-if="item.actionStatus === 0">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="handleProcess(item)"
class="action-btn"
>操作</el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="handleDeleteAction(item)"
class="action-btn"
>删除</el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
class="action-btn">操作</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
class="action-btn">删除</el-button>
</template>
<!-- 处理中状态显示继续按钮 -->
<template v-else-if="item.actionStatus === 1">
<el-button
type="warning"
icon="el-icon-edit"
size="mini"
@click="handleProcess(item)"
class="action-btn"
>继续</el-button>
<el-button
type="info"
icon="el-icon-close"
size="mini"
@click="handleCancel(item)"
class="action-btn"
>取消</el-button>
<el-button type="warning" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
class="action-btn">继续</el-button>
<el-button type="info" icon="el-icon-close" size="mini" @click="handleCancel(item)"
class="action-btn">取消</el-button>
</template>
<!-- 已完成或已取消状态显示删除按钮 -->
<template v-else>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="handleDeleteAction(item)"
class="action-btn"
>删除</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
class="action-btn">删除</el-button>
</template>
</div>
</div>
</div>
<!-- 分页 -->
<pagination
v-show="actionTotal > 0"
:total="actionTotal"
:page.sync="actionQueryParams.pageNum"
:limit.sync="actionQueryParams.pageSize"
@pagination="getPendingAction"
/>
<pagination v-show="actionTotal > 0" :total="actionTotal" :page.sync="actionQueryParams.pageNum"
:limit.sync="actionQueryParams.pageSize" @pagination="getPendingAction" />
</div>
</el-col>
</el-row>
@@ -354,6 +293,10 @@ export default {
label: {
type: String,
default: () => '酸连轧工序'
},
tabs: {
type: Array,
default: () => []
}
},
components: {
@@ -366,6 +309,7 @@ export default {
materialLoading: false,
materialCoilList: [],
materialTotal: 0,
currentTab: '',
materialQueryParams: {
pageNum: 1,
pageSize: 20,
@@ -374,7 +318,7 @@ export default {
enterCoilNo: null,
currentCoilNo: null
},
// 待操作列表相关
actionLoading: false,
pendingActionList: [],
@@ -397,7 +341,8 @@ export default {
return label.includes(this.label)
})
return acidAction ? parseInt(acidAction.value) : null
}
},
},
watch: {
// 监听字典数据加载，当acidRollingActionType有值时自动加载待操作列表
@@ -409,12 +354,31 @@ export default {
this.getPendingAction()
}
}
},
tabs: {
handler(newVal) {
if (newVal.length > 0) {
// this.materialQueryParams.warehouseId = newVal[0]?.value || ''
// 设置currentTab为第一个tab的value
this.currentTab = newVal[0]?.value || ''
}
},
immediate: true
},
currentTab: {
handler(newVal) {
if (newVal) {
this.materialQueryParams.warehouseId = newVal
this.getMaterialCoil()
}
},
immediate: true
}
},
created() {
// 立即加载物料列表（不依赖字典）
this.getMaterialCoil()
// this.getMaterialCoil()
// 尝试加载待操作列表（如果字典已加载）
this.$nextTick(() => {
if (this.acidRollingActionType) {
@@ -434,7 +398,7 @@ export default {
},
methods: {
parseTime,
// ========== 物料列表相关方法 ==========
/** 查询物料列表 */
getMaterialCoil() {
@@ -465,9 +429,9 @@ export default {
this.$message.error(`未找到${this.label}操作类型，请检查字典配置`)
return
}
this.$set(row, 'picking', true)
const pendingData = {
coilId: row.coilId,
currentCoilNo: row.currentCoilNo,
@@ -478,7 +442,7 @@ export default {
priority: 0, // 默认普通优先级
remark: `PC端领料创建-${this.label}`
}
addPendingAction(pendingData).then(response => {
if (response.code === 200) {
this.$message.success('领料成功，已创建待操作任务')
@@ -493,7 +457,7 @@ export default {
this.$set(row, 'picking', false)
})
},
// ========== 待操作列表相关方法 ==========
/** 查询待操作列表 */
getPendingAction() {
@@ -505,7 +469,7 @@ export default {
this.actionLoading = false
return
}
this.actionLoading = true
// 强制使用酸连轧工序的 actionType，忽略查询参数中的 actionType
const queryParams = {
@@ -543,20 +507,20 @@ export default {
/** 处理操作 - 跳转到对应页面 */
handleProcess(row) {
const actionType = parseInt(row.actionType)
// 特殊处理：发货和移库操作不需要跳转
if (actionType === 4 || actionType === 5) {
this.$message.info(actionType === 4 ? '发货操作已在移动端完成' : '移库操作已在移动端完成')
return
}
// 根据操作类型跳转到不同页面
let path = ''
// 分条操作：100-199
if (actionType >= 100 && actionType <= 199) {
path = '/wms/split'
}
}
// 合卷操作：200-299
else if (actionType == 200) {
path = '/wms/merge'
@@ -565,19 +529,19 @@ export default {
else {
path = '/wms/typing'
}
if (!path) {
this.$message.error('未知的操作类型: ' + row.actionType)
return
}
// 更新状态为处理中
startProcess(row.actionId).then(response => {
if (response.code !== 200) {
this.$message.error(response.msg || '更新状态失败')
return
}
// 跳转并传递参数
this.$router.push({
path: path,
@@ -602,7 +566,7 @@ export default {
}).then(() => {
this.$message.success('操作已取消')
this.getPendingAction()
}).catch(() => {})
}).catch(() => { })
},
/** 删除待操作 */
handleDeleteAction(row) {
@@ -616,7 +580,7 @@ export default {
}).then(() => {
this.getPendingAction()
this.$message.success('删除成功')
}).catch(() => {})
}).catch(() => { })
},
/** 获取物品名称 */
getItemName(item) {
@@ -666,6 +630,7 @@ export default {
.section-header {
border-bottom-color: #409eff;
}
.section-title {
color: #409eff;
}
@@ -675,6 +640,7 @@ export default {
.section-header {
border-bottom-color: #67c23a;
}
.section-title {
color: #67c23a;
}
@@ -696,25 +662,25 @@ export default {
max-height: calc(100vh - 320px);
overflow-y: auto;
padding-right: 4px;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
&:hover {
background: #a8a8a8;
}
}
@media (min-width: 1600px) {
grid-template-columns: repeat(4, 1fr);
}
@@ -725,14 +691,14 @@ export default {
text-align: center;
padding: 60px 20px;
color: #909399;
i {
font-size: 48px;
margin-bottom: 16px;
display: block;
color: #c0c4cc;
}
p {
margin: 0;
font-size: 14px;
@@ -748,51 +714,51 @@ export default {
flex-direction: column;
transition: all 0.3s ease;
height: 100%;
&:hover {
border-color: #409eff;
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12);
}
.card-header {
padding: 6px 8px;
border-bottom: 1px solid #e4e7ed;
background-color: #fafafa;
.header-left {
display: flex;
align-items: center;
gap: 6px;
}
.coil-no-tag {
font-weight: 600;
font-size: 11px;
padding: 2px 6px;
}
.material-type {
font-size: 11px;
color: #606266;
font-weight: 500;
}
.param-icon {
font-size: 13px;
color: #909399;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: #409eff;
}
}
}
.card-body {
padding: 8px;
flex: 1;
.info-list {
.info-item {
display: flex;
@@ -800,11 +766,11 @@ export default {
margin-bottom: 4px;
font-size: 11px;
line-height: 1.4;
&:last-child {
margin-bottom: 0;
}
.info-label {
color: #909399;
white-space: nowrap;
@@ -812,7 +778,7 @@ export default {
min-width: 40px;
font-size: 11px;
}
.info-value {
color: #303133;
flex: 1;
@@ -824,14 +790,14 @@ export default {
}
}
}
.card-footer {
padding: 6px 8px;
border-top: 1px solid #e4e7ed;
background-color: #fafafa;
display: flex;
justify-content: center;
.action-btn {
width: 100%;
padding: 5px 10px;
@@ -849,32 +815,32 @@ export default {
flex-direction: column;
transition: all 0.3s ease;
height: 100%;
&:hover {
border-color: #67c23a;
box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15);
}
&.urgent-card {
border-left: 4px solid #f56c6c;
background-color: #fef0f0;
&:hover {
border-color: #f56c6c;
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
}
}
&.important-card {
border-left: 4px solid #e6a23c;
background-color: #fdf6ec;
&:hover {
border-color: #e6a23c;
box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
}
}
.card-header {
padding: 10px 12px;
border-bottom: 1px solid #e4e7ed;
@@ -882,41 +848,41 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
.coil-no-tag {
font-weight: 600;
font-size: 12px;
}
.status-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
}
.card-body {
padding: 12px;
flex: 1;
.info-list {
.info-item {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 12px;
&:last-child {
margin-bottom: 0;
}
.info-label {
color: #909399;
white-space: nowrap;
margin-right: 6px;
min-width: 50px;
}
.info-value {
color: #303133;
flex: 1;
@@ -924,14 +890,14 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.action-type-tag {
font-size: 11px;
}
}
}
}
.card-footer {
padding: 10px 12px;
border-top: 1px solid #e4e7ed;
@@ -939,7 +905,7 @@ export default {
display: flex;
justify-content: center;
gap: 6px;
.action-btn {
flex: 1;
font-size: 12px;
@@ -968,7 +934,7 @@ export default {
padding-bottom: 8px;
border-bottom: 1px solid #e4e7ed;
}
.params-list {
.param-item {
.param-row {
@@ -976,17 +942,17 @@ export default {
margin-bottom: 6px;
font-size: 12px;
line-height: 1.5;
&:last-child {
margin-bottom: 0;
}
.param-label {
color: #909399;
min-width: 70px;
margin-right: 8px;
}
.param-value {
color: #303133;
flex: 1;
@@ -994,7 +960,7 @@ export default {
}
}
}
.param-divider {
height: 1px;
background-color: #e4e7ed;