|
|
|
@ -6,51 +6,61 @@ |
|
|
|
<body class="white-bg"> |
|
|
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> |
|
|
|
<form class="form-horizontal m" id="form-plan-add" th:object="${purchasePlanList}"> |
|
|
|
<div class="container"> |
|
|
|
<label class="col-sm-3 control-label">已选择采购计划：</label> |
|
|
|
<div class="col-sm-6"> |
|
|
|
<input name="purchasePlanCode" class="form-control" type="text"> |
|
|
|
<div class="form-header"> |
|
|
|
<label class="col-sm-5 control-label">已选择采购计划：</label> |
|
|
|
<div class="col-sm-7"> |
|
|
|
<input id="purchasePlanCodes" name="purchasePlanCode" class="form-control" type="text"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="container"> |
|
|
|
<div class="form-row"> |
|
|
|
<span class="form-header-4">公司收获地址:</span> |
|
|
|
<div class="container-div" id="material"> |
|
|
|
<div class="col-sm-12 select-table table-striped"> |
|
|
|
<div class="other container"> |
|
|
|
<div class="form-row"> |
|
|
|
<div class="btn-group-sm" id="toolbar" role="group"> |
|
|
|
<span>物料信息1</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-sm-12 select-table table-striped"> |
|
|
|
<table id="bootstrap-sub-table-order"></table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
</div> |
|
|
|
<div class="container"> |
|
|
|
<h4 class="form-header h4">公司地址</h4> |
|
|
|
<div class="form-group"> |
|
|
|
<label for="inputWarehouseID" class="col-sm-3 col-form-label">仓库ID:</label> |
|
|
|
<div class="col-sm-5"> |
|
|
|
<div class="col-sm-8"> |
|
|
|
<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-5"> |
|
|
|
<div class="col-sm-8"> |
|
|
|
<input type="text" class="form-control" id="inputWarehouseName" placeholder="请输入仓库名称"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="form-group"> |
|
|
|
<label for="inputReceiver" class="col-sm-3 col-form-label">收货人:</label> |
|
|
|
<div class="col-sm-5"> |
|
|
|
<div class="col-sm-8"> |
|
|
|
<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-5"> |
|
|
|
<input type="tel" class="form-control" id="inputPhone" placeholder="请输入收货电话"> |
|
|
|
<div class="col-sm-8"> |
|
|
|
<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-5"> |
|
|
|
<textarea class="form-control" id="inputAddressDetails" rows="3"></textarea> |
|
|
|
<div class="col-sm-8"> |
|
|
|
<textarea class="form-control" id="inputAddressDetails"></textarea> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
<th:block th:include="include :: footer" /> |
|
|
|
@ -58,10 +68,9 @@ |
|
|
|
var prefix = ctx + "purchase/plan" |
|
|
|
$("#form-plan-add").validate({focusCleanup: true}); |
|
|
|
var purchasePlanList = [[${purchasePlanList}]]; |
|
|
|
|
|
|
|
function submitHandler() { |
|
|
|
if ($.validate.form()) { |
|
|
|
$.operate.save(prefix + "/add", $('#form-plan-add').serialize()); |
|
|
|
$.operate.save(prefix + "/add", $(#form-plan-add).serialize()); |
|
|
|
} |
|
|
|
} |
|
|
|
//根据物料物料数量添加物料分类表，自动生成类似的表单对象 |
|
|
|
@ -71,93 +80,98 @@ |
|
|
|
var formId = $("#form-plan-add").attr("id"); |
|
|
|
//获取采购计划单的物料信息 |
|
|
|
var materialList = []; |
|
|
|
var purchasePlanList = $("#purchasePlanCodes").val(); |
|
|
|
//获取 |
|
|
|
function addMaterial() { |
|
|
|
//循环生成表 |
|
|
|
//在表中正在循环生成表供应商相关信息 |
|
|
|
var row = |
|
|
|
'<div className="row purchase-table"> ' + |
|
|
|
'<span className="help-block m-b-none">物料 ： </span>'+ |
|
|
|
'<div className="col-sm-12 select-table table-striped">'+ |
|
|
|
'<table id="bootstrap-table"></table>'+ |
|
|
|
'</div>'+ |
|
|
|
'</div>' |
|
|
|
} |
|
|
|
$(function() { |
|
|
|
// 假设qualityOrderCode已经定义或者可以通过某种方式获取到 |
|
|
|
var materialList = purchasePlanList; |
|
|
|
for (var i = 0; i < materialList.length; i++) { |
|
|
|
var material = materialList[i]; |
|
|
|
var row = |
|
|
|
'<div className="row purchase-table"> ' + |
|
|
|
'<span className="help-block m-b-none">物料 ： </span>'+ |
|
|
|
'<div className="col-sm-12 select-table table-striped">'+ |
|
|
|
'<table id="bootstrap-table"></table>'+ |
|
|
|
'</div>'+ |
|
|
|
'</div>' |
|
|
|
var tableId = 'bootstrap-table-' + supplierCode.replace(/[^a-z0-9]/gi, '_').toLowerCase(); |
|
|
|
var options = { |
|
|
|
id: "bootstrap-table" + tableCounter, |
|
|
|
// url: prefix + "/list", |
|
|
|
modalName: "采购计划单", |
|
|
|
search: false, |
|
|
|
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(options); |
|
|
|
var materialList = purchasePlanList; // 假设这是获取到的物料列表 |
|
|
|
var tableCounter = 0; // 计数器，用于生成唯一的表格ID |
|
|
|
// 遍历物料列表，为每个物料生成表格 |
|
|
|
materialList.forEach(function(material, index) { |
|
|
|
var $tableWrapper = $('<div class="table-responsive mt-3"></div>'); |
|
|
|
var $table = $('<table id="' + uniqueTableId + '" class="table table-striped table-bordered"></table>'); |
|
|
|
|
|
|
|
} |
|
|
|
// 初始化此表格的配置 |
|
|
|
var tableOptions = Object.assign({}, options, { // 复制并修改options以适应当前物料 |
|
|
|
id: uniqueTableId, |
|
|
|
data: [material] // 假设options支持直接传入数据来渲染表格 |
|
|
|
}); |
|
|
|
$.table.init(tableOptions, $table); // 假设$.table.init可以接受jQuery对象来初始化表格 |
|
|
|
|
|
|
|
// 添加表头信息 |
|
|
|
var supplierInfo = material.supplier || {}; // 假设物料对象中包含供应商信息 |
|
|
|
addHead(uniqueTableId, material, supplierInfo); |
|
|
|
|
|
|
|
// 将表格加入到页面的某个容器中，这里假设存在一个容器div#materials-container |
|
|
|
$('#materials-container').append($tableWrapper.append($table)); |
|
|
|
}); |
|
|
|
}); |
|
|
|
function addhead(tableId,data,supplierInfo) { |
|
|
|
var headerTitle = |
|
|
|
'供应商' + '</br>' + +' - ' + (supplierInfo.supplierName || 'N/A') + |
|
|
|
' </br> ' + (supplierInfo.customerContact || 'N/A') + |
|
|
|
' - ' + '最新不含税采购价' + '10' + 'RMB' + ' 最新含税采购价:' + '20' + 'RMB' + |
|
|
|
'<div class="form-group">' + |
|
|
|
'<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-group">' + |
|
|
|
'<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-group">' + |
|
|
|
'<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-group">' + |
|
|
|
'<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-group">' + |
|
|
|
'<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>'; |
|
|
|
var $header = $('<h4>' + headerTitle + '</h4>'); |
|
|
|
var $table = $('<table id="' + tableId + '" class="table table-striped table-bordered"></table>'); |
|
|
|
} |
|
|
|
function bootstrapTable(id,data) { |
|
|
|
$('#'+ id).bootstrapTable({ |
|
|
|
data: data, |
|
|
|
// 假设qualityOrderCode已经定义或者可以通过某种方式获取到 |
|
|
|
|
|
|
|
$(function() { |
|
|
|
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: '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', |
|
|
|
},] |
|
|
|
}); |
|
|
|
//在行数据下添加采购供应商信息。 |
|
|
|
} |
|
|
|
{title: '品牌', field: 'brand'}, |
|
|
|
{title: '加工方式', field: 'processMethod'}, |
|
|
|
{title: '单位', field: 'unit'}, |
|
|
|
{title: '计划采购数', field: 'planPurchaseNum'}, |
|
|
|
] |
|
|
|
}; |
|
|
|
purchasePlanList.forEach(function(material, index) { |
|
|
|
// 创建一个新的表格容器 |
|
|
|
var $tableWrapper = $('<div class="table-responsive mt-3"></div>'); |
|
|
|
var tableId = 'bootstrap-table-' + index; |
|
|
|
var $table = $('<table id="' + tableId + '" class="table table-striped table-bordered"></table>'); |
|
|
|
|
|
|
|
// 在每个表格前添加关联销售订单号 |
|
|
|
var $headerDiv = $('<div class="header-div text-center mb-3"><strong>关联销售订单号:</strong> ' + material.salesOrderCode + '</div>'); |
|
|
|
$tableWrapper.append($headerDiv); |
|
|
|
|
|
|
|
// 使用物料数据初始化表格 |
|
|
|
var materialData = [material]; // Bootstrap Table需要一个数组作为数据源 |
|
|
|
var tableOpts = Object.assign({}, tableOptions, {data: materialData}); |
|
|
|
$table.bootstrapTable(tableOpts); |
|
|
|
|
|
|
|
// 添加到DOM中 |
|
|
|
$('#material').append($tableWrapper.append($table)); // 根据实际情况调整父容器选择器 |
|
|
|
}) |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
zhangsiqi
5 months ago