Просмотр исходного кода

feat: improve love value import success feedback

Developer 1 день назад
Родитель
Сommit
495e5391a8
2 измененных файлов с 77 добавлено и 21 удалено
  1. BIN
      dist.zip
  2. 77 21
      src/views/modules/member/query.vue

+ 77 - 21
src/views/modules/member/query.vue

@@ -39,9 +39,9 @@
               </el-upload>
               <el-button type="default" @click="handleDownloadLove" style="margin-left: 10px;" v-if="$hasPermission('core:appuser:downloadLove')">下载爱心值导入模板</el-button>
               <el-upload v-if="$hasPermission('core:appuser:importLove')"
-                :action="uploadUrl2"
-                :headers="uploadHeaders"
-                :on-success="uploadLoveValueSuccess"
+                :action="uploadUrl2"
+                :headers="uploadHeaders"
+                :on-success="uploadLoveValueSuccess"
                 :before-upload="beforeAvatarUpload"
                 :limit="1">
                 <el-button type="primary" style="margin-left: 10px;">导入爱心值</el-button>
@@ -115,6 +115,20 @@
       </el-table>
       <span slot="footer" class="dialog-footer"><el-button type="primary" @click="loveValueImportResultVisible = false">知道了</el-button></span>
     </el-dialog>
+    <el-dialog
+      :visible.sync="loveValueImportSuccessVisible"
+      width="620px"
+      center
+      :show-close="false"
+      :close-on-click-modal="false"
+      custom-class="love-value-import-success-dialog">
+      <div class="love-value-import-success-content">
+        <i class="el-icon-success love-value-import-success-icon"></i>
+        <div class="love-value-import-success-title">爱心值导入成功</div>
+        <div class="love-value-import-success-description">本次成功导入 {{ loveValueImportSuccessCount }} 行爱心值</div>
+        <el-button type="primary" class="love-value-import-success-button" @click="loveValueImportSuccessVisible = false">知道了</el-button>
+      </div>
+    </el-dialog>
     </el-card>
 </template>
 
@@ -142,6 +156,7 @@ export default {
         token: Cookies.get('token')
       },
       loveValueImportResultVisible: false,
+      loveValueImportSuccessVisible: false,
       loveValueImportSuccessCount: 0,
       loveValueImportFailures: []
     }
@@ -202,32 +217,33 @@ export default {
       }
       return isXls || isXlsx
     },
-    uploadFileSuccess (response, file, fileList) {
+    uploadFileSuccess (response, file, fileList) {
       if (response && response.code === 0) {
         this.$message.success('导入成功!')
         this.getList()
       } else {
         this.$message.error(response.msg || '文件上传失败!')
-        }
-    },
-    uploadLoveValueSuccess (response, file, fileList) {
-      if (!response || response.code !== 0) {
-        this.$message.error((response && response.msg) || '文件上传失败!')
-        return
-      }
-      const data = response.data || {}
-      const failures = data.failures || []
-      if (failures.length > 0) {
+        }
+    },
+    uploadLoveValueSuccess (response, file, fileList) {
+      if (!response || response.code !== 0) {
+        this.$message.error((response && response.msg) || '文件上传失败!')
+        return
+      }
+      const data = response.data || {}
+      const failures = data.failures || []
+      if (failures.length > 0) {
         this.loveValueImportSuccessCount = data.successCount || 0
         this.loveValueImportFailures = failures
         this.loveValueImportResultVisible = true
-      } else {
-        this.$message.success(`导入成功,共${data.successCount || 0}行!`)
-      }
-      if ((data.successCount || 0) > 0) {
-        this.getList()
-      }
-    },
+      } else {
+        this.loveValueImportSuccessCount = data.successCount || 0
+        this.loveValueImportSuccessVisible = true
+      }
+      if ((data.successCount || 0) > 0) {
+        this.getList()
+      }
+    },
     handleAdd () {
       this.$router.push({ name: 'memberAdd' })
     },
@@ -275,6 +291,46 @@ export default {
 .love-value-import-summary {
   margin-bottom: 16px;
 }
+.love-value-import-success-dialog {
+  margin-top: 18vh !important;
+  border-radius: 12px;
+}
+.love-value-import-success-dialog .el-dialog__header {
+  display: none;
+}
+.love-value-import-success-dialog .el-dialog__body {
+  padding: 46px 40px 42px;
+}
+.love-value-import-success-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.love-value-import-success-icon {
+  color: #67c23a;
+  font-size: 88px;
+  line-height: 1;
+}
+.love-value-import-success-title {
+  margin-top: 24px;
+  color: #303133;
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 36px;
+}
+.love-value-import-success-description {
+  margin-top: 14px;
+  color: #606266;
+  font-size: 17px;
+  line-height: 26px;
+}
+.love-value-import-success-button {
+  min-width: 148px;
+  height: 44px;
+  margin-top: 34px;
+  font-size: 16px;
+}
 </style>
 
 <style scoped lang="scss">