因为原先平台绑定设备是通过一个界面进行人工选择绑定或一个人一个人绑定设备。如下：
但有时候需要在几千个里选择出几百个，那这种方式就不大现实了，需要另外一种方法。
目前相到可以通过导入批量数据进行绑定的方式。
一、前端
主要是显示选择文件与设备
<template>
<div class="import-bind" v-loading="fullscreenLoading" element-loading-text="文件上传中">
<div class="detail">
导入说明：本功能为批量导入用户绑定设备用，每次导入名单建议100名左右，要求导入的用户已经存在了。
</div>
<div class="form-row">
<div class="name">资料导入</div>
<input id="file" style="display:none" type="file" @change="fileChosen" />
<el-input v-model="fileName" :disabled="true" style="width:260px;margin-left:20px"></el-input>
<el-button type="primary" @click="getFile()" style="width:130px;margin-left:20px">选择文件</el-button><a
href="http://face.oss-cn-qingdao.aliyuncs.com/FRS/data_template/201709/fabc5813-e589-4e99-9bd7-22b3c09a54.xlsx">
<el-button type="primary" style="width:150px;margin-left:15px">资料模版下载</el-button></a>
</div><span v-show="fileTip1" style="color:red;margin-left:30px;">文件格式错误,请提交xls或xlsx格式文件</span>
<div class="form-row">
<div class="name">识别设备</div>
<select-devices-popup v-model="devId"></select-devices-popup>
</div>
<el-button type="primary" @click="uploadFirstFile()"
style="width:120px;margin-left:137px;margin-top:50px;">确定</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
<div v-if="portReady"><span>导入成功！</span></div>
<div v-else=""><span>导入失败！</span><span>导入数据存在问题，请修改后重新上传。查看</span><span style="color:#00A1E9;cursor:pointer"
@click="gotoErrorDetail">错误明细</span></div>
<el-button type="primary" @click="dialogVisible = false" style="width:120px;margin-top:50px;">确 定</el-button>
<el-button type="cancel" @click="dialogVisible = false" style="width:120px;margin-top:50px;">取 消</el-button>
</el-dialog>
</div>
</template>
<script>
import appApi from '@/common/js/allApi.js'
import $ from 'jquery'
import selectDevicesPopup from '@/components/select-devices-popup.vue'
export default {
components: {
selectDevicesPopup,
},
data() {
return {
fileList: [],
fileName: '',
largeFile: '',
singleFile: 1024 * 1024, //单次上传大小
tempPath: '',
counter: 0,
missTimeMax: 0, //单次上传最大丢包次数
devId: '',
excelPath: '',
fileTip1: false,
dialogVisible: false,
portReady: false,
fullscreenLoading: false
}
},
mounted() {},
methods: {
getFile: function() {
document.getElementById('file').click()
},
fileChosen: function() {
var fname = document.getElementById('file').files[0].name
this.fileName = fname
var type = fname.split('.')
var filetype = type[type.length - 1]
if (filetype != 'xls' && filetype != 'xlsx') {
this.fileTip1 = true
} else {
this.fileTip1 = false
}
},
//先传小文件
uploadFirstFile: function() {
var vm = this
if (this.fileName != '') {
if (
this.fileTip1 == true
) {
} else {
var file = document.getElementById('file').files[0]
var size = file.size
var data = new FormData()
data.append('file', file)
data.append('fileName', file.name)
data.append('filePath', '')
data.append('isFirst', 'true')
data.append('start', '0')
data.append('fileSplitSize', size)
// data.append('loginId', sessionStorage.getItem('birdloginid'));
vm.fullscreenLoading = true
$.ajax({
processData: false, // 告诉jquery不要处理发送的数据
contentType: false, // 告诉jquery不要设置content-Type请求头
url: appApi.importStaff, //员工管理里更改的，从大文件上传-》上传文件
type: 'POST',
headers: { token: sessionStorage.token },
data: data,
success: function(msg) {
console.log("uploadFirstFile msg=",msg);
if (msg.code == '1') {
vm.excelPath = msg.data.filePath
if (msg.data.currentSize == size) {
vm.tempPath = ''
vm.counter = 0
vm.importBind()
} else {
vm.tempPath = msg.data.filePath
vm.missTimeMax = 0
vm.counter++
vm.uploadFirstFile()
}
} else {
if (vm.missTimeMax < 10) {
vm.missTimeMax++
vm.uploadFirstFile()
} else {
vm.fullscreenLoading = false
vm.$message({
type: 'warning',
message: '当前网络不稳定，请重试!'
})
}
}
},
error: function(error) {
vm.fullscreenLoading = false
}
})
}
} else {
vm.$message({
type: 'error',
message: '请同时上传基础资料和头像!'
})
}
},
//后台输入绑定解析文件
importBind: function() {
var vm = this
var data = {
companyId: sessionStorage.companyId,
excelPath: this.excelPath,
devId: this.devId,
}
$.ajax({
url: appApi.importBind,
type: 'POST',
data: data,
headers: { token: sessionStorage.token },
success: function(msg) {
vm.fullscreenLoading = false
if (msg.code == '0') {
//文件内容错误
vm.$message({
type: 'error',
message: msg.message
})
} else if (msg.code == '1') {
//成功
vm.dialogVisible = true
vm.portReady = true
} else if (msg.code == '2') {
if(!msg.data) {
vm.$message({
type: 'error',
message: msg.message
})
} else {
//有错误数据
vm.dialogVisible = true
vm.portReady = false
window.dataList = msg.data.dataList
window.imgList = msg.data.imgMap
}
}
},
error: function(xhr, type, errorThrown) {}
})
},
gotoErrorDetail() {
this.$router.push({
path: '/error-log'
})
},
handleClose() {}
}
}
</script>
<style scoped lang='stylus'>
.import-bind
padding-left 15px
.detail
padding-top 15px
.form-row
margin-left 30px
margin-top 50px
.name
display inline-block
width 90px
text-align right
.select-devices-popup
display inline-block
margin-left 20px
.list {
list-style: none;
}
ul li {
margin-bottom: 10px;
}
.head-submit {
cursor: pointer;
height: 140px;
width: 140px;
border: 2px dashed #ccc;
border-radius: 3px;
margin-left: 110px;
margin-top: -70px;
text-align: center;
line-height: 140px;
}
.el-dialog__body > .el-button--primary {
margin-left: calc(50% - 130px);
}
</style>界面如下：
二、后端代码
接口代码
@PostMapping("/importBind")
@ApiOperation("批量导入员工数据绑定设备")
public ResultBean<?> importBind(@ApiParam(name = "excelPath", value = "基础信息文件存储URL", required = true) @RequestParam String excelPath,
@ApiParam(name = "companyId", value = "企业ID", required = true) @RequestParam Integer companyId,
@ApiParam(name = "devId", value = "设备ID(','分隔)") @RequestParam(required = false) String devId) {
// 错误信息存储列表
List<UserErrorInfo> userErrorList = new ArrayList<>();
List<String> imgErrorList = new ArrayList<>();
Assert.notNull(companyId, ReturnCode.Params_Error);
userService.importBind(companyId, getLoginId(), excelPath, userErrorList, imgErrorList, devId);
// 返回结果
if (userErrorList.size() == 0 && imgErrorList.size() == 0) {
return Results.success();
} else {
Map<String, Object> errorLists = new HashMap<>();
errorLists.put("dataList", userErrorList);
errorLists.put("imgMap", imgErrorList);
return new ResultBean<>(2, ReturnCode.File_Exist_Error_Data.getDetail(), errorLists);
}
}绑定的主要逻辑如下：
@Override
public void importBind(Integer companyId, Integer loginId, String excelPath, List<UserErrorInfo> userErrorList,
List<String> imgErrorList, String devId) {
// 1. 解析EXCEL数据映射成原始数据信息列表
List<Map<String, Object>> dataList = parseExcelToRawdata(excelPath);
// 2. 过滤原始数据信息, 并转换成员工信息列表
List<User> users = filterToUsersForBind(companyId, loginId, dataList, userErrorList);
// 3. 批量绑定设备
if(users.size()>0)
{
batchBind(users,devId);
}
}
@Transactional
@OperLogInject("批量绑定员工信息")
public void batchBind(List<User> users, String devId) {
if (!devId.isEmpty() && !users.isEmpty()) {
String userId = String.join(",", users.stream().map(u -> u.getId().toString()).collect(Collectors.toList()));
try {
ResultBean<?> bindResult = devService.bindUser(devId,null, userId, true,1);
Assert.isTrue(bindResult.getCode() == 1, ReturnCode.User_Bind_Error);
} catch (Exception e) {
throw new CustomException(ReturnCode.User_Bind_Error);
}
}
}
