element + vue 批量调后端接口loading显示

1.在components下建一个LoadingTip.vue

<template>
 <div class="loadingTip" v-show="visible">
  <div class="loadingBox">
   <el-progress type="circle" :percentage="percentage"></el-progress>
   <div class="loadingText">
    已加载<strong> {{ number.loadingNum }}</strong
    >个,还剩<strong>{{ number.remain }}</strong
    >个,失败<strong class="error" > {{ number.errNum }}</strong
    >个,总计<strong>{{ number.total }}</strong
    >个
   </div>
   <div>
    <el-button
     class="makeSure"
     v-if="number.remain === 0"
     @click="makeSure"
     type="primary"
     >确定</el-button
    >
    <el-button
     class="makeSure"
     v-if="number.remain === 0 && number.errNum !== 0"
     @click="reSet"
     type="warning"
     >重试</el-button
    >
   </div>
   <div v-if="errorMsg.length>0" class="errorBox" >
     <div v-for="(item,index) in errorMsg" :key="index" class="errorMsg" >
       {{item}}
     </div>
   </div>  
  </div>
 </div>
</template>
<script>
export default {
 name: "LoadingTip",
 props: ["number", "visible","errorMsg"],
 data() {
  return {
   percentage: 0
  };
 },
 watch: {
  number: {
   handler({ loadingNum, total }) {
    this.percentage = Number(((loadingNum / total) * 100).toFixed(2));
   },
   deep: true
  }
 },
 methods: {
  makeSure() {
   this.$emit("makeSure");
  },
  reSet() {
   this.$emit("reSet");
  }
 }
};
</script>

<style lang="scss" scoped>
.loadingTip {
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10;
 padding-top: 15%;
}
/deep/ .el-progress__text {
 color: #fff;
}
.errorBox{
  width: 800px;
  height: 300px;
  margin-top: 20px;
  overflow-y: scroll;
}
.errorMsg{
  color: #f56c6c;
}
.loadingText {
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 30px 0;
 strong {
  color: #2394ef;
 }
 .error{
   color: #f56c6c;
 }
}
.loadingBox {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}
.loadingRight {
 font-size: 60px;
 color: #fff;
 text-align: center;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

2.在mixin 下 建一个tableOnload.js

export default {
  data () {
    return {
      loadingTipVisible: false,
      loadingTipNum: {
        index: 0,
        loadingNum: 0,
        errNum: 0,
        remain: 0,
        total: 0
      },
      cached: {
        http: "",
        params: "",
        callback: ""
      },
      errorSelection: [],
      errorMsg: []
    }
  },
  methods: {
    tipMakeSure () {
      const callback = this.cached.callback
      this.loadingTipVisible = false
      callback.call(this)
    },
    tipReSet () {
      const loadingTipNum = this.loadingTipNum
      const total = loadingTipNum.total
      const errNum = loadingTipNum.errNum
      let { http, params } = this.cached
      const cachedErrorSelection = this.errorSelection
      if (errNum > 0) {
        this.loadingTipNum = {
          index: 0,
          loadingNum: total - errNum,
          errNum: 0,
          remain: errNum,
          total: total
        }
        this.errorSelection = []
        this.errorMsg = []
        const { key, vals } = flatte(cachedErrorSelection)
        this.makeRes(http, params, cachedErrorSelection, key, vals)
      }
    },
    handleMakeRes (data, onCompleted) {
      const { http, params, selection: multipleSelection } = data
      const len = multipleSelection.length
      if (len > 0) {
        this.loadingTipVisible = true
        this.loadingTipNum = {
          index: 0,
          loadingNum: 0,
          errNum: 0,
          remain: len,
          total: len
        }
        this.cached = {
          http: http,
          params: params,
          callback: onCompleted
        }
        this.errorSelection = []
        this.errorMsg = []
        const { key, vals } = flatte(multipleSelection)
        this.makeRes(http, params, multipleSelection, key, vals)
      }
    },
    async makeRes (http, params, selection, key, vals) {
      let loadingTipNum = this.loadingTipNum
      if (loadingTipNum.remain === 0) {
        return
      }
      let index = loadingTipNum.index
      params[key] = vals[index]
      try {
        const { data } = await http(params, true)

        const { code, msg } = data
        if (code === 200) {
          ++loadingTipNum.loadingNum
        } else {
          throw msg
        }
      } catch (error) {
        ++loadingTipNum.errNum
        this.errorSelection.push(selection[index])
        this.errorMsg.push(`报错位置: ${key}=${params[key]}, 报错信息: ${error}`)
      }
      ++loadingTipNum.index
      --loadingTipNum.remain
      this.makeRes(http, params, selection, key, vals)
    }
  }
}
function flatte (arr) {
  let key = ""
  const vals = []
  arr.map(item => {
    const i = Object.entries(item)[0]
    key = i[0]
    vals.push(i[1])
  })
  return { key, vals }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

3.组件引用

import LoadingTip from "@/components/LoadingTip";
import tableOnload from "@/mixin/tableOnload.js";
export default {
  name: "OpeningEntry",
  components: {
   
    LoadingTip,
  
  },
  mixins: [tableOnload],
   methods: {
    handleInventory() {
      const params = { houseId: whId };
      const http = inventoryInitGenerateInventory;
      let ids = this.$refs.Table.selection.map((item) => item.id);
      if (ids.length === 0) {
        this.$message.warning("请选择数据！");
      } else {
        const selection = [...new Set(ids)].map((item) => {
          return { id: item };
        });
        this.$confirm("此操作将生成任务, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.handleMakeRes({ params, http, selection }, () => {
              this.getQueryList();
            });
          })
          .catch((err) => console.error(err));
      }
    },
   }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36