进度条

src/components/progress/Index.vue

@@ -1,13 +1,19 @@
 <template>
   <div style="position: fixed; z-index: 10000">
-    <el-dialog :title="jdt.title" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" v-model="jdt.isOpen">
-      <el-progress :text-inside="true" :stroke-width="22" :percentage="percentage" :status="percentage === 100 ? 'success' : ''">
+    <el-dialog :title="jdt.title" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
+               v-model="jdt.isOpen">
+      <el-progress :text-inside="true" :stroke-width="22" :percentage="percentage"
+                   :status="percentage === 100 ? 'success' : ''">
         <span>
           {{ cptUpldRsTxt }}
           <i v-show="percentage < 100" class="el-icon-loading"></i>
           <i v-show="percentage === 100" class="el-icon-check"></i>
         </span>
       </el-progress>
+      <div v-show="tips.length > 0">
+        <el-divider></el-divider>
+        <el-alert :title="tips" type="error" @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)">
@@ -16,18 +22,22 @@
       </ul>
       <el-divider></el-divider>
       <div style="width: 100%; display: flex; justify-content: right">
-        <el-button @click="closeModal" :disabled="percentage < 100" type="warning" icon="el-icon-close" size="small"> 关闭 </el-button>
-        <el-button @click="exportExcel" :disabled="percentage < 100" type="primary" icon="el-icon-download" size="small"> 导出Excel </el-button>
+        <el-button @click="closeModal" :disabled="percentage < 100" type="warning" icon="el-icon-close" size="small">
+          关闭
+        </el-button>
+        <el-button @click="exportExcel" :disabled="percentage < 100" type="primary" icon="el-icon-download"
+                   size="small"> 导出Excel
+        </el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { computed, onMounted, ref } from 'vue-demi'
-import { useStore } from 'vuex'
-import { setCallback } from '@/utils/websocket'
-import { Export } from '@/utils/ExportExcel'
+import {computed, onMounted, ref} from 'vue-demi'
+import {useStore} from 'vuex'
+import {setCallback} from '@/utils/websocket'
+import {Export} from '@/utils/ExportExcel'
 
 export default {
   setup() {
@@ -35,27 +45,41 @@ export default {
     const jdt = computed(() => {
       return store.state.app.jdt
     })
-
     const cptUpldRsTxt = computed(() => {
       if (percentage.value < 100) {
         return `上传中 ( ${percentage.value}% ) ...`
       }
       return '上传完成(100%)'
     })
-
     const jdtData = ref([])
-
     const closeModal = () => {
       jdtData.value = []
+      excelTitle.value = {}
       percentage.value = 0
+      tips.value = ''
       store.commit('app/closeJdt')
     }
+    const tips = ref('')
+
+    const excelTitle = ref({})
 
     const socketCallback = (data) => {
       percentage.value = data.percentage
+      for (let key in data) {
+        if (key.indexOf("#") > -1) {
+          let newKey = key.split("#")
+          data[newKey[0]] = data[key]
+          if (newKey[0] === 'type') {
+            excelTitle.value.typeName = newKey[1]
+          } else {
+            excelTitle.value[newKey[0]] = newKey[1]
+          }
+          delete data[key]
+        }
+      }
       jdtData.value.push(data)
       const jdtRef = document.getElementById('jdtRef')
-      jdtRef.scrollTop = jdtRef.scrollHeight + 72
+      jdtRef.scrollTop = jdtRef.scrollHeight
     }
 
     const percentage = ref(0)
@@ -66,7 +90,7 @@ export default {
           val.typeName = '成功'
           return 'jdt-success'
         case 1:
-          val.typeName = '中心错误'
+          val.typeName = '上传错误'
           return 'jdt-danger'
         case 2:
           val.typeName = '内部错误'
@@ -78,15 +102,36 @@ export default {
     }
 
     const exportExcel = () => {
-      const fields = ref({})
-      jdtData.value[0].keys.forEach((item) => {
-        if (item.code === 'type') {
-          fields.value.typeName = item.name
-        } else {
-          fields.value[item.code] = item.name
-        }
+      if (Object.keys(excelTitle.value).length === 0) {
+        return tips.value = '没有可以导出 Excel 的字段。'
+      }
+      const arr = {}
+      for (let key in excelTitle.value) {
+        // 这里获取 | 符号后面的 数字
+        arr[key] = excelTitle.value[key].split("|")[1]
+      }
+      // 排序按照从大到小
+      let result = Object.values(arr).sort((a, b) => {
+        return a - b;
       })
-      Export(jdtData.value, fields.value, store.state.app.jdt.title)
+      const new_obj = {};
+      // 按照排序生成新的对象
+      for (let i = 0; i < result.length; i++) {
+        Object.keys(arr).map((item, index) => {
+          if (arr[item] === result[i]) {
+            new_obj[item] = result[i];
+          }
+        });
+      }
+      const title = {}
+      for (const a in new_obj) {
+        title[a] = excelTitle.value[a].split("|")[0]
+      }
+      Export(jdtData.value, title, store.state.app.jdt.title)
+    }
+
+    const closeAlert = () => {
+      tips.value = ''
     }
 
     onMounted(() => {
@@ -101,6 +146,8 @@ export default {
       exportExcel,
       percentage,
       cptUpldRsTxt,
+      tips,
+      closeAlert,
     }
   },
 }