Java-Layui导入
引入excel.js
<script src="../../static/js/excel.js"></script>
html中创建文件上传按钮
<div class="layui-inline">
<label class="layui-form-label">选择文件</label>
<div class="layui-input-inline">
<input class="layui-input" name="file" id="file" autocomplete="off">
<button type="button" class="mclear" ></button>
</div>
</div>
script
layui.use(['form','upload', 'table', 'excel'], function () {
var $ = layui.$;
table = layui.table;
upload = layui.upload;
excel = layui.excel;
//upload上传实例
upload.render({
elem: '#file' //绑定元素
, url: '/upload/' //上传接口(PS:这里不用传递整个 excel)
, auto: false //选择文件后不自动上传
, accept: 'file'
, choose: function (obj) {// 选择文件回调
//console.debug(obj)
var files = obj.pushFile()
var fileArr = Object.values(files)// 注意这里的数据需要是数组,所以需要转换一下
//console.debug(fileArr)
$("#file").val(fileArr[0].name);
// 用完就清理掉,避免多次选中相同文件时出现问题
for (var index in files) {
if (files.hasOwnProperty(index)) {
delete files[index]
}
}
var formTest = form.val('formTest');//form表单
uploadExcel(fileArr) // 如果只需要最新选择的文件,可以这样写: uploadExcel([files.pop()])
}
})
/**
* 上传excel的处理函数,传入文件对象数组
* @param {[type]} files [description]
* @return {[type]} [description]
*/
function uploadExcel(files) {
try {
colList = [];
colData = [];
table.reload("testReload", {cols: [colList], data: colData});
// console.log("files:"+JSON.stringify(files))
excel.importExcel(files, {}, function (data) {
var formTest = form.val('formTest');//form表单
if(formTest.template ==1){//进口舱单导入
data = excel.filterImportData(data, {
'aa':'A',//序号
'a': 'B'//码头名称
,'tdNo': 'C'//提单号
,'b': 'D'//中文船名
,'c': 'E'//英文船名
,'e': 'F'//航次
,'d': 'G'//箱站代码
,'boxNo': 'H'//箱号
,'cusNo': 'I'//箱属
,'cc': 'J'//尺寸
,'xx': 'K'//箱型
,'k': 'L'//铅封号
,'totalWeight': 'M'//整箱重
,'kz': 'N'//空重
,'n': 'O'//码头放行
,'bgnPort': 'P'//装货港
,'p': 'Q'//当前状态
,'q': 'R'//入港类别
,'ediDd': 'S'//卸船时间(实际入港时间)
,'s': 'T'//出港类别
,'t': 'U'//出港时间
,'u': 'V'//出港明细
,'stockdays': 'W'//堆存天数
,'w': 'X'//地理位置
,'x': 'Y'//特殊装载需求
,'y': 'Z'//内外贸
,'z': 'AA'//危品IMO
,'endPort': 'AB'//卸货港
,'qq': 'AC'//目的港
,'ac': 'AD'//冷冻箱标志
,'ad': 'AE'//冷冻温度
,'ae': 'AF'//危品标志
,'af': 'AG'//国际危规
,'shipIvoy': 'AH'//入港明细
,'ah': 'AI'//箱属
});
}else if(formTest.template ==3){//下货纸导入
data = excel.filterImportData(data, {
'tdNo': 'A'//主分提单号
,'shipOvoy': 'B'//船名航次
,'cusNoS': 'C'//箱属
,'endPort': 'D'//目的港
,'tranPort': 'E'//中转港
,'cusNoH': 'F'//货代
,'cusNoH1': 'G'//计费货代
,'ztdNo': 'H'//主单号
,'qty': 'I'//件数
,'weight': 'J'//重量
,'vol': 'K'//体积
,'xc': 'L'//箱型箱量
,'rem': 'M'//空白
,'tBox': 'N'//是否冻柜
});
}else if(formTest.template ==4){//配箱数据导入
data = excel.filterImportData(data, {
'tdNo': 'A'//提单号
,'boxNo': 'B'//箱号
,'qty': 'C'//件数
,'weight': 'D'//货物毛重(千克)
,'vol': 'E'//体积(立方)
,'sealNo': 'F'//铅封号
,'pack': 'G'//包装方式
,'cusNo': 'H'//箱属
});
} else if(formTest.template ==7){//超期费用导入
data = excel.filterImportData(data, {
'aaa':'A'
,'boxNo': 'B'//箱号(对应)
,'kz': 'C'//空重
,'cc': 'D'//尺寸()
,'xx': 'E'//箱型()
,'sXs': 'F'//箱属公司()
,'czBox': 'G'//箱站
,'tdNo': 'H'//提单号()
,'stockdays': 'I'//堆存天数
,'qty': 'J'//超期天数()
,'indetatil': 'K'//入港明细
,'shipOvoy': 'L'//出港明细()
,'printDd': 'M'//实际入港时间()
,'ddRec': 'N'//实际出港时间()
,'dg': 'O'//危品标志
,'ldBoxFlag': 'P'//冷冻箱标志
,'tsBox': 'Q'//特殊箱标志
});
}else if(formTest.template ==8) {//港陆只集港费用导入
data = excel.filterImportData(data, {
'fsDd': 'A'//开船日
,'shipOvoy': 'B'//船名航次()
,'lport': 'C'//码头
,'tdNo': 'D'//提单号()
,'boxNo': 'E'//箱号()
,'xc20GP': 'F'//20GP
,'xc20RF': 'G'//20RF
,'xc40GP': 'H'//40GP
,'xc40HC': 'I'//40HC
,'xc40RH': 'J'//40RH
,'xc45HC': 'K'//45HC
,'doubleback': 'L'//双背
,'cusNo': 'M'//船公司()
});
}else if(formTest.template ==9) {//中创只集港费用导入
data = excel.filterImportData(data, {
'aaa':'A'
,'boxNo': 'B'//箱号()
,'xx': 'C'//箱型()
,'cc20': 'D'//20尺
,'cc40': 'E'//40尺
,'tdNo': 'F'//提单号()
,'ccProperty': 'G'//出场性质
,'jgdate': 'H'//出场时间
,'fleet': 'I'//车队
,'jgNo': 'J'//集卡号
,'employeeNo': 'K'//员工号
,'lport': 'L'//去向
,'shipName': 'M'//出场船名
,'ovoy': 'N'//出场航次()
,'outCz': 'O'//出场场站
});
}else if(formTest.template ==10){
data = excel.filterImportData(data, {
'lport': 'A'//船舶
,'customer': 'B'//客户
,'customername': 'C'//客户名称
,'shipName': 'D'//船名
,'ovoy': 'E'//航次()
,'tdNo': 'F'//提单号()
,'boxNo': 'G'//箱号()
,'xc20GP': 'H'//20GP
,'xc20HC': 'I'//20HC
,'xc20RF': 'J'//20RF
,'xc40GP': 'K'//40GP
,'xc40HC': 'L'//40HC
,'xc45HC': 'M'//45HC
,'xc53HC': 'N'//53HC
,'xc40RH': 'O'//40RH
,'doubleback': 'P'//双背
,'cusNo': 'Q'//船公司()
,'fsDd': 'R'//开船日
});
}
if (formTest.template ==1){
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==1){
if(object.boxNo ==="" || object.boxNo.length>11){
layer.alert("箱号不能为空且箱号最多11位!");
return false;
}
if(object.tdNo ==="" || object.tdNo.length>20){
layer.alert("提单号不能为空且提单号最多20位!");
return false;
}
var time = object.ediDd;
console.log("卸船时间",time)
if(time.toString().trim().length>0 ){
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else{
//日期+时间的正则表达式 卸船时间只校验到时分
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else {
var reg = /^[0-9]{5}$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
object.ediDd = getBeforeDate(time);
colData.push(object);
}else{
layer.alert("箱号:"+object.boxNo+"的日期格式不正确,正确格式为:2021-01-01或 2021-01-01 00:00");
return false;
}
}
}
}else {
colData.push(object);
}
}
}
})
});
}else if(formTest.template ==3){
form.render("formTest")
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
// console.log("arr111:"+JSON.stringify(obj.Sheet1))//某个工作表的数据
// console.log("arr222:"+JSON.stringify(index))//某个工作表的数据
// console.log("arr333:"+JSON.stringify(object))//某个工作表的数据
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
colList.push({field: 'numbers', title: '序号', type: "numbers", fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({field: 'messageType', title: '状态',align: 'center', width: 150});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==3){
$.ajax({
method:"POST",
url:url+"/services/inner/basic/importExcelTemplate/findOneTdMessage",
contentType: 'application/json',
data:JSON.stringify({"data":object}),
async: false,//同步,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
success:function(res){
if(res.code == 200){
object.messageType = res.data.messageType
layer.msg(res.msg);
}else{
layer.msg(res.msg);
}
},
error:function(){
layer.close(loading);
layer.msg('操作失败');
}
});
colData.push(object);
}
}
})
});
}else if(formTest.template ==4){
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
colList.push({field: 'numbers', title: '序号', type: "numbers", fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==4){//配箱数据导入
colData.push(object);
}
}
})
});
}else if(formTest.template ==7){
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==7){
var time = object.printDd;//实际入港时间
var time1 = object.ddRec;//实际出港时间
console.log("实际入港时间",time)
console.log("实际出港时间",time1)
if(time.toString().trim().length>0 ||time1.toString().trim().length>0){
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if(regExp.test(time)&®Exp.test(time1)){
colData.push(object);
}else{
//日期+时间的正则表达式
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
var regExp = new RegExp(reg);
if(regExp.test(time)&®Exp.test(time1)){
colData.push(object);
}else {
var reg = /^[0-9]{5}$/;
var regExp = new RegExp(reg);
if(regExp.test(time)&®Exp.test(time1)){
if(time.toString().trim().length>0){
object.printDd = getBeforeDate(time);
}
if(time1.toString().trim().length>0){
object.ddRec = getBeforeDate(time1);
}
colData.push(object);
}else{
layer.alert("箱号:"+object.boxNo+"的日期格式不正确或为空,正确格式为:2021-01-01 或 2021-01-01 00:00:00");
return false;
}
}
}
}else {
colData.push(object);
}
}
}
})
});
}else if(formTest.template ==8){
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
colList.push({field: 'numbers', title: '序号', type: "numbers", fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==8){
var time = object.fsDd;
console.log("开船日",time)
if(time.toString().trim().length>0 ){
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else{
//日期+时间的正则表达式
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else {
var reg = /^[0-9]{5}$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
object.fsDd = getBeforeDate(time);
colData.push(object);
}else{
layer.alert("箱号:"+object.boxNo+"的日期格式不正确,正确格式为:2021-01-01 或 2021-01-01 00:00:00");
return false;
}
}
}
}else {
colData.push(object);
}
}
}
})
});
}else if(formTest.template ==9){
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==9){
var time = object.jgdate;
console.log("出场时间",time.toString())
if(time.toString().trim().length>0 ){
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else{
//日期+时间的正则表达式
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else {
var reg = /^[0-9]{5}$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
object.jgdate = getBeforeDate(time);
colData.push(object);
}else{
layer.alert("箱号:"+object.boxNo+"的日期格式不正确,正确格式为:2021-01-01 或 2021-01-01 00:00:00");
return false;
}
}
}
}else {
colData.push(object);
}
}
}
})
});
}else if(formTest.template ==10){
$.each(data, function (index, obj) {
var dataArr = data[0];//第一个文件
var arr ;
//循环获取工作表
for (let i in dataArr) {
arr=dataArr[i];//sheet1数据,sheet2数据
}
$.each(arr, function (index, object) {
if (index == 0) {
colList.push({type: 'checkbox', fixed: 'left'})
colList.push({field: 'numbers', title: '序号', type: "numbers", fixed: 'left'})
$.each(object, function (index, ele) {
colList.push({field: index, title: ele, align: 'center'});
});
colList.push({fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150})
} else if (index > 0) {
if(formTest.template ==10){
var time = object.fsDd;
console.log("时间",time)
if(time.toString().trim().length>0 ){
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else{
//日期+时间的正则表达式
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
colData.push(object);
}else {
var reg = /^[0-9]{5}$/;
var regExp = new RegExp(reg);
if(regExp.test(time)){
object.fsDd = getBeforeDate(time);
colData.push(object);
}else{
layer.alert("箱号:"+object.boxNo+"的日期格式不正确,正确格式为:2021-01-01 或 2021-01-01 00:00:00");
return false;
}
}
}
}else {
colData.push(object);
}
}
}
})
});
}
// layer.alert(JSON.stringify(colData))
render_table([colList],colData);
// table.reload("testReload", {cols: [colList], data: colData});
var tab2Data = table.cache["testReload"];
var that = $("#test").next();
tab2Data.forEach(function (item, index) {
if(formTest.template ==3){
if(item.messageType!== '新'){
that.find(".layui-table-box tbody tr[data-index='" + item.LAY_TABLE_INDEX + "']").css("color", "red");
}
}
});
})
} catch (e) {
layer.alert(e.message)
}
}