Sfoglia il codice sorgente

feat: 文件上传组件新增上传状态反馈及按钮加载效果

yusheng 9 mesi fa
parent
commit
442afa0216

+ 14 - 10
src/components/upload/fileUpload.vue

@@ -233,19 +233,23 @@
           this.$message.error(`最多上传 ${this.limit}个文件`);
           return false;
         }
-        console.log(file);
+        this.$emit('uploading', true);
         return uploadFile({
           module: this.module,
           multiPartFile: file
-        }).then((res) => {
-          if (res.data) {
-            this.$emit('input', [
-              ...(this.value || []),
-              { ...file, url: res.data.storePath, ...res.data }
-            ]);
-          }
-          return res.data;
-        });
+        })
+          .then((res) => {
+            if (res.data) {
+              this.$emit('input', [
+                ...(this.value || []),
+                { ...file, url: res.data.storePath, ...res.data }
+              ]);
+            }
+            return res.data;
+          })
+          .finally(() => {
+            this.$emit('uploading', false);
+          });
       },
       handlRequest() {
         return Promise.resolve();

+ 15 - 2
src/views/appUpdate/components/addOrEditDialog.vue

@@ -34,6 +34,7 @@
               :limit="1"
               :size="100"
               :accept="'.apk'"
+              @uploading="uploading"
             />
           </el-form-item>
         </el-col>
@@ -47,7 +48,13 @@
       </el-row>
     </el-form>
     <div slot="footer">
-      <el-button type="primary" @click="handleSave">保存</el-button>
+      <el-button
+        type="primary"
+        @click="handleSave"
+        v-loading="loading"
+        :disabled="loading"
+        >保存</el-button
+      >
       <el-button @click="cancel">返回</el-button>
     </div>
   </ele-modal>
@@ -67,6 +74,7 @@
     },
     data() {
       return {
+        loading: false,
         form: {
           versionCode: '',
           releaseNotes: '',
@@ -77,7 +85,9 @@
     computed: {
       rules() {
         return {
-          versionCode: [{ required: true, message: '请输入', trigger: 'change' }],
+          versionCode: [
+            { required: true, message: '请输入', trigger: 'change' }
+          ],
           releaseNotes: [
             { required: true, message: '请输入', trigger: 'blur' }
           ],
@@ -89,6 +99,9 @@
       async init() {
         // this.form.versionCode = await getCode('app_update_version_code');
       },
+      uploading(loading) {
+        this.loading = loading;
+      },
       handleSave() {
         console.log(this.form);