Skip to content

Commit ffdc9a7

Browse files
calebmancalebman
committed
Add import and export progress
1 parent a5b4555 commit ffdc9a7

File tree

7 files changed

+264
-56
lines changed

7 files changed

+264
-56
lines changed

‎src/components/progress/progress.vue‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<style>
2+
.progress{
3+
height: 20px;
4+
width: 99%;
5+
margin-bottom: 10px;
6+
float: left;
7+
overflow: hidden;
8+
background-color: #f5f5f5;
9+
border-radius: 4px;
10+
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
11+
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
12+
}
13+
.progress-bar{
14+
width: 0;
15+
height: 100%;
16+
font-size: 12px;
17+
line-height: 20px;
18+
color: #fff;
19+
text-align: center;
20+
background-color: #337ab7;
21+
border-radius: 4px;
22+
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
23+
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
24+
-webkit-animation: width .6s ease;
25+
-o-transition: width .6s ease;
26+
transition: width .6s ease;
27+
}
28+
.progress-bar-info{
29+
background-color: #5bc0de;
30+
}
31+
.progress-bar-success{
32+
background-color: #5bc85c;
33+
}
34+
.progress-bar-danger{
35+
background-color: #d9534f;
36+
}
37+
.progress-bar-warning{
38+
background-color: #f0ad4e;
39+
}
40+
.progress.active .progress-bar{
41+
-webkit-animation: progress-bar-scripes 2s linear infinite;
42+
-o-animation: progress-bar-scripes 2s linear infinite;
43+
animation: progress-bar-scripes 2s linear infinite;
44+
}
45+
@keyframes progress-bar-scripes {
46+
0%{
47+
background-position: 40px 0;
48+
}
49+
100%{
50+
background-position: 0 0;
51+
}
52+
}
53+
.progress-striped .progress-bar{
54+
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,
55+
transparent 50%,rgba(255,255,255,.15) 50%,
56+
rgba(255,255,255,.15) 75%,transparent 75%,transparent);
57+
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,
58+
transparent 50%,rgba(255,255,255,.15) 50%,
59+
rgba(255,255,255,.15) 75%,transparent 75%,transparent);
60+
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,
61+
transparent 50%,rgba(255,255,255,.15) 50%,
62+
rgba(255,255,255,.15) 75%,transparent 75%,transparent);
63+
-webkit-background-size: 40px 40px;
64+
background-size: 40px 40px;
65+
}
66+
.progress-text{
67+
font-size: 14px;
68+
text-align: center;
69+
line-height : 20px;
70+
}
71+
</style>
72+
<template>
73+
<div class="progress-outer">
74+
<div class="progress" :class="{'progress-striped active':animate}">
75+
<div class="progress-bar"
76+
:class="type && 'progress-bar-' + type"
77+
role="progressbar"
78+
:aria-valuenow="value"
79+
:aria-valuemin="0"
80+
:aria-valuemax="max"
81+
:style="{width:(percent<100?percent:100)+'%'}">
82+
<span class="progress-text">{{valueText}}</span>
83+
</div>
84+
</div>
85+
</div>
86+
</template>
87+
88+
<script>
89+
export default {
90+
data() {
91+
return {
92+
type:""
93+
}
94+
},
95+
props:{
96+
value:{
97+
type:Number,
98+
required:true
99+
},
100+
max:{
101+
type:Number,
102+
required:100
103+
},
104+
animate:{
105+
type:Boolean,
106+
required:false
107+
},
108+
showText:{
109+
type:String,
110+
required:""
111+
}
112+
},
113+
computed:{
114+
percent(){
115+
if(this.value<0){
116+
this.type = "danger"
117+
return 100
118+
}else{
119+
this.type = ""
120+
return parseInt(this.value*100/this.max,10)
121+
}
122+
},
123+
valueText(){
124+
if(this.showText != ""){
125+
return (this.showText+" "+this.percent+'%')
126+
}else{
127+
return this.percent+'%'
128+
}
129+
}
130+
}
131+
}
132+
</script>

‎src/components/table/MTable.vue‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
<Button type="primary" size="small" icon="plus" @click="handleAdd">新增一行</Button>
99
</Tooltip>
1010
<Tooltip :content="'读取Excel文件数据导入'+mtable.tableName" placement="bottom-start" effect="light">
11-
<Button type="primary" size="small" icon="ios-folder-outline" @click="importData">导入数据</Button>
11+
<Upload :action="HOST+'/admin/data/table/'+mtable.tableName+'/create/import'"
12+
:show-upload-list=false
13+
:on-progress="importProgress">
14+
<Button type="primary" size="small" icon="ios-folder-outline">导入数据</Button>
15+
</Upload>
1216
</Tooltip>
1317
<Tooltip :content="'将'+mtable.tableName+'导出为Excel文件'" placement="bottom-start" effect="light">
1418
<Button type="primary" size="small" icon="share" @click="exportData">导出数据</Button>
@@ -304,14 +308,12 @@
304308
})
305309
return tableCol
306310
},
307-
//导入数据
308-
importData(){
309-
this.$Loading.start()
310-
var t
311-
clearTimeout(t)
312-
t = setTimeout(()=>{
313-
this.$Loading.finish()
314-
}, 3000)
311+
//上传excel进度
312+
importProgress(event){
313+
this.$store.commit('addEvent',{
314+
percent:(20*event.percent)/100,
315+
detail:"正在处理excel文件"
316+
})
315317
},
316318
//导出数据
317319
exportData(){
@@ -321,7 +323,11 @@
321323
}
322324
this.$http.post(this.HOST+"/admin/data/table/"+this.mtable.tableName+"/create/export", data).then((response) => {
323325
if(response.status == 200){
324-
var fileUrl = response.body.data.fileUrl
326+
var downloadItem = {
327+
detail:this.mtable.tableName+"导出成功，点击下载",
328+
url: response.body.data.fileUrl
329+
}
330+
this.$store.commit("addFastItem",downloadItem)
325331
this.$Message.success("数据导出成功")
326332
}
327333
})

‎src/main.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,20 @@ let vm = new Vue({
6060
this.$Notice.config({top: 100, duration: 2})
6161
//全局配置Loading 参数分别为进度条颜色、失败颜色、高度
6262
this.$Loading.config({color: '#5cb85c', failedColor: '#f0ad4e', height: 3})
63+
64+
},
65+
sockets:{
66+
bind:function () {
67+
if(window.sessionStorage.getItem("username")){
68+
this.$socket.emit('bind', window.sessionStorage.getItem("username"))
69+
}
70+
},
71+
progress:function (val) {
72+
this.$store.commit('addEvent',val)
73+
},
74+
notify:function (val) {
75+
var notificationId = util.generateUUID()
76+
}
6377
}
6478
})
6579

@@ -97,14 +111,12 @@ router.beforeEach((to, from, next) => {
97111
Vue.http.interceptors.push(function(request, next) {
98112
//开启全局Loading
99113
this.$Loading.start()
100-
101114
//如果是使用静态数据模式
102115
if(Vue.prototype.HOST=="static"&&request.url.indexOf(".json")==-1){
103116
//在使用静态数据测试阶段需要开启以下两个配置
104117
request.method = "GET"
105118
request.url+=".json"
106119
}
107-
108120
//打印请求体的内容
109121
var requestParams = request.body
110122
//对请求体做处理,封装为json

‎src/pages/HomePage.vue‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,6 @@
4040
</Col>
4141
</Row>
4242
</div>
43-
<i-circle :percent="percent" :stroke-color="color">
44-
<Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
45-
<span v-else style="font-size:24px">{{ percent }}%</span>
46-
</i-circle>
47-
<Button @click="send">123</Button>
4843
<div class="summary">
4944
<Tabs style="margin-top: 10px" v-model="selectTab" :animated="false">
5045
<TabPane label="访问量" name="accessChars">
@@ -71,32 +66,14 @@
7166
},
7267
methods:{
7368
send(){
74-
this.$socket.emit('message',"123")
69+
7570
}
7671
},
7772
mounted(){
7873
// 基于准备好的dom，初始化echarts实例
7974
this.accessChars = echarts.init(document.getElementById('accessChar'));
8075
this.dataChars = echarts.init(document.getElementById('dataChar'));
8176
},
82-
computed: {
83-
color () {
84-
let color = '#2db7f5';
85-
if (this.percent == 100) {
86-
color = '#5cb85c';
87-
}
88-
return color;
89-
}
90-
},
91-
mounted(){
92-
this.$socket.emit('bind', window.sessionStorage.getItem("username"))
93-
},
94-
sockets:{
95-
message: function(val){
96-
console.log("[websocket] "+val)
97-
this.percent = val
98-
}
99-
},
10077
created(){
10178
let option = {
10279
// Make gradient line here

0 commit comments

Comments
 (0)