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>
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 }
}
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));
}
},
}
}