: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 }}
(预览数据)
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('请先选择模板')
}
},