From bc7ec4359bf7f43505c4d88d271cba38cc1fb5a1 Mon Sep 17 00:00:00 2001
From: zhangsiqi <2825463979@qq.com>
Date: Thu, 20 Jun 2024 10:04:16 +0800
Subject: [PATCH] =?UTF-8?q?[feat]=20=E9=87=87=E8=B4=AD=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=9A=E9=87=87=E8=B4=AD=E5=8D=95=E8=AE=A1=E5=88=92=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=87=87=E8=B4=AD=E5=8D=95=EF=BC=8C=E3=80=82=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=AE=A1=E5=88=92=E6=B7=BB=E5=8A=A0=E9=87=87=E8=B4=AD?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../purchasePlan/addPurchaseOrder.html        | 320 +++++++++++-------
 1 file changed, 203 insertions(+), 117 deletions(-)

diff --git a/ruoyi-admin/src/main/resources/templates/purchase/purchasePlan/addPurchaseOrder.html b/ruoyi-admin/src/main/resources/templates/purchase/purchasePlan/addPurchaseOrder.html
index ba410a1a..39be7b28 100644
--- a/ruoyi-admin/src/main/resources/templates/purchase/purchasePlan/addPurchaseOrder.html
+++ b/ruoyi-admin/src/main/resources/templates/purchase/purchasePlan/addPurchaseOrder.html
@@ -12,171 +12,257 @@
         <input id="purchasePlanCodes" th:value="${purchasePlanCodes}" name="purchasePlanCode" class="form-control" type="text">
       </div>
     </div>
-    <div class="container-div">
-      <div class="col-sm-12 select-table table-striped">
-        <div class="other container" id="material">
+    <div class="col-xs-12" id="material">
 
-        </div>
-      </div>
     </div>
     <div class="container">
-      <h4 class="form-header h4">公司地址</h4>
+      <div class="form-row"><h4 class="card-header">公司地址：</h4></div>
+      <div class="col-xs-12 form-row">
         <div class="form-group">
           <label for="inputWarehouseID" class="col-sm-3 col-form-label">仓库ID:</label>
-          <div class="col-sm-8">
+          <div class="col-sm-6">
             <input type="text" class="form-control" id="inputWarehouseID" placeholder="请输入仓库ID">
           </div>
         </div>
         <div class="form-group">
-          <label for="inputWarehouseName" class="col-sm-3 col-form-label">仓库名称:</label>
-          <div class="col-sm-8">
+          <label for="inputWarehouseName" class="col-sm-3 form-label">仓库名称:</label>
+          <div class="col-sm-6">
             <input type="text" class="form-control" id="inputWarehouseName" placeholder="请输入仓库名称">
           </div>
         </div>
+      </div>
+      <div class="col-xs-12 form-row">
         <div class="form-group">
-          <label for="inputReceiver" class="col-sm-3 col-form-label">收货人:</label>
-          <div class="col-sm-8">
+          <label for="inputReceiver" class="col-sm-3 form-label">收货人:</label>
+          <div class="col-sm-6">
             <input type="text" class="form-control" id="inputReceiver" placeholder="请输入收货人">
           </div>
         </div>
         <div class="form-group">
-          <label for="inputPhone" class="col-sm-3 col-form-label">收货电话:</label>
-          <div class="col-sm-8">
+          <label for="inputPhone" class="col-sm-3 form-label">收货电话:</label>
+          <div class="col-sm-6">
             <input type="text" class="form-control" id="inputPhone" placeholder="请输入收货电话">
           </div>
         </div>
-        <div class="form-group">
-          <label for="inputAddressDetails" class="col-sm-3 col-form-label">详细地址:</label>
-          <div class="col-sm-8">
-            <textarea class="form-control" id="inputAddressDetails"></textarea>
-          </div>
+      </div>
+      <div class="form-group">
+        <label for="inputAddressDetails" class="col-sm-3 form-label">详细地址:</label>
+        <div class="col-sm-6">
+          <textarea class="form-control" id="inputAddressDetails"></textarea>
         </div>
       </div>
+    </div>
   </form>
 </div>
 <th:block th:include="include :: footer" />
+<th:block th:include="include :: bootstrap-table-editable-js" />
 <script th:inline="javascript">
-  var prefix = ctx + "purchase/plan"
+  var prefix = ctx + "purchase/purchaseOrder";
+  var materialTypeDatas = [[${@category.getChildByCode('materialType')}]];
+  var auditStatusDatas = [[${@dict.getType('auditStatus')}]];
+  var sysUnitClassDatas = [[${@dict.getType('sys_unit_class')}]];
+  var processMethodDatas = [[${@dict.getType('processMethod')}]];
+  var loginName = [[${@permission.getPrincipalProperty('loginName')}]];
   $("#form-plan-add").validate({focusCleanup: true});
   var purchasePlanChildList = [[${purchasePlanChildList}]];
+  var purchasePlanList = [[${purchasePlanList}]];
   var formId = $("#form-plan-add").attr("id");
   //根据物料物料数量添加物料分类表，自动生成类似的表单对象
   //初始根据采购计划单，涉及到物料做分类表
   //根据采购计划单，获取物料信息，自动生成物料的供应商分类表
   //获取表单的id;
   var materialList = [];
+  var tableIdList = [];
+  var $supplierForm;
   //获取采购计划单的物料信息
   //获取
   // 假设qualityOrderCode已经定义或者可以通过某种方式获取到
   $(function() {
-    purchasePlanChildList.forEach(function(material, index) {
-      // 创建一个新的表格容器
-      var $tableWrapper = $('<div id="material"></div>');
-      var tableId = 'bootstrap-table-' + (index + 1);
-      // 在每个表格前添加关联销售订单号
+    // 初始化表格
+    // 假设purchasePlanChildList已定义并包含了需要处理的数据
+    purchasePlanChildList.forEach(function (material, index) {
+      var tableId = 'materialCode_' + index;
+      var materialTable = "bootstrap_table-" + tableId;
+      tableIdList.push(materialList);
+      // 创建物料信息的容器
+      var $tableWrapper = $('<div id="material-' + tableId + '""></div>');
+      // 添加关联销售订单号信息
       var $headerDiv =
-              $('<div class="form-row">' +
-                    '<div class="btn-group-sm" id="toolbar'+ index + '" role="group">' +
-                      '<span>物料信息 + ' + index + 1 + ': </span>' +
-                      '<div class="header-div text-center mb-3">' +
-                        '<strong>关联订单号:</strong> ' + material.correlationCode +
+              $('<div class="row">' +
+                      '<div class="form-row"><strong>物料 ' + index + ': </strong> ' + '<strong>关联订单号:  </strong>' + '<span id="correlateion-' + tableId + ' ">' + material.correlationCodes + '</span></div>' +
+                      '<div class="form-row">' +
+                      '<div class="col-sm-12 select-table table-striped">' +
+                        '<table class="table table-hover table-striped table-materialCode" id="' + materialTable + '">' + '<br />' +
+                      '</div>' +
                       '</div>' +
-                    '</div>' +
-                    '</div>'
+                      '</div>'
               );
       $tableWrapper.append($headerDiv);
-      var $table = $(
-              '<div class="row">'+
-                '<div class="col-sm-12 select-table table-striped">'+
-                 ' <table id="'+ tableId + '"></table>'+
-                '</div id="supplierCode' + tableId + ' " ></div>'+
-                '</div>'+
-              '</div>'
-     );
-      foreach(material.supplierList, function(supplier, index) {
-        var $supplier = $('<div class="form-group"></div>');
-        $supplier.append('<label class="col-sm-4 col-form-label is-required">供应商：' + index + ':</label>');
-        var headerContent =
-                '<label class="col-sm-4 col-form-label">' + supplier.supplierCode + ': ' + supplier.supplierName  +
-                    ' - 最新不含税采购价：' + supplier.materialNoRmb + ' RMB' +
-                    '  最新含税采购价：' + supplier.materialRmb + ' RMB ' +
-                '</label>'
-        var $header = $('<div class="card-header">' + headerContent + '</div>');
-        var $inputsWrapper = $('<div class="card-body"></div>'); // 用于存放输入框等表单元素
-        $('#supplierCode' + tableId).append($inputsWrapper.append($header));
-      })
-      var $supplier = $('<div class="form-group"></div>');
-      $tableWrapper.append($table);
-      var $formGroup = $('<div class="form-group"></div>');
-      var supplierSum =
-        '<div class="form-row">' +
-          '<label class="col-sm-4 col-form-label is-required">实际采购数:</label>' +
-          '<div class="col-sm-4">' +
-            '<input type="text" class="form-control"  placeholder="请输入仓库ID" required="required">' +
-          '</div>' +
-        '</div>' +
-        '<div class="form-row">' +
-          '<label  class="col-sm-2 col-form-label">交付时间:</label>' +
-          '<div class="input-group date">' +
-            '<input name="pricingDate" class="form-control" placeholder="yyyy-MM-dd" type="text">' +
-            '<span class="input-group-addon"><i class="fa fa-calendar"></i></span>' +
-          '</div>' +
-        '</div>'+
-        '<div class="form-row">' +
-          '<label  class="col-sm-2 col-form-label">实际采购合计:</label>' +
-          '<div class="input-group date">' +
-            '<input name="pricingDate" class="form-control" placeholder="yyyy-MM-dd" type="text">' +
-          '</div>' +
-        '</div>' +
-        '<div class="form-row">' +
-          '<label  class="col-sm-2 col-form-label">不含税采购总价:</label>' +
-          '<div class="input-group date">' +
-            '<input name="pricingDate" class="form-control"  type="text">' +
-          '</div>' +
-        '</div>' +
-        '<div class="form-row">' +
-          '<label  class="col-sm-2 col-form-label">含税采购总价:</label>' +
-          '<div class="input-group date">' +
-          '<input name="pricingDate" class="form-control" type="text">' +
-          '<span class="input-group-addon"><i class="fa fa-calendar"></i></span>' +
-        '</div>' +
-      '</div>';
+      // 创建表格的容器
+      // 循环处理每个供应商的信息
+      material.purchaseSupplierList.forEach(function (supplier, supplierIndex) {
+        var $supplierInfo = $('<div class="card mt-12"></div>'); // 卡片样式容器，用于包裹每个供应商的信息
+        // 构建供应商信息头部
+        var $headerContent =
+                $('<div class="card-header">' +
+                        '<h3 class="card-title">供应商 ' + supplierIndex + ': ' + '</h3>' +
+                        '<p class="card-text">' + '<span>' + supplier.supplierCode + '</span>' + '-' + '<span>' + supplier.supplierName + '</span>' + '-最新不含税采购价: ' + supplier.materialNoRmb + ' RMB  ' + '  最新含税采购价: ' + supplier.materialRmb + ' RMB </p>' +
+                        '<div class="card-body">' +
+                        '<div class="form-group">' +
+                        '<label class="col-sm-3" for="actualPurchaseNum_' + tableId + '"> 实际采购数: </label>' +
+                        '<div class ="col-sm-8">' +
+                        '<input type="text" name="materialNum" class="form-control" id="actualPurchaseNum_' + tableId + '">' +
+                        '</div>' +
+                        '</div>' +
+                        '<div class="form-group">' +
+                        '<label class="col-sm-3" for="actualPurchaseNum_' + tableId + '">计划交付时间:</label>' +
+                        '<div class ="col-sm-8">' +
+                        '<div class="input-group date"> ' +
+                        '<input type="text" name="deliveryTime" class="form-control" id="deliveryTime_' + tableId + '">' +
+                        ' <span class="input-group-addon"><i class="fa fa-calendar"></i></span>' +
+                        '</div> ' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>');
+        $supplierInfo.append($headerContent);
+        // 构建供应商信息下的输入表单
+        $supplierForm = $('<div class="card-body" id="card_body_' + tableId + '"></div>');
+        // 实际采购数输入框
+        // 其他表单项可以根据需要类似添加
+        $supplierInfo.append($supplierForm);
+        $tableWrapper.append($supplierInfo);
+      });
+      tableSetup($supplierForm, tableId);
+      // 将整个物料信息容器添加到页面
+      $('#material').append($tableWrapper);
+      var materialObj = {
+        materialCode: material.materialCode,
+        photoUrl: material.photoUrl,
+        materialName: material.materialName,
+        materialType: material.materialType,
+        describe: material.describe,
+        brand: material.brand,
+        processMethod: material.processMethod,
+        unit: material.unit,
+        materialNum: material.materialNum,
+      };
+      var materialData = [materialObj]; // Bootstrap Table需要一个数组作为数据源
+      materialList.push(materialObj);
+      tables(materialTable, materialData);
+    });
+
+    function tableSetup(element, tableId) {
+      var $totalSection = $('<div class="card mt-8">' +
+              '<div class="card-header">' +
+              '<h5 class="card-title">实际采购合计</h5>' +
+              '</div>' +
+              '<div class="card-body">' +
+              '<div class="form-row">' +
+              '<label for="actualPurchaseTotal" class="col-sm-3">不含税采购总价:</label>' +
+              '<div class="col-sm-8">' +
+              '<input type="number" name="materialNoRmbSum" class="form-control" id="materialNoRmbSum_' + tableId + '" readonly>' +
+              '</div>' +
+              '<div class="form-row">' +
+              '<label for="actualPurchaseTotalTax" class="col-sm-3">含税采购总价:</label>' +
+              '<div class="col-sm-8">' +
+              '<input type="number" name="materialRmbSum" class="form-control" id="materialRmbSum_' + tableId + '" readonly>' +
+              '</div>' +
+              '</div>' +
+              '</div>');
+      element.append($totalSection);
+    }
 
+    // 表格初始化函数保持不变
+    function tables(tableId, data) {
+      $('#' + tableId).bootstrapTable({
+        showExport: false,
+        showFooter: false,
+        showSearch: false,
+        showRefresh: false,
+        showColumns: false,
+        showToggle: false,
+        data: data,
+        height: 60,
+        columns: [
+          {checkbox: false},
+          {title: '料号', field: 'materialCode'},
+          {
+            title: '图片', field: 'photoUrl', formatter: function (value, row, index) {
+              return $.table.imageView(value);
+            }
+          },
+          {title: '物料名称', field: 'materialName'},
+          {
+            title: '物料类型', field: 'materialType', align: 'center', formatter: function (value, row, index) {
+              return $.table.selectCategoryLabel(materialTypeDatas, value);
+            }
+          },
+          {title: '物料描述', field: 'describe'},
+          {title: '品牌', field: 'brand'},
+          {
+            title: '加工类型', field: 'processMethod', align: 'center', formatter: function (value, row, index) {
+              return $.table.selectDictLabel(processMethodDatas, value);
+            }
+          },
+          {
+            title: '单位', field: 'unit', align: 'center', formatter: function (value, row, index) {
+              return $.table.selectDictLabel(sysUnitClassDatas, value);
+            }
+          },
+          {title: '计划采购数', field: 'planPurchaseNum'},
+        ],
+      });
+    }
 
-      // 使用物料数据初始化表格
-      var materialData = [material]; // Bootstrap Table需要一个数组作为数据源
-      tables(tableId,materialData);
-      // 添加到DOM中
-      $('#material').append($tableWrapper.append($table)); // 根据实际情况调整父容器选择器
-    })
+    // 提交表单的处理函数
   });
-  function tables(tableId,data){
-    var tableOptions = {
-      showExport: false,
-      showFooter: false,
-      showSearch: false,
-      showRefresh: false,
-      showColumns: false,
-      showToggle: false,
-      columns: [
-        {checkbox: false},
-        {title: '料号', field: 'materialNo'},
-        {title: '图片', field: 'photoUrl'},
-        {title: '物料名称', field: 'materialName'},
-        {title: '物料类型', field: 'materialType'},
-        {title: '物料描述', field: 'describe'},
-        {title: '品牌', field: 'brand'},
-        {title: '加工方式', field: 'processMethod'},
-        {title: '单位', field: 'unit'},
-        {title: '计划采购数', field: 'planPurchaseNum'},
-      ],
-    };
-    $.table.init(tableId, tableOptions, data);
-  }
   function submitHandler() {
     if ($.validate.form()) {
-      $.operate.save(prefix + "/add", $("#form-plan-add").serialize());
+      var allMaterialsData = {
+        purchaseOrder: {
+          purchaseOrderChildList: [], // 采购订单下的所有物料信息数组
+        },
+      };
+      // 存储所有物料的汇总信息
+      // 遍历每个物料容器
+      var materialData = {};
+      $('.table-materialCode').each(function (index, tableElement) {
+        for (tableId in tableIdList) {
+          var material = materialList[tableId];
+          materialData = {
+            materialCode: '', // 物料编码，需要从对应物料信息中获取
+            materialNum: $('#' + 'actualPurchaseNum_' + tableId).val(), // 实际采购数
+            purchaseQuoteChildList: [], // 该物料下的供应商信息数组
+            materialNoRmbSum: $('#' + 'materialNoRmbSum_' + tableId).val(), // 不含税总价
+            materialRmbSum: $('#' + 'materialRmbSum_' + tableId).val(), // 含税总价
+          };
+          var $supplierForm = $('#card_body_' + tableId);
+          $supplierForm.find('.card').each(function (index, element) {
+            if (index > 0) { // 跳过第一个card，因为它应该是物料头信息
+              var supplier = {
+                supplierCode: $(element).find('.card-header span:first').text().trim(),
+                supplierName: $(element).find('.card-header span:eq(1)').text().trim(),
+                materialNoRmb: parseFloat($(supplierCard).find('.card-header').text().match(/最新不含税采购价: (\d+(\.\d+)?) RMB/)[1]),
+                materialRmb: parseFloat($(supplierCard).find('.card-header').text().match(/最新含税采购价: (\d+(\.\d+)?) RMB/)[1]),
+                materialRmbSum: $(element).find('input[name="materialRmbSum"]').val(),
+                materialNoRmbSum: $(element).find('input[name="materialNoRmbSum"]').val(),
+                deliveryTime: $(element).find('input[name="deliveryTime"]').val(),
+                materialNum: $(element).find('input[name="materialNum"]').val(),
+              };
+              materialData.purchaseOrder.purchaseOrderChildList.purchaseQuoteChildList.push(supplier);
+            }
+          })
+        }
+      });
+      // 根据实际情况获取物料编码等其他必要信息，这里假设可以从某个地方获取
+      // 例如：materialData.materialCode = ...;
+      allMaterialsData.purchaseOrder.purchaseOrderChildList.push(materialData);
     }
+      // 将收集到的所有物料信息转换为JSON，准备发送
+      var jsonData = JSON.stringify(allMaterialsData);
+      // 发送数据到后端API
+      $.operate.saveJson(prefix + "/add", jsonData);
   }
 </script>
 </body>