DataImport.vue
5.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<el-container>
<el-main>
<el-row>
<el-row>
<el-col :span="24"><div class="grid-content"><p>请导入原始/理货数据：</p></div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content"><h1>Please import original / tally data：</h1></div></el-col>
</el-row>
</el-row>
<el-row style="margin-top: 60px">
<el-col :offset="4" :span="7" style="background-color: white;padding-top: 20px;padding-bottom: 20px;border-radius: 10px">
<el-upload
class="upload-demo"
action=""
:http-request="uploadOri"
:limit=1
:on-exceed="fileExceed"
accept="application/vnd.ms-excel,application/vnd.ms-excels"
ref="fileupload"
v-loading.fullscreen.lock="loading"
element-loading-text="正在上传原始数据"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0,0.3)"
>
<el-button size="medium" type="primary">点击上传原始数据</el-button>
<div slot="tip" class="el-upload__tip">只能上传excel文件</div>
</el-upload>
</el-col>
<el-col :offset="2" :span="7" style="background-color: white;padding-top: 20px;padding-bottom: 20px;border-radius: 10px">
<el-upload
class="upload-demo"
action=""
:http-request="uploadTal"
:limit=1
:on-exceed="fileExceed2"
accept="application/vnd.ms-excel,application/vnd.ms-excels"
ref="fileupload"
v-loading.fullscreen.lock="loadings"
element-loading-text="正在上传理货数据"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0,0.3)">
<el-button size="medium" type="success">点击上传理货数据</el-button>
<div slot="tip" class="el-upload__tip">只能上传excel文件</div>
</el-upload>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<!--自定义CSS-->
<style scoped>
.el-container{text-align: center}
.el-main{margin:0 auto;height:400px;}
p{font-size:25px;font-weight: bold;}
.row-bg{padding:30px 0;}
.el-form-item {margin-bottom: 0px;}
.el-loading-spinner{
top:60%;
width: 120%;
}
</style>
<script>
import {upfile,upfiles} from "../../api/technological";
export default {
data() {
return {
loading:false,
loadings:false,
fileList: [],
};
},
methods:{
// excel 原始导入
fileExceed(){
this.$message.error('别贪心！一次只能上传一个哦~');
},
// 自定义上传 excel
uploadOri (item) {
this.loading = true;
const form = new FormData()
form.append('file', item.file);
upfile(form).then(res =>{
if(res.data.count >0){
this.loading = false;
return this.$message.error('主单导入失败')
}else {
this.loading = false;
this.$message.success('主单导入成功')
}
}).catch((e) => {})
},
// excel 理货导入
fileExceed2(){
this.$message.error('别贪心！一次只能上传一个哦~');
},
// 自定义上传 excel
uploadTal (item) {
this.loadings = true;
const form = new FormData()
form.append('file', item.file);
upfiles(form).then(res =>{
if(res.data.count >0){
this.loadings = false;
return this.$message.error('主单导入失败')
}else {
this.loadings = false;
this.$message.success('主单导入成功')
}
}).catch((e) => {})
},
},
computed:{
},
/*渲染方法*/
activated(){
},
};
</script>