美化

src/components/progress/Index.vue

@@ -12,25 +12,32 @@
       </el-progress>
       {{ index }} / {{ total }}
       <div v-if="notExcel">
-        <div v-show="tips.length > 0">
-          <el-divider></el-divider>
-          <el-alert :title="tips" type="success" @close="closeAlert"/>
-        </div>
-        <el-divider></el-divider>
-        <ul style="overflow: auto" class="infinite-list" id="jdtRef">
-          <li v-for="i in jdtData" :key="i" class="infinite-list-item" :class="infiniteList(i)">
-            <div class="jdt-message" :title="i.message">{{ i.title }} 结果: {{ i.message }}</div>
-          </li>
-        </ul>
-        <el-divider></el-divider>
-        <div style="width: 100%; display: flex; justify-content: right">
-          <el-button @click="closeModal" :disabled="!jdt.closeButton" type="warning" icon="el-icon-close" index="small">
-            关闭
-          </el-button>
-          <el-button @click="exportExcel" :disabled="!jdt.closeButton" type="primary" icon="el-icon-download"
-                     index="small"> 导出Excel
-          </el-button>
-        </div>
+        <el-tabs type="border-card" v-model="tabName">
+          <el-tab-pane label="上传" name="上传">
+            <ul style="overflow: auto" class="infinite-list" id="jdtRef">
+              <li v-for="i in jdtData" :key="i" class="infinite-list-item" :class="infiniteList(i)">
+                <div class="jdt-message" :title="i.message">{{ i.title }} 结果: {{ i.message }}</div>
+              </li>
+            </ul>
+          </el-tab-pane>
+          <el-tab-pane label="结果" name="结果" v-if="jdt.closeButton">
+            <el-result
+                icon="success"
+                :title="jdt.title"
+                :sub-title="tips"
+            >
+              <template #extra>
+                <el-button @click="closeModal" type="warning" icon="el-icon-close"
+                           index="small">
+                  关闭
+                </el-button>
+                <el-button @click="exportExcel" type="primary" icon="el-icon-download"
+                           index="small"> 导出Excel
+                </el-button>
+              </template>
+            </el-result>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </el-dialog>
   </div>
@@ -63,6 +70,7 @@ export default {
       excelTitle.value = {}
       percentage.value = 0
       tips.value = ''
+      tabName.value = '上传'
       store.commit('app/closeJdt')
     }
 
@@ -75,12 +83,12 @@ export default {
 
     // 提示语
     const tips = ref('')
-    const notExcel = ref(true)
+    const notExcel = ref(false)
 
     const total = ref(0)
     const index = ref(0)
-
     const excelTitle = ref({})
+    const tabName = ref("上传")
 
     const socketCallback = (data) => {
       total.value = data.total
@@ -88,7 +96,6 @@ export default {
       percentage.value = makePercentage(data.index, data.total)
       if (stringNotBlank(data.jdtType) && data.jdtType === 'download') {
         notExcel.value = false
-        store.commit('app/titleJdt', "下载中...")
       } else if (stringNotBlank(data.jdtType) && data.jdtType === 'upload') {
         for (let key in data) {
           if (key.indexOf("#") > -1) {
@@ -105,24 +112,9 @@ export default {
         notExcel.value = true
         jdtData.value.push(data)
         const jdtRef = document.getElementById('jdtRef')
-        jdtRef.scrollTop = jdtRef.scrollHeight
-        if (percentage.value === 100) {
-          let success = 0
-          let danger = 0
-          let warning = 0
-          let info = 0
-          jdtData.value.forEach(item => {
-            if (item.type === 0) {
-              success++
-            } else if (item.type === 1) {
-              danger++
-            } else if (item.type === 2) {
-              warning++
-            } else {
-              info++
-            }
-          })
-          tips.value = `数据上传完成：成功：【${success}】、错误：【${danger}】、内部错误：【${warning}】、未知：【${info}】、总条数：【${jdtData.value.length}】`
+        try {
+          jdtRef.scrollTop = jdtRef.scrollHeight
+        } catch (e) {
         }
       }
     }
@@ -175,16 +167,37 @@ export default {
       Export(jdtData.value, title, store.state.app.jdt.title)
     }
 
-    const closeAlert = () => {
-      tips.value = ''
-    }
-
-    watch(() => jdt.value.isOpen, () => {
-      if (!jdt.value.isOpen) {
-        closeModal()
+    watch(() => percentage.value, () => {
+      if (percentage.value === 100) {
+        if (jdtData.value.length > 0) {
+          let success = 0
+          let danger = 0
+          let warning = 0
+          let info = 0
+          jdtData.value.forEach(item => {
+            if (item.type === 0) {
+              success++
+            } else if (item.type === 1) {
+              danger++
+            } else if (item.type === 2) {
+              warning++
+            } else {
+              info++
+            }
+          })
+          tips.value = `数据上传完成：成功：【${success}】、错误：【${danger}】、内部错误：【${warning}】、未知：【${info}】、总条数：【${jdtData.value.length}】`
+        }
+        tabName.value = "结果"
       }
     })
 
+    watch(() => jdt.value.isOpen,
+        () => {
+          if (!jdt.value.isOpen) {
+            closeModal()
+          }
+        })
+
     onMounted(() => {
       setCallback(socketCallback)
     })
@@ -198,11 +211,11 @@ export default {
       percentage,
       cptUpldRsTxt,
       tips,
-      closeAlert,
       notExcel,
       total,
       index,
       cuoWuLeiXin,
+      tabName
     }
   },
 }