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

feat(发货计划): 新增钢卷选择功能并优化界面布局

Browse Source 
- 在发货计划页面添加钢卷选择器组件，支持从列表中选择钢卷
- 优化发货计划卡片布局，增加审批状态显示
- 新增钢卷列表查询API接口
- 调整分页大小和查询条件
- 重构CoilSelector组件，增加更多钢卷信息展示
- 添加钢卷转移组件框架
This commit is contained in:
砂糖
2025-12-08 15:17:56 +08:00
parent d1b722b672
commit 40452d513e
5 changed files with 275 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -135,4 +135,15 @@ export function exportCoil(coilId) {
url: '/wms/materialCoil/exportCoil/' + coilId,
method: 'get'
})
}
// 根据钢卷ID序列查询钢卷列表
export function listCoilByIds(coilIds) {
return request({
url: '/wms/materialCoil/list',
method: 'get',
params: {
coilIds
}
})
}

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

@@ -7,12 +7,10 @@
<i class="el-icon-search"></i>
<span v-if="selectedCoil">
<span>{{ selectedCoil.currentCoilNo }}</span>
<span>({{ selectedCoil.itemName }}) </span>
<span>({{ selectedCoil.itemName }})</span>
<span>[{{ selectedCoil.netWeight }}t]</span>
</span>
<span v-else>请选择钢卷</span>
<span v-else>{{ placeholder }}</span>
</el-button>
</slot>
</div>
@@ -38,16 +36,14 @@
<!-- 数据表格 -->
<el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
<el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120" :show-overflow-tooltip="true" />
<el-table-column label="物料" align="center" prop="itemName" width="100" />
<el-table-column label="规格" align="center" prop="specification" width="100" />
<el-table-column label="材质" align="center" prop="material" width="100" />
<el-table-column label="厂家" align="center" prop="manufacturer" width="100" />
<el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
<el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
@@ -77,6 +73,10 @@ export default {
type: Object,
default: () => ({})
},
placeholder: {
type: String,
default: '请选择钢卷'
},
value: {
type: [String, Number],
default: ''
@@ -90,7 +90,7 @@ export default {
initialCoil: {
type: Object,
default: null
}
},
},
data() {
return {

64
klp-ui/src/views/wms/delivery/components/coilsTranfer.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div>
<!-- 搜索框，可以设置钢卷搜索条件 -->
<!-- 上方是未选的钢卷表格，包含选择按钮 -->
<!-- 搜索区域 -->
<el-row>
<el-form :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" />
</el-form-item>
<el-form-item label="钢种">
<el-input v-model="queryParams.grade" placeholder="请输入钢种" clearable size="small"
@keyup.enter.native="handleQuery" />
</el-form-item>
<!-- 分页 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
<el-table-column label="物料" align="center" prop="itemName" width="100" />
<el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
<el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
<el-table-column label="物料" align="center" prop="itemName" width="100" />
<el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
<el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
<!-- 下方的已选的钢卷表格，包含删除按钮 -->
</template>
<script>
</script>

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

@@ -2,18 +2,10 @@
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="计划名称" prop="planName">
<el-input
v-model="queryParams.planName"
placeholder="请输入发货计划名称"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.planName" placeholder="请输入发货计划名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="计划日期" prop="planDate">
<el-date-picker clearable
v-model="queryParams.planDate"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
<el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计划日期">
</el-date-picker>
</el-form-item>
@@ -25,96 +17,95 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
@click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
@click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row :gutter="20" v-loading="loading">
<el-col :span="6" v-for="(row, index) in deliveryPlanList" :key="row.planId">
<el-card shadow="hover" class="delivery-plan-card">
<div class="card-header">
<el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
<div class="card-title">{{ row.planName }}</div>
<el-row :gutter="10">
<el-col :span="8">
<el-row :gutter="20" v-loading="loading">
<el-col :span="12" v-for="(row, index) in deliveryPlanList" :key="row.planId">
<el-card shadow="hover" class="delivery-plan-card" @click.native="handleCardClick(row)">
<div class="card-header">
<el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
<div class="card-title">{{ row.planName }}</div>
</div>
<div class="card-content">
<div class="content-item">
<span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
<span>
<el-tag type="success" v-if="row.auditStatus == 1">已审批</el-tag>
<el-tag type="primary" v-else>待审批</el-tag>
</span>
</div>
<div class="content-item">
<span>{{ row.createBy }}({{ parseTime(row.updateTime, '{y}-{m}-{d}') }})</span>
</div>
<div class="content-item">
<span class="label">备注：</span>
<span>{{ row.remark || '-' }}</span>
</div>
</div>
<div class="card-actions">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleApprove(row)" v-if="row.auditStatus != 1">审批</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
</div>
</el-card>
</el-col>
</el-row>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</el-col>
<!-- 钢卷列表 -->
<el-col :span="16" v-loading="rightLoading">
<!-- 选中的钢卷表格为空时的提示 -->
<div v-if="!currentPlan.planId" class="empty-tip">
<el-empty description="请先选择发货计划" />
</div>
<div v-else>
<coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"></coil-selector>
<div v-if="selectedCoilList.length > 0 && currentPlan.planId">
<el-table :data="selectedCoilList" highlight-current-row height="400px" style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
<el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120"
:show-overflow-tooltip="true" />
<el-table-column label="物料" align="center" prop="itemName" width="100" />
<el-table-column label="规格" align="center" prop="specification" width="100" />
<el-table-column label="材质" align="center" prop="material" />
<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">
<template slot-scope="scope">
<el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="card-content">
<div class="content-item">
<span class="label">计划日期：</span>
<span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
</div>
<div class="content-item">
<span class="label">备注：</span>
<span>{{ row.remark || '-' }}</span>
</div>
<div class="content-item">
<span class="label">创建人：</span>
<span>{{ row.createBy }}</span>
</div>
<div class="content-item">
<span class="label">更新时间：</span>
<span>{{ parseTime(row.updateTime, '{y}-{m}-{d}') }}</span>
</div>
<div v-else class="empty-tip">
<el-empty description="暂无数据" />
</div>
<div class="card-actions">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(row)"
>删除</el-button>
</div>
</el-card>
</div>
</el-col>
</el-row>
<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>
@@ -123,10 +114,7 @@
<el-input v-model="form.planName" placeholder="请输入发货计划名称" />
</el-form-item>
<el-form-item label="计划日期" prop="planDate">
<el-date-picker clearable
v-model="form.planDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
<el-date-picker clearable v-model="form.planDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计划日期">
</el-date-picker>
</el-form-item>
@@ -144,9 +132,14 @@
<script>
import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
import { listCoilByIds, getMaterialCoil } from "@/api/wms/coil";
import coilSelector from "@/components/CoilSelector";
export default {
name: "DeliveryPlan",
components: {
coilSelector,
},
data() {
return {
// 按钮loading
@@ -165,6 +158,7 @@ export default {
total: 0,
// 发货计划表格数据
deliveryPlanList: [],
rightLoading: false,
// 弹出层标题
title: "",
// 是否显示弹出层
@@ -183,8 +177,12 @@ export default {
planDate: '',
},
// 表单校验
rules: {
}
rules: {},
// 选中的钢卷列表
selectedCoilList: [],
currentPlan: {},
// 防抖定时器
debounceTimer: null,
};
},
created() {
@@ -212,6 +210,99 @@ export default {
this.open = false;
this.reset();
},
handleApprove(row) {
// 二次确认
this.$confirm('确定审批通过该发货计划吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
this.buttonLoading = true;
const auditTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
updateDeliveryPlan({
planId: row.planId,
auditStatus: 1,
auditBy: this.$store.getters.name,
auditTime: auditTime,
}).then(res => {
this.loading = false;
this.buttonLoading = false;
this.$message({
message: '审批成功',
type: 'success'
});
this.getList();
})
})
},
handleCardClick(row) {
// 防抖处理，防止频繁点击
if (this.debounceTimer) {
clearTimeout(this.debounceTimer);
}
this.debounceTimer = setTimeout(() => {
this.currentPlan = row;
if (!row.coil) {
this.selectedCoilList = [];
return;
}
this.rightLoading = true;
listCoilByIds(row.coil).then(response => {
this.selectedCoilList = response.rows || [];
this.rightLoading = false;
});
}, 300); // 300ms防抖时间
},
handleCoilChange(coilId) {
const ids = this.selectedCoilList.map(item => item.coilId);
if (coilId) {
// 检查是否已存在
if (!ids.includes(coilId)) {
ids.push(coilId);
// 从后端查询详细信息
this.rightLoading = true;
updateDeliveryPlan({
planId: this.currentPlan.planId,
coil: ids.join(',')
}).then(_ => {
this.getList();
})
getMaterialCoil(coilId).then(res => {
this.selectedCoilList.push(res.data);
this.rightLoading = false;
this.$message({
message: '添加成功',
type: 'success'
});
})
} else {
this.$message({
message: '钢卷已存在',
type: 'warning'
});
}
}
},
// 处理删除选中钢卷
handleDeleteCoil(row) {
// 从选中的钢卷列表中删除选中的行
this.selectedCoilList = this.selectedCoilList.filter(item => item !== row);
// 更新发货计划
this.rightLoading = true;
updateDeliveryPlan({
planId: this.currentPlan.planId,
coil: this.selectedCoilList.map(item => item.coilId).join(',')
}).then(res => {
this.rightLoading = false;
this.$message({
message: '删除成功',
type: 'success'
});
this.getList();
})
},
// 表单重置
reset() {
this.form = {
@@ -344,8 +435,9 @@ export default {
.content-item {
margin-bottom: 10px;
display: flex;
align-items: flex-start;
display: flex;
gap: 10px;
align-items: center;
}
.content-item:last-child {
@@ -361,7 +453,7 @@ export default {
.card-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
justify-content: center;
gap: 5px;
}
</style>

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

@@ -211,9 +211,10 @@ export default {
selectedPlan: null,
planQueryParams: {
pageNum: 1,
pageSize: 100, // 增大分页大小以确保树形结构显示足够数据
pageSize: 20, // 增大分页大小以确保树形结构显示足够数据
planName: undefined,
planType: 0,
auditStatus: 1,
}
};
},