hn_cloud_web/czl-web/pages/toLeadInto/machineToolImportForm.html

405 lines
17 KiB
HTML
Raw Permalink Normal View History

2025-11-27 16:55:35 +08:00
<!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"/>
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
<style>
html,body{
height: 100%;
}
body{
overflow-y:hidden;
}
.demo-tab-header .layui-btn.layui-this{
border-color: #1E9FFF; color: #1E9FFF;background: #1E9FFF;
}
.layui-btn-container .layui-btn {
margin-right: 0px;
margin-bottom: 0px;
word-spacing: normal;
}
.demo-tab-header{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 10px;
}
.demo-tab-body>div{display: none;}
.one{
border-radius: 50%;
width: 35px;
}
/* .two{
height: 1px;
width: 5%;
margin-top: 18px
} */
#tabHeader{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.line {
width: 100px;
height: 2px;
background-color: gray;
top: 99px;
left: 50px;
}
.one1{
background: #1E9FFF
}
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center
}
.text-complete {
font-family: "微软雅黑 Bold", 微软雅黑, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: rgb(102, 102, 102);
text-align: center;
line-height: 24px;
}
#uploadConatiner {
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#uploadConatiner img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="layui-panel" style="height: 100%">
<!-- 任意自定义的 tab 元素 -->
<div class="demo-tab-header layui-btn-container" id="tabHeader">
<button class="layui-btn one layui-btn-primary layui-this" id="btn1" ></button>
<div class="line one1"></div>
<div class="line two"></div>
<button class="layui-btn one layui-btn-primary" id="btn2" ></button>
<div class="line three"></div>
<div class="line four"></div>
<button class="layui-btn one layui-btn-primary" id="btn3" ></button>
<div class="line five"></div>
<div class="line six"></div>
<button class="layui-btn one layui-btn-primary" id="btn4" ></button>
</div>
<div id="tabHeader_title">
<span style="position: absolute;left: 29.2%;" id="chooseDiv">选择文件</span>
<span style="position: absolute;left: 42.1%;" id="reviewDiv">数据预览</span>
<span style="position: absolute;left: 55%;" id="checkDataDiv">异常数据</span>
<span style="position: absolute;left: 67.8%;" id="uploadFinishDiv">导入完成</span>
</div>
<div style="margin-top: 20px;">
<div id="chooseConatiner">
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;">
<label class="layui-form-label" style="height: 100px;">
<img src="../../img/download.png" style="width: 50px;margin-left: 10px;margin-top: 10px;" alt=""/>
</label>
<div class="layui-input-block layui-panel" style="display: flex;height: 99px;flex-direction: column;">
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">填写导入数据信息</div>
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">请按照数据模板的格式准备导入数据,模板中的表头名称不可更改,表头行不能删除</div>
<span style="color: #1E9FFF;margin-left: 30px;margin-top: 10px;cursor: pointer" onclick="download()">下载模板</span>
</div>
</div>
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;">
<label class="layui-form-label" style="height: 100px;">
<img src="../../img/upload.png" style="width: 50px;margin-left: 10px;margin-top: 10px;" alt=""/>
</label>
<div class="layui-input-block layui-panel" style="display: flex;height: 99px;flex-direction: column;">
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">上传填好的信息表</div>
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">文件后缀名必须为xls或xlsx(即Excel格式),文件大小不得大于10M,最多支持1000行数据</div>
<input type="file" id="excel-file" style="display: none;">
<div style="display: flex">
<span id="select-file-btn" style="color: #1E9FFF;margin-left: 30px;margin-top: 10px;cursor: pointer">上传文件</span>
<div id="selected-file-name" style="margin-top: 10px; margin-left: 20px;"></div>
</div>
</div>
</div>
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;display: flex;flex-direction: row;margin-bottom: 100px;">
<div class="layui-panel" style="display: flex;height: 99px;flex-direction: row;background-color: rgb(255,245,230);width: 100%;">
<img src="../../img/warn.png" style="width: 50px;margin-left: 10px;margin-top: 20px;height: 50px;" alt=""/>
<div style="display: flex;flex-direction: column;">
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">特别提示</div>
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">1. 导入过程中如发现工序、设备名称、规格型号相同的数据,且对该数据更新,则更新这条数据</div>
</div>
</div>
</div>
<div style="position: absolute;bottom: 1%;left: 3%;">
<span style="color: #1E9FFF; cursor: pointer" onclick="importRecord()">导入记录</span>
</div>
<div style="position: absolute;bottom: 1%;right: 3%;">
<button class="layui-btn layui-bg-blue" id="upload_next">下一步</button>
</div>
</div>
<div id="reviewConatiner" style="display: none;">
<div style="height: 500px;margin-top: 40px;padding: 10px;overflow: auto;display: flex;justify-content: center;">
<!-- 表格 -->
<table id="previewTable"></table>
</div>
<div style="position: absolute;bottom: 1%;right: 3%;">
<button class="layui-btn layui-bg-blue" id="review_before">上一步</button>
<button class="layui-btn layui-bg-blue" id="review_next">下一步</button>
</div>
</div>
<div id="abnormal" style="display: none;">
<div id="checkDataConatiner" style="margin: 53px; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px;"></div>
<div style="position: absolute;bottom: 1%;right: 3%;">
<button class="layui-btn layui-bg-blue" id="abnormal_before">上一步</button>
</div>
</div>
<div id="uploadConatiner" style="display: none;">
<img src="../../img/complete.png" alt="">
<span class="text-complete">数据导入完成</span>
</div>
</div>
</div>
</body>
<script src="../../js/jquery/jquery-3.6.0.js"></script>
<script src="../../layui-v2.8.18/layui/layui.js"></script>
<script src="../../js/common_methon.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script src="../../js/xlsx.full.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
2025-12-09 18:44:29 +08:00
<script type="text/javascript" src="../../../public/public.js"></script>
2025-11-27 16:55:35 +08:00
<script type="text/javascript" src="../../js/publicJs.js"></script>
<script>
let rowCount = 0;
let fileSizeInMB = 0;
$("#upload_next").click(function(){
// 判断是否已经选择了 Excel 文件
var file = $("#excel-file").prop("files")[0];
if (!file) {
layer.msg('请选择要上传的 Excel 文件');
return;
}
var fileName = file.name;
var fileExt = fileName.split('.').pop().toLowerCase();
if (fileExt !== 'xlsx' && fileExt !== 'xls') {
layer.msg('文件只能是后缀名为.xlsx或.xls的Excel 文件');
return;
}
$("#chooseConatiner").css("display","none")
$("#reviewConatiner").css("display","")
$(".two").css("background","#1E9FFF")
$(".three").css("background","#1E9FFF")
$("#btn2").css("background","#1E9FFF")
})
$("#review_before").click(function(){
$("#chooseConatiner").css("display","")
$("#reviewConatiner").css("display","none")
$(".two").css("background","gray")
$(".three").css("background","gray")
$("#btn2").css("background","")
})
$("#abnormal_before").click(function(){
$("#reviewConatiner").css("display","")
$("#abnormal").css("display","none")
$(".four").css("background","gray")
$(".five").css("background","gray")
$("#btn3").css("background","")
})
/*
* 下载模板
*/
function download() {
2025-12-09 18:44:29 +08:00
window.location.href = czl_ht_url + "/downloadTemplateController/download?filename=设备工机具-导入模版.xlsx";
2025-11-27 16:55:35 +08:00
}
/*
* 选择文件
*/
var selectFileBtn = document.getElementById("select-file-btn");
var excelFile = document.getElementById("excel-file");
var selectedFileName = document.getElementById("selected-file-name");
selectFileBtn.onclick = function() {
excelFile.click();
}
excelFile.onchange = function() {
selectedFileName.innerHTML = excelFile.value.split("\\").pop(); // 获取选择的文件名 // 显示文件名
}
/*
* 预览
*/
document.getElementById('excel-file').addEventListener('change', handleFileSelect, false);
function handleFileSelect(event) {
const file = event.target.files[0];
// 获取文件大小(以字节为单位)
const fileSizeInBytes = file.size;
// 将文件大小转换为更适合阅读的格式(例如 KB 或 MB
const fileSizeInKB = fileSizeInBytes / 1024;
fileSizeInMB = fileSizeInKB / 1024;
const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
const workbook = XLSX.read(data, {type: 'array'});
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
const table = document.getElementById('previewTable');
table.innerHTML = '';
const range = XLSX.utils.decode_range(sheet['!ref']);
for (let R = range.s.r; R <= range.e.r; ++R) {
const row = table.insertRow(-1);
for (let C = range.s.c; C <= range.e.c; ++C) {
const cellRef = XLSX.utils.encode_cell({c: C, r: R});
const cell = sheet[cellRef];
const text = cell ? cell.v : '';
const cellElement = row.insertCell(-1);
cellElement.appendChild(document.createTextNode(text));
}
}
// 获取表格有多少行数据
rowCount = table.rows.length;
console.log('表格有 ' + rowCount + ' 行数据。');
};
reader.readAsArrayBuffer(file);
}
/*
* 导入
*/
function uploadFile() {
var fileInput = document.getElementById('excel-file');
var file = fileInput.files[0]; // 获取文件对象
if (file) {
var formData = new FormData();
formData.append('file', file);
// 发送文件数据
$.ajax({
2025-12-09 18:44:29 +08:00
url: czl_ht_url + "/dataIndex/toolListImport",
2025-11-27 16:55:35 +08:00
type: 'POST',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
layer.msg('数据导入中,请稍等。。。', {icon: 4});
},
success: function(res) {
console.log(res);
layer.closeAll("loading");
if (res.resMsg === "导入成功") {
$(".four").css("background","#1E9FFF")
$("#btn3").css("background","#1E9FFF")
$(".five").css("background","#1E9FFF")
$(".six").css("background","#1E9FFF")
$("#btn4").css("background","#1E9FFF")
$("#reviewConatiner").css("display","none")
$("#uploadConatiner").css("display","")
} else if (res.resMsg === "数据为空") {
layer.msg('数据为空,请先添加数据再进行导入!', {icon: 2, time: 2000});
} else {
$(".four").css("background","#1E9FFF")
$(".five").css("background","#1E9FFF")
$("#btn3").css("background","#1E9FFF")
$("#reviewConatiner").css("display","none")
$("#abnormal").css("display","")
var checkDataContainer = document.getElementById('checkDataConatiner');
checkDataContainer.innerHTML = res.resMsg;
checkDataContainer.style.display = 'block';
}
},
error: function(err) {
console.log(err);
layer.msg('上传失败', { icon: 2, time: 3000 });
}
});
} else {
layer.msg('请先选择文件', {icon: 2, time: 2000});
}
}
$("#review_next").click(function(){
if(rowCount > 1000){
layer.msg('数据量大于1000行', {icon: 2, time: 2000});
}else if(fileSizeInMB > 10){
layer.msg('文件大小大于10M', {icon: 2, time: 2000});
}else{
uploadFile();
}
});
function importRecord() {
popup("导入记录","./ImportRecordList.html");
}
function popup(title, contentUrl) {
var index = layer.open({
title: [title, 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
type: 2,
content: contentUrl,
area: ['90%', '95%'],
maxmin: false,
success: function (layero, index) {
},
yes: function (index, layero) {
//提交子页面时执行
// 获取弹出层中的form表单元素
var formSubmit = layer.getChildFrame('form', index);
// 查找class样式为submitBtn的按钮
let submited = formSubmit.find('button.subBtn');
// 触发点击事件,会对表单进行验证,验证成功则提交表单,失败则返回错误信息
submited.click();
}
,end:function (){
reloadTable(contentUrl, title, index)
}
, cancel: function (index, layero) {
var t = changeProTeam(contentUrl, title, index);
if (!t) {
return false;
}
var tf = changSubTeam(contentUrl, title, index);
if (!tf) {
return false;
}
var tff = changOwnTeam(contentUrl, title, index);
if (!tff) {
return false;
}
return true;
}
});
}
</script>
</html>