<!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;
|
}
|
</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.uuid"
|
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-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-select
|
v-model="searchForm.settle"
|
placeholder="请选择状态"
|
clearable
|
style="width: 150px;"
|
>
|
<el-option label="全部" value=""></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="9"></el-option>
|
<el-option label="就绪" value="10"></el-option>
|
<el-option label="生成实际组货单中。请等待..." value="11"></el-option>
|
<el-option label="生成实际组货单成功" value="12"></el-option>
|
<el-option label="生成实际组货单失败" value="13"></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="uuid" label="组货单号" width="120" align="center" sortable="custom"></el-table-column>
|
<el-table-column prop="orderNo" label="订单编号" min-width="140" align="center"></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="totalFee" label="合计金额" min-width="100" align="center" :formatter="formatCurrency"></el-table-column>-->
|
<!-- <el-table-column prop="createTime" label="创建时间" min-width="140" align="center" sortable="custom"></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.uuid }})</h3>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="订单编号">{{ currentRow.orderNo }}</el-descriptions-item>
|
<el-descriptions-item label="客户名称">{{ currentRow.cstmrName }}</el-descriptions-item>
|
<el-descriptions-item label="状态">{{ currentRow.settle$ }}</el-descriptions-item>
|
<el-descriptions-item label="合计金额">{{ formatCurrency(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>
|
<el-table
|
border
|
:data="tableDataB"
|
style="width: 100%"
|
v-loading="detailLoading">
|
<el-table-column prop="matnr" label="规格" min-width="120" align="center"></el-table-column>
|
<el-table-column prop="batch" label="箱号" min-width="80" align="center"></el-table-column>
|
<el-table-column prop="model" label="卷号" min-width="100" align="center" ></el-table-column>
|
<!-- <el-table-column prop="totalPrice" label="金额" min-width="100" align="center" :formatter="formatCurrency"></el-table-column>-->
|
<el-table-column prop="origin" label="位置" min-width="100" align="center"></el-table-column>
|
<el-table-column prop="danger" label="待判" min-width="100" align="center"></el-table-column>
|
<el-table-column prop="memo" label="备注" min-width="100" align="center"></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">
|
确认上报
|
</el-button>
|
<el-button @click="closeDetailDialog">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
// 搜索表单
|
searchForm: {
|
uuid: '',
|
cstmr_name: '',
|
settle: '',
|
order_no: ''
|
},
|
// 排序相关
|
orderByField: '',
|
orderByType: 'asc',
|
// 主表A数据
|
tableDataA: [],
|
// 子表B数据
|
tableDataB: [],
|
// 分页相关
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
// 详情弹窗控制
|
detailDialogVisible: false,
|
currentRow: null,
|
// 子表分页
|
detailCurrentPage: 1,
|
detailPageSize: 5,
|
detailTotal: 0,
|
// 加载状态
|
loading: false,
|
detailLoading: false,
|
reportLoading: false
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.getTableDataA();
|
|
// 每5秒自动刷新数据
|
setInterval(() => {
|
this.getTableDataA();
|
}, 10000);
|
},
|
|
// 获取主表A数据 - 使用新的API
|
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 if (key === 'settle$'){
|
params['settle'] = that.searchForm[key];
|
} else {
|
params[key] = that.searchForm[key];
|
}
|
}
|
});
|
|
$.ajax({
|
// url: baseUrl + "/order/pakout/order/cargo/grouping/auth/v1",
|
url: baseUrl + "/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.message || '获取数据失败');
|
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
|
};
|
|
// 模拟API调用 - 根据实际业务调整API地址
|
$.ajax({
|
// url: baseUrl + "/order/pakout/orderDetl/cargo/grouping/auth",
|
url: baseUrl + "/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;
|
} else {
|
that.$message.error(res.message || '获取数据失败');
|
that.tableDataB = [];
|
that.detailTotal = 0;
|
}
|
that.detailLoading = false;
|
},
|
error: function() {
|
that.detailLoading = false;
|
// 实际项目中应使用真实API，这里使用模拟数据
|
that.mockTableBData(uuid);
|
}
|
});
|
},
|
|
// 表格排序变化
|
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();
|
},
|
|
// 显示二次确认对话框
|
showConfirmDialog() {
|
if (!this.currentRow) {
|
this.$message.error('没有选择要上报的数据');
|
return;
|
}
|
|
const groupOrderNo = this.currentRow.uuid;
|
|
this.$confirm(
|
`是否确认开始上报组货单号 <strong style="color: #F56C6C; font-size: 16px;">${groupOrderNo}</strong>?<br/><br/>将生成实际组货单，单一组货单号只能操作一次!!!`,
|
'确认上报',
|
{
|
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(groupOrderNo, done);
|
} else {
|
done();
|
}
|
}
|
}
|
).then(() => {
|
// 确认上报后的处理在beforeClose中完成
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
});
|
});
|
},
|
|
// 确认上报
|
confirmReport(groupOrderNo, done) {
|
this.reportLoading = true;
|
|
// 调用后台API上报数据
|
$.ajax({
|
url: baseUrl + "/api/report/confirm",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: JSON.stringify({
|
uuid: groupOrderNo // 传递组货单号
|
}),
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'post',
|
success: (res) => {
|
this.reportLoading = false;
|
if (typeof done === 'function') {
|
done();
|
}
|
|
if (res.code === 200 || res.success) {
|
this.$message({
|
message: `组货单号 ${groupOrderNo} 上报成功`,
|
type: 'success',
|
duration: 3000
|
});
|
// 上报成功后关闭弹窗并刷新数据
|
setTimeout(() => {
|
this.closeDetailDialog();
|
this.getTableDataA(); // 刷新主表数据
|
}, 1500);
|
} else {
|
this.$message.error(res.message || '上报失败');
|
}
|
},
|
error: (error) => {
|
this.reportLoading = false;
|
if (typeof done === 'function') {
|
done();
|
}
|
console.error('上报失败:', error);
|
this.$message.error('上报失败，请检查网络连接');
|
}
|
});
|
},
|
|
// 搜索处理
|
handleSearch() {
|
this.currentPage = 1;
|
this.orderByField = '';
|
this.orderByType = 'asc';
|
this.getTableDataA();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
this.searchForm = {
|
uuid: '',
|
cstmr_name: '',
|
settle: '',
|
order_no: ''
|
};
|
this.orderByField = '';
|
this.orderByType = 'asc';
|
this.currentPage = 1;
|
this.getTableDataA();
|
},
|
|
// 显示详情弹窗
|
showDetail(row) {
|
this.currentRow = row;
|
this.detailDialogVisible = true;
|
this.detailCurrentPage = 1;
|
this.getTableDataB(row.orderNo);
|
},
|
|
// 关闭详情弹窗
|
closeDetailDialog() {
|
this.detailDialogVisible = false;
|
this.currentRow = null;
|
this.tableDataB = [];
|
this.reportLoading = false;
|
},
|
|
// 主表分页大小改变
|
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) {
|
if (row.settle === 1) {
|
return '正常';
|
} else if (row.settle === 0) {
|
return '禁用';
|
} else if (row.settle === 0) {
|
return '禁用';
|
} else if (row.settle === 0) {
|
return '禁用';
|
} else if (row.settle === 0) {
|
return '禁用';
|
} else {
|
return row.settle || '未知';
|
}
|
},
|
|
// 格式化金额显示
|
formatCurrency(row) {
|
if (row.totalFee) {
|
return '¥' + parseFloat(row.totalFee).toFixed(2);
|
}
|
return '¥0.00';
|
},
|
|
// 格式化日期显示
|
formatDate(dateStr) {
|
if (!dateStr) return '';
|
// 简单的日期格式化，可以根据实际格式调整
|
return dateStr;
|
},
|
|
// 模拟主表数据 - 实际项目中应删除
|
mockTableAData() {
|
this.tableDataA = [
|
{
|
uuid: 'ZH1001',
|
orderNo: 'ORDER2024001',
|
cstmrName: '示例客户A',
|
settle: 1,
|
totalFee: 1500.00,
|
createTime: '2024-01-15 10:30:00',
|
memo: '测试数据'
|
},
|
{
|
uuid: 'ZH1002',
|
orderNo: 'ORDER2024002',
|
cstmrName: '示例客户B',
|
settle: 1,
|
totalFee: 2300.50,
|
createTime: '2024-01-16 14:20:00',
|
memo: '测试数据'
|
}
|
];
|
this.total = 2;
|
this.loading = false;
|
},
|
|
// 模拟子表数据 - 实际项目中应删除
|
mockTableBData(uuid) {
|
this.tableDataB = [
|
{ productName: `产品A-${uuid}`, quantity: 2, price: 500.00, totalPrice: 1000.00 },
|
{ productName: `产品B-${uuid}`, quantity: 1, price: 300.50, totalPrice: 300.50 }
|
];
|
this.detailTotal = 2;
|
this.detailLoading = false;
|
}
|
}
|
});
|
</script>
|
</body>
|
</html>
|
