需求：从后台获取到一组数量不固定的库存条码，给每个条码关联对应的设备图片（多张）、设备序列号，再回传给后台。
实现：
1.获取库存条码
从后台获取到的是一个包含库存条码的字符串数组，获取到数据以后新建一个对象数组，把库存条码放进去，同时新增两个字段用来存放图片数组和设备序列号。
getStoreNumber(row) { // 获取库存条码 var params = {} var that = this params.ownerIntentionId = row.id // 库存ID var loginInit = that.loadingInit('.addInventory') getInventorySerialNo(params).then(res => { loginInit.close() that.dialogUpload.id = row.id that.dialogUpload.items = [] that.uploadItems = res.items that.uploadItems.forEach((item, index) => { that.dialogUpload.items.push({ inventorySerialNo: item, imgUrl: [], serialNumber: '' }) }) that.dialogUpload.flag = true }).catch(error => { loginInit.close() that.$message({ type: 'warning', message: error }) }) }
2.上传设备弹框
每组多张图片上传成功以后把图片地址存放在一个数组里，回传到对象数组里
<el-dialog title="上传设备" :visible.sync="dialogUpload.flag" width="60%" class="dialogUpload"> <div v-for="(item, index) in dialogUpload.items" :key='index'> <el-form :inline="true" label-width="120px"> <el-form-item label="库存条码:"> <el-input v-model="item.inventorySerialNo" v-text="item.inventorySerialNo"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-width="120px"> <el-form-item label="设备图片:"> <el-upload :action="$store.getters.publicStateList.pubLicUrl.upLoadUrl" list-type="picture-card" :file-list="item.fileList" :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, item)" :on-remove="(file, fileList) => handleRemove(file, fileList, item)" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> </el-form> <el-form :inline="true" label-width="120px"> <el-form-item label="设备序列号:"> <el-input v-model="item.serialNumber"></el-input> </el-form-item> </el-form> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogUpload.flag=false">取 消</el-button> <el-button type="primary" @click="uploadDevice">确 定</el-button> </div> </el-dialog>
export default { name: 'addInventory', data() { return { dialogUpload: { flag: false, id: '', // 设备ID items: [] // 设备列表 }, uploadItems: [], fileList: [] } }, methods: { handleRemove(file, fileList, item) { item.imgUrl = [] for (var i = 0; i < fileList.length; i++) { if (fileList[i].response) { item.imgUrl.push(fileList[i].response.url) } else { item.imgUrl.push(fileList[i].url) } } }, handleSuccess(res, file, fileList, item) { item.imgUrl = [] for (var i = 0; i < fileList.length; i++) { if (fileList[i].response) { item.imgUrl.push(fileList[i].response.url) } else { item.imgUrl.push(fileList[i].url) } } } } }
3.上传设备：
对象数组传到后台需要先编码，同时后台接收到数据以后要先进行解码
uploadDevice() { // 上传设备 var params = {} var that = this var isNull = false that.dialogUpload.items.forEach((item, index) => { console.log(item) if (item.imgUrl == undefined || item.imgUrl.length <= 0) { that.$message({ type: 'warning', message: '请上传设备图片' }) isNull = true return } else if (item.serialNumber == '') { that.$message({ type: 'warning', message: '请填写设备序列号' }) isNull = true return } }) if (isNull == false) { params.ownerIntentionId = that.dialogUpload.id // 库存ID params.proItemList = encodeURIComponent(JSON.stringify(that.dialogUpload.items)) // 设备数组 var loginInit = that.loadingInit('.addInventory') uploadProItem(params).then(res => { loginInit.close() that.$message({ type: 'success', message: '上传成功' }) that.dialogUpload.flag = false }).catch(error => { loginInit.close() that.$message({ type: 'warning', message: error }) }) } }
