update: 导入数据错误提示增加跳转错误页交互功能

src/modules/tools/signIn/route.js

@@ -6,5 +6,9 @@ export default [
   {
     path: 'preview',
     component: () => import('./views/Preview.vue')
+  },
+  {
+    path: 'error-msg',
+    component: () => import('./views/ErrorMsg.vue')
   }
 ]

src/modules/tools/signIn/views/ErrorMsg.vue

+<template>
+  <app-card>
+    <div class="error-msg">
+      <h5><el-button size="mini" icon="el-icon-arrow-left" style="margin-right:20px;" @click="goBack">返回上页</el-button>导入人员excel表错误提示</h5>
+      <p v-for="(msg, index) in msgList" :key="index"><i class="el-icon-error"></i>{{msg}}</p>
+    </div>
+  </app-card>
+</template>
+<script>
+import AppCard from '@/components/base/AppCard.vue'
+export default {
+  components: { AppCard },
+  data() {
+    return {
+      msgList: []
+    }
+  },
+  created() {
+    const msg =  window.sessionStorage.getItem('importErrorMsg')
+    this.msgList = JSON.parse(msg)
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style scoped>
+.app-card{
+  margin-bottom:0;
+  padding-top:20px;
+}
+.error-msg{
+  min-height: calc(100vh - 165px);
+}
+.error-msg h5{
+  font-size:16px;
+  line-height:50px;
+  color:#444;
+}
+.error-msg p{
+  font-size:15px;
+  line-height:32px;
+  color: #f56c6c
+}
+.error-msg p i{
+  margin-right:10px;
+}
+</style>
\ No newline at end of file

src/modules/tools/signIn/views/List.vue

@@ -247,16 +247,39 @@ export default {
           this.dialogVisible = false
         } else {
           if (res.data.error_list.length) {
-            const arr = []
             const h = this.$createElement
-            res.data.error_list.forEach(item => {
-              arr.push(h('p', null, item))
-            })
-            this.$message({
-              type: 'error',
-              message: h('div', null, arr),
-              duration: 15000
-            })
+            const count = res.data.error_list.length
+            if (count > 5) {
+              window.sessionStorage.setItem('importErrorMsg', JSON.stringify(res.data.error_list))
+              const msg = this.$message({
+                type: 'error',
+                duration: 15000,
+                message: h('p', null, [
+                  h('span', null, '上传失败！共计 '),
+                  h('span', { style: 'color: #f56c6c' }, count),
+                  h('span', null, ' 处错误。'),
+                  h('span', {
+                    style: 'color:#3276fc;cursor:pointer;margin-left:30px;',
+                    on: {
+                      click: () => {
+                        this.$router.push({ path: '/tools/error-msg' })
+                        msg.close()
+                      }
+                    }
+                  }, '查看错误原因>>')
+                ])
+              })
+            } else {
+              const arr = []
+              res.data.error_list.forEach(item => {
+                arr.push(h('p', null, item))
+              })
+              this.$message({
+                type: 'error',
+                message: h('div', null, arr),
+                duration: 15000
+              })
+            }
           } else {
             this.$message.error('导入数据失败')
           }

src/modules/tools/signIn/views/components/PersonList.vue

@@ -199,7 +199,43 @@ export default {
           this.$refs.appList.refetch(true)
           this.dialogVisible = false
         } else {
-          this.$message.error(res.message || '导入数据失败，请重选选取文件上传')
+          if (res.data.error_list.length) {
+            const h = this.$createElement
+            const count = res.data.error_list.length
+            if (count > 5) {
+              window.sessionStorage.setItem('importErrorMsg', JSON.stringify(res.data.error_list))
+              const msg = this.$message({
+                type: 'error',
+                duration: 15000,
+                message: h('p', null, [
+                  h('span', null, '上传失败！共计 '),
+                  h('span', { style: 'color: #f56c6c' }, count),
+                  h('span', null, ' 处错误。'),
+                  h('span', {
+                    style: 'color:#3276fc;cursor:pointer;margin-left:30px;',
+                    on: {
+                      click: () => {
+                        this.$router.push({ path: '/tools/error-msg' })
+                        msg.close()
+                      }
+                    }
+                  }, '查看错误原因>>')
+                ])
+              })
+            } else {
+              const arr = []
+              res.data.error_list.forEach(item => {
+                arr.push(h('p', null, item))
+              })
+              this.$message({
+                type: 'error',
+                message: h('div', null, arr),
+                duration: 15000
+              })
+            }
+          } else {
+            this.$message.error('导入数据失败')
+          }
         }
       })
     },