自动化立体仓库 - WMS系统
*
lsh
5 天以前 2ce9436d64aaee5d9743e34f89e64f2207cc8583
src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html
@@ -104,7 +104,7 @@
         <div class="search-item">
            <span class="search-label">组货单号:</span>
            <el-input
                  v-model="searchForm.A1"
                  v-model="searchForm.itemName"
                  placeholder="请输入组货单号"
                  clearable
                  style="width: 150px;"
@@ -114,7 +114,7 @@
         <div class="search-item">
            <span class="search-label">客户名称:</span>
            <el-input
                  v-model="searchForm.A2"
                  v-model="searchForm.cstmrName"
                  placeholder="请输入客户名称"
                  clearable
                  style="width: 180px;"
@@ -123,23 +123,23 @@
         </div>
         <div class="search-item">
            <span class="search-label">状态:</span>
            <el-input
                  v-model="searchForm.A3"
                  placeholder="请输入状态"
            <el-select
                  v-model="searchForm.settle"
                  placeholder="请选择状态"
                  clearable
                  style="width: 150px;"
                  @keyup.enter.native="handleSearch"
            ></el-input>
         </div>
         <div class="search-item">
            <span class="search-label">属性A4:</span>
            <el-input
                  v-model="searchForm.A4"
                  placeholder="请输入属性A4"
                  clearable
                  style="width: 150px;"
                  @keyup.enter.native="handleSearch"
            ></el-input>
            >
               <el-option label="全部" value=""></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="15"></el-option>
               <el-option label="上报完成" value="16"></el-option>
               <el-option label="上报失败" value="17"></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>
@@ -156,11 +156,11 @@
            :data="tableDataA"
            highlight-current-row
            style="width: 100%"
            v-loading="loading">
         <el-table-column prop="A1" label="组货单号" width="100" align="center"></el-table-column>
         <el-table-column prop="A2" label="客户名称" min-width="120" align="center"></el-table-column>
         <el-table-column prop="A3" label="状态" min-width="120" align="center"></el-table-column>
         <el-table-column prop="A4" label="属性A4" min-width="120" align="center"></el-table-column>
            v-loading="loading"
            @sort-change="handleSortChange">
         <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 label="操作" width="150" align="center" fixed="right">
            <template slot-scope="scope">
               <div class="operation-cell">
@@ -197,11 +197,12 @@
         class="detail-dialog"
         @close="closeDetailDialog">
      <div v-if="currentRow">
         <h3>组货单主表 (组货单号: {{ currentRow.A1 }})</h3>
         <h3>组货单主表 (组货单号: {{ currentRow.itemName }})</h3>
         <el-descriptions :column="2" border>
            <el-descriptions-item label="客户名称">{{ currentRow.A2 }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ currentRow.A3 }}</el-descriptions-item>
            <el-descriptions-item label="属性A4">{{ currentRow.A4 }}</el-descriptions-item>
            <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>
@@ -210,10 +211,32 @@
               :data="tableDataB"
               style="width: 100%"
               v-loading="detailLoading">
            <el-table-column prop="B2" label="客户名称" min-width="120" align="center"></el-table-column>
            <el-table-column prop="B3" label="状态" min-width="120" align="center"></el-table-column>
            <el-table-column prop="B4" label="流水号" min-width="120" align="center"></el-table-column>
            <!-- 可根据实际需求添加更多子表列 -->
            <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="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-column prop="status" label="状态" min-width="100" align="center" :formatter="formatStatusB"></el-table-column>
            <!-- 新增操作列,根据status值控制显示 -->
            <el-table-column label="是否上报" width="120" align="center" fixed="right">
               <template slot-scope="scope">
                  <div class="operation-cell">
                     <el-button v-if="scope.row.status === 2"
                              type="primary"
                              size="mini"
                              @click="handleModifyN(scope.row)">
                        否
                     </el-button>
                     <el-button v-if="scope.row.status === 1"
                              type="primary"
                              size="mini"
                              @click="handleModifyY(scope.row)">
                        是
                     </el-button>
                  </div>
               </template>
            </el-table-column>
         </el-table>
         <!-- 子表分页 -->
@@ -248,11 +271,14 @@
      data: {
         // 搜索表单
         searchForm: {
            A1: '',
            A2: '',
            A3: '',
            A4: ''
            item_name: '',
            cstmr_name: '',
            settle: '',
            order_no: ''
         },
         // 排序相关
         orderByField: '',
         orderByType: 'asc',
         // 主表A数据
         tableDataA: [],
         // 子表B数据
@@ -271,9 +297,7 @@
         // 加载状态
         loading: false,
         detailLoading: false,
         reportLoading: false,
         // 原始数据备份(用于搜索)
         originalTableDataA: []
         reportLoading: false
      },
      created() {
         this.init();
@@ -282,73 +306,229 @@
         init() {
            this.getTableDataA();
            // 每5秒自动刷新数据
            setInterval(() => {
               this.getTableDataA();
            }, 5000);
            }, 10000);
         },
         // 获取主表A数据
         // 获取主表A数据 - 使用新的API
         getTableDataA() {
            let that = this;
            that.loading = true;
            // 模拟API调用 - 替换为实际API
            // 构建请求参数
            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 === 'itemName'){
                     params['item_name'] = that.searchForm[key];
                  } else if (key === 'cstmrName'){
                     params['cstmr_name'] = that.searchForm[key];
                  } else {
                     params[key] = that.searchForm[key];
                  }
               }
            });
            $.ajax({
               url: baseUrl + "/api/tableA/data",
               url: baseUrl + "/order/pakout/order/cargo/grouping/auth/v1",
               headers: {
                  'token': localStorage.getItem('token')
               },
               data: {
                  page: that.currentPage,
                  size: that.pageSize
               },
               data: params,
               dataType: 'json',
               contentType: 'application/json;charset=UTF-8',
               method: 'post',
               method: 'get',
               success: function (res) {
                  that.tableDataA = res.data || [];
                  that.originalTableDataA = JSON.parse(JSON.stringify(that.tableDataA)); // 备份原始数据
                  that.total = res.total || 0;
                  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() {
               error: function(xhr, status, error) {
                  that.loading = false;
                  // 实际项目中应使用真实API,这里使用模拟数据
                  that.$message.error('网络请求失败');
                  console.error('API调用失败:', error);
                  // 模拟数据(实际项目中应删除)
                  that.mockTableAData();
               }
            });
         },
         // 获取子表B数据
         getTableDataB(A1) {
         // 获取子表B数据(根据实际业务调整)
         getTableDataB(itemName) {
            let that = this;
            that.detailLoading = true;
            // 模拟API调用 - 替换为实际API
            // 构建请求参数
            let params = {
               item_name: itemName,
               curr: that.detailCurrentPage,
               limit: that.detailPageSize
            };
            // 模拟API调用 - 根据实际业务调整API地址
            $.ajax({
               url: baseUrl + "/api/tableB/data",
               url: baseUrl + "/order/pakout/orderDetl/cargo/grouping/auth",
               headers: {
                  'token': localStorage.getItem('token')
               },
               data: {
                  A1: A1,
                  page: that.detailCurrentPage,
                  size: that.detailPageSize
               },
               data: params,
               dataType: 'json',
               contentType: 'application/json;charset=UTF-8',
               method: 'post',
               method: 'get',
               success: function (res) {
                  that.tableDataB = res.data || [];
                  that.detailTotal = res.total || 0;
                  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(A1);
                  that.mockTableBData(itemName);
               }
            });
         },
         // 处理修改按钮点击事件
         handleModifyY(row) {
            if (!this.currentRow) {
               this.$message.error('没有选择主表数据');
               return;
            }
            const groupOrderNo = this.currentRow.itemName; // 组货单号
            const batch = row.batch; // 箱号
            const status = 2; // 箱号
            this.$confirm(
                  `确定将组货单号: <strong style="color: #409EFF;">${groupOrderNo}</strong> 、箱号: <strong style="color: #409EFF;">${batch}</strong> 添加到上报列吗?`,
                  '确认修改',
                  {
                     confirmButtonText: '确认修改',
                     cancelButtonText: '取消',
                     type: 'warning',
                     dangerouslyUseHTMLString: true
                  }
            ).then(() => {
               this.submitModify(groupOrderNo, batch, status);
            }).catch(() => {
               this.$message({
                  type: 'info',
                  message: '已取消修改'
               });
            });
         },
         // 处理修改按钮点击事件
         handleModifyN(row) {
            if (!this.currentRow) {
               this.$message.error('没有选择主表数据');
               return;
            }
            const groupOrderNo = this.currentRow.itemName; // 组货单号
            const batch = row.batch; // 箱号
            const status = 1; // 箱号
            this.$confirm(
                  `确定将组货单号: <strong style="color: #409EFF;">${groupOrderNo}</strong> 、箱号: <strong style="color: #409EFF;">${batch}</strong> 添加到上报列吗?`,
                  '确认修改',
                  {
                     confirmButtonText: '确认修改',
                     cancelButtonText: '取消',
                     type: 'warning',
                     dangerouslyUseHTMLString: true
                  }
            ).then(() => {
               this.submitModify(groupOrderNo, batch, status);
            }).catch(() => {
               this.$message({
                  type: 'info',
                  message: '已取消修改'
               });
            });
         },
         // 提交修改到后台
         submitModify(groupOrderNo, batch, status) {
            // 显示加载状态
            const loadingInstance = this.$loading({
               lock: true,
               text: '提交修改中...',
               spinner: 'el-icon-loading',
               background: 'rgba(0, 0, 0, 0.7)'
            });
            // 调用后台API提交修改
            $.ajax({
               url: baseUrl + "/order/pakout/orderDetl/batch/report/auth",
               headers: {'token': localStorage.getItem('token')},
               data: top.reObject({
                  item_name: groupOrderNo, // 组货单号
                  batch: batch, // 箱号
                  status: status // 箱号
               }),
               method: 'POST',
               success: (res) => {
                  loadingInstance.close();
                  if (res.code === 200 || res.success) {
                     this.$message({
                        message: `修改成功!组货单号: ${groupOrderNo}, 箱号: ${batch}`,
                        type: 'success',
                        duration: 3000
                     });
                     // 修改成功后可以刷新子表数据
                     this.getTableDataB(groupOrderNo);
                  } else {
                     this.$message.error(res.message || '修改失败');
                  }
               },
               error: (error) => {
                  loadingInstance.close();
                  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();
         },
         // 显示二次确认对话框
@@ -358,7 +538,7 @@
               return;
            }
            const groupOrderNo = this.currentRow.A1;
            const groupOrderNo = this.currentRow.itemName;
            this.$confirm(
                  `是否确认开始上报组货单号 <strong style="color: #F56C6C; font-size: 16px;">${groupOrderNo}</strong>?<br/><br/>将生成实际组货单,单一组货单号只能操作一次!!!`,
@@ -400,7 +580,7 @@
                  'token': localStorage.getItem('token')
               },
               data: JSON.stringify({
                  A1: groupOrderNo // 传递组货单号
                  item_name: groupOrderNo // 传递组货单号
               }),
               dataType: 'json',
               contentType: 'application/json;charset=UTF-8',
@@ -417,9 +597,10 @@
                        type: 'success',
                        duration: 3000
                     });
                     // 上报成功后关闭弹窗
                     // 上报成功后关闭弹窗并刷新数据
                     setTimeout(() => {
                        this.closeDetailDialog();
                        this.getTableDataA(); // 刷新主表数据
                     }, 1500);
                  } else {
                     this.$message.error(res.message || '上报失败');
@@ -431,108 +612,31 @@
                     done();
                  }
                  console.error('上报失败:', error);
                  // 模拟上报成功(实际项目中应删除此部分)
                  this.mockReportSuccess(groupOrderNo);
                  this.$message.error('上报失败,请检查网络连接');
               }
            });
         },
         // 模拟上报成功(实际项目中应删除)
         mockReportSuccess(groupOrderNo) {
            this.$message({
               message: `组货单号 ${groupOrderNo} 上报成功(模拟)`,
               type: 'success',
               duration: 3000
            });
            // 上报成功后关闭弹窗
            setTimeout(() => {
               this.closeDetailDialog();
            }, 1500);
         },
         // 搜索处理
         handleSearch() {
            this.currentPage = 1;
            this.loading = true;
            // 如果有后端搜索API,可以调用后端搜索
            // 这里使用前端过滤作为示例
            if (this.isSearchFormEmpty()) {
               // 如果搜索条件为空,显示所有数据
               this.getTableDataA();
            } else {
               // 使用前端过滤进行搜索
               this.filterTableData();
            }
         },
         // 前端过滤表格数据
         filterTableData() {
            let that = this;
            // 模拟API调用 - 实际项目中可以调用后端搜索接口
            $.ajax({
               url: baseUrl + "/api/tableA/search",
               headers: {
                  'token': localStorage.getItem('token')
               },
               data: {
                  ...that.searchForm,
                  page: that.currentPage,
                  size: that.pageSize
               },
               dataType: 'json',
               contentType: 'application/json;charset=UTF-8',
               method: 'post',
               success: function (res) {
                  that.tableDataA = res.data || [];
                  that.total = res.total || 0;
                  that.loading = false;
               },
               error: function() {
                  that.loading = false;
                  // 如果API调用失败,使用前端过滤作为备选方案
                  that.frontendFilter();
               }
            });
         },
         // 前端过滤备选方案
         frontendFilter() {
            const filteredData = this.originalTableDataA.filter(item => {
               // 检查每个搜索条件
               const matchA1 = !this.searchForm.A1 ||
                     (item.A1 && item.A1.toString().toLowerCase().includes(this.searchForm.A1.toLowerCase()));
               const matchA2 = !this.searchForm.A2 ||
                     (item.A2 && item.A2.toString().toLowerCase().includes(this.searchForm.A2.toLowerCase()));
               const matchA3 = !this.searchForm.A3 ||
                     (item.A3 && item.A3.toString().toLowerCase().includes(this.searchForm.A3.toLowerCase()));
               const matchA4 = !this.searchForm.A4 ||
                     (item.A4 && item.A4.toString().toLowerCase().includes(this.searchForm.A4.toLowerCase()));
               return matchA1 && matchA2 && matchA3 && matchA4;
            });
            this.tableDataA = filteredData;
            this.total = filteredData.length;
            this.loading = false;
            this.orderByField = '';
            this.orderByType = 'asc';
            this.getTableDataA();
         },
         // 重置搜索条件
         handleReset() {
            this.searchForm = {
               A1: '',
               A2: '',
               A3: '',
               A4: ''
               item_name: '',
               cstmr_name: '',
               settle: '',
               order_no: ''
            };
            this.orderByField = '';
            this.orderByType = 'asc';
            this.currentPage = 1;
            this.getTableDataA();
         },
         // 检查搜索条件是否为空
         isSearchFormEmpty() {
            return !this.searchForm.A1 && !this.searchForm.A2 &&
                  !this.searchForm.A3 && !this.searchForm.A4;
         },
         // 显示详情弹窗
@@ -540,7 +644,7 @@
            this.currentRow = row;
            this.detailDialogVisible = true;
            this.detailCurrentPage = 1;
            this.getTableDataB(row.A1);
            this.getTableDataB(row.itemName);
         },
         // 关闭详情弹窗
@@ -569,7 +673,7 @@
            this.detailPageSize = val;
            this.detailCurrentPage = 1;
            if (this.currentRow) {
               this.getTableDataB(this.currentRow.A1);
               this.getTableDataB(this.currentRow.itemName);
            }
         },
@@ -577,31 +681,96 @@
         handleDetailCurrentChange(val) {
            this.detailCurrentPage = val;
            if (this.currentRow) {
               this.getTableDataB(this.currentRow.A1);
               this.getTableDataB(this.currentRow.itemName);
            }
         },
         // 格式化状态显示
         formatStatus(row) {
            if (row.settle === 10) {
               return '待处理';
            } else if (row.settle === 11) {
               return '检验中';
            } else if (row.settle === 12) {
               return '出库中';
            } else if (row.settle === 13) {
               return '存在不合格';
            } else if (row.settle === 15) {
               return '待上报';
            } else if (row.settle === 16) {
               return '上报完成';
            } else if (row.settle === 17) {
               return '上报失败';
            } else if (row.settle === 98) {
               return '异常';
            } else if (row.settle === 99) {
               return '废弃';
            } else {
               return row.settle || '未知';
            }
         },
         // 格式化状态显示
         formatStatusB(row) {
            if (row.status === 0) {
               return '异常';
            } else if (row.status === 1) {
               return '不上报';
            } else if (row.status === 2) {
               return '待上报';
            } else if (row.status === 3) {
               return '已上报';
            } else {
               return row.status || '未知';
            }
         },
         // 格式化金额显示
         formatCurrency(row) {
            if (row.totalFee) {
               return '¥' + parseFloat(row.totalFee).toFixed(2);
            }
            return '¥0.00';
         },
         // 格式化日期显示
         formatDate(dateStr) {
            if (!dateStr) return '';
            // 简单的日期格式化,可以根据实际格式调整
            return dateStr;
         },
         // 模拟主表数据 - 实际项目中应删除
         mockTableAData() {
            this.tableDataA = [
               { A1: '1001', A2: '示例数据A2-1', A3: '示例数据A3-1', A4: '示例数据A4-1' },
               { A1: '1002', A2: '示例数据A2-2', A3: '示例数据A3-2', A4: '示例数据A4-2' },
               { A1: '1003', A2: '示例数据A2-3', A3: '示例数据A3-3', A4: '示例数据A4-3' },
               { A1: '1004', A2: '示例数据A2-4', A3: '示例数据A3-4', A4: '示例数据A4-4' }
               {
                  itemName: 'zh20251110',
                  orderNo: 'ORDER2024001',
                  cstmrName: 'zh20251110',
                  settle: 10,
                  totalFee: 1500.00,
                  createTime: '2025-11-10T09:50:16.343+0000',
                  memo: '测试数据'
               }
            ];
            this.originalTableDataA = JSON.parse(JSON.stringify(this.tableDataA)); // 备份原始数据
            this.total = 4;
            this.total = 1;
            this.loading = false;
         },
         // 模拟子表数据 - 实际项目中应删除
         mockTableBData(A1) {
         mockTableBData(itemName) {
            this.tableDataB = [
               { B2: `子表数据B2-${A1}-1`, B3: `子表数据B3-${A1}-1`, B4: `子表数据B4-${A1}-1` },
               { B2: `子表数据B2-${A1}-2`, B3: `子表数据B3-${A1}-2`, B4: `子表数据B4-${A1}-2` },
               { B2: `子表数据B2-${A1}-3`, B3: `子表数据B3-${A1}-3`, B4: `子表数据B4-${A1}-3` }
               {
                  matnr: '6μm×436mm',
                  batch: 'L241034114',
                  model: '24092501D01A6',
                  origin: '1',
                  danger: '1',
                  memo: '',
                  status: 1 // 状态为1,会显示修改按钮
               }
            ];
            this.detailTotal = 3;
            this.detailTotal = 1;
            this.detailLoading = false;
         }
      }