增加进度条

This commit is contained in:
LiYang
2016-08-07 23:14:18 +08:00
parent 94c56fc39f
commit 201611948c
2 changed files with 45 additions and 42 deletions

View File

@@ -1,41 +1,44 @@
<template> <template>
<div> <div class="col-md-12">
<div class="col-md-12"> <label>
<label>{{ $t("problem.testCase") }} {{ $t("problem.testCase") }}
<a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a> <a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
</label> target="_blank">{{ $t("adminUtils.help") }}
<small class="text-info"> </a>
请将所有测试用例打包在一个zip文件中上传所有文件要在压缩包的根目录且输入输出文件名要以从1开始连续数字标识要对应例如 <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
<br>1.in 1.out 2.in 2.out(普通题目)或者1.in 2.in 3.in(Special Judge) </label>
<a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0" <br>
target="_blank">{{ $t("adminUtils.help") }} <label>{{ $t("problem.uploadProgress") }}</label>
</a> <div class="progress">
</small> <div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
<p>{{ $t("problem.uploadProgress") }}<span v-text="uploadProgress"></span>%</p> aria-valuemin="0"
<table class="table table-striped" v-if="testCaseList"> aria-valuemax="100"
<tr> v-bind:style="{width: uploadProgress+'%'}">
<td>ID</td> {{ uploadProgress }} %
<td>{{ $t("adminUtils.input") }}</td>
<td>{{ $t("adminUtils.output") }}</td>
</tr>
<tr v-for="testCase in testCaseList">
<td>{{ $index + 1 }}</td>
<td>{{ testCase.input }}</td>
<td>{{ testCase.output }}</td>
</tr>
</table>
</div>
<div class="col-md-12">
<div class="form-group">
<uploader uploader-id="testCaseUploader"
upload-path="/"
:accept="{title: 'testcase zip', extensions: 'zip', mimeTypes: 'application/zip'}"
:upload-success="uploadSuccess"
:upload-error="uploadError"
:upload-progress="uploadProgress">
</uploader>
</div> </div>
</div> </div>
<table class="table table-striped" v-if="testCaseList">
<tr>
<td>ID</td>
<td>{{ $t("adminUtils.input") }}</td>
<td>{{ $t("adminUtils.output") }}</td>
</tr>
<tr v-for="testCase in testCaseList">
<td>{{ $index + 1 }}</td>
<td>{{ testCase.input }}</td>
<td>{{ testCase.output }}</td>
</tr>
</table>
<div class="form-group">
<uploader uploader-id="testCaseUploader"
upload-path="/"
:accept="{title: 'testcase zip', extensions: 'zip', mimeTypes: 'application/zip'}"
:upload-success="uploadSuccess"
:upload-error="uploadError"
:upload-progress.sync="uploadProgress">
</uploader>
</div>
</div> </div>
</template> </template>
@@ -54,14 +57,12 @@
uploader uploader
}, },
methods: { methods: {
uploadSuccess: (f, response)=> { uploadSuccess(f, response){
alert("success"); alert("success");
}, },
uploadError: (f, reason)=> { uploadError(f, reason){
this.uploadProgress = 0;
alert("error"); alert("error");
},
uploadProgress: (file, percentage)=> {
console.log(percentage);
} }
} }
}) })

View File

@@ -46,9 +46,11 @@
uploader.on("uploadBeforeSend", (obj, data, headers)=> { uploader.on("uploadBeforeSend", (obj, data, headers)=> {
headers["X-CSRFToken"] = getCookie("csrftoken"); headers["X-CSRFToken"] = getCookie("csrftoken");
}); });
uploader.on("uploadSuccess", this.uploadSuccess); uploader.on("uploadProgress", (f, percentage)=> {
this.uploadProgress = Math.round(percentage * 100);
});
uploader.on("uploadError", this.uploadError); uploader.on("uploadError", this.uploadError);
uploader.on("uploadProgress", this.uploadProgress); uploader.on("uploadSuccess", this.uploadSuccess);
} }
}) })
</script> </script>