<script lang="ts" setup>
|
import dvPreviewDownload from '@/assets/svg/icon_download_outlined.svg'
|
import deDelete from '@/assets/svg/de-delete.svg'
|
import icon_fileExcel_colorful from '@/assets/svg/icon_file-excel_colorful.svg'
|
import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
|
import { ref, h, onUnmounted, computed, reactive } from 'vue'
|
import { EmptyBackground } from '@/components/empty-background'
|
import { ElButton, ElMessage, ElMessageBox, ElTabPane, ElTabs } from 'element-plus-secondary'
|
import { RefreshLeft } from '@element-plus/icons-vue'
|
import {
|
exportTasks,
|
exportRetry,
|
exportDelete,
|
exportDeleteAll,
|
exportDeletePost,
|
exportTasksRecords,
|
generateDownloadUri
|
} from '@/api/dataset'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import Icon from '@/components/icon-custom/src/Icon.vue'
|
import { useCache } from '@/hooks/web/useCache'
|
import { useLinkStoreWithOut } from '@/store/modules/link'
|
import { useAppStoreWithOut } from '@/store/modules/app'
|
|
const { t } = useI18n()
|
const state = reactive({
|
paginationConfig: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
}
|
})
|
const tableData = ref([])
|
const drawerLoading = ref(false)
|
const drawer = ref(false)
|
const msgDialogVisible = ref(false)
|
const msg = ref('')
|
const activeName = ref('ALL')
|
const multipleSelection = ref([])
|
const description = ref(t('data_set.no_tasks_yet'))
|
const tabList = ref([
|
{
|
label: t('data_set.exporting') + '(0)',
|
name: 'IN_PROGRESS'
|
},
|
{
|
label: t('data_set.success') + '(0)',
|
name: 'SUCCESS'
|
},
|
{
|
label: t('data_set.fail') + '(0)',
|
name: 'FAILED'
|
},
|
{
|
label: t('data_set.waiting') + '(0)',
|
name: 'PENDING'
|
},
|
{
|
label: t('data_set.all') + '(0)',
|
name: 'ALL'
|
}
|
])
|
let timer
|
const handleClose = () => {
|
drawer.value = false
|
clearInterval(timer)
|
}
|
const { wsCache } = useCache()
|
const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
|
const desktop = wsCache.get('app.desktop')
|
|
onUnmounted(() => {
|
clearInterval(timer)
|
})
|
const handleClick = tab => {
|
if (tab) {
|
activeName.value = tab.paneName
|
}
|
if (activeName.value === 'ALL') {
|
description.value = t('data_export.no_file')
|
} else if (activeName.value === 'FAILED') {
|
description.value = t('data_export.no_failed_file')
|
} else {
|
description.value = t('data_export.no_task')
|
}
|
drawerLoading.value = true
|
exportTasksRecords().then(res => {
|
tabList.value.forEach(item => {
|
if (item.name === 'ALL') {
|
item.label = t('data_set.all') + '(' + res.data.ALL + ')'
|
}
|
if (item.name === 'IN_PROGRESS') {
|
item.label = t('data_set.exporting') + '(' + res.data.IN_PROGRESS + ')'
|
}
|
if (item.name === 'SUCCESS') {
|
item.label = t('data_set.success') + '(' + res.data.SUCCESS + ')'
|
}
|
if (item.name === 'FAILED') {
|
item.label = t('data_set.fail') + '(' + res.data.FAILED + ')'
|
}
|
if (item.name === 'PENDING') {
|
item.label = t('data_set.waiting') + '(' + res.data.PENDING + ')'
|
}
|
})
|
})
|
exportTasks(state.paginationConfig.currentPage, state.paginationConfig.pageSize, activeName.value)
|
.then(res => {
|
state.paginationConfig.total = res.data.total
|
tableData.value = res.data.records
|
})
|
.finally(() => {
|
drawerLoading.value = false
|
})
|
}
|
|
const init = params => {
|
drawer.value = true
|
if (params && params.activeName !== undefined) {
|
activeName.value = params.activeName
|
}
|
handleClick()
|
timer = setInterval(() => {
|
if (activeName.value === 'IN_PROGRESS') {
|
exportTasksRecords().then(res => {
|
tabList.value.forEach(item => {
|
if (item.name === 'ALL') {
|
item.label = t('data_set.all') + '(' + res.data.ALL + ')'
|
}
|
if (item.name === 'IN_PROGRESS') {
|
item.label = t('data_set.exporting') + '(' + res.data.IN_PROGRESS + ')'
|
}
|
if (item.name === 'SUCCESS') {
|
item.label = t('data_set.success') + '(' + res.data.SUCCESS + ')'
|
}
|
if (item.name === 'FAILED') {
|
item.label = t('data_set.fail') + '(' + res.data.FAILED + ')'
|
}
|
if (item.name === 'PENDING') {
|
item.label = t('data_set.waiting') + '(' + res.data.PENDING + ')'
|
}
|
})
|
})
|
exportTasks(
|
state.paginationConfig.currentPage,
|
state.paginationConfig.pageSize,
|
activeName.value
|
).then(res => {
|
state.paginationConfig.total = res.data.total
|
tableData.value = res.data.records
|
})
|
}
|
}, 5000)
|
}
|
const linkStore = useLinkStoreWithOut()
|
const appStore = useAppStoreWithOut()
|
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
|
|
const taskExportTopicCall = task => {
|
if (!linkStore.getLinkToken && !isDataEaseBi.value && !appStore.getIsIframe) {
|
if (JSON.parse(task).exportStatus === 'SUCCESS') {
|
openMessageLoading(
|
JSON.parse(task).exportFromName + ` ${t('data_set.successful_go_to')}`,
|
'success',
|
callbackExportSuc
|
)
|
return
|
}
|
if (JSON.parse(task).exportStatus === 'FAILED') {
|
openMessageLoading(
|
JSON.parse(task).exportFromName + ` ${t('data_set.failed_go_to')}`,
|
'error',
|
callbackExportError
|
)
|
}
|
}
|
}
|
|
const openMessageLoading = (text, type = 'success', cb) => {
|
// success error loading
|
const customClass = `de-message-${type || 'success'} de-message-export`
|
ElMessage({
|
message: h('p', null, [
|
h(
|
'span',
|
{
|
title: t(text),
|
class: 'ellipsis m50-export'
|
},
|
t(text)
|
),
|
h(
|
ElButton,
|
{
|
text: true,
|
size: 'small',
|
class: 'btn-text',
|
onClick: () => {
|
cb()
|
}
|
},
|
t('data_export.export_center')
|
)
|
]),
|
icon: type === 'loading' ? h(RefreshLeft) : '',
|
type,
|
showClose: true,
|
customClass
|
})
|
}
|
|
const callbackExportError = () => {
|
useEmitt().emitter.emit('data-export-center', { activeName: 'FAILED' })
|
}
|
|
const callbackExportSuc = () => {
|
useEmitt().emitter.emit('data-export-center', { activeName: 'SUCCESS' })
|
}
|
|
const downLoadAll = () => {
|
if (multipleSelection.value.length === 0) {
|
tableData.value.forEach(item => {
|
generateDownloadUri(item.id).then(() => {
|
window.open(PATH_URL + '/exportCenter/download/' + item.id)
|
})
|
})
|
return
|
}
|
multipleSelection.value.map(ele => {
|
generateDownloadUri(ele.id).then(() => {
|
window.open(PATH_URL + '/exportCenter/download/' + ele.id)
|
})
|
})
|
}
|
const showMsg = item => {
|
msg.value = ''
|
msg.value = item.msg
|
msgDialogVisible.value = true
|
}
|
const timestampFormatDate = value => {
|
if (!value) {
|
return '-'
|
}
|
return new Date(value).toLocaleString()
|
}
|
import { PATH_URL } from '@/config/axios/service'
|
import GridTable from '../../../../components/grid-table/src/GridTable.vue'
|
const downloadClick = item => {
|
generateDownloadUri(item.id).then(() => {
|
window.open(PATH_URL + '/exportCenter/download/' + item.id, openType)
|
})
|
}
|
|
const retry = item => {
|
exportRetry(item.id).then(() => {
|
handleClick()
|
})
|
}
|
|
const deleteField = item => {
|
ElMessageBox.confirm(t('data_export.sure_del'), {
|
confirmButtonType: 'danger',
|
type: 'warning',
|
autofocus: false,
|
showClose: false
|
})
|
.then(() => {
|
exportDelete(item.id).then(() => {
|
ElMessage.success(t('commons.delete_success'))
|
handleClick()
|
})
|
})
|
.catch(() => {
|
// info(t('commons.delete_cancel'))
|
})
|
}
|
|
const handleSelectionChange = val => {
|
multipleSelection.value = val
|
}
|
|
const pageChange = index => {
|
if (typeof index !== 'number') {
|
return
|
}
|
state.paginationConfig.currentPage = index
|
handleClick()
|
}
|
const sizeChange = size => {
|
state.paginationConfig.currentPage = 1
|
state.paginationConfig.pageSize = size
|
handleClick()
|
}
|
|
const delAll = () => {
|
if (multipleSelection.value.length === 0) {
|
ElMessageBox.confirm(t('data_export.sure_del_all'), {
|
confirmButtonType: 'danger',
|
type: 'warning',
|
autofocus: false,
|
showClose: false
|
})
|
.then(() => {
|
exportDeleteAll(
|
activeName.value,
|
multipleSelection.value.map(ele => ele.id)
|
).then(() => {
|
ElMessage.success(t('commons.delete_success'))
|
handleClick()
|
})
|
})
|
.catch(() => {
|
// info(t('commons.delete_cancel'))
|
})
|
return
|
}
|
|
ElMessageBox.confirm(t('data_export.sure_del'), {
|
confirmButtonType: 'danger',
|
type: 'warning',
|
autofocus: false,
|
showClose: false
|
})
|
.then(() => {
|
exportDeletePost(multipleSelection.value.map(ele => ele.id)).then(() => {
|
ElMessage.success(t('commons.delete_success'))
|
handleClick()
|
})
|
})
|
.catch(() => {
|
// info(t('commons.delete_cancel'))
|
})
|
}
|
|
useEmitt({ name: 'task-export-topic-call', callback: taskExportTopicCall })
|
|
defineExpose({
|
init
|
})
|
</script>
|
|
<template>
|
<el-drawer
|
v-loading="drawerLoading"
|
modal-class="de-export-excel"
|
:title="$t('data_export.export_center')"
|
v-model="drawer"
|
direction="rtl"
|
size="1000px"
|
append-to-body
|
:before-close="handleClose"
|
>
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane v-for="tab in tabList" :key="tab.name" :label="tab.label" :name="tab.name" />
|
</el-tabs>
|
<el-button
|
v-if="activeName === 'SUCCESS' && multipleSelection.length === 0"
|
secondary
|
@click="downLoadAll"
|
>
|
<template #icon>
|
<Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
|
</template>
|
{{ $t('data_export.download_all') }}
|
</el-button>
|
<el-button
|
v-if="activeName === 'SUCCESS' && multipleSelection.length !== 0"
|
secondary
|
@click="downLoadAll"
|
>
|
<template #icon>
|
<Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
|
</template>
|
{{ $t('data_export.download') }}
|
</el-button>
|
<el-button v-if="multipleSelection.length === 0" secondary @click="delAll"
|
><template #icon>
|
<Icon name="de-delete"><deDelete class="svg-icon" /></Icon> </template
|
>{{ $t('data_export.del_all') }}
|
</el-button>
|
<el-button v-if="multipleSelection.length !== 0" secondary @click="delAll"
|
><template #icon>
|
<Icon name="de-delete"><deDelete class="svg-icon" /></Icon> </template
|
>{{ $t('commons.delete') }}
|
</el-button>
|
<div class="table-container" :class="!tableData.length && 'hidden-bottom'">
|
<GridTable
|
ref="multipleTable"
|
:pagination="state.paginationConfig"
|
:table-data="tableData"
|
class="popper-max-width"
|
@current-change="pageChange"
|
@size-change="sizeChange"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="50" />
|
<el-table-column prop="fileName" :label="$t('driver.file_name')" width="332">
|
<template #default="scope">
|
<div class="name-excel">
|
<el-icon style="font-size: 24px">
|
<Icon name="icon_file-excel_colorful"
|
><icon_fileExcel_colorful class="svg-icon"
|
/></Icon>
|
</el-icon>
|
<div class="name-content">
|
<div class="fileName">{{ scope.row.fileName }}</div>
|
<div
|
v-if="scope.row.exportStatus === 'FAILED'"
|
class="failed"
|
@click="showMsg(scope.row)"
|
>
|
{{ $t('data_export.export_failed') }}
|
</div>
|
<div v-if="scope.row.exportStatus === 'SUCCESS'" class="success">
|
{{ scope.row.fileSize }}{{ scope.row.fileSizeUnit }}
|
</div>
|
</div>
|
</div>
|
<div v-if="scope.row.exportStatus === 'FAILED'" class="red-line" />
|
<el-progress
|
v-if="scope.row.exportStatus === 'IN_PROGRESS'"
|
:percentage="+scope.row.exportProgress"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="exportFromName" :label="$t('data_export.export_obj')" width="200" />
|
<el-table-column prop="exportTime" width="180" :label="$t('data_export.export_time')">
|
<template #default="scope">
|
<span>{{ timestampFormatDate(scope.row.exportTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="exportFromType" width="120" :label="$t('data_export.export_from')">
|
<template #default="scope">
|
<span v-if="scope.row.exportFromType === 'dataset'">{{ t('data_set.data_set') }}</span>
|
<span v-if="scope.row.exportFromType === 'chart'">{{ t('data_set.view') }}</span>
|
<span v-if="scope.row.exportFromType === 'data_filling'">{{
|
t('data_fill.data_fill')
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-if="!desktop"
|
prop="orgName"
|
:label="t('data_set.organization')"
|
width="200"
|
/>
|
<el-table-column fixed="right" prop="operate" width="90" :label="$t('commons.operating')">
|
<template #default="scope">
|
<el-tooltip effect="dark" :content="t('data_set.download')" placement="top">
|
<el-button
|
v-if="scope.row.exportStatus === 'SUCCESS'"
|
text
|
@click="downloadClick(scope.row)"
|
>
|
<template #icon>
|
<el-icon>
|
<Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
|
</el-icon>
|
</template>
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip effect="dark" :content="t('data_set.re_export')" placement="top">
|
<el-button v-if="scope.row.exportStatus === 'FAILED'" text @click="retry(scope.row)">
|
<template #icon>
|
<Icon name="icon_refresh_outlined"
|
><icon_refresh_outlined class="svg-icon"
|
/></Icon>
|
</template>
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip effect="dark" :content="t('data_set.delete')" placement="top">
|
<el-button text @click="deleteField(scope.row)">
|
<template #icon>
|
<Icon name="de-delete"><deDelete class="svg-icon" /></Icon>
|
</template>
|
</el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<template #empty>
|
<empty-background :description="description" img-type="noneWhite" />
|
</template>
|
</GridTable>
|
</div>
|
</el-drawer>
|
|
<el-dialog :title="t('data_set.reason_for_failure')" v-model="msgDialogVisible" width="30%">
|
<span>{{ msg }}</span>
|
<template v-slot:footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="msgDialogVisible = false">{{
|
t('data_set.closure')
|
}}</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<style lang="less">
|
.de-export-excel {
|
.ed-drawer__body {
|
padding-bottom: 24px;
|
}
|
.ed-drawer__header {
|
border-bottom: none;
|
}
|
.ed-tabs {
|
margin-top: -25px;
|
.ed-tabs__header {
|
margin-bottom: 24px;
|
}
|
}
|
|
.table-container {
|
margin-top: 16px;
|
height: calc(100vh - 190px);
|
|
.ed-table .cell {
|
padding-left: 12px;
|
padding-right: 12px;
|
}
|
|
&.hidden-bottom {
|
.ed-table::before {
|
display: none;
|
}
|
}
|
|
.name-excel {
|
display: flex;
|
align-items: center;
|
.name-content {
|
max-width: 280px;
|
margin-left: 4px;
|
.fileName {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
width: 100%;
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 22px;
|
}
|
|
.failed {
|
font-size: 12px;
|
font-weight: 400;
|
line-height: 20px;
|
color: #f54a45;
|
cursor: pointer;
|
}
|
|
.success {
|
font-size: 12px;
|
font-weight: 400;
|
line-height: 20px;
|
color: #8f959e;
|
}
|
}
|
}
|
|
.ed-table__header {
|
border-top: 1px solid #1f232926;
|
}
|
|
th.ed-table__cell.is-leaf {
|
border-color: #1f232926;
|
}
|
|
.red-line {
|
width: 100%;
|
height: 4px;
|
background: #f54a45;
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
}
|
}
|
}
|
</style>
|
