vue Excel表格的导入

<el-dialog

title="代理商导入流程"

:visible.sync="importExcelDialogVisible"

class="import_excel_dialog"

width="30%">

<div v-loading='importExcelLoading'>

<el-steps :active="importExcelStep" simple>

<el-step @click.native="jumpStep($event, 1)" title="第一步" icon="el-icon-edit"></el-step>

<el-step @click.native="jumpStep($event, 2)" title="第二步" icon="el-icon-upload2"></el-step>

<el-step @click.native="jumpStep($event, 3)" title="结 果" icon="el-icon-star-off"></el-step>

</el-steps>

<div class="dialog_main">

<p v-for="(item, index) in importExcelTextArr[importExcelStep - 1]" v-bind:key="'item' + index" v-text="index + 1 + '.' + item" v-if="item"></p>

<div v-if="importExcelStep === 1">

<el-button size="small" icon="el-icon-download" @click="downloadExcelDemo">下载EXCEL模板</el-button>

</div>

<div v-else-if="importExcelStep === 2">

<upload-excel-component @success='handleSuccess'><span slot>导入代理商</span></upload-excel-component>

</div>

</div>

</div>

</el-dialog>

data{

return {

importExcelStep: 1, // 表示走到第几步了

importExcelDialogVisible: false, // 导入步骤框

importExcelTextArr: [

['请导出EXCEL模板', '表格表头内容请按照表格标准导入', '代理区域需要为已存在的市名请保证用顿号(、)分隔'],

['导入格式需要为.xls格式', '表格表头内容请按照表格标准导入', '代理区域需要为已存在的市名请保证用顿号(、)分隔'],

['恭喜，导入成功！', '列表已经刷新可以在当前列表中查看', '如若未找到您添加的数据，请尝试使用搜索功能']

],

// excel 接收key 对照着label 验证条件validateRules

excelConfig: {

// { key: 'index', label: '序号' },

fieldArr: [{ key: 'country', label: '地区'}, { key: 'province', label: '省份'}, { key: 'city', label: '代理区域' }, { key: 'name', label: '代理商名称', validateRules: validateNotEmpty }, { key: 'contact', label: '联系人', validateRules: validateNotEmpty }, { key: 'username', label: '代理商账号', validateRules: validateMobiles }, { key: 'tel', label: '联系电话', validateRules: validateMobiles }, { key: 'password', label: '密码', validateRules: '' }]

},

excelData: []

}

// 本地上传文件成功时 目前仅支持Xls及Xlsx格式

handleSuccess({ results, header }) {

let breakStatus = false

const fieldLabelArr = this.excelConfig.fieldArr.map(e => e.label) // label 文中集合

for (let i = 0; i < results.length; i++) {

if (breakStatus) { break }

// 插件未传我为空的字段，那么我们自己给他加上

fieldLabelArr.map((e, ii) => {

if (!Object.keys(results[i]).includes(e)) {

results[i][e] = ''

}

})

this.excelData[i] = {}

let fAreasData = []

let fProvince = []

let fCity = []

 

for (const x in results[i]) {

const rowIndex = fieldLabelArr.indexOf(x)

if (rowIndex >= 0) {

const fieldRow = this.excelConfig.fieldArr[rowIndex]

// 存在验证条件的话

if (fieldRow['validateRules']) {

if (fieldRow['validateRules'](results[i][x])) {

this.excelData[i][fieldRow['key']] = results[i][x]

// if (fieldRow['key'] === 'username') {

// this.excelData[i]['tel'] = results[i][x]

// }

} else {

this.showErrorDialog(`Excel数据检验失败，第${i + 1}行，名为${x}的(表头名)字段名${results[i][x] ? '格式是否正确，错误值: ' + results[i][x] : '是否已经填写了内容'}`)

breakStatus = true

this.excelData = []

break

}

} else {

let msg = ''

if (fieldRow['key'] === 'country' && fAreasData.length) {

results[i][x] = fAreasData[0]['id']

} else if (fieldRow['key'] === 'province' && fProvince.length) {

results[i][x] = fProvince[0]['id']

} else if (fieldRow['key'] === 'city' && fCity.length) {

results[i][x] = fCity

}

if (msg) {

this.showErrorDialog(msg)

breakStatus = true

this.excelData = []

break

}

// 不存在就直接加上

this.excelData[i][fieldRow['key']] = results[i][x]

}

} else {

if (x !== '序号') {

this.showErrorDialog(`请勿改变Excel(表头名)字段名或格式，第${i + 1}行，名为${x}的(表头名)字段名未定义`)

breakStatus = true

this.excelData = []

break

}

}

}

}

this.importExcel(this.excelData)

},

// 上传EXCEL

importExcel(data) {

data[0].city = data[0].city[0]

if (data.length) {

const agentJsonDatas = JSON.stringify(data)

this.importExcelLoading = true

agent_import({ agentJsonDatas }).then(res => {

if (res.errorCode === 0) {

this.$message({

message: `导入成功！`,

type: 'success'

})

this.importExcelLoading = false

this.importExcelStep++

this.getTableData()

} else if (res.errorCode === 10022) {

this.$message({

message: '账号' + res.message + '重复',

type: 'error'

})

this.importExcelLoading = false

} else if (res.errorCode === 10023) {

this.$message({

message: '名称' + res.message + '重复',

type: 'error'

})

this.importExcelLoading = false

} else if (res.errorCode === 100) {

this.$message({

message: res.message,

type: 'error'

})

this.importExcelLoading = false

}

})

}

},