11 changed files with 114 additions and 24 deletions
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<q-btn icon="bi-database-down" :label="$t('export')" outline no-caps v-bind="attrs" :loading="showRef" :percentage="percentageRef"> |
||||
|
<!-- <template #loading> |
||||
|
<div class="justify-between"> |
||||
|
<q-icon :name="attrs.icon"></q-icon> |
||||
|
<span>正在执行...</span> |
||||
|
<q-btn v-if="showRef" icon="bi-info" title="show detail" dense rounded flat @click.stop.prevent="() => {}"></q-btn> |
||||
|
</div> |
||||
|
</template> --> |
||||
|
</q-btn> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, useAttrs, onMounted } from 'vue'; |
||||
|
import { axios, Environment } from '@/platform'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
dataUrl: { type: String, default: '' }, |
||||
|
interval: { type: Number, default: 1000 }, |
||||
|
}); |
||||
|
const attrs = useAttrs(); |
||||
|
|
||||
|
const showRef = ref(false); |
||||
|
const percentageRef = ref(0); |
||||
|
const messageRef = ref(''); |
||||
|
let executeProgressInterval; |
||||
|
|
||||
|
const refreshProgress = () => { |
||||
|
axios |
||||
|
.get(Environment.apiContextPath(props.dataUrl)) |
||||
|
.then((response) => { |
||||
|
if (response?.data?.running) { |
||||
|
const progressInfo = response.data; |
||||
|
percentageRef.value = (progressInfo.currentWeight / progressInfo.totalWeight) * 100; |
||||
|
messageRef.value = progressInfo.messageKey; |
||||
|
if (percentageRef.value >= 100) { |
||||
|
setTimeout(stop, 1000); |
||||
|
} |
||||
|
} else { |
||||
|
stop(); |
||||
|
} |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
console.log(error); |
||||
|
stop(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const start = () => { |
||||
|
showRef.value = true; |
||||
|
percentageRef.value = 0; |
||||
|
executeProgressInterval = setInterval(refreshProgress, props.interval); |
||||
|
}; |
||||
|
|
||||
|
const stop = () => { |
||||
|
clearInterval(executeProgressInterval); |
||||
|
showRef.value = false; |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
axios |
||||
|
.get(Environment.apiContextPath(props.dataUrl)) |
||||
|
.then((response) => { |
||||
|
if (response?.data?.running) { |
||||
|
start(); |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
stop(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
start, |
||||
|
stop, |
||||
|
}); |
||||
|
</script> |
Loading…
Reference in new issue