This commit is contained in:
BianLzhaoMin 2026-02-05 17:21:01 +08:00
parent 25a1849306
commit 6333758883
3 changed files with 1212 additions and 0 deletions

View File

@ -168,6 +168,44 @@ body {
flex: 1;
}
/* 需求计划编号输入框样式 */
.code-input-wrapper {
display: flex;
align-items: center;
border: 1px solid #e6e6e6;
border-radius: 2px;
background-color: #fff;
overflow: hidden;
}
.code-prefix {
padding: 0 10px;
color: #333;
font-size: 14px;
background-color: #f5f5f5;
border-right: 1px solid #e6e6e6;
white-space: nowrap;
flex-shrink: 0;
height: 38px;
line-height: 38px;
}
.code-input {
flex: 1;
border: none;
border-radius: 0;
padding-left: 10px;
}
.code-input:focus {
border: none;
box-shadow: none;
}
.code-input-wrapper:focus-within {
border-color: #409EFF;
}
.input-with-unit .unit {
margin-left: 8px;
font-size: 14px;

View File

@ -0,0 +1,933 @@
// H5移动端 - 车辆紧急计划申请页面
let form, laydate, layer, upload;
let fileList = new Array();
// 页面初始化
layui.use(['form', 'layer', 'laydate', 'upload'], function () {
form = layui.form;
layer = layui.layer;
laydate = layui.laydate;
upload = layui.upload;
// 检查是否有从选择页面返回的数据
checkSelectedData();
// 初始化日期选择器
laydate.render({
elem: '#needTime',
type: 'date'
});
// 表单提交
form.on('submit(formData)', function (data) {
// 提交逻辑稍后处理
return false;
});
// 计划类型切换
form.on('radio(type)', function (data) {
// 切换类型时清空已选数据(如果有)
});
// 字符计数
$('#remark').on('input', function () {
let length = $(this).val().length;
$('#charCount').text(length);
});
// 文件上传初始化 - 使用原生方式
initFileUpload();
form.render();
// 优化下拉选择框宽度
optimizeSelectWidth();
// 监听下拉框打开事件,确保宽度一致
$(document).on('click', '.layui-form-select .layui-select-title', function () {
setTimeout(function () {
optimizeSelectWidth();
// 确保搜索输入框可以正常使用
ensureSearchInput();
}, 100);
});
// 监听窗口大小改变
$(window).on('resize', function () {
optimizeSelectWidth();
});
// 监听下拉框关闭事件
$(document).on('click', function (e) {
if (!$(e.target).closest('.layui-form-select').length) {
setTimeout(function () {
optimizeSelectWidth();
}, 50);
}
});
// 不拦截layui的搜索事件让layui自己处理过滤
// layui会自动处理搜索过滤我们只需要确保样式正确
});
// 优化下拉选择框宽度,使选项框与选择框宽度一致
function optimizeSelectWidth() {
$('.layui-form-select').each(function () {
const $select = $(this);
const selectWidth = $select.outerWidth();
const $dl = $select.find('dl');
if ($dl.length > 0 && selectWidth > 0) {
// 统一设置下拉列表宽度与选择框一致,在选择框下方显示
$dl.css({
'width': selectWidth + 'px',
'min-width': selectWidth + 'px',
'max-width': selectWidth + 'px',
'left': '0px',
'right': 'auto',
'position': 'absolute'
});
// 确保所有选项项宽度为100%,文本可以换行
$dl.find('dd').css({
'width': '100%',
'box-sizing': 'border-box',
'white-space': 'normal',
'word-wrap': 'break-word',
'word-break': 'break-all'
});
}
});
}
// 确保搜索输入框正常显示和工作
function ensureSearchInput() {
// 查找所有layui搜索输入框只确保宽度正确不干扰layui的过滤逻辑
$('.layui-form-select dl input[type="text"], .layui-form-select dl input.layui-input').each(function () {
const $input = $(this);
const $dl = $input.closest('dl');
// 确保搜索输入框宽度正确
if ($dl.length > 0) {
const dlWidth = $dl.width();
$input.css('width', dlWidth + 'px');
}
});
}
// 工程下拉选
function getProList() {
let url = dataUrl + 'backstage/carType/getProListSelected';
ajaxRequest(url, "POST", null, false, function () {
}, function (result) {
if (result.code === 200) {
setSelectData(result.data);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
}, null);
}
// 工程下拉选赋值
function setSelectData(proList) {
let html = '<option value="">请选择工程</option>';
$.each(proList, function (index, item) {
html += '<option value="' + item.id + '">' + item.name + '</option>'
})
$('#proId').empty().append(html);
layui.form.render();
}
// ========== 选择类型页面相关变量和函数 ==========
let selectPageNum = 1;
let selectPageSize = 10;
let selectTotalPages = 1;
let selectSelectedItems = []; // 选中的项目
let selectAllItems = []; // 所有项目数据
// 选择类型 - 显示内嵌的选择页面
function chooseFitType() {
// 获取当前计划类型
const type = $('input[name="type"]:checked').val() || '1';
// 显示选择类型页面
$('#selectTypePage').show();
$('.h5-container').first().hide(); // 隐藏主表单容器
$('.fixed-submit-btn').hide(); // 隐藏提交按钮
// 初始化选择类型页面
initSelectTypePage(type);
}
// 初始化选择类型页面
function initSelectTypePage(type) {
// 重置数据
selectPageNum = 1;
selectSelectedItems = [];
selectAllItems = [];
// 如果有已选数据,加载到选中列表
if (currentSelectedData && currentSelectedData.length > 0) {
selectSelectedItems = currentSelectedData.map(item => ({ ...item }));
}
// 更新选中数量显示
updateSelectSelectedCount();
// 加载数据
loadSelectData(type);
}
// 加载选择类型数据
function loadSelectData(type) {
const id = parseInt(type) === 1 ? 2 : 3;
let url = dataUrl + "backstage/carType/getCarSelected";
let params = {
pageNum: selectPageNum,
pageSize: selectPageSize,
encryptedData: JSON.stringify({
name: $('#selectName').val(),
model: $('#selectModel').val(),
id: id,
})
};
ajaxRequest(url, "GET", params, true, function () {
// loading
}, function (result) {
if (result.list && result.list.length > 0) {
selectAllItems = (result.list || []).map(item => {
// 检查是否在预选数据中
const preselectedItem = selectSelectedItems.find(selected => String(selected.id) === String(item.id));
return {
...item,
backDate: preselectedItem ? (preselectedItem.backDate || preselectedItem.times || 0) : (item.backDate || item.times || 0),
needNum: preselectedItem ? (preselectedItem.needNum || 0) : (item.needNum || 0),
remark: preselectedItem ? (preselectedItem.remark || preselectedItem.remarks || '') : (item.remark || item.remarks || '')
};
});
selectTotalPages = Math.ceil((result.total || 0) / selectPageSize);
renderSelectList();
updateSelectPagination();
updateSelectSelectedCount();
} else {
showSelectEmptyState();
}
}, function (xhr, status, error) {
errorFn(xhr, status, error);
showSelectEmptyState();
});
}
// 渲染选择列表
function renderSelectList() {
if (!selectAllItems || selectAllItems.length === 0) {
showSelectEmptyState();
return;
}
let html = '';
selectAllItems.forEach((item, index) => {
const idStr = String(item.id);
const selectedItem = selectSelectedItems.find(selected => String(selected.id) === idStr);
const isSelected = !!selectedItem;
const itemNumber = (selectPageNum - 1) * selectPageSize + index + 1;
const needNum = isSelected && selectedItem.needNum ? selectedItem.needNum : (item.needNum || '');
const backDate = isSelected && selectedItem.backDate ? selectedItem.backDate : (item.backDate || item.times || '');
const remark = isSelected && selectedItem.remark ? selectedItem.remark : (item.remark || item.remarks || '');
html += `
<div class="list-item ${isSelected ? 'selected' : ''}" data-id="${item.id}">
<div class="item-header">
<div class="item-checkbox-wrapper">
<input type="checkbox" class="item-checkbox" ${isSelected ? 'checked' : ''}
data-item-id="${item.id}">
</div>
<div class="item-content">
<div class="item-number">${itemNumber}</div>
<div class="item-basic-info">
<div class="info-row info-row-1">
<div>
<span class="info-label">类型:</span>
<span class="info-value type-tag">${item.type || ''}</span>
</div>
<div class="info-row-item-1">
<span class="info-label">单位:</span>
<span class="info-value">${item.unit || ''}</span>
</div>
</div>
<div class="info-row">
<span class="info-label">名称:</span>
<span class="info-value name-text">${item.name || ''}</span>
</div>
<div class="info-row">
<span class="info-label">规格:</span>
<span class="info-value spec-text">${item.model || ''}</span>
</div>
</div>
</div>
</div>
<div class="item-body">
<div class="form-row">
<label class="form-label required">需用量</label>
<div class="form-input">
<input type="number" class="layui-input" name="selectNeedNum_${item.id}"
value="${needNum}" placeholder="请输入"
onblur="updateSelectItemField(${item.id}, 'needNum', this.value)"
maxlength="9">
</div>
</div>
<div class="form-row">
<label class="form-label required">使用天数</label>
<div class="form-input">
<input type="number" class="layui-input" name="selectBackDate_${item.id}"
value="${backDate}" placeholder="请输入使用天数"
onblur="updateSelectItemField(${item.id}, 'backDate', this.value)"
maxlength="9">
</div>
</div>
<div class="form-row">
<label class="form-label">备注</label>
<div class="form-input">
<textarea class="layui-textarea" name="selectRemark_${item.id}"
placeholder="请输入备注"
onblur="updateSelectItemField(${item.id}, 'remark', this.value)"
maxlength="255">${remark}</textarea>
</div>
</div>
</div>
</div>
`;
});
$('#selectListContainer').html(html);
$('#selectPaginationBox').show();
// 绑定复选框事件
$(document).off('change', '#selectListContainer .item-checkbox').on('change', '#selectListContainer .item-checkbox', function () {
const $checkbox = $(this);
const itemId = $checkbox.data('item-id');
const checked = $checkbox.is(':checked');
toggleSelectItem(itemId, checked);
});
}
// 切换选中状态
function toggleSelectItem(id, checked) {
const idStr = String(id);
const item = selectAllItems.find(item => String(item.id) === idStr);
if (!item) return;
if (checked) {
const existingIndex = selectSelectedItems.findIndex(selected => String(selected.id) === idStr);
if (existingIndex === -1) {
const needNum = $(`input[name="selectNeedNum_${id}"]`).val() || item.needNum || 0;
const backDate = $(`input[name="selectBackDate_${id}"]`).val() || item.backDate || item.times || 0;
const remark = $(`textarea[name="selectRemark_${id}"]`).val() || item.remark || item.remarks || '';
selectSelectedItems.push({
...item,
needNum: needNum,
backDate: backDate,
remark: remark
});
} else {
const needNum = $(`input[name="selectNeedNum_${id}"]`).val() || selectSelectedItems[existingIndex].needNum || 0;
const backDate = $(`input[name="selectBackDate_${id}"]`).val() || selectSelectedItems[existingIndex].backDate || 0;
const remark = $(`textarea[name="selectRemark_${id}"]`).val() || selectSelectedItems[existingIndex].remark || '';
selectSelectedItems[existingIndex] = {
...selectSelectedItems[existingIndex],
needNum: needNum,
backDate: backDate,
remark: remark
};
}
} else {
selectSelectedItems = selectSelectedItems.filter(selected => String(selected.id) !== idStr);
}
updateSelectSelectedCount();
const $item = $(`.list-item[data-id="${id}"]`);
if (checked) {
$item.addClass('selected');
} else {
$item.removeClass('selected');
}
}
// 更新选择项字段
function updateSelectItemField(id, field, value) {
const selectedItem = selectSelectedItems.find(item => String(item.id) === String(id));
if (selectedItem) {
selectedItem[field] = value;
}
const allItem = selectAllItems.find(item => String(item.id) === String(id));
if (allItem) {
allItem[field] = value;
}
}
// 更新选中数量
function updateSelectSelectedCount() {
$('#selectedNum').text(selectSelectedItems.length);
}
// 更新分页显示
function updateSelectPagination() {
$('#selectPageInfo').text(`${selectPageNum}/${selectTotalPages}`);
const $prevBtn = $('#selectPrevPage');
const $nextBtn = $('#selectNextPage');
if (selectPageNum === 1) {
$prevBtn.prop('disabled', true).addClass('layui-btn-disabled');
} else {
$prevBtn.prop('disabled', false).removeClass('layui-btn-disabled');
}
if (selectPageNum >= selectTotalPages) {
$nextBtn.prop('disabled', true).addClass('layui-btn-disabled');
} else {
$nextBtn.prop('disabled', false).removeClass('layui-btn-disabled');
}
}
// 显示空状态
function showSelectEmptyState() {
$('#selectListContainer').html(`
<div class="empty-state">
<i class="layui-icon layui-icon-file"></i>
<p>暂无数据</p>
</div>
`);
$('#selectPaginationBox').hide();
}
// 查询/重置
function querySelectTable(type) {
if (type === 1) {
selectPageNum = 1;
const currentType = $('input[name="type"]:checked').val() || '1';
loadSelectData(currentType);
} else if (type === 2) {
$('#selectName').val('');
$('#selectModel').val('');
selectPageNum = 1;
const currentType = $('input[name="type"]:checked').val() || '1';
loadSelectData(currentType);
}
}
// 上一页
function selectPrevPage() {
if (selectPageNum > 1) {
selectPageNum--;
const currentType = $('input[name="type"]:checked').val() || '1';
loadSelectData(currentType);
}
}
// 下一页
function selectNextPage() {
if (selectPageNum < selectTotalPages) {
selectPageNum++;
const currentType = $('input[name="type"]:checked').val() || '1';
loadSelectData(currentType);
}
}
// 关闭选择类型页面
function closeSelectTypePage() {
// 隐藏选择类型页面
$('#selectTypePage').hide();
// 显示主表单容器
$('.h5-container').first().show();
// 显示提交按钮
$('.fixed-submit-btn').show();
}
// 确认选择类型
function confirmSelectType() {
if (selectSelectedItems.length === 0) {
return layer.msg('未添加数据', { icon: 7 });
}
// 先同步更新所有已选项目的输入框值
selectSelectedItems.forEach(item => {
const needNum = $(`input[name="selectNeedNum_${item.id}"]`).val();
const backDate = $(`input[name="selectBackDate_${item.id}"]`).val();
const remark = $(`textarea[name="selectRemark_${item.id}"]`).val();
item.needNum = needNum || item.needNum || 0;
item.backDate = backDate || item.backDate || item.times || 0;
item.remark = remark || item.remark || item.remarks || '';
});
// 验证必填字段
for (let i = 0; i < selectSelectedItems.length; i++) {
const item = selectSelectedItems[i];
if (!item.needNum || parseInt(item.needNum) === 0) {
return layer.msg(`${i + 1}项需用量不能为空`, { icon: 7 });
}
if (!item.backDate || parseInt(item.backDate) === 0) {
return layer.msg(`${i + 1}项使用天数不能为空`, { icon: 7 });
}
}
// 保存到currentSelectedData紧急计划不需要carSpec字段
currentSelectedData = selectSelectedItems.map(item => ({
id: item.id,
type: item.type,
name: item.name,
model: item.model,
unit: item.unit,
needNum: item.needNum,
backDate: item.backDate || 0,
remark: item.remark || ''
}));
// 更新显示
if (currentSelectedData.length > 0) {
$('#no_data_title').hide();
$('#has_data_title').show();
$('#selectedCountDisplay').text(currentSelectedData.length);
} else {
$('#no_data_title').show();
$('#has_data_title').hide();
}
// 关闭选择页面
closeSelectTypePage();
layer.msg('选择成功', { icon: 1 });
}
// 紧急计划不需要途径点功能已删除addTjd和delTjd函数
// 初始化文件上传(原生方式)
function initFileUpload() {
const fileInput = document.getElementById('fileInput');
if (!fileInput) {
console.error('文件输入框不存在');
return;
}
// 给input添加点击事件调试用
fileInput.addEventListener('click', function (e) {
}, true);
// 给按钮添加点击事件 - 手动触发input
setTimeout(function () {
$('.upload-btn').on('click', function (e) {
// 阻止事件冒泡到form避免被form的onclick阻止
e.stopPropagation();
// 使用原生方式触发,确保能弹出文件选择器
if (fileInput) {
// 延迟一点触发,确保事件处理完成
setTimeout(function () {
fileInput.click();
}, 10);
}
});
// 给包装器添加点击事件 - 手动触发input
$('.upload-btn-wrapper').on('click', function (e) {
// 如果点击的不是input本身则触发input
if (e.target !== fileInput && !$(e.target).closest('#fileInput').length) {
e.stopPropagation(); // 阻止冒泡到form
setTimeout(function () {
fileInput.click();
}, 10);
}
});
// 给上传区域添加点击事件(调试用)
$('.upload-area').on('click', function (e) {
});
// 给input本身添加点击事件确保不被form阻止
$(fileInput).on('click', function (e) {
e.stopPropagation(); // 阻止冒泡到form
});
}, 100);
// 确保input的点击事件不被阻止
fileInput.addEventListener('click', function (e) {
// 阻止事件冒泡到form避免被form的onclick阻止
e.stopPropagation();
// 不阻止默认行为,让浏览器正常处理
}, false);
// 监听文件选择
fileInput.addEventListener('change', function (e) {
const files = e.target.files;
if (!files || files.length === 0) {
return;
}
// 检查已上传文件数量
let length = $('.file-iteme').length;
if (length >= 5) {
layer.msg('最多上传5个附件证明', { icon: 7 });
fileInput.value = ''; // 清空选择
return;
}
// 处理每个文件
Array.from(files).forEach((file, fileIndex) => {
if (length >= 5) {
return; // 已达到最大数量
}
// 验证文件大小10MB = 1024 * 10 KB
const maxSize = 1024 * 10; // 10MB
if (file.size > maxSize * 1024) {
layer.msg(`文件 ${file.name} 超过10MB限制`, { icon: 7 });
return;
}
// 验证文件类型
const allowedTypes = [
'image/jpg', 'image/png', 'image/jpeg',
'application/pdf',
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
];
const fileExt = file.name.split('.').pop().toLowerCase();
const allowedExts = ['jpg', 'png', 'jpeg', 'doc', 'docx', 'pdf', 'xlsx', 'xls'];
if (!allowedExts.includes(fileExt)) {
layer.msg(`文件 ${file.name} 格式不支持`, { icon: 7 });
return;
}
const index = fileList.length; // 使用fileList的长度作为index
// 判断是否为图片文件
const isImage = file.type.startsWith('image/');
if (isImage) {
// 图片文件使用FileReader读取预览
const reader = new FileReader();
reader.onload = function (e) {
const result = e.target.result;
// 添加到文件列表
$('#uploader-list').append(
'<div class="file-iteme">' +
'<div class="handle"><p>x</p></div>' +
handleFileType(index, file, result, true) +
'</div>'
);
// 保存文件信息
let map = new Map();
map.index = index;
map.file = file;
fileList.push(map);
length++;
};
reader.readAsDataURL(file);
} else {
// 非图片文件直接显示图标不需要FileReader
// 添加到文件列表
$('#uploader-list').append(
'<div class="file-iteme">' +
'<div class="handle"><p>x</p></div>' +
handleFileType(index, file, null, false) +
'</div>'
);
// 保存文件信息
let map = new Map();
map.index = index;
map.file = file;
fileList.push(map);
length++;
}
});
// 清空input值允许重复选择相同文件
fileInput.value = '';
});
}
// 处理文件类型显示
function handleFileType(index, file, result, isImage) {
// 获取文件扩展名
const fileName = file.name || '';
const fileExt = fileName.split('.').pop().toLowerCase();
// 根据当前页面路径计算图片路径
const basePath = '../../../images/';
if (isImage && result) {
// 图片文件:显示预览图
return '<img class="file-preview-img" data-index="' + index + '" data-name="' + fileName + '" src="' + result + '">';
} else {
// 非图片文件:显示图标盒子
let iconPath = '';
if (fileExt === 'doc' || fileExt === 'docx') {
iconPath = basePath + 'docx.png';
} else if (fileExt === 'xls' || fileExt === 'xlsx') {
iconPath = basePath + 'xlsx.png';
} else if (fileExt === 'pdf') {
iconPath = basePath + 'pdf.png';
} else {
// 默认图标
iconPath = basePath + 'file_icon.png';
}
// 截取文件名(如果太长)
const displayName = fileName.length > 8 ? fileName.substring(0, 8) + '...' : fileName;
return '<div class="file-preview-box" data-index="' + index + '">' +
'<img class="file-icon" src="' + iconPath + '" alt="' + fileExt + '">' +
'<p class="file-name">' + displayName + '</p>' +
'</div>';
}
}
// 删除文件
$(document).on("click", ".file-iteme .handle", function (event) {
event.stopPropagation();
let imgListUp = new Array();
// 查找data-index属性可能在img、file-preview-img或file-preview-box上
const $fileItem = $(this).closest('.file-iteme');
let index = $fileItem.find('[data-index]').attr('data-index') ||
$(this).next().attr('data-index') ||
$(this).next().find('[data-index]').attr('data-index');
$.each(fileList, function (inx, ele) {
if (index != ele.index) {
imgListUp.push(ele);
}
});
$fileItem.remove();
fileList.splice(0, fileList.length);
$.each(imgListUp, function (inx, ele) {
fileList.push(ele);
});
});
// 提交申请
function saveData2() {
$('#formSubmit').trigger('click');
}
// 存储已选数据(用于传递给选择页面)
let currentSelectedData = [];
// 检查从选择页面返回的数据
function checkSelectedData() {
const selectedData = sessionStorage.getItem('selectedTypeData');
if (selectedData) {
try {
const data = JSON.parse(selectedData);
if (data && data.length > 0) {
// 保存已选数据
currentSelectedData = data;
// 隐藏空状态,显示已选数量
$('#no_data_title').hide();
$('#has_data_title').show();
$('#selectedCountDisplay').text(data.length);
// 清除sessionStorage因为我们已经保存到currentSelectedData了
sessionStorage.removeItem('selectedTypeData');
} else {
// 没有数据,显示空状态
$('#no_data_title').show();
$('#has_data_title').hide();
currentSelectedData = [];
}
} catch (e) {
console.error('解析选中数据失败:', e);
sessionStorage.removeItem('selectedTypeData');
$('#no_data_title').show();
$('#has_data_title').hide();
currentSelectedData = [];
}
} else {
// 没有数据,显示空状态
$('#no_data_title').show();
$('#has_data_title').hide();
currentSelectedData = [];
}
}
// 关闭页面
function closePage() {
// H5页面返回
if (window.history.length > 1) {
window.history.back();
} else {
// 如果没有历史记录,可以跳转到首页或其他页面
// window.location.href = '/';
}
}
getProList();
// 确认提交
function submitApply() {
// 1. 字段校验
// 校验计划类型
const type = $('input[name="type"]:checked').val();
if (!type) {
return layer.msg('请选择计划类型', { icon: 7 });
}
// 校验申请工程
const proId = $('#proId').val();
if (!proId) {
return layer.msg('请选择申请工程', { icon: 7 });
}
// 校验需用日期
const needTime = $('#needTime').val();
if (!needTime) {
return layer.msg('请选择需用日期', { icon: 7 });
}
// 校验需求计划编号
const code = $('#code').val();
if (!code || code.trim() === '') {
return layer.msg('请输入需求计划编号', { icon: 7 });
}
if (code.length > 50) {
return layer.msg('需求计划编号不能超过50个字符', { icon: 7 });
}
// 校验项目部分
const projectPart = $('#projectPart').val();
if (!projectPart || projectPart.trim() === '') {
return layer.msg('请输入项目部分', { icon: 7 });
}
if (projectPart.length > 50) {
return layer.msg('项目部分不能超过50个字符', { icon: 7 });
}
// 校验施工地点
const projectContent = $('#projectContent').val();
if (!projectContent || projectContent.trim() === '') {
return layer.msg('请输入施工地点', { icon: 7 });
}
if (projectContent.length > 50) {
return layer.msg('施工地点不能超过50个字符', { icon: 7 });
}
// 校验计划说明
const remark = $('#remark').val();
if (!remark || remark.trim() === '') {
return layer.msg('请输入计划说明', { icon: 7 });
}
if (remark.length > 500) {
return layer.msg('计划说明不能超过500个字符', { icon: 7 });
}
// 校验是否选择了车辆/吊车类型
if (!currentSelectedData || currentSelectedData.length === 0) {
return layer.msg('请至少选择一种车辆或吊车类型', { icon: 7 });
}
// 校验已选数据的必填字段
for (let i = 0; i < currentSelectedData.length; i++) {
const item = currentSelectedData[i];
if (!item.needNum || parseInt(item.needNum) === 0) {
return layer.msg(`${i + 1}项需用量不能为空`, { icon: 7 });
}
if (parseInt(item.needNum) > 10) {
return layer.msg(`${i + 1}项需用量不能超过10`, { icon: 7 });
}
if (!item.backDate || parseInt(item.backDate) === 0) {
return layer.msg(`${i + 1}项使用天数不能为空`, { icon: 7 });
}
}
// 2. 组装detailList紧急计划不需要carSpec字段
const detailList = currentSelectedData.map(item => {
return {
modelId: item.id || item.modelId || '',
type: item.type || '',
name: item.name || '',
model: item.model || '',
unit: item.unit || '',
needNum: item.needNum || '0',
needDay: item.backDate || '0',
remark: item.remark || ''
};
});
// 3. 组装params对象紧急计划简化字段
const params = {
type: type,
proId: proId,
needTime: needTime,
code: 'spec-' + code.trim(), // 添加spec-前缀
projectPart: projectPart.trim(),
projectContent: projectContent.trim(), // 施工地点
remark: remark.trim(),
detailList: detailList,
applyType: '1' // 紧急计划固定为1
};
// 4. 打印参数(调试用)
console.log('提交参数:', params);
console.log('文件数量:', fileList.length);
// 5. 创建FormData
let loadingMsg = layer.msg('正在提交保存,请稍等...', { icon: 16, shade: 0.01, time: '0' });
let url = dataUrl + 'backstage/carNeedPlan/addNeedPlanData';
let formData = new FormData();
// 6. 添加文件
for (let i = 0; i < fileList.length; i++) {
formData.append("file[]", fileList[i].file);
}
// 7. 添加params转为JSON字符串
formData.append('params', JSON.stringify(params));
// 打印FormData内容进行调试
console.log('--- FormData 内容 ---');
for (let pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1]);
}
console.log('--- FormData 结束 ---');
// 8. 调用接口
ajaxRequestByUploadFile(url, formData, function () {
// loading
}, function (result) {
layer.close(loadingMsg);
if (result.code === 200) {
layer.msg('提交成功', { icon: 1 }, function () {
// 提交成功后返回上一页或跳转
window.history.back();
});
} else {
layer.msg(result.msg || '提交失败', { icon: 7 });
}
}, function (xhr, status, error) {
layer.close(loadingMsg);
errorFn(xhr, status, error);
}, null);
}

View File

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>紧急及内部用车申请</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../lib/layui-v2.9.18/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../../../css/font.css" media="all">
<link rel="stylesheet" href="../../../../css/car_demand_plan/H5/demand_plan_apply.css" media="all">
<link rel="stylesheet" href="../../../../css/car_demand_plan/H5/select_type.css" media="all">
</head>
<body>
<!-- 顶部标题栏 -->
<div class="h5-header">
<div class="header-content">
<i class="layui-icon layui-icon-setting"></i>
<span class="header-title">贵送机具管理系统</span>
</div>
</div>
<div class="h5-container">
<!-- 表单卡片 -->
<div class="form-card">
<div class="card-header">
<i class="layui-icon layui-icon-file"></i>
<span class="card-title">紧急及内部用车申请</span>
<!-- <button class="return-btn" onclick="closePage()">
<i class="layui-icon layui-icon-left"></i>
<span>返回</span>
</button> -->
</div>
<form class="layui-form" id="applyForm">
<!-- 计划类型 -->
<div class="layui-form-item">
<label class="layui-form-label required">计划类型</label>
<div class="layui-input-block">
<input type="radio" lay-filter="type" name="type" value="1" title="运输车辆" checked>
<input type="radio" lay-filter="type" name="type" value="2" title="吊车">
</div>
</div>
<!-- 申请工程 -->
<div class="layui-form-item">
<label class="layui-form-label required">申请工程</label>
<div class="layui-input-block">
<select name="proId" id="proId" lay-verify="required" lay-search>
<option value="">选择工程</option>
</select>
</div>
</div>
<!-- 需用日期 -->
<div class="layui-form-item">
<label class="layui-form-label required">需用日期</label>
<div class="layui-input-block">
<input class="layui-input" id="needTime" autocomplete="off" name="needTime"
lay-verify="required" readonly placeholder="选择日期">
</div>
</div>
<!-- 需求计划编号 -->
<div class="layui-form-item">
<label class="layui-form-label required">需求计划编号</label>
<div class="layui-input-block">
<div class="code-input-wrapper">
<span class="code-prefix">spec-</span>
<input class="layui-input code-input" name="code" id="code" autocomplete="off"
lay-verify="required" placeholder="输入内容" maxlength="50">
</div>
</div>
</div>
<!-- 项目部分 -->
<div class="layui-form-item">
<label class="layui-form-label required">项目部分</label>
<div class="layui-input-block">
<input class="layui-input" name="projectPart" id="projectPart" autocomplete="off"
lay-verify="required" maxlength="50" placeholder="输入内容">
</div>
</div>
<!-- 施工地点 -->
<div class="layui-form-item">
<label class="layui-form-label required">施工地点</label>
<div class="layui-input-block">
<input class="layui-input" name="projectContent" id="projectContent" autocomplete="off"
lay-verify="required" maxlength="50" placeholder="输入内容">
</div>
</div>
<!-- 计划说明 -->
<div class="layui-form-item">
<label class="layui-form-label required">计划说明</label>
<div class="layui-input-block">
<textarea placeholder="请输入" lay-verify="required" id="remark" name="remark"
class="layui-textarea" maxLength="500" lay-affix="clear"></textarea>
<div class="char-count"><span id="charCount">0</span>/500</div>
</div>
</div>
<!-- 上传附件 -->
<div class="layui-form-item">
<label class="layui-form-label">上传附件</label>
<div class="layui-input-block">
<div class="upload-area">
<div class="layui-upload-list uploader-list" id="uploader-list"></div>
<div class="upload-btn-wrapper">
<input type="file" id="fileInput" multiple
accept="image/jpg,image/png,image/jpeg,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
<div class="upload-btn">
<i class="layui-icon layui-icon-add-1"></i>
</div>
</div>
</div>
<div class="upload-tip">
<p>请上传运输起始点高德地图截图</p>
</div>
</div>
</div>
<button type="submit" id="formSubmit" class="layui-btn" lay-submit="" lay-filter="formData"
style="display: none;"></button>
</form>
</div>
<!-- 申请明细卡片 -->
<div class="form-card">
<div class="card-header">
<i class="layui-icon layui-icon-file"></i>
<span class="card-title">申请明细</span>
</div>
<!-- 无数据时-展示 -->
<div id="no_data_title" class="no-data-container">
<p class="no-data-text">您还没选择需用车辆吊车类型</p>
<p class="no-data-tip">请先添加机具类型后再执申请操作</p>
<button class="layui-btn layui-bg-blue" onclick="chooseFitType()">
<i class="layui-icon layui-icon-list"></i>
<span>选择类型</span>
</button>
</div>
<!-- 有数据时-展示 -->
<div id="has_data_title" class="has-data-container" style="display: none;">
<div class="selected-info">
<i class="layui-icon layui-icon-ok-circle" style="color: #5FB878; font-size: 20px;"></i>
<span class="selected-count-text">已选择 <span id="selectedCountDisplay">0</span></span>
</div>
<button class="layui-btn layui-bg-blue" onclick="chooseFitType()">
<i class="layui-icon layui-icon-edit"></i>
<span>重新选择</span>
</button>
</div>
</div>
</div>
<!-- 选择类型页面(内嵌,默认隐藏) -->
<div id="selectTypePage" class="select-type-page" style="display: none;">
<!-- 顶部标题栏 -->
<div class="h5-header">
<div class="header-left">
<i class="layui-icon layui-icon-setting"></i>
<span class="header-title">贵送机具管理系统</span>
</div>
<div class="header-right">
<span class="selected-count">已选: <span id="selectedNum">0</span></span>
<button class="return-btn" onclick="closeSelectTypePage()">
<i class="layui-icon layui-icon-left"></i>
<span>返回</span>
</button>
</div>
</div>
<div class="h5-container">
<!-- 页面标题 -->
<div class="page-title">
<i class="layui-icon layui-icon-file"></i>
<span>选择需求计划运输车辆、吊车类型</span>
</div>
<!-- 搜索区域 -->
<div class="search-card">
<div class="search-form">
<div class="search-inputs">
<input type="text" name="selectName" id="selectName" autocomplete="off" class="layui-input"
lay-affix="clear" placeholder="输入名称" maxlength="30">
<input type="text" name="selectModel" id="selectModel" autocomplete="off" class="layui-input"
lay-affix="clear" placeholder="输入规格" maxlength="30">
</div>
<div class="search-btns">
<button class="layui-btn layui-btn-primary" onclick="querySelectTable(2)">
<i class="layui-icon layui-icon-refresh"></i> 重置
</button>
<button class="layui-btn layui-bg-blue" onclick="querySelectTable(1)">
<i class="layui-icon layui-icon-search"></i> 查询
</button>
</div>
</div>
</div>
<!-- 列表区域 -->
<div class="list-container" id="selectListContainer">
<!-- 列表项将通过JS动态生成 -->
</div>
<!-- 分页区域 -->
<div class="pagination-box" id="selectPaginationBox" style="display: none;">
<button class="layui-btn layui-btn-primary" id="selectPrevPage" onclick="selectPrevPage()">上一页</button>
<span class="page-info" id="selectPageInfo">1/1</span>
<button class="layui-btn layui-btn-primary" id="selectNextPage" onclick="selectNextPage()">下一页</button>
</div>
</div>
<!-- 底部按钮 -->
<div class="btn-box">
<button class="layui-btn layui-btn-primary cancel" onclick="closeSelectTypePage()">取消</button>
<button class="layui-btn layui-bg-blue confirm" onclick="confirmSelectType()">确认</button>
</div>
</div>
<!-- 固定在底部的提交按钮 -->
<div class="fixed-submit-btn">
<button class="layui-btn layui-bg-blue submit-btn-full" onclick="submitApply()">
<i class="layui-icon layui-icon-submit"></i>
<span>确认提交</span>
</button>
</div>
<script src="../../../../lib/jquery-3.4.1/jquery-3.7.1.min.js" charset="utf-8"></script>
<script src="../../../../js/public.js" charset="utf-8"></script>
<script src="../../../../lib/layui-v2.9.18/layui/layui.js" charset="utf-8"></script>
<script src="../../../../js/car_demand_plan/H5/emergency_plan_apply.js" charset="utf-8"></script>
</body>
</html>