84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<template>
|
|
<a-modal
|
|
:title="trans('Upload excel')"
|
|
v-model="visible"
|
|
:closable="false"
|
|
:maskClosable="false"
|
|
destroyOnClose
|
|
>
|
|
<a-upload-dragger
|
|
name="file"
|
|
:multiple="false"
|
|
:showUploadList="false"
|
|
:action="route(`${action}.import`, { group })"
|
|
@change="handleChange"
|
|
>
|
|
<p class="ant-upload-drag-icon">
|
|
<a-icon type="inbox" />
|
|
</p>
|
|
<p class="ant-upload-text">{{ trans('Upload excel text') }}</p>
|
|
</a-upload-dragger>
|
|
<a-progress class="mt-5" :percent="progress" :show-info="false" />
|
|
<div class="text-right mt-1">{{ this.current_row }} / {{ this.total_rows }}</div>
|
|
<template slot="footer">
|
|
<a-button @click="close">{{ trans('Close') }}</a-button>
|
|
</template>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['action', 'group'],
|
|
|
|
data() {
|
|
this.trackProgress = _.debounce(this.trackProgress, 1000);
|
|
|
|
return {
|
|
visible: true,
|
|
current_row: 0,
|
|
total_rows: 0,
|
|
progress: 0,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
handleChange(info) {
|
|
const status = info.file.status;
|
|
|
|
if (status === "done") {
|
|
this.trackProgress();
|
|
} else if (status === "error") {
|
|
this.$message.error(_.get(info, 'file.response.errors.file.0', `${info.file.name} file upload failed.`));
|
|
}
|
|
},
|
|
|
|
async trackProgress() {
|
|
const { data } = await axios.get(this.route('import-status'));
|
|
|
|
if (data.finished) {
|
|
this.current_row = this.total_rows
|
|
this.progress = 100
|
|
return;
|
|
};
|
|
|
|
this.total_rows = data.total_rows;
|
|
this.current_row = data.current_row;
|
|
this.progress = Math.ceil(data.current_row / data.total_rows * 100);
|
|
this.trackProgress();
|
|
},
|
|
|
|
close() {
|
|
if (this.progress > 0 && this.progress < 100) {
|
|
if (confirm('Do you want to close')) {
|
|
this.$emit('close')
|
|
window.location.reload()
|
|
}
|
|
} else {
|
|
this.$emit('close')
|
|
window.location.reload()
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|