使用Vue，Element-ui导入Excel并预览显示数据，并经数据保存传至后台数据库
需求：基于Vue，Element-ui框架，将本地Excel上传，并将表格中的数据绑定显示在上传页面，并保存提交到后台数据库此功能在做的时候网上有很多的案例，但是都是基于Export2Excel.js文件和Blob.js文件来做的，我做的这个不是这种的，感觉还是比较有难度的，因此做了记录，希望能帮助你首先看下总体的演示效果：废话不多说，先上代码块template中的结构代码<!--上传文件弹
·
需求：基于Vue，Element-ui框架，将本地Excel上传，并将表格中的数据绑定显示在上传页面，并保存提交到后台数据库
此功能在做的时候网上有很多的案例，但是都是基于Export2Excel.js文件和Blob.js文件来做的，我做的这个不是这种的，感觉还是比较有难度的，因此做了记录，希望能帮助你
首先看下总体的演示效果：
废话不多说，先上代码块
template中的结构代码
<!--上传文件弹窗-->
<!--文件上传组件就不多介绍，Element-UI官网还是比较详细的-->
<el-dialog
:title="dialogParams.title"
:visible.sync="dialogParams.visible"
:close-on-click-modal="false"
:top="'5%'"
custom-class="el-dialog--width960">
<el-form :inline="false" :model="data = data01.Content" :rules="rules" ref="data01">
<--注意，之所以此处加这个提示，是因为后天接口的限制，上传Excel 2007版本以上的Excel文件，文件后缀是xlsx,就会报错，所以此处只能上传xls后缀的Excel文件-->
<div class="boxTitle"><span class="warninger">上传文件后缀必须是(xls)，且根据模板上传，否则不能上传成功</span></div>
<el-form-item label="采购详情表" prop="MDM017402" :label-width="dialogParams.formLabelWidth">
<el-upload
:action="uploadParams.url"
:data="uploadParams.data"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:file-list="fileList"
:disabled="uploadStatus">
<el-button size="small" type="success" :disabled="uploadStatus">点击上传</el-button>
</el-upload>
</el-form-item>
<--v-if="uploadParams.preview" 控制预览表格，只有上传成功才可以看到表格，否则不显示-->
<el-form-item v-if="uploadParams.preview" label="预览" prop="MDM017402" :label-width="dialogParams.formLabelWidth">
<el-table
:data="data01.Content.MDM017402" //上传成功以后，接收返回的数据并显示到表格中
border
max-height="240"
style="width: calc(100% - 15px)">
<el-table-column
type="index"
width="60">
</el-table-column>
<el-table-column v-for="(item, index) in uploadParams.colModel" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
</el-table-column>
</el-table>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm(data01)" :loading="submitStatus">确定上传</el-button>
</span>
</el-dialog>
JS代码
在这里插入代码片，注意，我自己的Script代码中有好多变量您可能用不到，可以根据自己的实际情况进行选择
<script>
export default {
return {
data01: { //获取列表提交单据
Content: {
CardName: '', //查询参数1
UserName:'', //查询参数2
CardCode: '', //查询参数3
MDM017402:[], //存放预览表格数据的数组变量
OMS005301List:[], //用来存放文件上传成功以后解析的数据
BeginTime:'', //上传文件表格数据所需字段 （开始时间）
CustomerCode:'', //上传文件表格数据所需字段 （客户代码）
CustomerName:'', //上传文件表格数据所需字段（客户名称）
EndTime:'', //上传文件表格数据所需字段（结束时间）
ItemCode:'', //上传文件表格数据所需字段 （物料代码）
ItemName:'', //上传文件表格数据所需字段 （物料名称）
},
Method: 'Q', //接口查询参数
page: 1, //分页参数
rows: 50, //分页参数
sidx: 'DocEntry', //排序参数
sord: 'DESC' //排序参数
},
data02: {
Content: {
"CardCode": "",
"CardName": ""
}
},
total: 0,
DropdownSaler:[],
selectArr: [], //选中单据
tableData: [],
fileList:[],
Loading: false,
rules: {}, //表单验证
dialogParams: { // 上传文件模态框参数
title: '淘宝采购详情记录单上传',
visible: false, // 上传文件模态不显示
formLabelWidth: '85px'
},
uploadParams: { // uploadParams文件上传参数
url: global.OMS + '/OMS0053/OMS005302', //上传接口
data: {
Content:''
},
preview: false, // 上传文件模态不显示
colModel: [ //声明一个数组，将上传数据绑定到表格中
{ prop: 'ItemCode', label: '物料代码', width: '100' },
{ prop: 'ItemName', label: '物料名称', width: '200' },
{ prop: 'TaoBaoLink', label: '淘宝链接', width: '200' },
{ prop: 'CustomerCode', label: '客户代码', width: '200' },
{ prop: 'Remarks', label: '备注', width: '200' },
]
},
uploadStatus: false,
submitStatus: false
}
},
//钩子函数
created() {
//在页面创建前调用请求数据接口的函数
this.MDM017402()
},
methods:{
pageChange(val) {
this.data01.page = val
this.MDM017402()
},
sizeChange(val) {
this.data01.rows = val
this.MDM017402()
},
searchClick() { //搜索
this.MDM017402()
},
beforeUpload (file) { //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
file && (this.uploadStatus = true)
},
uploadSuccess (response, fileList) {
//response为上传文件的表格数据
//fileList为上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
/* console.log(response)*/
if (response.Status === 200) {
this.$notify({
type: 'success',
titie: '上传成功',
message: '上传成功'
})
this.uploadParams.preview = true;
//此处需要将返回的字符串数据进行解析，JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
this.data01.Content.MDM017402 = JSON.parse(response.Content) ;
} else {
this.$notify.warning({
title: '解析失败',
message: response.Status + '：' + response.MessageString
})
}
},
//数据获取请求函数
MDM017402() {
this.$axios({
method: 'post',
url: global.OMS + '/OMS88888888888', //请求接口
data: this.data01 //请求接口的参数
})
.then((res) => {
if(res.data.Status === 200) {
res.data.Content ?
(this.tableData = res.data.Content.rows, this.total = res.data.Content.records) :
(this.tableData = [], this.total = 0)
} else {
this.$notify({
type: 'warning',
title: '找不到该数据',
/*message: res.data.Status + res.data.Message*/
})
this.tableData = [] //查询时，如果查不到改项目，整个表格数据为空，此处表格中的data的值就是取自tableData [ ] 数组中
}
}, (err) => {
this.$notify({
type: 'warning',
title: '找不到该数据',
message: err //抛出后台返回的错误
})
})
},
//提交保存表格数据
submitForm () {
this.$refs.data01.validate((valid) => { //对整个form表单做了数据验证
if (valid) {
console.log(this.data01.Content.MDM017402)
if (this.data01.Content.MDM017402) {
this.submitStatus = true //预览表格显示
//将获取的MDM017402的数据返回一个新数组，数组中copy的元素为原始2113数组5261元4102素调用函数处理后的值。
this.data01.Content.MDM017402.map((item, index, array) => {
array[index] = { //将上面预览表格数据
ItemCode: item.ItemCode,
ItemName: item.ItemName,
UserCode: item.UserCode,
TaoBaoLink: item.TaoBaoLink,
CustomerCode:item.CustomerCode,
Remarks:item.Remarks
}
})
//将上传的数据解析，并转换格式
this.data01.Content.OMS005301List = JSON.parse(JSON.stringify(this.data01.Content.MDM017402))
this.$axios({
method: 'post',
url: global.OMS + '/OMS0053/OMS005303',
data: this.data01
}).then((res) => {
if (res.data.Status === 200) {
this.$notify.success({
title: '上传成功',
message: ' 上传成功'
})
this.dialogParams.visible = false
this.MDM017402()
this.submitStatus = false
} else {
console.warn(res.data)
this.$notify.warning({
title: '上传失败',
message: res.data.Status + '：' + res.data.Message
})
}
}, (err) => {
console.warn(err)
})
} else {
this.$notify.warning({
title: '上传失败',
message: '没有数据'
})
}
} else {
return false
}
})
},
}
}
</script>
前往低代码交流专区
更多推荐
11
0- 0
已为社区贡献4条内容
所有评论(0)