增加进度条

frontend/admin/src/components/problem/testCaseMgnt.vue

@@ -1,17 +1,23 @@
 <template>
-    <div>
     <div class="col-md-12">
-            <label>{{ $t("problem.testCase") }}
+        <label>
-                <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
+            {{ $t("problem.testCase") }}
-            </label>
-            <small class="text-info">
-                请将所有测试用例打包在一个zip文件中上传，所有文件要在压缩包的根目录，且输入输出文件名要以从1开始连续数字标识要对应例如：
-                <br>1.in 1.out 2.in 2.out(普通题目)或者1.in 2.in 3.in(Special Judge)
             <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"
                target="_blank">{{ $t("adminUtils.help") }}
             </a>
-            </small>
+            <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
-            <p>{{ $t("problem.uploadProgress") }}<span v-text="uploadProgress"></span>%</p>
+        </label>
+        <br>
+        <label>{{ $t("problem.uploadProgress") }}</label>
+        <div class="progress">
+            <div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
+                 aria-valuemin="0"
+                 aria-valuemax="100"
+                 v-bind:style="{width: uploadProgress+'%'}">
+                {{ uploadProgress }} %
+            </div>
+        </div>
+
         <table class="table table-striped" v-if="testCaseList">
             <tr>
                 <td>ID</td>
@@ -24,19 +30,16 @@
                 <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">
+                      :upload-progress.sync="uploadProgress">
             </uploader>
         </div>
     </div>
-    </div>
 </template>
 
 <script>
@@ -54,14 +57,12 @@
             uploader
         },
         methods: {
-            uploadSuccess: (f, response)=> {
+            uploadSuccess(f, response){
                 alert("success");
             },
-            uploadError: (f, reason)=> {
+            uploadError(f, reason){
+                this.uploadProgress = 0;
                 alert("error");
-            },
-            uploadProgress: (file, percentage)=> {
-                console.log(percentage);
             }
         }
     })

frontend/admin/src/components/utils/uploader.vue

@@ -46,9 +46,11 @@
             uploader.on("uploadBeforeSend", (obj, data, headers)=> {
                 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("uploadProgress", this.uploadProgress);
+            uploader.on("uploadSuccess", this.uploadSuccess);
         }
     })
 </script>