<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>订单入库数量修改</title>
|
<link rel="stylesheet" href="../../static/css/element.css">
|
<link rel="stylesheet" href="../../static/css/element-ui.css">
|
<link rel="icon" href="../../static/images/favicon.ico" type="image/x-icon">
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js"></script>
|
<script type="text/javascript" src="../../static/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/js/element.js"></script>
|
<style>
|
.container {
|
padding: 20px;
|
width: 100%;
|
max-width: 1200px;
|
margin: 0 auto;
|
}
|
.table-container {
|
margin-bottom: 20px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
.detail-dialog .el-dialog__body {
|
padding: 20px;
|
}
|
.pagination-container {
|
margin-top: 15px;
|
text-align: right;
|
}
|
.operation-cell {
|
display: flex;
|
justify-content: center;
|
gap: 8px;
|
}
|
/* 搜索栏样式 */
|
.search-container {
|
background: #f5f7fa;
|
padding: 15px;
|
margin-bottom: 20px;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
.search-form {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 15px;
|
}
|
.search-item {
|
display: flex;
|
align-items: center;
|
margin-right: 15px;
|
}
|
.search-label {
|
min-width: 80px;
|
text-align: right;
|
margin-right: 10px;
|
font-size: 14px;
|
color: #606266;
|
}
|
.search-actions {
|
display: flex;
|
gap: 10px;
|
margin-left: auto;
|
}
|
/* 确认上报按钮样式 */
|
.confirm-report-btn {
|
border: 2px solid #F56C6C;
|
color: #F56C6C;
|
font-weight: bold;
|
background-color: transparent;
|
padding: 10px 20px;
|
}
|
.confirm-report-btn:hover {
|
background-color: #F56C6C;
|
color: white;
|
}
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
gap: 10px;
|
margin-top: 20px;
|
}
|
/* 二次确认对话框样式 */
|
.confirm-dialog .el-message-box__message {
|
text-align: center;
|
font-size: 16px;
|
line-height: 1.5;
|
}
|
.confirm-dialog .el-message-box__status {
|
font-size: 24px !important;
|
}
|
/* 数量输入框样式 */
|
.quantity-input {
|
width: 100px;
|
}
|
/* 删除按钮样式 */
|
.delete-btn {
|
color: #F56C6C;
|
border-color: #F56C6C;
|
}
|
.delete-btn:hover {
|
background-color: #F56C6C;
|
color: white;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">
|
<!-- 搜索栏 -->
|
<div class="search-container" style="width: 100%;">
|
<el-form :inline="true" class="search-form">
|
<div class="search-item">
|
<span class="search-label">订单号:</span>
|
<el-input
|
v-model="searchForm.orderNo"
|
placeholder="请输入订单号"
|
clearable
|
style="width: 150px;"
|
@keyup.enter.native="handleSearch"
|
></el-input>
|
</div>
|
<div class="search-item">
|
<span class="search-label">客户名称:</span>
|
<el-input
|
v-model="searchForm.cstmrName"
|
placeholder="请输入客户名称"
|
clearable
|
style="width: 180px;"
|
@keyup.enter.native="handleSearch"
|
></el-input>
|
</div>
|
<div class="search-item">
|
<span class="search-label">状态:</span>
|
<el-select
|
v-model="searchForm.settle"
|
placeholder="请选择状态"
|
clearable
|
style="width: 150px;"
|
>
|
<el-option label="初始化" value="0"></el-option>
|
<el-option label="待处理" value="1"></el-option>
|
<el-option label="作业中" value="2"></el-option>
|
<el-option label="已取消" value="3"></el-option>
|
<el-option label="已完成" value="4"></el-option>
|
<el-option label="准备取消" value="5"></el-option>
|
<el-option label="上报完成" value="6"></el-option>
|
<el-option label="数据异常" value="7"></el-option>
|
<el-option label="审核完成" value="8"></el-option>
|
<el-option label="提交完成" value="9"></el-option>
|
<el-option label="保存完成" value="10"></el-option>
|
<el-option label="上报完成未完结" value="98"></el-option>
|
<el-option label="重新下发" value="99"></el-option>
|
</el-select>
|
</div>
|
<div class="search-actions">
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
</div>
|
</el-form>
|
</div>
|
|
<!-- 主表A -->
|
<div class="table-container" style="width: 100%;">
|
<el-table
|
border
|
ref="mainTable"
|
:data="tableDataA"
|
highlight-current-row
|
style="width: 100%"
|
v-loading="loading"
|
@sort-change="handleSortChange">
|
<el-table-column prop="orderNo" label="订单号" width="120" align="center" sortable="custom"></el-table-column>
|
<!-- <el-table-column prop="itemName" label="组货单号" width="120" align="center" sortable="custom"></el-table-column>-->
|
<el-table-column prop="cstmrName" label="货主" min-width="120" align="center"></el-table-column>
|
<el-table-column prop="settle$" label="状态" min-width="100" align="center" :formatter="formatStatus"></el-table-column>
|
<el-table-column prop="createTime" label="创建时间" min-width="100" align="center" :formatter="formatDateColumn"></el-table-column>
|
<el-table-column prop="updateTime" label="更新日期" min-width="100" align="center" :formatter="formatDateColumn"></el-table-column>
|
<el-table-column label="操作" width="150" align="center" fixed="right">
|
<template slot-scope="scope">
|
<div class="operation-cell">
|
<el-button
|
type="primary"
|
size="mini"
|
@click="showDetail(scope.row)">
|
明细查看
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页控件 -->
|
<div class="pagination-container">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
|
<!-- 子表B详情弹窗 -->
|
<el-dialog
|
title="明细"
|
:visible.sync="detailDialogVisible"
|
width="80%"
|
class="detail-dialog"
|
@close="closeDetailDialog">
|
<div v-if="currentRow">
|
<h3>订单主表 (订单号: {{ currentRow.orderNo }})</h3>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="客户名称">{{ currentRow.cstmrName }}</el-descriptions-item>
|
<el-descriptions-item label="状态">{{ formatStatus(currentRow)}}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ formatDate(currentRow.createTime) }}</el-descriptions-item>
|
<el-descriptions-item label="备注">{{ currentRow.memo || '无' }}</el-descriptions-item>
|
</el-descriptions>
|
|
<h3 style="margin-top: 20px;">订单明细</h3>
|
<!-- 明细表格搜索栏 -->
|
<div class="search-container" style="margin: 20px 0; padding: 15px; background: #f5f7fa; border-radius: 4px;">
|
<el-form :inline="true" class="search-form">
|
<div class="search-item">
|
<span class="search-label">客户SKU:</span>
|
<el-input
|
v-model="detailSearch.standby3"
|
placeholder="请输入客户SKU"
|
clearable
|
style="width: 180px;"
|
@input="handleDetailSearch"
|
@keyup.enter.native="handleDetailSearch"
|
></el-input>
|
</div>
|
<div class="search-item">
|
<span class="search-label">采购单号:</span>
|
<el-input
|
v-model="detailSearch.boxType3"
|
placeholder="请输入采购单号"
|
clearable
|
style="width: 180px;"
|
@input="handleDetailSearch"
|
@keyup.enter.native="handleDetailSearch"
|
></el-input>
|
</div>
|
<!-- <div class="search-actions" style="margin-left: auto;">-->
|
<!-- <el-button type="primary" icon="el-icon-search" @click="handleDetailSearch">搜索</el-button>-->
|
<!-- <el-button icon="el-icon-refresh" @click="handleDetailReset">重置</el-button>-->
|
<!-- </div>-->
|
</el-form>
|
</div>
|
<el-table
|
border
|
ref="detailTable"
|
:data="filteredTableDataB"
|
style="width: 100%"
|
v-loading="detailLoading">
|
<el-table-column prop="id" label="id" min-width="50" align="center"></el-table-column>
|
<el-table-column prop="matnr" label="商品编号" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="maktx" label="名称" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="standby1" label="客户PO" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="standby2" label="UPC" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="standby3" label="客户SKU" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="boxType3" label="采购单号" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="anfme" label="数量" min-width="80" align="center">
|
<template slot-scope="scope">
|
<el-input-number
|
v-model="scope.row.anfmeRow"
|
:min="0"
|
:precision="0"
|
controls-position="right"
|
size="small"
|
class="quantity-input"
|
@change="handleQuantityChange(scope.row, $event)"
|
></el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column prop="anfme" label="erp下发数量" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="sortingAnfme" label="待下发数量" min-width="80" align="center"></el-table-column>
|
<!-- <el-table-column prop="status" label="状态" min-width="100" align="center" :formatter="formatStatusB"></el-table-column>-->
|
<el-table-column prop="inspect" label="状态" min-width="100" align="center" :formatter="formatStatusC"></el-table-column>
|
<!-- 修改为删除列 -->
|
<el-table-column label="是否上报" width="120" align="center" fixed="right">
|
<template slot-scope="scope">
|
<div class="operation-cell">
|
<el-button v-if="scope.row.inspect === 1"
|
type="primary"
|
size="mini"
|
@click="handleModifyN(scope.row)">
|
取消下发项
|
</el-button>
|
<el-button v-if="scope.row.inspect === 0"
|
type="primary"
|
size="mini"
|
@click="handleModifyY(scope.row)">
|
加入下发项
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="操作" width="100" align="center" fixed="right">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <div class="operation-cell">-->
|
<!-- <el-button-->
|
<!-- class="delete-btn"-->
|
<!-- type="danger"-->
|
<!-- size="mini"-->
|
<!-- icon="el-icon-delete"-->
|
<!-- @click="handleDelete(scope.row)"-->
|
<!-- ></el-button>-->
|
<!-- </div>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
</el-table>
|
|
<!-- 子表分页 -->
|
<div class="pagination-container">
|
<el-pagination
|
@size-change="handleDetailSizeChange"
|
@current-change="handleDetailCurrentChange"
|
:current-page="detailCurrentPage"
|
:page-sizes="[5, 10, 20]"
|
:page-size="detailPageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="detailTotal">
|
</el-pagination>
|
</div>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button
|
class="confirm-report-btn"
|
@click="showConfirmDialog"
|
:loading="reportLoading">
|
{{ settleA === 17 ? '再次下发' : '确认下发' }}
|
</el-button>
|
<el-button @click="closeDetailDialog">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
// 搜索表单
|
searchForm: {
|
orderNo: '',
|
cstmrName: '',
|
settle: ''
|
},
|
detailSearch: {
|
standby3: '',
|
boxType3: ''
|
},
|
// 新增：用于缓存原始明细数据（分页加载后的完整当前页数据）
|
originalTableDataB: [],
|
// 排序相关
|
orderByField: '',
|
orderByType: 'asc',
|
// 主表A数据
|
tableDataA: [],
|
// 子表B数据
|
tableDataB: [],
|
// 分页相关
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
// 详情弹窗控制
|
detailDialogVisible: false,
|
currentRow: null,
|
// 子表分页
|
detailCurrentPage: 1,
|
settleA: 1,
|
detailPageSize: 5,
|
detailTotal: 0,
|
// 加载状态
|
loading: false,
|
detailLoading: false,
|
reportLoading: false,
|
// 存储修改后的数量
|
modifiedQuantities: {},
|
// 存储删除的记录
|
deletedRecords: []
|
},
|
created() {
|
this.init();
|
},
|
computed: {
|
// 明细表格过滤后的数据
|
filteredTableDataB() {
|
if (!this.originalTableDataB || this.originalTableDataB.length === 0) {
|
return [];
|
}
|
|
let data = this.originalTableDataB;
|
|
// 客户SKU 模糊搜索（不区分大小写）
|
if (this.detailSearch.standby3 && this.detailSearch.standby3.trim()) {
|
const keyword = this.detailSearch.standby3.trim().toLowerCase();
|
data = data.filter(item =>
|
item.standby3 && item.standby3.toLowerCase().includes(keyword)
|
);
|
}
|
|
// 采购单号 模糊搜索
|
if (this.detailSearch.boxType3 && this.detailSearch.boxType3.trim()) {
|
const keyword = this.detailSearch.boxType3.trim().toLowerCase();
|
data = data.filter(item =>
|
item.boxType3 && item.boxType3.toLowerCase().includes(keyword)
|
);
|
}
|
|
return data;
|
}
|
},
|
methods: {
|
init() {
|
this.getTableDataA();
|
|
// 每5秒自动刷新数据
|
setInterval(() => {
|
this.getTableDataA();
|
}, 10000);
|
},
|
handleDetailSearch() {
|
// 触发计算属性重新计算即可，无需额外操作
|
this.$forceUpdate(); // 可选，确保立即刷新（通常不需要）
|
},
|
|
// 明细搜索重置
|
handleDetailReset() {
|
this.detailSearch.standby3 = '';
|
this.detailSearch.boxType3 = '';
|
// 重置后表格自动恢复原数据
|
},
|
|
// 获取主表A数据
|
getTableDataA() {
|
let that = this;
|
that.loading = true;
|
|
let params = {
|
curr: that.currentPage,
|
limit: that.pageSize
|
};
|
|
if (that.orderByField) {
|
params.orderByField = that.orderByField;
|
params.orderByType = that.orderByType;
|
}
|
|
Object.keys(that.searchForm).forEach(key => {
|
if (that.searchForm[key] !== '') {
|
if (key === 'orderNo'){
|
params['order_no'] = that.searchForm[key];
|
} else if (key === 'cstmrName'){
|
params['cstmr_name'] = that.searchForm[key];
|
} else {
|
params[key] = that.searchForm[key];
|
}
|
}
|
});
|
|
$.ajax({
|
url: baseUrl + "/order/pakin/order/head/page/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: params,
|
dataType: 'json',
|
method: 'get',
|
success: function (res) {
|
if (res.code === 200 || res.success) {
|
that.tableDataA = res.data.records || [];
|
that.total = res.data.total || 0;
|
} else {
|
that.$message.error(res.msg || '获取数据失败');
|
that.tableDataA = [];
|
that.total = 0;
|
}
|
that.loading = false;
|
},
|
error: function(xhr, status, error) {
|
that.loading = false;
|
that.$message.error('网络请求失败');
|
console.error('API调用失败:', error);
|
// 模拟数据
|
that.mockTableAData();
|
}
|
});
|
},
|
// 获取子表B数据
|
getTableDataB(orderNo) {
|
let that = this;
|
that.detailLoading = true;
|
let params = {
|
order_no: orderNo,
|
curr: that.detailCurrentPage,
|
limit: that.detailPageSize
|
};
|
$.ajax({
|
url: baseUrl + "/order/pakin/orderDetl/list/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: params,
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'get',
|
success: function (res) {
|
if (res.code === 200 || res.success) {
|
that.tableDataB = res.data.records || [];
|
that.detailTotal = res.data.total || 0;
|
that.originalTableDataB = [...res.data.records || []]; // 新增：保存原始数据用于过滤
|
// ============ 新增：设置数量默认值为 ERP下发数量 - 待下发数量 ============
|
that.tableDataB.forEach(item => {
|
// 假设后端返回的字段名是 erpAnfme（ERP下发数量）和 sortingAnfme（待下发数量）
|
// 如果字段名不同，请替换成实际的
|
const erpQty = parseInt(item.anfme) || 0; // ERP下发数量
|
const pendingQty = parseInt(item.sortingAnfme) || 0; // 待下发数量
|
|
// 计算默认数量：ERP总量 - 已待下发 = 还可修改/下发的数量
|
const defaultQty = erpQty - pendingQty;
|
|
// 设置输入框默认值（确保 >= 0）
|
that.$set(item, 'anfmeRow', Math.max(0, defaultQty));
|
|
// 同时初始化 modifiedQuantities 缓存
|
const itemKey = that.getItemKey(item);
|
that.$set(that.modifiedQuantities, itemKey, Math.max(0, defaultQty));
|
});
|
// ==========================================================================
|
|
} else {
|
that.$message.error(res.msg || '获取数据失败');
|
that.tableDataB = [];
|
that.detailTotal = 0;
|
}
|
that.detailLoading = false;
|
},
|
error: function() {
|
that.detailLoading = false;
|
// 模拟数据也加上默认值逻辑（可选）
|
that.mockTableBData();
|
// 如果你有 mock 数据，也建议在这里加上同样的计算逻辑
|
}
|
});
|
},
|
// // 获取子表B数据
|
// getTableDataB(orderNo) {
|
// let that = this;
|
// that.detailLoading = true;
|
//
|
// let params = {
|
// order_no: orderNo,
|
// curr: that.detailCurrentPage,
|
// limit: that.detailPageSize
|
// };
|
//
|
// $.ajax({
|
// url: baseUrl + "/order/pakin/orderDetl/list/auth",
|
// headers: {
|
// 'token': localStorage.getItem('token')
|
// },
|
// data: params,
|
// dataType: 'json',
|
// contentType: 'application/json;charset=UTF-8',
|
// method: 'get',
|
// success: function (res) {
|
// if (res.code === 200 || res.success) {
|
// that.tableDataB = res.data.records || [];
|
// that.detailTotal = res.data.total || 0;
|
//
|
// // 初始化数量缓存
|
// that.modifiedQuantities = {};
|
// that.tableDataB.forEach(item => {
|
// const itemKey = that.getItemKey(item);
|
// that.$set(that.modifiedQuantities, itemKey, item.anfme);
|
// });
|
// } else {
|
// that.$message.error(res.msg || '获取数据失败');
|
// that.tableDataB = [];
|
// that.detailTotal = 0;
|
// }
|
// that.detailLoading = false;
|
// },
|
// error: function() {
|
// that.detailLoading = false;
|
// // 模拟数据
|
// that.mockTableBData();
|
// }
|
// });
|
// },
|
|
// 获取商品唯一标识
|
getItemKey(item) {
|
return item.matnr + '_' + (item.batch || '') + '_' + (item.standby1 || '');
|
},
|
|
// 处理删除按钮点击事件
|
handleDelete(row) {
|
if (!this.currentRow) {
|
this.$message.error('没有选择主表数据');
|
return;
|
}
|
|
const groupOrderNo = this.currentRow.itemName;
|
const matnr = row.matnr;
|
const maktx = row.maktx;
|
const itemKey = this.getItemKey(row);
|
|
this.$confirm(
|
`确定要删除组货单 <strong style="color: #409EFF;">${groupOrderNo}</strong> 中的商品 <strong style="color: #409EFF;">${matnr} - ${maktx}</strong> 吗？`,
|
'确认删除',
|
{
|
confirmButtonText: '确认删除',
|
cancelButtonText: '取消',
|
type: 'warning',
|
dangerouslyUseHTMLString: true
|
}
|
).then(() => {
|
// 从表格中移除该行
|
const index = this.tableDataB.findIndex(item =>
|
this.getItemKey(item) === itemKey
|
);
|
if (index !== -1) {
|
// 保存删除记录
|
this.deletedRecords.push({
|
...this.tableDataB[index],
|
deleteTime: new Date().toISOString()
|
});
|
|
// 从表格中删除
|
this.tableDataB.splice(index, 1);
|
this.detailTotal -= 1;
|
|
// 从修改缓存中删除
|
if (this.modifiedQuantities[itemKey]) {
|
delete this.modifiedQuantities[itemKey];
|
}
|
|
this.$message({
|
message: '删除成功',
|
type: 'success',
|
duration: 2000
|
});
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 处理数量修改
|
handleQuantityChange(row, newValue) {
|
if (!row || !row.matnr) return;
|
|
const itemKey = this.getItemKey(row);
|
const oldValue = row.anfme;
|
|
// 验证新值
|
if (isNaN(newValue) || newValue < 0) {
|
this.$message.warning('请输入有效的数量');
|
this.$set(row, 'anfme', oldValue);
|
this.modifiedQuantities[itemKey] = oldValue;
|
return;
|
}
|
|
// 验证ERP下发数量
|
if (row.anfme && newValue > parseInt(row.anfme)) {
|
this.$message.warning('修改数量不能大于ERP下架数量');
|
this.$set(row, 'anfme', oldValue);
|
this.modifiedQuantities[itemKey] = oldValue;
|
return;
|
}
|
|
// 更新缓存
|
this.modifiedQuantities[itemKey] = parseInt(newValue);
|
this.$set(row, 'anfme', parseInt(newValue));
|
|
this.$message.success('数量已修改');
|
},
|
|
// 处理修改按钮点击事件
|
handleModifyY(row) {
|
if (!this.currentRow) {
|
this.$message.error('没有选择主表数据');
|
return;
|
}
|
|
const orderNo = this.currentRow.orderNo; // 订单号
|
const anfme = row.anfme; // 数量
|
const id = row.id; // 箱号
|
|
this.$confirm(
|
`确定将订单号： <strong style="color: #409EFF;">${orderNo}</strong> 中的id： <strong style="color: #409EFF;">${id}</strong> 添加到下发列吗？`,
|
'确认修改',
|
{
|
confirmButtonText: '确认修改',
|
cancelButtonText: '取消',
|
type: 'warning',
|
dangerouslyUseHTMLString: true
|
}
|
).then(() => {
|
this.submitModify(orderNo, id, anfme,1);
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消修改'
|
});
|
});
|
},
|
|
|
// 处理修改按钮点击事件
|
handleModifyN(row) {
|
if (!this.currentRow) {
|
this.$message.error('没有选择主表数据');
|
return;
|
}
|
|
const orderNo = this.currentRow.orderNo; // 订单号
|
const anfme = 0.0; // 数量
|
const id = row.id; // 箱号
|
|
this.$confirm(
|
`确定将订单号： <strong style="color: #409EFF;">${orderNo}</strong> 中的id： <strong style="color: #409EFF;">${id}</strong> 取消下发列吗？`,
|
'确认修改',
|
{
|
confirmButtonText: '确认修改',
|
cancelButtonText: '取消',
|
type: 'warning',
|
dangerouslyUseHTMLString: true
|
}
|
).then(() => {
|
this.submitModify(orderNo, id, anfme,0);
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消修改'
|
});
|
});
|
},
|
|
// 提交修改到后台
|
submitModify(orderNo, id, anfme, inspect) {
|
const loadingInstance = this.$loading({
|
lock: true,
|
text: '提交修改中...',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
|
$.ajax({
|
url: baseUrl + "/order/pakin/orderDetl/batch/report/auth",
|
headers: { 'token': localStorage.getItem('token') },
|
data: top.reObject({
|
orderNo: orderNo,
|
id: id,
|
anfme: anfme,
|
inspect: inspect, // 0 或 1
|
}),
|
method: 'POST',
|
success: (res) => {
|
loadingInstance.close();
|
if (res.code === 200 || res.success) {
|
this.$message({
|
message: `修改成功！订单号: ${orderNo}, id: ${id}`,
|
type: 'success',
|
duration: 3000
|
});
|
this.getTableDataB(orderNo);//
|
// 不需要重新加载整页数据（避免丢失用户修改的数量）
|
} else {
|
this.$message.error(res.msg || '修改失败');
|
}
|
},
|
error: (error) => {
|
loadingInstance.close();
|
console.error('修改失败:', error);
|
this.$message.error('修改失败，请检查网络连接');
|
}
|
});
|
},
|
|
// 显示确认对话框
|
showConfirmDialog() {
|
if (!this.currentRow) {
|
this.$message.error('没有选择要上报的数据');
|
return;
|
}
|
|
const orderNo = this.currentRow.orderNo;
|
const remainingCount = this.tableDataB.length;
|
const modifiedCount = Object.keys(this.modifiedQuantities).filter(key => {
|
const item = this.tableDataB.find(item => this.getItemKey(item) === key);
|
return item && item.anfme !== this.modifiedQuantities[key];
|
}).length;
|
|
let message = `是否确认下发订单号 <strong style="color: #F56C6C; font-size: 16px;">${orderNo}</strong>?<br/><br/>`;
|
// message += `将提交以下数据：<br/>`;
|
// message += `- 剩余商品数量: ${remainingCount} 个<br/>`;
|
// message += `- 修改数量: ${modifiedCount} 个<br/>`;
|
// message += `- 删除商品: ${this.deletedRecords.length} 个<br/><br/>`;
|
message += `此操作不可逆，确认继续吗？`;
|
|
this.$confirm(
|
message,
|
'确认下发',
|
{
|
confirmButtonText: '确认下发',
|
cancelButtonText: '取消',
|
type: 'warning',
|
dangerouslyUseHTMLString: true,
|
customClass: 'confirm-dialog',
|
confirmButtonClass: 'confirm-report-btn',
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
instance.confirmButtonLoading = true;
|
this.confirmReport(orderNo, done);
|
} else {
|
done();
|
}
|
}
|
}
|
).then(() => {
|
// 确认上报后的处理在beforeClose中完成
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
});
|
});
|
},
|
|
// 确认上报
|
confirmReport(orderNo, done) {
|
this.reportLoading = true;
|
|
// // 收集要上报的数据
|
// const reportData = this.tableDataB.map(item => {
|
// const itemKey = this.getItemKey(item);
|
// return {
|
// orderNo: groupOrderNo, // 组货单号
|
// matnr: item.matnr, // 商品编号
|
// maktx: item.maktx, // 商品名称
|
// standby1: item.standby1, // 客户PO
|
// standby2: item.standby2, // UPC
|
// standby3: item.standby3, // 客户SKU
|
// boxType3: item.boxType3, // 采购单号
|
// anfme: this.modifiedQuantities[itemKey] || item.anfme, // 数量(使用修改后的数量)
|
// erpAnfme: item.erpAnfme, // ERP下架数量
|
// status: item.status, // 状态
|
// batch: item.batch, // 箱号
|
// // 其他必要参数
|
// modified: this.modifiedQuantities[itemKey] !== undefined // 标记是否修改
|
// };
|
// });
|
//
|
// // 收集删除记录
|
// const deleteData = this.deletedRecords.map(record => ({
|
// orderNo: groupOrderNo,
|
// matnr: record.matnr,
|
// maktx: record.maktx,
|
// standby1: record.standby1,
|
// standby2: record.standby2,
|
// standby3: record.standby3,
|
// boxType3: record.boxType3,
|
// anfme: record.anfme,
|
// erpAnfme: record.erpAnfme,
|
// status: record.status,
|
// batch: record.batch,
|
// deleteTime: record.deleteTime
|
// }));
|
//
|
// // 构建提交数据
|
// const submitData = {
|
// orderNo: groupOrderNo,
|
// details: reportData,
|
// deletedDetails: deleteData,
|
// totalCount: reportData.length,
|
// modifiedCount: Object.keys(this.modifiedQuantities).length,
|
// deletedCount: deleteData.length
|
// };
|
|
// 调用后台API上报数据
|
$.ajax({
|
url: baseUrl + "/order/pakin/actual/shipment/order/report/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {
|
orderNo: orderNo // 传递订单号
|
},
|
method: 'POST',
|
success: (res) => {
|
this.reportLoading = false;
|
if (typeof done === 'function') {
|
done();
|
}
|
if (res.code === 200 || res.success) {
|
this.$message({
|
message: `订单号 ${orderNo} 下发成功`,
|
type: 'success',
|
duration: 5000,
|
dangerouslyUseHTMLString: true
|
});
|
// 下发成功后关闭弹窗并刷新数据
|
setTimeout(() => {
|
this.closeDetailDialog();
|
this.getTableDataA(); // 刷新主表数据
|
}, 1500);
|
} else {
|
this.$message.error(res.msg || '下发失败');
|
}
|
},
|
error: (error) => {
|
this.reportLoading = false;
|
if (typeof done === 'function') {
|
done();
|
}
|
console.error('下发失败:', error);
|
this.$message.error('下发失败，请检查网络连接');
|
}
|
});
|
},
|
|
// 表格排序变化
|
handleSortChange(column) {
|
if (column.prop) {
|
this.orderByField = column.prop;
|
this.orderByType = column.order === 'ascending' ? 'asc' : 'desc';
|
} else {
|
this.orderByField = '';
|
this.orderByType = 'asc';
|
}
|
this.currentPage = 1;
|
this.getTableDataA();
|
},
|
|
// 搜索处理
|
handleSearch() {
|
this.currentPage = 1;
|
this.orderByField = '';
|
this.orderByType = 'asc';
|
this.getTableDataA();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
this.searchForm = {
|
orderNo: '',
|
cstmrName: '',
|
settle: ''
|
};
|
this.orderByField = '';
|
this.orderByType = 'asc';
|
this.currentPage = 1;
|
this.getTableDataA();
|
},
|
|
// 显示详情弹窗
|
showDetail(row) {
|
this.currentRow = row;
|
this.detailDialogVisible = true;
|
this.detailCurrentPage = 1;
|
this.settleA = row.settle;
|
this.modifiedQuantities = {};
|
this.deletedRecords = [];
|
|
// 新增：清空明细搜索
|
this.detailSearch.standby3 = '';
|
this.detailSearch.boxType3 = '';
|
|
this.getTableDataB(row.orderNo);
|
},
|
|
// 关闭详情弹窗
|
closeDetailDialog() {
|
this.detailDialogVisible = false;
|
this.currentRow = null;
|
this.tableDataB = [];
|
this.reportLoading = false;
|
this.modifiedQuantities = {};
|
this.deletedRecords = [];
|
},
|
|
// 主表分页大小改变
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.currentPage = 1;
|
this.getTableDataA();
|
},
|
|
// 主表页码改变
|
handleCurrentChange(val) {
|
this.currentPage = val;
|
this.getTableDataA();
|
},
|
|
// 子表分页大小改变
|
handleDetailSizeChange(val) {
|
this.detailPageSize = val;
|
this.detailCurrentPage = 1;
|
if (this.currentRow) {
|
this.getTableDataB(this.currentRow.orderNo);
|
}
|
},
|
|
// 子表页码改变
|
handleDetailCurrentChange(val) {
|
this.detailCurrentPage = val;
|
if (this.currentRow) {
|
this.getTableDataB(this.currentRow.orderNo);
|
}
|
},
|
|
// 格式化状态显示
|
formatStatus(row) {
|
const statusMap = {
|
0: '初始化',
|
1: '待处理',
|
2: '作业中',
|
3: '已取消',
|
4: '已完成',
|
5: '准备取消',
|
6: '上报完成',
|
7: '数据异常',
|
8: '审核完成',
|
9: '提交完成',
|
10: '保存完成',
|
98: '异常',
|
99: '废弃'
|
};
|
return statusMap[row.settle] || row.settle || '未知';
|
},
|
|
// 格式化状态显示
|
formatStatusB(row) {
|
const statusMap = {
|
0: '初始化',
|
1: '待处理',
|
2: '作业中',
|
3: '已取消',
|
4: '已完成',
|
5: '准备取消',
|
6: '上报完成',
|
7: '数据异常',
|
8: '审核完成',
|
9: '提交完成',
|
10: '保存完成',
|
98: '上报完成未完结',
|
99: '重新下发'
|
};
|
return statusMap[row.status] || row.status || '未知';
|
},
|
|
// 格式化状态显示
|
formatStatusC(row) {
|
const statusMap = {
|
0: '不下发',
|
1: '待下发'
|
};
|
return statusMap[row.inspect] || row.inspect || '未知';
|
},
|
|
// 模拟主表数据
|
mockTableAData() {
|
this.tableDataA = [
|
{
|
itemName: '890506',
|
orderNo: '111804',
|
cstmrName: '测试',
|
settle: 2,
|
createTime: '2025-11-18T16:01:11.000+0000',
|
updateTime: '2025-11-18T16:01:11.000+0000',
|
memo: '测试数据'
|
}
|
];
|
this.total = 1;
|
this.loading = false;
|
},
|
|
// 模拟子表数据
|
mockTableBData() {
|
this.tableDataB = [
|
{
|
matnr: '测试',
|
maktx: '12inRealisticPlus',
|
standby1: 'hDogToy',
|
standby2: 'boarL',
|
standby3: '890506',
|
boxType3: '1',
|
anfme: 1,
|
erpAnfme: 1,
|
status: 2,
|
batch: 'L241034114'
|
}
|
];
|
this.detailTotal = 1;
|
this.detailLoading = false;
|
|
// 初始化数量缓存
|
this.modifiedQuantities = {};
|
this.tableDataB.forEach(item => {
|
const itemKey = this.getItemKey(item);
|
this.$set(this.modifiedQuantities, itemKey, item.anfme);
|
});
|
},
|
|
// 为表格列添加格式化方法
|
formatDateColumn(row, column, cellValue) {
|
return this.formatDate(cellValue);
|
},
|
|
// 格式化日期显示
|
formatDate(dateStr) {
|
if (!dateStr) return '';
|
|
try {
|
const date = new Date(dateStr);
|
|
if (isNaN(date.getTime())) {
|
return dateStr;
|
}
|
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
} catch (error) {
|
console.error('日期格式化错误:', error);
|
return dateStr;
|
}
|
}
|
}
|
});
|
</script>
|
</body>
|
</html>
|
