自动化立体仓库 - WMS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
*
lsh
7 天以前 4b8acfd882baf3a4ee09a65ecfe2bbafc900967c 
 src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html


@@ -1,9 +1,8 @@


<!DOCTYPE html>


<html lang="en">




<head>


   <meta charset="UTF-8">


   <title>硫化罐设备</title>


   <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">


@@ -11,107 +10,649 @@


   <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>


<style scoped>




</style>




<body>


   <div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">


      <div style="width: 100%;">


         <el-table border ref="singleTable" :data="tableData" highlight-current-row


                 max-height="350" style="width: 100%">


            <el-table-column property="category" label="类别">


            </el-table-column>


            <el-table-column property="equipmentNo" label="设备号">


            </el-table-column>


            <el-table-column property="categoryOther" label="相关设备类别">


            </el-table-column>


            <el-table-column property="equipmentNoOther" label="相关设备号">


            </el-table-column>


            <el-table-column property="errorM" label="异常描述">


            </el-table-column>


         </el-table>


      </div>


      <div style="width: 100%;">


         <el-table border ref="singleTable" :data="adjacentLocMast" highlight-current-row


                 max-height="350" style="width: 100%">


            <el-table-column property="category" label="当前库位">


            </el-table-column>


            <el-table-column property="equipmentNo" label="当前库位状态">


            </el-table-column>


            <el-table-column property="categoryOther" label="相邻库位">


            </el-table-column>


            <el-table-column property="equipmentNoOther" label="相邻库位状态">


            </el-table-column>


            <el-table-column property="errorM" label="异常描述">


            </el-table-column>


         </el-table>


      </div>




<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>


   <script>


      var app = new Vue({


         el: '#app',


         data: {


            tableData: [],


            adjacentLocMast: []


         },


         created() {


            this.init()


         },


         watch: {


         },


         methods: {


            init() {


               this.getTableData()


               this.getAdjacentLocMast()




               setInterval(() => {


                  this.getTableData()


                  this.getAdjacentLocMast()


                  // this.demoStatus()


               }, 1000)


            },


            confirmEvent() {


            },


            cancelEvent() {


            },


            getTableData() {


               let that = this;


               $.ajax({


                  url: baseUrl + "/error/device/task/depthAndShallowness",


                  headers: {


                     'token': localStorage.getItem('token')


                  },


                  data: {},


                  dataType: 'json',


                  contentType: 'application/json;charset=UTF-8',


                  method: 'post',


                  success: function (res) {


                     that.tableData = res.data


                  }


               });


            },


            getAdjacentLocMast() {


               let that = this;


               $.ajax({


                  url: baseUrl + "/error/device/locSts/adjacentLocMast",


                  headers: {


                     'token': localStorage.getItem('token')


                  },


                  data: {},


                  dataType: 'json',


                  contentType: 'application/json;charset=UTF-8',


                  method: 'post',


                  success: function (res) {


                     that.adjacentLocMast = res.data


                  }


               });


   <!-- 主表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;


            }


         }


      })


   </script>


</body>




            // 添加搜索参数


            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>