Demo
2024-03-05 46c887694fdde580355014847da7e39b4ab301cc
Pda/View/SoSetting/productOut.html
@@ -135,6 +135,17 @@
      .layui-form-switch {
         margin-top: 0;
      }
      ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            cursor: pointer;
            background-color: lightgray;
            padding: 10px;
            margin-bottom: 5px;
        }
   </style>
   <link rel="stylesheet" href="/css/adapter.css" />
</head>
@@ -157,6 +168,16 @@
               <li><a href="../login.html">重新登录</a></li>
            </ul>
         </div>
         <ul>
                <li id="option1">标签</li>
                <li id="option2">数量</li>
            </ul>
            <br />
         <!-- 有码 -->
         <div id="content1">
         <div id="" class="layout-bill-info">
            <form class="layui-form" action="" style="height: auto;">
@@ -380,6 +401,155 @@
            </table>
         </div>
      </div>
         <!-- 无码 -->
         <div id="content2">
            <div id="" class="layout-bill-info">
               <form class="layui-form" action="" style="height: auto;">
                  <div id="layout-bill2" class="layui-form-item layout-dropdownlist">
                     <label class="layui-form-label lableWidth">出库单:</label>
                     <div class="layui-input-block" id="selectDiv2">
                        <select id="bar2" lay-filter="getbar2" lay-search>
                           <option value=""></option>
                        </select>
                        <img src="/assets/down_arraw.png">
                     </div>
                  </div>
                  <div id="layout-skuLotNo2" class="layui-form-item layout-dropdownlist">
                     <label class="layui-form-label lableWidth">物料 - 批次:</label>
                     <div class="layui-input-block">
                        <select id="skuLotNo2" lay-filter="getSkuLotNo2" lay-search>
                           <option value=""></option>
                        </select>
                        <img src="/assets/down_arraw.png">
                     </div>
                  </div>
                  <div id="" class="layout-tab-page">
                     <table class="tbl-box-sim-info" border="" cellspacing="" cellpadding="">
                        <tr>
                           <td>
                              <div class="layui-form-item">
                                 <label class="layui-form-label" style="width: 50%;">计划数量:</label>
                                 <div class="layui-input-block" style="width: 50%;margin-left:50%;">
                                    <input id="planQty2" type="text" lay-verify="" disabled placeholder=""
                                       class="layui-input">
                                 </div>
                              </div>
                           </td>
                           <td>
                              <div class="layui-form-item">
                                 <label class="layui-form-label" style="width: 50%">完成数量:</label>
                                 <div class="layui-input-block" style="width: 50%;margin-left:50%;">
                                    <input id="finishQty2" type="text" lay-verify="" disabled placeholder=""
                                       class="layui-input">
                                 </div>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td colspan="3">
                              <div class="layui-form-item">
                                 <label class="layui-form-label" style="width: 17%;">规格:</label>
                                 <div class="layui-input-block" style="width: 83%;margin-left:17%;">
                                    <input id="standard2" type="text" lay-verify="" disabled placeholder=""
                                       class="layui-input">
                                 </div>
                              </div>
                           </td>
                        </tr>
                     </table>
                  </div>
                  <div id="layout-pallet" class="layui-form-item layout-input">
                     <label class="layui-form-label lableWidth">托盘条码:</label>
                     <div class="layui-input-block">
                        <input id="palletNo2" type="text" lay-verify="stock" placeholder="请扫描托盘条码" autocomplete="off"
                           class="layui-input" style="height:24px">
                     </div>
                  </div>
                  <div class="layui-form-item layout-input" style="display: flex; justify-content: space-between;">
                     <div style="width: 48%;">
                        <label class="layui-form-label" style="width: 34%;">出库口:</label>
                        <div class="layui-input-block" style="width: 66%;margin-left:34%;">
                           <input id="outModel2" type="text" lay-verify="" disabled placeholder=""
                              class="layui-input" > <!-- style="border: 0px;" -->
                        </div>
                     </div>
                     <div style="width: 48%;">
                        <label class="layui-form-label" style="width: 70px;">已拣数量:</label>
                        <div class="layui-input-block" style="width: 120px; margin-left:70px;">
                           <input id="pickedQty2" type="text" lay-verify="" disabled
                           placeholder="" class="layui-input" >
                        </div>
                     </div>
                  </div>
                  <div id="" class="layout-tab-page">
                     <table class="layout-tab-content">
                        <tr>
                           <td>
                              <div id="layout-qty" class="layui-form-item out-scatter-num" >
                                 <label class="layui-form-label lableWidth" >拣货数量:</label>
                                 <div id="" class="local-input">
                                    <div class="layui-input-block">
                                       <input id="pickQty2" type="number" placeholder="请输入拣货数量"
                                          autocomplete="off" class="layui-input" style="padding-left:0.1rem;"
                                          oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
                                    </div>
                                 </div>
                                 <div id="" class="local-ok">
                                    <button type="button" lay-submit lay-filter="formPickScatter2">确认</button>
                                 </div>
                              </div>
                           </td>
                        </tr>
                     </table>
                     <div id="" style="text-align: right;margin-top: 10px;">
                        <div id="" class="cut-line">
                           <img src="/assets/fengexian.png">
                        </div>
                     </div>
                  </div>
               </form>
            </div>
            <div class="layout-tbl-paging" id="">
               <table id="tableBoxList" class="tbl-box-list" border="" cellspacing="" cellpadding="">
                  <tr id="tableHead">
                     <th style="width: 54%;">物料编码</th>
                     <th style="width: 20%;">托内<br>数量</th>
                     <th style="width: 20%;">已拣<br>数量</th>
                     <!-- <th style="width: 14%;">已拣<br>数量</th> -->
                     <!-- <th style="width: 8%;">拣货</th> -->
                  </tr>
                  <tr id="boxCell2" style="display: none;">
                     <td name="SkuNo2">AG000001</td>
                     <td name="qty2">30</td>
                     <td name="pickedQty2">30</td>
                  </tr>
               </table>
               <!-- 分页 -->
               <table id="tableBoxPages2" class="tbl-box-pages" border="" cellspacing="" cellpadding="">
                  <tr>
                     <td class="page-prev">上一页</td>
                     <td class="page-num page-num-select">1</td>
                     <td class="page-num">2</td>
                     <td class="page-num">3</td>
                     <td class="page-num">4</td>
                     <td class="page-num">5</td>
                     <td class="page-next">下一页</td>
                  </tr>
               </table>
            </div>
         </div>
      </div>
   </div>
@@ -392,6 +562,38 @@
   <script>
      layui.use(['form', 'jquery'], function () {
         var form = layui.form;
          /* 标签切换代码 */
          var xianshiyemian = 0;
         $('#option1').attr("style", "background-color: aqua;width: 45.77%;float: left;text-align: center;"); //选中后颜色
         $('#option2').attr("style", "background-color: #999;width: 45.77%;float: right;text-align: center;"); //默认颜色
         $('#content2').hide();
         $(document).ready(function () {
            $('#option1').click(function () {
               // qingkong();
               xianshiyemian = 0;
               $('#content1').show();
               $('#option1').attr("style", "background-color: aqua;width: 45.77%;float: left;text-align: center;"); //选中后颜色
               $('#content2').hide();
               $('#option2').attr("style", "background-color: #999;width: 45.77%;float: right;text-align: center;"); //默认颜色
               $("#palletNo").focus();//光标默认选中
            });
            $('#option2').click(function () {
               // qingkong();
               xianshiyemian = 1;
               $('#content1').hide();
               $('#option1').attr("style", "background-color: #999;width: 45.77%;float: left;text-align: center;"); //默认颜色
               $('#content2').show();
               $('#option2').attr("style", "background-color: aqua;width: 45.77%;float: right;text-align: center;"); //选中后颜色
               $("#palletNo2").focus();//光标默认选中
            });
         });
         //当前分页
         var curPageIndex = 1
@@ -945,6 +1147,196 @@
               return pageNum
            }
         //数量标签-------------------------------------------------------------------------------
         function clear21() {
            $('#outModel2').val("");//出库口
            $('#standard2').val("");//规格
            $('#pickQty2').val("");//待拣数量
            $('#pickedQty2').val("");//已拣数量
         }
         function clear22() {
            //物料批次
            $("#skuLotNo2").empty()
            $("#skuLotNo2").append('<option value =>' + '</option>');
            form.render('select');
         }
         function clear23() {
            $("#planQty2").val("");  //计划数量
            $("#finishQty2").val("");//完成数量
         }
         function clear24() {
            $('#boxNo2').val("");//箱码
            $('#boxQty2').val("");//箱内数量
         }
         //当托盘条码输入框文本改变时,检查一下托盘状态
         $("#palletNo2").on('input', function () {
            if ($("#palletNo2").val() == "" || $("#palletNo2").val().length < 8) {
               return
            }
            if ($("#palletNo2").val().length >= 8) {
               $("#palletNo2").val($("#palletNo2").val().substr(-8))
            }
            checkPalletState2()
         })
         //检查托盘状态
         function checkPalletState2() {
            var param = {
               "PalletNo": $("#palletNo2").val()
            }
            synData(IP + "/PdaSo/IsEnableOkPalletNo", param, 'post', function (res) {
               if (res.code == 0) { //成功
                  updateBillList2();
                  if ($('#bar').val() == "") {
                     clear21();
                     return;
                  } else {
                     updateSkuLotNoList2();
                     updateQtyList2();
                     getBar2();
                     GetBoxInfo();
                  }
               } else { //不成功
                  layer.msg(res.msg, {
                     icon: 2,
                     time: 2000 //2秒关闭(如果不配置,默认是3秒)
                  }, function () { });
               }
            });
         }
         //初始化渲染 出库单
         function updateBillList2() {
            $("#bar2").empty()
            $("#bar2").append('<option value =>' + '</option>');
            form.render('select');
            var param = {
               PalletNo: $("#palletNo2").val(),
            };
            synData(IP + "/PdaSo/GetRunSoNoticeList", param, 'post', function (res) {
               if (res.code == 0) { //成功
                  console.log(res.data);
                  for (var i = 0; i < res.data.length; i++) {
                     if (i == 0) {
                        $("#bar2").append('<option value =' + res.data[i] + ' selected>' + res.data[i] + '</option>');
                     } else {
                        $("#bar2").append('<option value =' + res.data[i] + '>' + res.data[i] + '</option>');
                     }
                  }
                  form.render('select');
               } else { //不成功
                  layer.msg(res.msg, {
                     icon: 2,
                     time: 2000 //2秒关闭(如果不配置,默认是3秒)
                  });
               }
            });
         }
         //初始化渲染 物料-批次
         function updateSkuLotNoList2() {
            clear22();
            var param = {
               PalletNo: $("#palletNo2").val(),
               SoNo: $("#bar2").val(),
            };
            synData(IP + "/PdaSo/GetSoSkuLotNoListByPallet", param, 'post', function (res) {
               if (res.code == 0) { //成功
                  for (var i = 0; i < res.data.length; i++) {
                     if (i == 0) {
                        $("#skuLotNo2").append('<option value =' + res.data[i].SoDetailId + ' selected>' + res.data[i].SkuName + " - " + res.data[i].LotNo + '</option>');
                     } else {
                        $("#skuLotNo2").append('<option value =' + res.data[i].SoDetailId + '>' + res.data[i].SkuName + " - " + res.data[i].LotNo + '</option>');
                     }
                  }
                  form.render('select');
               } else { //不成功
                  layer.msg(res.msg, {
                     icon: 2,
                     time: 2000 //2秒关闭(如果不配置,默认是3秒)
                  }, function () { });
               }
            });
         }
         //初始化渲单据的计划数量和完成数量
         function updateQtyList2() {
            clear23();
            var param = {
               SoDetailId: $("#skuLotNo2").val(),
            };
            synData(IP + "/PdaSo/GetPlanAndFinishQty", param, 'post', function (res) {
               if (res.code == 0) { //成功
                  console.log(res.data);
                  $("#planQty2").val(res.data.PlanQty)
                  $("#finishQty2").val(res.data.FinishQty)
               } else { //不成功
                  layer.msg(res.msg, {
                     icon: 2,
                     time: 2000 //2秒关闭(如果不配置,默认是3秒)
                  }, function () { });
               }
            });
         }
         //根据单据获取出库口、规格、待检数量、已拣数量
         function getBar2() {
            clear21();
            var param = {
               PalletNo: $("#palletNo2").val(),
               SoDetailId: $("#skuLotNo2").val(),
            }
            synData(IP + "/PdaSo/GetOutlets", param, 'post', function (res) {
               if (res.code == 0) { //成功
                  let data = res.data
                  console.log(res.data);
                  $('#outModel2').val(res.data.OutModel);
                  $('#standard2').val(res.data.Standard);
                  $('#pickQty2').val(res.data.PickQty);
                  $('#pickedQty2').val(res.data.PickedQty);
               } else { //不成功
                  layer.msg(res.msg, {
                     icon: 2,
                     time: 2000 //2秒关闭(如果不配置,默认是3秒)
                  }, function () { });
               }
            });
         }
         //获取托盘物料名细
         function GetBoxInfo() {
            let param2 = {
               "SoDetailId": $("#skuLotNo2").val(),
               "PalletNo": $("#palletNo2").val(),
               "BoxNo": $("#boxNo").val(),
               "BoxNo3": $("#boxNo3").val(),
            }
            synData(IP + "/PdaSo/GetDataComBoxInfo", param2, 'post', function (res) {
               if (res.code == 0) {
                  tableData = deepCopy(res.data)
                  refreshTable(tableData)
               } else {
                  layer.msg(res.msg, {
                     icon: 2,
                     time: 2000 //2秒关闭(如果不配置,默认是3秒)
                  }, function () { });
               }
            });
         }
      })
   </script>
</body>