vue xlsx 导入导出_vue中excel导入导出组件

:visible.sync="centerDialogVisible":title="titleName":close-on-click-modal="false":before-close="beforePausClose"width="1040px"

>

v-for="item in options":key="item.template_table_name":label="item.template_description":value="item.template_table_name"/>

选择Excel文件

下载模板

将图片保存到系统中

导入

关闭

{{ item }}

成功：{{ successCount }}条

失败：{{ failCount }}条

下载导入失败数据

v-loading="loading"style="width:100%;overflow-x: auto;min-height: 425px"element-loading-text="保存中，请稍等"element-loading-spinner="el-icon-loading">

border="1px solid gray"style="border-collapse: collapse;width: 960px"

>

*{{ item }}

{{ item1 }}

{{ item[item1] }}

(预览数据)

accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"class="input-file"type="file"@change="exportData"

>

:type="buttonType":disabled="disabled":icon="buttonIcon":size="buttonSize"@click="getAllTemplateData">{{ titleName }}

:visible.sync="centerDialogVisibleTwo"title="导入结果"width="40%"center>

成功条数：{{ successCount }}

失败条数：{{ failCount }}

关闭

导出失败数据

props: {

disabled: {

type: Boolean,default: false //是否有禁用权限

},

titleName: {

type: String,default: '批量导入商品信息' //传入不同的标题

},

actionName: {

type: String,default: 'commodity' //后台根据这个值返回对应模板以及导入时调用对应函数

},

buttonType: {

type: String,default: '' //控制Button的类型

},

buttonIcon: {

type: String,default: '' //控制Button中的图标 (仅支持element-ui中自带图标)

},

buttonSize: {

type: String,default: '' //控制Button的尺寸

}

},

data() {return{

arr: [],//放从数据库获取的标题

arr1: [], //导入的excel中的标题

tableData: [], //用于循环展示的值

copyTableData: [], //用于保存最初的json数据。以便进行数据更换

changeList: {}, //动态绑定下拉框的值

submitLastValue: [], //最终提交的值

centerDialogVisible: false, //对话框1显示

centerDialogVisibleTwo: false, //对话框2显示

options: [], //模板列表

value: '', //选择的模板值

templateAllData: [],

checked: [],//用于图片转换的输入框列表

debugCount: 0,

copyTableDataTwo: [],//用于下拉框切换时的数据展示

picSubmitShow: false, //是否显示图片转换输入框

template: [],

oneArr:0, //用于在图片转换时判断是否转换完成

twoArr: 0, //用于在图片转换时判断是否转换完成

count: 0,

loading:false, //加载图标

successCount: 0, //成功条数

failCount: 0, //失败条数

exportBtn: true, //导入按钮权限

exportFale: true, //用于判断是否导出失败数据

templateShow: true,

checkBoxMutiplian:false,

progressTimer:'',

errorList: [],//前端校验错误提示

progress: 0, //进度条百分比

progressDebugShow: false, //滚动条是否显示

errorPromptShow: false, //校验失败提示是否显示

resultShow: false, //控制导入结果显示

selectPower: false, //选择模板权限

exportPower: false, //导入按钮权限

canclePower: false, //关闭按钮权限

iconClickPower: 0, //控制点击对话框关闭图标是否执行

tableShow: true //显示空表格

}

},

computed: {

...mapGetters(['business_group_id'])

},

watch: {

debugCount:function(newV, oldV) {//if (newV === this.submitLastValue.length * this.checked.length) {

//this.saveResult()

//}

},

twoArr:function(newV, oldV) {if (this.checked.length > 0) {

setTimeout(this.PicTransfer, 100)

}

},

tableData:function(newV, oldV) {//if (this.tableData.length > 0) {

//this.tableShow = false

//} else {

//this.tableShow = true

//}

}

},

beforeDestroy() {

clearInterval(this.progressTimer)

},

methods: {

getAllTemplateData:function() {this.arr1 =[]this.arr =[]this.value = ''

this.tableData =[]this.copyTableDataTwo =[]this.copyTableData =[]this.centerDialogVisible = true

this.progressDebugShow = false

this.resultShow = false

this.count = 0

this.oneArr = 0

this.twoArr = 0

this.checked =[]this.picSubmitShow = false

this.getDefaultArr()

},//获取数据库模板数据

getDefaultArr: function() {

let group_id= ''

if (this.actionName === 'commodity') {

group_id= this.business_group_id

}

getTemplate(group_id,this.actionName)

.then(res=>{this.options =res.dataif (this.options.length === 1) {this.value = this.options[0].template_table_namethis.templateShow = false

this.changeTemplate(this.value)

}

})

.catch(() =>{})

},//点击对话框的X图标事件

beforePausClose() {if (this.iconClickPower === 1) {return}else{this.centerDialogVisible = false}

},//取消

cancleTemplate: function() {this.value = ''

this.arr =[]this.arr1 =[]this.value = ''

this.tableData =[]this.centerDialogVisible = false

this.centerDialogVisibleTwo = false

this.exportBtn = trueclearInterval(this.progressTimer)

document.querySelector('.input-file').value = ''},//切换模板时

changeTemplate: function(data) {if (data !== '') {this.arr =[]

getTemplateHeader(data)

.then(res=>{this.templateAllData =res.data.datathis.checkBoxMutiplian =res.data.need_save_picturesthis.template =[]

const obj={}

res.data.data.forEach((item, index)=>{

obj[item.attribute_name]= ''

this.arr.push(item.attribute_name)

})this.template.push(obj)this.exportBtn = false

//动态添加changeList的值

for (let i = 0; i < this.arr.length; i++) {this.changeList[this.arr[i]] = this.arr[i]

}

})

.catch(() =>{})

}

},//图片转换 将有src属性并且为img的值时，将src中的值改变为后台传过来的值

PicTransfer: function() {

const a= this.submitLastValue[this.twoArr][this.checked[this.oneArr]]if (typeof a === 'string' && a.indexOf(' -1 && a.indexOf('src') > -1) {

const arrimg=[]//截取出相应的src属性值

a.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {

arrimg.push(capture)

})

uploadPicToQn(arrimg)

.then(res=>{for (let h = 0; h < arrimg.length; h++) {//this.tableData[j][this.checked[i]] = this.tableData[j][this.checked[i]].replace(arrimg[h], res.data[h].pic_name)

this.submitLastValue[this.twoArr][this.checked[this.oneArr]] = this.submitLastValue[this.twoArr][this.checked[this.oneArr]].replace(arrimg[h], res.data[h].pic_name)this.count += 1}this.debugCount += 1

if (this.oneArr === this.checked.length - 1 && this.twoArr === this.submitLastValue.length - 1) { //判断src的值是否转换完成

this.saveResult()

}else if (this.twoArr < this.submitLastValue.length - 1) {this.twoArr += 1}else{this.oneArr += 1

this.twoArr = 0}

})

.catch(() =>{if (this.oneArr === this.checked.length - 1 && this.twoArr === this.submitLastValue.length - 1) {this.saveResult()

}else if (this.twoArr < this.submitLastValue.length - 1) {this.twoArr += 1}else{this.oneArr += 1

this.twoArr = 0}

})

}else{this.debugCount += 1

if (this.oneArr === this.checked.length - 1 && this.twoArr === this.submitLastValue.length - 1) {this.saveResult()

}else if (this.twoArr < this.submitLastValue.length - 1) {this.twoArr += 1}else{this.oneArr += 1

this.twoArr = 0}

}//this.debugCount = 0

//for (let i = 0; i < this.checked.length; i++) {

//for (let j = 0; j < this.submitLastValue.length; j++) {

//const a = this.submitLastValue[j][this.checked[i]]

//if (typeof a === 'string' && a.indexOf(' -1 && a.indexOf('src') > -1) {

//const arrimg = []

截取出相应的src属性值

//a.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {

//arrimg.push(capture)

//})

//uploadPicToQn(arrimg)

//.then(res => {

//for (let h = 0; h < arrimg.length; h++) {

this.tableData[j][this.checked[i]] = this.tableData[j][this.checked[i]].replace(arrimg[h], res.data[h].pic_name)

//this.submitLastValue[j][this.checked[i]] = this.submitLastValue[j][this.checked[i]].replace(arrimg[h], res.data[h].pic_name)

//}

//this.debugCount += 1

this.resultData()

//})

//.catch(() => {})

//} else {

//this.debugCount += 1

//}

//}

//}

},

btnClick() {if (this.value) {this.progressDebugShow = falseclearInterval(this.progressTimer)this.resultShow = falsedocument.querySelector('.input-file').click()

}else{this.$message.warning('请先选择模板')

}

},