Browse Source
新增销售估价物料详情添加子表物料数据前端页面 工程添加物料页面新增添加物料按钮 销售估价Controller新增 新增销售估价 销售估价详情数据集合展示 后端接口；新增 加载新增销售估价-工程 子表物料选择弹窗后端接口；新增 销售估价添加Bom-工程 新增保存物料后端接口； 销售估价详情实体类新增 销售估价详情物料子表集合 销售估价详情新增 根据估价编号查询估价详情集合后端接口 销售估价详情物料新增 批量新增销售估价详情物料价格后端接口dev
12 changed files with 526 additions and 147 deletions
@ -0,0 +1,249 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh" xmlns:th="http://www.thymeleaf.org"> |
|||
<head> |
|||
<th:block th:include="include :: header('新增子表物料信息列表')" /> |
|||
</head> |
|||
<body class="white-bg"> |
|||
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-sm-12 d-flex align-items-center"> |
|||
<span style="font-weight: bold; font-family: Arial, sans-serif; font-size: 15px;">物料信息列表</span> |
|||
<a class="btn btn-success ml-auto" onclick="addChildMaterial()"> |
|||
<i class="fa fa-plus"></i> 添加物料 |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-sm-12 select-table table-striped"> |
|||
<table id="bootstrap-addChildMaterial-table"></table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<th:block th:include="include :: footer" /> |
|||
<th:block th:include="include :: bootstrap-table-editable-js" /> |
|||
<script th:src="@{/js/jquery.tmpl.js}"></script> |
|||
<script th:inline="javascript"> |
|||
var prefix = ctx + "sales/estimate"; |
|||
var estimateDetailId = [[${estimateDetailId}]]; |
|||
var salesEstimateDetail = [[${salesEstimateDetail}]]; |
|||
var materialTypeDatas = [[${@category.getChildByCode('materialType')}]]; |
|||
var sysUnitClassDatas = [[${@dict.getType('sys_unit_class')}]]; |
|||
|
|||
var $table = $("#bootstrap-addChildMaterial-table"); |
|||
|
|||
|
|||
$(function() { |
|||
var options = { |
|||
id: 'bootstrap-addChildMaterial-table', |
|||
showColumns: false, |
|||
pagination: false, |
|||
showToggle: false, |
|||
showRefresh:false, |
|||
showSearch:false, |
|||
modalName: "物料信息", |
|||
columns: [{ |
|||
checkbox: true |
|||
}, |
|||
{ |
|||
field: 'index', |
|||
align: 'center', |
|||
title: "序号", |
|||
formatter: function (value, row, index) { |
|||
var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index)); |
|||
var columnId = $.common.sprintf("<input type='hidden' name='salesEstimateDetailMaterialList[%s].id' value='%s'>", index, row.id); |
|||
return columnIndex + $.table.serialNumber(index) + columnId; |
|||
} |
|||
}, |
|||
|
|||
|
|||
{ |
|||
title: '估价详情物料子表Id', |
|||
field: 'estimateDetailMaterialId', |
|||
visible: false |
|||
}, |
|||
{ |
|||
title: '物料名称', |
|||
field: 'materialName', |
|||
editable: true, |
|||
}, |
|||
{ |
|||
title: '物料类型', |
|||
field: 'materialType', |
|||
formatter: function(value, row, index) { |
|||
var data = [{ index: index, type: value }]; |
|||
return $("#materialType").tmpl(data).html(); |
|||
} |
|||
}, |
|||
{ |
|||
title: '物料单位', |
|||
field: 'materialUnit', |
|||
formatter:function (value, row, index) { |
|||
return materialUnitFormatter(value,row,index); |
|||
} |
|||
}, |
|||
{ |
|||
title: '物料描述', |
|||
field: 'materialDescribe', |
|||
editable: true, |
|||
}, |
|||
{ |
|||
title: '用量', |
|||
field: 'useNum', |
|||
editable: true, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
align: 'center', |
|||
formatter: function(value, row, index) { |
|||
var actions = []; |
|||
actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="removeRow(\'' + row.estimateDetailMaterialId + '\')"><i class="fa fa-remove"></i>删除</a> '); |
|||
return actions.join(''); |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
$.table.init(options); |
|||
|
|||
}); |
|||
|
|||
|
|||
//添加收款明细 |
|||
function addChildMaterial() { |
|||
// 生成一个简单的唯一标识，这里使用时间戳作为示例 |
|||
var uniqueId = new Date().getTime(); |
|||
// 创建一个新行数据模板，这里仅为示例，具体根据表格列来定义 |
|||
var newRow = { |
|||
estimateDetailMaterialId:uniqueId, |
|||
materialName: "", |
|||
materialType:"", |
|||
materialUnit: "", |
|||
materialDescribe: "", |
|||
useNum: "", |
|||
}; |
|||
|
|||
// 使用Bootstrap Table的API插入新行 |
|||
$('#bootstrap-addChildMaterial-table').bootstrapTable('append', newRow); |
|||
|
|||
} |
|||
|
|||
// 逻辑物料子表前端的一行数据 |
|||
function removeRow(estimateDetailMaterialId){ |
|||
console.log(estimateDetailMaterialId); |
|||
// 直接使用 estimateDetailMaterialId 值进行删除操作 |
|||
$("#bootstrap-addChildMaterial-table").bootstrapTable('remove', { |
|||
field: 'estimateDetailMaterialId', |
|||
values: estimateDetailMaterialId |
|||
}); |
|||
} |
|||
|
|||
function submitHandler() { |
|||
var addChildMaterialTable = $('#bootstrap-addChildMaterial-table').bootstrapTable('getData') |
|||
if(addChildMaterialTable.length == 0){ |
|||
$.modal.alertWarning("请添加物料信息"); |
|||
return; |
|||
} |
|||
console.log(JSON.stringify(addChildMaterialTable)) |
|||
|
|||
|
|||
for(var i=0;i<addChildMaterialTable.length;i++){ |
|||
if(addChildMaterialTable[i].materialName == "" || addChildMaterialTable[i].materialUnit == "" || addChildMaterialTable[i].materialDescribe == "" || addChildMaterialTable[i].useNum == ""){ |
|||
$.modal.alertWarning("请填写完整信息"); |
|||
return; |
|||
} |
|||
} |
|||
|
|||
//将表数据转换成与complaintNoticeData格式一致的数组 |
|||
var addChildMaterialList = addChildMaterialTable.map(function(item) { |
|||
// 根据实际字段名调整 |
|||
return { |
|||
"materialName": item.materialName, |
|||
"materialType": item.materialType, |
|||
"materialUnit": item.materialUnit, |
|||
"materialDescribe": item.materialDescribe, |
|||
"useNum": item.useNum, |
|||
// ...其他字段 |
|||
}; |
|||
}); |
|||
const combinedData = Object.assign({},salesEstimateDetail ,{ salesEstimateDetailMaterialList: addChildMaterialList }); |
|||
|
|||
console.log(combinedData) |
|||
// 使用 JSON.stringify() 序列化数据 |
|||
const jsonData = JSON.stringify(combinedData); |
|||
// 发送 AJAX 请求到后端接口 |
|||
$.operate.saveJson(prefix + "/addChildMaterialSave", jsonData); |
|||
|
|||
} |
|||
|
|||
|
|||
// 列中获取不良等级的下拉改变数据 |
|||
function onMaterialUnit(selectElement, rowIndex) { |
|||
var materialUnitValue = $(selectElement).val(); |
|||
var tableData = $table.bootstrapTable('getData'); |
|||
var newRow = tableData[rowIndex]; // 获取当前行数据 |
|||
// 重新渲染成本小类的设备名称列 |
|||
// 更新行数据 |
|||
newRow.materialUnit = materialUnitValue; |
|||
$table.bootstrapTable('updateRow', {index: rowIndex, row: newRow}); |
|||
} |
|||
|
|||
// 自定义不良等级的格式化函数 |
|||
function materialUnitFormatter(value, row, index) { |
|||
var selectHtml = '<select class="form-control" onchange="onMaterialUnit(this, ' + index + ')">'; |
|||
|
|||
// 添加默认选项 |
|||
selectHtml += '<option value=""' + (value === undefined || value === '' ? ' selected' : '') + '>所有</option>'; |
|||
|
|||
sysUnitClassDatas.forEach(function (child) { |
|||
selectHtml += '<option value="' + child.dictValue + '"' + (value === child.dictValue ? ' selected' : '') + '>' + child.dictLabel + '</option>'; |
|||
}); |
|||
|
|||
selectHtml += '</select>'; |
|||
return selectHtml; |
|||
} |
|||
|
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
<!-- 物料类型下拉框模板--> |
|||
<script id="materialType" type="text/x-jquery-tmpl"> |
|||
<div> |
|||
<select name='salesEstimateDetailMaterialList[${index}].materialType' class="form-control m-b select2-multiple" th:with="childList=${@category.getChildByCode('materialType')}" required> |
|||
<optgroup th:each="child: ${childList}" th:label="${child.name}"> |
|||
<option th:each="childSon: ${child.children}" th:value="${childSon.code}" th:text="${#strings.concat(child.name,'-',childSon.name)}"></option> |
|||
</optgroup> |
|||
</select> |
|||
</div> |
|||
</script> |
|||
|
|||
|
|||
<!--<script id="materialUnit" type="text/x-jquery-tmpl">--> |
|||
<!--<div>--> |
|||
<!--<select name="materialUnit" class="form-control m-b" th:with="type=${@dict.getType('sys_unit_class')}">--> |
|||
<!-- <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>--> |
|||
<!--</select>--> |
|||
|
|||
<!--</div>--> |
|||
<!--</script>--> |
|||
|
|||
<!--<script id="materialName" type="text/x-jquery-tmpl">--> |
|||
<!--<div>--> |
|||
<!--<input type="text" class="form-control" name='salesEstimateDetailMaterialList[%s].materialName' value='%s' required>--> |
|||
<!--</div>--> |
|||
<!--</script>--> |
|||
|
|||
<!--<script id="materialDescribe" type="text/x-jquery-tmpl">--> |
|||
<!--<div>--> |
|||
<!--<input type="text" class="form-control" name="materialDescribe" required>--> |
|||
<!--</div>--> |
|||
<!--</script>--> |
|||
|
|||
<!--<script id="useNum" type="text/x-jquery-tmpl">--> |
|||
<!--<div>--> |
|||
<!--<input type="text" class="form-control" name="useNum" required>--> |
|||
<!--</div>--> |
|||
<!--</script>--> |
|||
|
|||
Loading…
Reference in new issue