404 lines
17 KiB
HTML
404 lines
17 KiB
HTML
|
|
|||
|
|
<!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>
|
|||
|
|
<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() {
|
|||
|
|
window.location.href = ctxPath + "/downloadTemplateController/download?filename=设备工机具-导入模版.xlsx";
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
* 选择文件
|
|||
|
|
*/
|
|||
|
|
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({
|
|||
|
|
url: ctxPath + "/dataIndex/toolListImport",
|
|||
|
|
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>
|