实现表格导入,使表格内容转化为响应json,可校验字符串、图片、ip
<el-button @click="clickhandler ()">上传excel</el-button>
<el-button @click="importTable ()">导入excel</el-button>
clickhandler() { this.excleData = []; this.successcount = 0; this.failcount = 0; this.tableData = []; this.crateForm3($(this), ‘excelFile‘); } crateForm3(that, name) { var thatt = this; var input2 = document.createElement(‘input‘); input2.type = ‘file‘; input2.setAttribute( ‘accept‘, ‘application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘ ); //文件格式只接受 input2.setAttribute(‘name‘, name); input2.setAttribute(‘style‘, ‘display:none‘); //表单文本域change事件 input2.onchange = function(e) { var fileList = this.files; var value = fileList[0].name; var value1 = value.substring(value.lastIndexOf(‘.‘) + 1, value.length); if ( value.indexOf(‘@‘) != -1 || value.indexOf(‘#‘) != -1 || value.indexOf(‘¥‘) != -1 || value.indexOf(‘%‘) != -1 || value.indexOf(‘&‘) != -1 || value.indexOf(‘*‘) != -1 || value.indexOf(‘<‘) != -1 || value.indexOf(‘>‘) != -1 || value.indexOf(‘+‘) != -1 ) { //文件名称不能包含特殊符号@#¥%&*<>+ thatt.$message.warning(‘上传的文件名称不能包含特殊符号@#¥%&*<>+!‘); } else if (value1 != ‘xls‘ && value1 != ‘xlsx‘) { thatt.$message.warning(‘只能选择xls、xlsx格式的文件!‘); return false; } else { var txt = $(‘<span>‘ + value + ‘</span>‘); that.next(‘div‘).append(txt); //把文件传输到后台解析并返回到前端 thatt.loadExcel(e, that); } }; //之前初始化的给删除 that.next(‘div‘).children().remove(); that.next(‘div‘).append(input2); input2.click(); }, importTable() { if(!this.input_ping){ this.$message({ message: ‘请先选择文件!‘, type: ‘warning‘ }); }else{ this.tableShow = true; let thatt = this; thatt.successcount = 0; thatt.failcount = 0; let persons = thatt.excleData; let tmpArr = []; try{ for (let i = 2; i < persons.length; i++) { let tmpdata = {}; let originalAttr = {}; if(this.groupId && this.treeId){ originalAttr.groupId = this.groupId; originalAttr.treeId = this.treeId; } originalAttr.deviceType = persons[i].__EMPTY_2.trim(); originalAttr.model = persons[i].__EMPTY_4.trim(); originalAttr.installAddress = persons[i].__EMPTY_5.trim(); originalAttr.bandwidth = persons[i].__EMPTY_7.trim(); originalAttr.joinType = persons[i].__EMPTY_6.trim(); originalAttr.repairDeptName = persons[i].__EMPTY_8.trim(); originalAttr.protocol = ‘ping‘; tmpdata.name = persons[i].__EMPTY.trim(); tmpdata.ipv4 = persons[i].__EMPTY_1.trim(); tmpdata.manufacturer = persons[i].__EMPTY_3.trim().toLocaleUpperCase(); tmpdata.flagEnable = 1; tmpdata.originalAttr = originalAttr; //增加校验0421 let IP = /^([1-9]\d?|1\d{2}|2[01]\d|22[0-3])(\.([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])){3}$/; let NAME = /^[0-9a-zA-Z\u4E00-\u9FA5]+$/; if(tmpdata.name == ‘‘ || tmpdata.name == null){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘设备名称为空,请重新选择文件!‘); return; } if(tmpdata.manufacturer == ‘‘ || tmpdata.manufacturer == null){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘厂商为空,请重新选择文件!‘); return; } if(tmpdata.name.length > 255){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘设备名称超过255字符,请重新选择文件!‘); return; } if(tmpdata.manufacturer.length > 255){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘厂商超过255字符,请重新选择文件!‘); return; } if(!NAME.test(tmpdata.name)){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘设备名称中有空格,请重新选择文件!‘); return; } if(!NAME.test(tmpdata.manufacturer)){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘厂商中有空格,请重新选择文件!‘); return; } if(!IP.test(tmpdata.ipv4)){ this.$message.error(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘设备IP不正确,请重新选择文件!‘); return; } tmpArr.push(tmpdata); } }catch(e){ this.$message({ message: ‘模板解析错误,请选择正确文件导入!‘, type: ‘error‘ }); } tmpArr.forEach(tmpdata => { api.pingNetIn(tmpdata).then(res => { tmpdata.deviceType = tmpdata.originalAttr.deviceType; if (res.code == 0) { ++thatt.successcount; this.$message.success(‘设备‘ + tmpdata.name + ‘(‘ + tmpdata.ipv4 + ‘)‘ + ‘入网成功!‘); } else { thatt.tableData.push(tmpdata); ++thatt.failcount; this.$message.error(res.message); } this.input_ping = null; }); }); } },
导入前的表格:
导入后的数据: