upload-excel.vue
4.03 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<style>
.upload-iframe {
display: none;
}
.upload-btn {
display: inline-block;
position: relative;
/*overflow: hidden;*/
/*vertical-align: middle;*/
}
.upload-btn input[type="file"] {
position: absolute;
top: 0;
left: 0;
font-size: 18px;
opacity: 0;
cursor: pointer;
width: 100%;
height: 34px;
}
.roll-bg {
position: fixed;
z-index: 9999;
background: #f5f5f5;
width: 100%;
height: 100%;
left: 0;
top: 0;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.roll-bg img {
width: 60px;
height: 60px;
margin-top: 350px;
}
</style>
<template>
<!-- <section style="margin-top:0px;"> -->
<my-tag :tag-name="tag" v-if="type == 'file'" :class="class">
<iframe :id="iframeName" :name="iframeName" @load="loaded" class="upload-iframe"></iframe>
<form :id="formId" action="/file/upload/excel/{{exceltype}}" method="post" :target="iframeName" style="
display: inline;" enctype="multipart/form-data">
<slot>{{label}}</slot>
<input type="file" id="uploadFile" name="uploadFile" @change="upload">
<div class="roll-bg" v-show="sh">
<div class="w60" style="margin:0 auto; ">
<img src="/images/roll.gif">
</div>
</div>
</form>
</my-tag>
<!-- </section> -->
</template>
<script>
module.exports = {
props: {
label: {
type: String,
default: '选择文件'
},
sh:false,
class: {
type: Array,
default: function () {
return [];
},
coerce: function (val) {
return ['upload-btn'].concat(val || []);
}
},
tag: {
type: String,
default: 'div'
},
model: {
type: String,
require: true,
twoWay: true
},
type: {
type: String,
default: 'img'
},
multiple: false,
exceltype:'supplier'
},
data: function () {
return {
iframeName: 'uploadVue' + Math.random().toString(32).substr(2),
formId: 'upload-form-' + Math.random().toString(32).substr(2)
}
},
methods: {
loaded: function (event) {
var content = "";
var pre=event.target.contentWindow.document.body.querySelector('pre') || '';
if(!pre){
pre = document.getElementById(this.iframeName).contentWindow;
content = pre.document.body.innerText || '';
if(content==''){
return ;
}
}else{
if(!pre){
return ;
}
content=pre.innerHTML;
}
try {
var result = JSON.parse(content);
if (result.errorCode==0) {
// $('#uploadFile').replaceWith('<input name="uploadFile3" type="file" id="uploadFile" @change="upload"/>');
this.$dispatch('file-change', result.data);
this.sh = false;
} else {
this.MessageBox.alert(result.message);
this.sh = false;
}
} catch(e) {
this.MessageBox.alert(e.message);
this.sh = false;
}
},
upload: function (event) {
document.getElementById(this.formId).submit();
this.sh = true;
}
}
};
</script>