附件上传读条

src/views/projectManage/bugList/details/index.vue

@@ -445,72 +445,81 @@
             </div>
           </div>
         </el-main>
-        <el-main v-loading="loading.accessory" :style="type=='page'?{'padding': '20px 30px','margin-top': '10px'}:{'padding-left':'30px'}" class="layout_main">
+        <el-main
+          v-loading="fileLoading"
+          element-loading-text="上传中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.3)"
+          :style="type=='page'?{'padding': '20px 30px','margin-top': '10px'}:{'padding-left':'30px'}"
+          class="layout_main"
+        >
           <div class="module_title">
             <div class="module_title__sign" />
             <div class="module_title__caption upload-title">附件</div>
             <div class="upload-file"><i class="el-icon-info" />支持直接截图黏贴图片</div>
           </div>
           <el-divider v-if="type !== 'page'" />
-          <el-upload
-            ref="upload"
-            class="upload-demo"
-            action="http://star.xiaojukeji.com/upload/img.node"
-            :on-preview="handleDownload"
-            :before-upload="beforeUpload"
-            :before-remove="beforeRemove"
-            :on-remove="handleRemove"
-            :on-success="handleChange"
-            :on-error="errorChange"
-            multiple
-            accept="*"
-            :file-list="isNotImage(fileList)"
-          >
-            <el-button slot="trigger" icon="el-icon-upload" class="upload-button">上传附件</el-button>
-          </el-upload>
-          <el-upload
-            style="margin-top: 15px"
-            class="upload-demo"
-            list-type="picture-card"
-            multiple
-            accept="*"
-            :file-list="isImage(fileList)"
-            action="http://star.xiaojukeji.com/upload/img.node"
-          >
-            <el-button v-if="false" slot="trigger" size="small" type="primary">上传附件</el-button>
-            <div slot="file" slot-scope="{file}" style="height: 100%">
-              <img
-                class="el-upload-list__item-thumbnail"
-                :src="file.url"
-                alt=""
-              >
-              <span class="el-upload-list__item-actions">
-                <span
-                  class="el-upload-list__item-preview"
-                  @click="handlePictureCardPreview(file)"
-                >
-                  <i class="el-icon-zoom-in" />
-                </span>
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleDownload(file)"
-                >
-                  <i class="el-icon-download" />
-                </span>
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleRemove(file)"
+          <section>
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              action="http://star.xiaojukeji.com/upload/img.node"
+              :on-preview="handleDownload"
+              :before-upload="beforeUpload"
+              :before-remove="beforeRemove"
+              :on-remove="handleRemove"
+              :on-success="handleChange"
+              :on-error="errorChange"
+              multiple
+              accept="*"
+              :file-list="isNotImage(fileList)"
+            >
+              <el-button slot="trigger" icon="el-icon-upload" class="upload-button">上传附件</el-button>
+            </el-upload>
+            <el-upload
+              style="margin-top: 15px"
+              class="upload-demo"
+              list-type="picture-card"
+              multiple
+              accept="*"
+              :file-list="isImage(fileList)"
+              action="http://star.xiaojukeji.com/upload/img.node"
+            >
+              <el-button v-if="false" slot="trigger" size="small" type="primary">上传附件</el-button>
+              <div slot="file" slot-scope="{file}" style="height: 100%">
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="file.url"
+                  alt=""
                 >
-                  <i class="el-icon-delete" />
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="handlePictureCardPreview(file)"
+                  >
+                    <i class="el-icon-zoom-in" />
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleDownload(file)"
+                  >
+                    <i class="el-icon-download" />
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <i class="el-icon-delete" />
+                  </span>
                 </span>
-              </span>
-            </div>
-          </el-upload>
-          <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="80%">
-            <img width="100%" :src="dialogImageUrl" alt="图片加载失败···">
-          </el-dialog>
+              </div>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="80%">
+              <img width="100%" :src="dialogImageUrl" alt="图片加载失败···">
+            </el-dialog>
+          </section>
         </el-main>
         <el-main :style="type=='page'?{'padding': '20px 30px','margin-top': '10px'}:{'padding-left':'30px'}" class="layout_main">
           <div class="module_title">
@@ -813,7 +822,8 @@ export default {
           { required: true, message: '请输入图片名称', trigger: 'blur' },
           { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
         ]
-      }
+      },
+      fileLoading: false // 上传缓存
     }
   },
   watch: {
@@ -923,6 +933,7 @@ export default {
       return arr.filter(item => { return !item.url.match(reg) })
     },
     beforeUpload(file) {
+      this.fileLoading = true
       const isLt200M = (file.size / 1024 / 1024) < 200
       if (!isLt200M) {
         this.$message({
@@ -954,6 +965,7 @@ export default {
       this.dialogVisible = true
     },
     handleChange(response, file, fileList) {
+      this.fileLoading = false
       const item = {
         name: file.name,
         url: 'http:' + file.response.url
@@ -969,6 +981,7 @@ export default {
       this.bugUpdate(this.bug, 'accessory')
     },
     errorChange() {
+      this.fileLoading = false
       this.$message({
         showClose: true,
         message: '文件上传失败',