czl-web/pages/newpro/newProForm.html

589 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>新工程预安排表单</title>
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
</head>
<style>
.layui-form-label {
position: relative;
float: left;
display: block;
padding: 9px 10px;
width: 100%;
font-weight: 400;
line-height: 20px;
text-align: right;
}
table {
border-collapse: collapse;
overflow: auto;
}
table, th, td {
border: 1px solid rgb(219 219 219);
text-align: center;
font-size: 16px;
}
th, td {
padding: 10px;
text-align: center;
}
.table-input[type="number" i] {
padding: 2px 4px;
width: 100%;
height: 20px;
border: none;
text-align: center;
}
.table-input {
outline: none; /* 取消默认的选中时轮廓线 */
border: 0px solid #919090; /* 设置选中时的边框样式 */
background-color: #f0f0f0; /* 设置选中时的背景颜色 */
color: #000; /* 设置选中时的文字颜色 */
border-radius: 5px;
text-indent: 5px;
}
</style>
<body>
<form class="layui-form" action="" onsubmit="return false">
<div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-col-xs3">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i> 分公司:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 54.5%;">
<select id="orgId" name="orgId" class="layui-select" lay-search="" lay-verify="required"
lay-filter="orgId"></select>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline" style="width:100%">
<div class=" layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>工程名称:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 48%;">
<input class="proName layui-input" id="proName" name="proName" maxlength="32"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>电压等级:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 54.5%;">
<select id="volLevelIds" name="volLevelIds" class="layui-select" lay-search=""
lay-verify="required"
lay-filter="volLevelIds"></select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>开竣工时间:</label>
</div>
<div class="layui-inline" id="ID-laydate-rangeLinked" style="width:54%">
<div class="layui-input-inline" style="width:40.5%">
<input type="text" autocomplete="off" id="startTime" class="layui-input" style="padding-left: 5px;width:80px" lay-verify="required"
placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width:40.5%">
<input type="text" autocomplete="off" id="endTime" class="layui-input" style="padding-left: 5px;width:80px" lay-verify="required"
placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
规模km</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="scale layui-input" id="scale" name="scale" min="0" step="0.01"
oninput="validity.valid||(value='');"
type="number"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width:275px">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
预安排承接分包商及班组需求数量:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 76%;">
<textarea placeholder="请输入内容" class="layui-textarea" id="theQuantityRequiredNum"
name="theQuantityRequiredNum" style="margin-left: 21%"
lay-verify="required"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
班组和:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="班组和 layui-input" id="teamNum" name="班组和" type="number" min="0"
oninput="validity.valid||(value='');"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
功效:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="efficacy layui-input" id="efficacy" name="efficacy" type="number" min="0" step="0.01"
oninput="validity.valid||(value='');"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>公里数:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="kilometers layui-input" id="kilometers" name="kilometers" type="number"
oninput="validity.valid||(value='');"
min="0" step="0.01"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
布距:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="clothSpacing layui-input" id="clothSpacing" name="clothSpacing"
type="number" min="0" step="0.01" oninput="validity.valid||(value='');"
lay-verify="required">
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i> 塔基数:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="baseNumberOfTowers layui-input" id="baseNumberOfTowers"
name="baseNumberOfTowers" type="number" min="0" oninput="validity.valid||(value='');"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
总施工天数:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="totalConstructionDays layui-input" id="totalConstructionDays"
name="totalConstructionDays" type="number" min="0"
oninput="validity.valid||(value='');"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>计数(月数)转化为天数:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="planToDay layui-input" id="planToDay" name="planToDay" type="number"
min="0" oninput="validity.valid||(value='');"
lay-verify="required">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="display: none">
<div class="layui-input-block">
<button type="submit" class="layui-btn subBtn" id="commit" lay-submit lay-filter="formDemo">提交
</button>
</div>
</div>
<div id="table-container" style="max-width: 100%;overflow-x: auto;padding: 5px"></div>
</div>
</form>
</body>
</html>
<script src="../../js/jquery/jquery-3.6.0.js"></script>
<script src="../../layui-v2.8.18/layui/layui.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script src="../../js/common_methon.js"></script>
<script type="text/javascript" src="../../js/publicJs.js"></script>
<script type="text/javascript" src="../../js/select.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript">
layui.config({
base: '../../js/layuiModules/', // 第三方模块所在目录
version: 'v1.6.4' // 插件版本号
}).extend({
soulTable: 'notice,layNotify', // 模块
});
var form;
var table;
var newData;
var notice;
var layNotify;
var laydate;
var id = localStorage.getItem("newProId");
var type = localStorage.getItem("type");
layui.use(['table', 'form', 'notice', 'layNotify', 'laydate'], function () {
laydate = layui.laydate;
table = layui.table;
form = layui.form;
notice = layui.notice;
layNotify = layui.layNotify;
form.verify
getVoltageLevel(form, "");
getOrgName(form, "");
initTime();
if (!isEmpty(id)) {
//修改
getData();
if (type == '3'){
// 获取所有的 input、textarea 和 select 元素
const inputElements = document.querySelectorAll('input, textarea, select');
// 遍历所有元素,设置为不可更改和不可选择
inputElements.forEach(function(element) {
element.setAttribute('readonly', 'readonly'); // 设置为只读,不可更改
element.setAttribute('disabled', 'disabled'); // 设置为禁用,不可选择
});
}
}
// 验证成功后才会执行下面的操作
form.on('submit(formDemo)', function (data) {
addInfo("1"); //新增方法
});
});
function initTime() {
// 获取当前日期的年份和月份
// 日期范围 - 左右面板联动选择模式
laydate.render({
elem: '#ID-laydate-rangeLinked',
range: ['#startTime', '#endTime'],
min: getNowTime(), // 设置最小日期为当前月份的起始日期
done: function (value, date) {
// 自定义事件处理逻辑
console.log('用户选择的时间范围为:', value);
console.log('用户选择的时间范围为:', value.substring(0, 10));
console.log('用户选择的时间范围为:', value.substring(13, 23));
// 在这里执行你想要的操作
generateTable(value.substring(0, 10), value.substring(13, 23));
}
});
}
var arrMonth = [];
function generateTable(start, end) {
var startDate = new Date(start);
var endDate = new Date(end);
var table = '<table style="width: 100%"><tr><th rowspan="2" style="min-width: 70px;">工序</th>';
var startYear = startDate.getFullYear();
var endYear = endDate.getFullYear();
arrMonth = getMonthsBetweenDates(startDate, endDate);
var monthsInEachYear = 12;
var yearArr = [startYear];
var yearCount = [];
var count = 0;
for (var i = 0; i < arrMonth.length; i++) {
if (startYear != arrMonth[i].substring(0, 4)) {
startYear = arrMonth[i].substring(0, 4);
yearArr.push(arrMonth[i].substring(0, 4))
yearCount.push(count);
count = 1;
} else {
count += 1;
}
if (i == arrMonth.length - 1) {
yearCount.push(count);
}
}
for (var i = 0; i < yearArr.length; i++) {
table += '<th colspan="' + yearCount[i] + '" >' + yearArr[i] + '年</th>'; // 合并单元格
}
table += '</tr><tr>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<th style="min-width: 70px;width:auto">' + arrMonth[i].substring(5, 8) + '月</th>';
}
table += '</tr><tr><td style="min-width: 70px;">基础</td>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<td style="min-width: 70px;width:auto"><input class="table-input" id="jc_' + i + '" type="number" min="0" oninput="validity.valid||(value=\'\');"/></td>';
}
table += '</tr><tr><td style="min-width: 70px;">组塔</td>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<td style="min-width: 70px;width:auto"><input class="table-input" id="zt_' + i + '" type="number" min="0" oninput="validity.valid||(value=\'\');"/></td>';
}
table += '</tr><tr><td style="min-width: 70px;">架线</td>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<td style="min-width: 70px;width:auto"><input class="table-input" id="jx_' + i + '" type="number" min="0" oninput="validity.valid||(value=\'\');"/></td>';
}
table += '</tr></table>';
document.getElementById('table-container').innerHTML = table;
}
function getDateString(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '-' + month + '-' + day;
}
function getMonthsBetweenDates(startDate, endDate) {
var start = new Date(startDate);
var end = new Date(endDate);
var months = [];
var firstDay = getFirstDayOfMonth(start);
var currentDate = new Date(firstDay);
while (currentDate <= end) {
var year = currentDate.getFullYear();
var month = currentDate.getMonth() + 1;
months.push(year + '-' + (month < 10 ? '0' : '') + month); // 将年月格式化为字符串并添加到数组中
currentDate.setMonth(currentDate.getMonth() + 1); // 增加一个月
}
console.log('总共有' + months.length + '个月');
console.log('每个月份:', months);
return months;
}
function getFirstDayOfMonth(start) {
var today = new Date(start);
var year = today.getFullYear();
var month = today.getMonth();
var firstDayOfMonth = new Date(year, month, 1);
return firstDayOfMonth;
}
function getTableData() {
var jcObj = [];
var ztObj = [];
var jxObj = [];
for (var i = 0; i < arrMonth.length; i++) {
jcObj.push({'jc': $("#jc_" + i).val()})
ztObj.push({'zt': $("#zt_" + i).val()})
jxObj.push({'jx': $("#jx_" + i).val()})
}
var obj = {
"jcObj": jcObj,
"ztObj": ztObj,
"jxObj": jxObj
};
console.log(JSON.stringify(obj));
return JSON.stringify(obj);
}
function setData(jsonData) {
var data = {
"jcObj": [{"jc": "11"}, {"jc": "12"}, {"jc": "13"}, {"jc": "14"}, {"jc": "15"}, {"jc": "16"}, {"jc": ""}, {"jc": "34"}, {"jc": "34"}, {"jc": "45"}, {"jc": "55"}, {"jc": ""}, {"jc": ""}],
"ztObj": [{"zt": ""}, {"zt": "44"}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": "55"}, {"zt": ""}, {"zt": ""}],
"jxObj": [{"jx": "55"}, {"jx": "66"}, {"jx": ""}, {"jx": "55"}, {"jx": "67"}, {"jx": "55"}, {"jx": ""}, {"jx": ""}, {"jx": "55"}, {"jx": ""}, {"jx": ""}, {"jx": ""}, {"jx": ""}]
};
// var o = JSON.stringify(data);
var obj = JSON.parse(jsonData)
var length = arrMonth.length;
if (obj.jcObj.length < arrMonth.length) {
length = obj.jcObj.length;
}
for (var i = 0; i < length; i++) {
$("#jc_" + i).val(obj.jcObj[i].jc)
$("#zt_" + i).val(obj.ztObj[i].zt)
$("#jx_" + i).val(obj.jxObj[i].jx)
}
}
function getData() {
$.ajax({
type: 'post',
url: ctxPath + '/newPro/getListById',
dataType: 'json', // 服务器返回数据类型
async: false,
data: {
id: id,
},
success: function (data) {
var resMsg = data.resMsg;
if ("数据获取成功" == resMsg) {
let info = data.obj.newProBean;
getOrgName(form, info.orgId);
$("#proName").val(info.proName);
getVoltageLevel(form, info.voltageLevelId);
$("#startTime").val(info.startTime);
$("#endTime").val(info.endTime);
$("#scale").val(info.scale);
$("#theQuantityRequiredNum").val(info.theQuantityRequiredNum);
$("#teamNum").val(info.teamNum);
$("#efficacy").val(info.efficacy);
$("#kilometers").val(info.kilometers);
$("#clothSpacing").val(info.clothSpacing);
$("#baseNumberOfTowers").val(info.baseNumberOfTowers);
$("#totalConstructionDays").val(info.totalConstructionDays);
$("#planToDay").val(info.planToDay);
generateTable(info.startTime,info.endTime);
setTimeout(function () {
setData(info.jsonData);
},500)
}
},
error: function (err) {
console.log("获取工程下拉列表出错:", err);
}
});
}
function addInfo() {
var tip = '保存';
var formUrl = ctxPath + "/newPro/addInfo";
if (type == '2') {
tip = '修改';
formUrl = ctxPath + "/newPro/updateInfo";
}
var jsonData = getTableData();
var data = {
orgId: $("#orgId").val(),
orgName: $("#orgId").find("option:selected").text(),
proName: $("#proName").val(),
voltageLevelId: $("#volLevelIds").val(),
startTime: $("#startTime").val(),
endTime: $("#endTime").val(),
scale: $("#scale").val(),
theQuantityRequiredNum: $("#theQuantityRequiredNum").val(),
teamNum: $("#teamNum").val(),
efficacy: $("#efficacy").val(),
kilometers: $("#kilometers").val(),
clothSpacing: $("#clothSpacing").val(),
baseNumberOfTowers: $("#baseNumberOfTowers").val(),
totalConstructionDays: $("#totalConstructionDays").val(),
planToDay: $("#planToDay").val(),
jsonData: jsonData,
id: isEmpty(id) ? '' : id,
}
// 加载提示
var addLoadingMsg = top.layer.msg('数据上传中,请稍候...', {
icon: 16,
scrollbar: false,
time: 0,
shade: [0.8, '#393D49']
});
$.ajax({
type: 'post',
async: false, // 默认异步true,false表示同步
url: formUrl, // 请求地址
contentType: "application/json; charset=utf-8",
dataType: 'json', // 服务器返回数据类型
data: JSON.stringify(data), //获取提交的表单字段
success: function (data) {
if (data.resMsg == "发起成功") {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", tip + "成功", "success");
setTimeout(function () {
parent.layer.closeAll();
window.parent.table.reload('menuTable');
}, 2000);
} else if (data.resMsg == "工程名称已存在") {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", "工程名称已存在", "error");
} else {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", tip + "失败", "error");
}
},
error: function (XMLHttpRequest, textStatus, e) {
layer.msg('数据请求发生异常,请稍后重试', {icon: 16, scrollbar: false});
top.layer.close(addLoadingMsg); //再执行关闭
}
});
}
function getNowTime() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1);
var day = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate();
return year + "-" + month + "-" + day;
}
function reloadTip(tip, message, type) {
parent.layNotify.notice({
title: tip + "提示",
type: type,
message: message
});
}
</script>