851 lines
25 KiB
Vue
851 lines
25 KiB
Vue
<template>
|
||
<ArtTableFullScreen>
|
||
<div class="iot-card-task-page" id="table-full-screen">
|
||
<!-- 搜索栏 -->
|
||
<ArtSearchBar
|
||
v-model:filter="searchForm"
|
||
:items="searchFormItems"
|
||
:show-expand="false"
|
||
@reset="handleReset"
|
||
@search="handleSearch"
|
||
></ArtSearchBar>
|
||
|
||
<ElCard shadow="never" class="art-table-card">
|
||
<!-- 表格头部 -->
|
||
<ArtTableHeader
|
||
:columnList="columnOptions"
|
||
v-model:columns="columnChecks"
|
||
@refresh="handleRefresh"
|
||
>
|
||
<template #left>
|
||
<ElButton
|
||
type="primary"
|
||
:icon="Upload"
|
||
@click="importDialogVisible = true"
|
||
v-permission="'lot_task:bulk_import'"
|
||
>
|
||
批量导入IoT卡
|
||
</ElButton>
|
||
</template>
|
||
</ArtTableHeader>
|
||
|
||
<!-- 表格 -->
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="id"
|
||
:loading="loading"
|
||
:data="taskList"
|
||
:currentPage="pagination.page"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
:marginTop="10"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||
</template>
|
||
</ArtTable>
|
||
</ElCard>
|
||
</div>
|
||
|
||
<!-- 导入对话框 -->
|
||
<ElDialog v-model="importDialogVisible" title="批量导入IoT卡" width="700px" align-center>
|
||
<ElAlert type="info" :closable="false" style="margin-bottom: 20px">
|
||
<template #title>
|
||
<div style="line-height: 1.8">
|
||
<p><strong>导入说明：</strong></p>
|
||
<p>1. 请先下载 Excel 模板文件，按照模板格式填写IoT卡信息</p>
|
||
<p>2. 仅支持 Excel 格式（.xlsx），单次最多导入 1000 条</p>
|
||
<p>3. 列格式请设置为文本格式，避免长数字被转为科学计数法</p>
|
||
<p>4. 必填字段：ICCID、MSISDN（手机号）</p>
|
||
<p>5. 必须选择运营商</p>
|
||
</div>
|
||
</template>
|
||
</ElAlert>
|
||
|
||
<div style="margin-bottom: 20px">
|
||
<ElButton type="primary" :icon="Download" @click="downloadTemplate">
|
||
下载导入模板
|
||
</ElButton>
|
||
</div>
|
||
|
||
<ElFormItem label="运营商" required style="margin-bottom: 20px">
|
||
<ElSelect
|
||
v-model="selectedCarrierId"
|
||
placeholder="请输入运营商名称搜索"
|
||
style="width: 100%"
|
||
filterable
|
||
remote
|
||
:remote-method="handleCarrierSearch"
|
||
:loading="carrierLoading"
|
||
clearable
|
||
>
|
||
<ElOption
|
||
v-for="carrier in carrierList"
|
||
:key="carrier.id"
|
||
:label="carrier.carrier_name"
|
||
:value="carrier.id"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
|
||
<ElUpload
|
||
ref="uploadRef"
|
||
drag
|
||
:auto-upload="false"
|
||
:on-change="handleFileChange"
|
||
:limit="1"
|
||
accept=".xlsx"
|
||
>
|
||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||
<div class="el-upload__text">将 Excel 文件拖到此处，或<em>点击选择</em></div>
|
||
<template #tip>
|
||
<div class="el-upload__tip">只能上传 .xlsx 格式的 Excel 文件，且不超过 10MB</div>
|
||
</template>
|
||
</ElUpload>
|
||
|
||
<template #footer>
|
||
<ElButton @click="handleCancelImport">取消</ElButton>
|
||
<ElButton
|
||
type="primary"
|
||
:loading="uploading"
|
||
:disabled="!fileList.length || !selectedCarrierId"
|
||
@click="submitUpload"
|
||
>
|
||
开始导入
|
||
</ElButton>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 任务详情对话框 -->
|
||
<ElDialog v-model="detailDialogVisible" title="IoT卡导入任务详情" width="900px" align-center>
|
||
<ElDescriptions :column="2" border>
|
||
<ElDescriptionsItem label="任务编号" :span="2">{{
|
||
currentDetail.task_no
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="状态">
|
||
<ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="运营商">{{ currentDetail.carrier_name }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="文件名" :span="2">{{
|
||
currentDetail.file_name
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="成功数">
|
||
<span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="失败数">
|
||
<span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="警告数">
|
||
<span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="错误信息" :span="2">{{
|
||
currentDetail.error_message
|
||
}}</ElDescriptionsItem>
|
||
</ElDescriptions>
|
||
|
||
<ElDivider content-position="left">跳过明细</ElDivider>
|
||
<div
|
||
v-if="currentDetail.skipped_items && currentDetail.skipped_items.length"
|
||
style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
|
||
>
|
||
<ElTable :data="currentDetail.skipped_items" border size="small">
|
||
<ElTableColumn label="行号" prop="line" width="80" />
|
||
<ElTableColumn label="ICCID" prop="iccid" width="200" />
|
||
<ElTableColumn label="MSISDN" prop="msisdn" width="150" />
|
||
<ElTableColumn label="跳过原因" prop="reason" min-width="200">
|
||
<template #default="{ row }">
|
||
{{ row.reason || '未知原因' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
</div>
|
||
<ElEmpty v-else description="无跳过记录" />
|
||
|
||
<ElDivider content-position="left">失败明细</ElDivider>
|
||
<div
|
||
v-if="currentDetail.failed_items && currentDetail.failed_items.length"
|
||
style="max-height: 300px; overflow-y: auto"
|
||
>
|
||
<ElTable :data="currentDetail.failed_items" border size="small">
|
||
<ElTableColumn label="行号" prop="line" width="80" />
|
||
<ElTableColumn label="ICCID" prop="iccid" width="200" />
|
||
<ElTableColumn label="MSISDN" prop="msisdn" width="150" />
|
||
<ElTableColumn label="失败原因" prop="reason" min-width="200">
|
||
<template #default="{ row }">
|
||
{{ row.reason || row.error || '未知错误' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
</div>
|
||
<ElEmpty v-else description="无失败记录" />
|
||
|
||
<template #footer>
|
||
<ElButton @click="detailDialogVisible = false">关闭</ElButton>
|
||
<ElButton
|
||
v-if="currentDetail.skip_count > 0"
|
||
type="warning"
|
||
:icon="Download"
|
||
@click="downloadSkippedData"
|
||
>
|
||
下载跳过数据
|
||
</ElButton>
|
||
<ElButton
|
||
v-if="currentDetail.fail_count > 0"
|
||
type="primary"
|
||
:icon="Download"
|
||
@click="downloadFailData"
|
||
>
|
||
下载失败数据
|
||
</ElButton>
|
||
</template>
|
||
</ElDialog>
|
||
</ArtTableFullScreen>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { h } from 'vue'
|
||
import { CardService, CarrierService } from '@/api/modules'
|
||
import { ElMessage, ElTag, ElFormItem, ElSelect, ElOption } from 'element-plus'
|
||
import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
|
||
import type { UploadInstance } from 'element-plus'
|
||
import type { SearchFormItem } from '@/types'
|
||
import { useCheckedColumns } from '@/composables/useCheckedColumns'
|
||
import { useAuth } from '@/composables/useAuth'
|
||
import { formatDateTime } from '@/utils/business/format'
|
||
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
|
||
import { StorageService } from '@/api/modules/storage'
|
||
import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
|
||
import type { Carrier } from '@/types/api'
|
||
|
||
defineOptions({ name: 'IotCardTask' })
|
||
|
||
const { hasAuth } = useAuth()
|
||
const loading = ref(false)
|
||
const tableRef = ref()
|
||
const uploadRef = ref<UploadInstance>()
|
||
const fileList = ref<File[]>([])
|
||
const uploading = ref(false)
|
||
const importDialogVisible = ref(false)
|
||
const detailDialogVisible = ref(false)
|
||
const selectedCarrierId = ref<number>()
|
||
const carrierList = ref<Carrier[]>([])
|
||
const carrierLoading = ref(false)
|
||
|
||
// 搜索表单初始值
|
||
const initialSearchState = {
|
||
status: undefined,
|
||
carrier_id: undefined,
|
||
batch_no: '',
|
||
dateRange: undefined as any
|
||
}
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({ ...initialSearchState })
|
||
|
||
// 分页
|
||
const pagination = reactive({
|
||
page: 1,
|
||
pageSize: 20,
|
||
total: 0
|
||
})
|
||
|
||
// 搜索表单配置
|
||
const searchFormItems = computed<SearchFormItem[]>(() => [
|
||
{
|
||
label: '任务状态',
|
||
prop: 'status',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: '待处理', value: 1 },
|
||
{ label: '处理中', value: 2 },
|
||
{ label: '已完成', value: 3 },
|
||
{ label: '失败', value: 4 }
|
||
]
|
||
},
|
||
{
|
||
label: '运营商',
|
||
prop: 'carrier_id',
|
||
type: 'select',
|
||
options: carrierList.value.map((carrier) => ({
|
||
label: carrier.carrier_name,
|
||
value: carrier.id
|
||
})),
|
||
config: {
|
||
clearable: true,
|
||
filterable: true,
|
||
remote: true,
|
||
remoteMethod: handleCarrierSearch,
|
||
placeholder: '请输入运营商名称搜索'
|
||
}
|
||
},
|
||
{
|
||
label: '批次号',
|
||
prop: 'batch_no',
|
||
type: 'input',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请输入批次号'
|
||
}
|
||
},
|
||
{
|
||
label: '创建时间',
|
||
prop: 'dateRange',
|
||
type: 'daterange',
|
||
config: {
|
||
type: 'daterange',
|
||
startPlaceholder: '开始时间',
|
||
endPlaceholder: '结束时间',
|
||
valueFormat: 'YYYY-MM-DDTHH:mm:ssZ'
|
||
}
|
||
}
|
||
])
|
||
|
||
// 列配置
|
||
const columnOptions = [
|
||
{ label: '任务编号', prop: 'task_no' },
|
||
{ label: '任务状态', prop: 'status' },
|
||
{ label: '运营商', prop: 'carrier_name' },
|
||
{ label: '文件名', prop: 'file_name' },
|
||
{ label: '总数', prop: 'total_count' },
|
||
{ label: '成功数', prop: 'success_count' },
|
||
{ label: '失败数', prop: 'fail_count' },
|
||
{ label: '跳过数', prop: 'skip_count' },
|
||
{ label: '开始时间', prop: 'started_at' },
|
||
{ label: '完成时间', prop: 'completed_at' },
|
||
{ label: '错误信息', prop: 'error_message' },
|
||
{ label: '创建时间', prop: 'created_at' },
|
||
{ label: '操作', prop: 'operation' }
|
||
]
|
||
|
||
const taskList = ref<IotCardImportTask[]>([])
|
||
const currentDetail = ref<any>({})
|
||
|
||
// 获取状态标签类型
|
||
const getStatusType = (status: IotCardImportTaskStatus) => {
|
||
switch (status) {
|
||
case 1:
|
||
return 'info'
|
||
case 2:
|
||
return 'warning'
|
||
case 3:
|
||
return 'success'
|
||
case 4:
|
||
return 'danger'
|
||
default:
|
||
return 'info'
|
||
}
|
||
}
|
||
|
||
// 查看详情
|
||
const viewDetail = async (row: IotCardImportTask) => {
|
||
try {
|
||
const res = await CardService.getIotCardImportTaskDetail(row.id)
|
||
if (res.code === 0 && res.data) {
|
||
currentDetail.value = {
|
||
...res.data,
|
||
started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
|
||
completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
|
||
created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-',
|
||
carrier_name: res.data.carrier_name || '-',
|
||
error_message: res.data.error_message || '-'
|
||
}
|
||
detailDialogVisible.value = true
|
||
}
|
||
} catch (error) {
|
||
console.error('获取任务详情失败:', error)
|
||
ElMessage.error('获取任务详情失败')
|
||
}
|
||
}
|
||
|
||
// 动态列配置
|
||
const { columnChecks, columns } = useCheckedColumns(() => [
|
||
{
|
||
prop: 'task_no',
|
||
label: '任务编号',
|
||
width: 180
|
||
},
|
||
{
|
||
prop: 'status',
|
||
label: '任务状态',
|
||
width: 100,
|
||
formatter: (row: IotCardImportTask) => {
|
||
return h(ElTag, { type: getStatusType(row.status) }, () => row.status_text)
|
||
}
|
||
},
|
||
{
|
||
prop: 'carrier_name',
|
||
label: '运营商',
|
||
width: 120
|
||
},
|
||
{
|
||
prop: 'file_name',
|
||
label: '文件名',
|
||
minWidth: 250,
|
||
showOverflowTooltip: true
|
||
},
|
||
{
|
||
prop: 'total_count',
|
||
label: '总数',
|
||
width: 80
|
||
},
|
||
{
|
||
prop: 'success_count',
|
||
label: '成功数',
|
||
width: 80,
|
||
formatter: (row: IotCardImportTask) => {
|
||
return h('span', { style: { color: 'var(--el-color-success)' } }, row.success_count)
|
||
}
|
||
},
|
||
{
|
||
prop: 'fail_count',
|
||
label: '失败数',
|
||
width: 80,
|
||
formatter: (row: IotCardImportTask) => {
|
||
return h('span', { style: { color: 'var(--el-color-danger)' } }, row.fail_count)
|
||
}
|
||
},
|
||
{
|
||
prop: 'skip_count',
|
||
label: '跳过数',
|
||
width: 80
|
||
},
|
||
{
|
||
prop: 'started_at',
|
||
label: '开始时间',
|
||
width: 180,
|
||
formatter: (row: IotCardImportTask) => (row.started_at ? formatDateTime(row.started_at) : '-')
|
||
},
|
||
{
|
||
prop: 'completed_at',
|
||
label: '完成时间',
|
||
width: 180,
|
||
formatter: (row: IotCardImportTask) =>
|
||
row.completed_at ? formatDateTime(row.completed_at) : '-'
|
||
},
|
||
{
|
||
prop: 'error_message',
|
||
label: '错误信息',
|
||
minWidth: 200,
|
||
showOverflowTooltip: true,
|
||
formatter: (row: IotCardImportTask) => row.error_message || '-'
|
||
},
|
||
{
|
||
prop: 'created_at',
|
||
label: '创建时间',
|
||
width: 180,
|
||
formatter: (row: IotCardImportTask) => formatDateTime(row.created_at)
|
||
},
|
||
{
|
||
prop: 'operation',
|
||
label: '操作',
|
||
width: 180,
|
||
fixed: 'right',
|
||
formatter: (row: IotCardImportTask) => {
|
||
const buttons = []
|
||
|
||
// 显示"查看详情"按钮
|
||
buttons.push(
|
||
h(ArtButtonTable, {
|
||
text: '详情',
|
||
onClick: () => viewDetail(row)
|
||
})
|
||
)
|
||
|
||
// 如果有失败数据，显示"失败数据"按钮
|
||
if (row.fail_count > 0) {
|
||
buttons.push(
|
||
h(ArtButtonTable, {
|
||
text: '失败数据',
|
||
type: 'danger',
|
||
onClick: () => downloadFailDataByRow(row)
|
||
})
|
||
)
|
||
}
|
||
|
||
return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
|
||
}
|
||
}
|
||
])
|
||
|
||
onMounted(() => {
|
||
getTableData()
|
||
loadCarrierList()
|
||
})
|
||
|
||
// 获取IoT卡任务列表
|
||
const getTableData = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params: any = {
|
||
page: pagination.page,
|
||
page_size: pagination.pageSize,
|
||
status: searchForm.status,
|
||
carrier_id: searchForm.carrier_id,
|
||
batch_no: searchForm.batch_no || undefined
|
||
}
|
||
|
||
// 处理时间范围
|
||
if (searchForm.dateRange && Array.isArray(searchForm.dateRange)) {
|
||
params.start_time = searchForm.dateRange[0]
|
||
params.end_time = searchForm.dateRange[1]
|
||
}
|
||
|
||
// 清理空值
|
||
Object.keys(params).forEach((key) => {
|
||
if (params[key] === '' || params[key] === undefined) {
|
||
delete params[key]
|
||
}
|
||
})
|
||
|
||
const res = await CardService.getIotCardImportTasks(params)
|
||
if (res.code === 0) {
|
||
taskList.value = res.data.items || []
|
||
pagination.total = res.data.total || 0
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
ElMessage.error('获取IoT卡任务列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 重置搜索
|
||
const handleReset = () => {
|
||
Object.assign(searchForm, { ...initialSearchState })
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 刷新表格
|
||
const handleRefresh = () => {
|
||
getTableData()
|
||
}
|
||
|
||
// 处理表格分页变化
|
||
const handleSizeChange = (newPageSize: number) => {
|
||
pagination.pageSize = newPageSize
|
||
getTableData()
|
||
}
|
||
|
||
const handleCurrentChange = (newCurrentPage: number) => {
|
||
pagination.page = newCurrentPage
|
||
getTableData()
|
||
}
|
||
|
||
// 从行数据下载失败数据
|
||
const downloadFailDataByRow = async (row: IotCardImportTask) => {
|
||
try {
|
||
const res = await CardService.getIotCardImportTaskDetail(row.id)
|
||
if (res.code === 0 && res.data) {
|
||
const detail = res.data
|
||
downloadFailDataFromDetail(detail, row.task_no)
|
||
}
|
||
} catch (error) {
|
||
console.error('下载失败数据失败:', error)
|
||
ElMessage.error('下载失败数据失败')
|
||
}
|
||
}
|
||
|
||
// 下载跳过数据（从详情对话框）
|
||
const downloadSkippedData = () => {
|
||
downloadSkippedDataFromDetail(currentDetail.value, currentDetail.value.task_no)
|
||
}
|
||
|
||
// 下载跳过数据的通用方法
|
||
const downloadSkippedDataFromDetail = (detail: any, taskNo: string) => {
|
||
const skippedReasons =
|
||
detail.skipped_items?.map((item: any) => ({
|
||
line: item.line || '-',
|
||
iccid: item.iccid || '-',
|
||
msisdn: item.msisdn || '-',
|
||
message: item.reason || '未知原因'
|
||
})) || []
|
||
|
||
if (skippedReasons.length === 0) {
|
||
ElMessage.warning('没有跳过数据可下载')
|
||
return
|
||
}
|
||
|
||
const headers = ['行号', 'ICCID', 'MSISDN', '跳过原因']
|
||
const csvRows = [
|
||
headers.join(','),
|
||
...skippedReasons.map((item: any) =>
|
||
[item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
|
||
)
|
||
]
|
||
const csvContent = csvRows.join('\n')
|
||
|
||
const BOM = '\uFEFF'
|
||
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
|
||
|
||
const link = document.createElement('a')
|
||
const url = URL.createObjectURL(blob)
|
||
link.setAttribute('href', url)
|
||
link.setAttribute('download', `IoT卡导入跳过数据_${taskNo}.csv`)
|
||
link.style.visibility = 'hidden'
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(url)
|
||
|
||
ElMessage.success('跳过数据下载成功')
|
||
}
|
||
|
||
// 下载失败数据（从详情对话框）
|
||
const downloadFailData = () => {
|
||
downloadFailDataFromDetail(currentDetail.value, currentDetail.value.task_no)
|
||
}
|
||
|
||
// 下载失败数据的通用方法
|
||
const downloadFailDataFromDetail = (detail: any, taskNo: string) => {
|
||
const failReasons =
|
||
detail.failed_items?.map((item: any) => ({
|
||
line: item.line || '-',
|
||
iccid: item.iccid || '-',
|
||
msisdn: item.msisdn || '-',
|
||
message: item.reason || item.error || '未知错误'
|
||
})) || []
|
||
|
||
if (failReasons.length === 0) {
|
||
ElMessage.warning('没有失败数据可下载')
|
||
return
|
||
}
|
||
|
||
const headers = ['行号', 'ICCID', 'MSISDN', '失败原因']
|
||
const csvRows = [
|
||
headers.join(','),
|
||
...failReasons.map((item: any) =>
|
||
[item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
|
||
)
|
||
]
|
||
const csvContent = csvRows.join('\n')
|
||
|
||
const BOM = '\uFEFF'
|
||
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
|
||
|
||
const link = document.createElement('a')
|
||
const url = URL.createObjectURL(blob)
|
||
link.setAttribute('href', url)
|
||
link.setAttribute('download', `IoT卡导入失败数据_${taskNo}.csv`)
|
||
link.style.visibility = 'hidden'
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(url)
|
||
|
||
ElMessage.success('失败数据下载成功')
|
||
}
|
||
|
||
// 下载模板
|
||
const downloadTemplate = async () => {
|
||
try {
|
||
// 动态导入 xlsx 库
|
||
const XLSX = await import('xlsx')
|
||
|
||
// 创建示例数据
|
||
const templateData = [
|
||
{
|
||
ICCID: '89860123456789012345',
|
||
MSISDN: '13800138000'
|
||
},
|
||
{
|
||
ICCID: '89860123456789012346',
|
||
MSISDN: '13800138001'
|
||
},
|
||
{
|
||
ICCID: '89860123456789012347',
|
||
MSISDN: '13800138002'
|
||
}
|
||
]
|
||
|
||
// 创建工作簿
|
||
const wb = XLSX.utils.book_new()
|
||
const ws = XLSX.utils.json_to_sheet(templateData)
|
||
|
||
// 设置列宽
|
||
ws['!cols'] = [
|
||
{ wch: 25 }, // ICCID
|
||
{ wch: 15 } // MSISDN
|
||
]
|
||
|
||
// 将所有单元格设置为文本格式，防止科学计数法
|
||
const range = XLSX.utils.decode_range(ws['!ref'] || 'A1')
|
||
for (let R = range.s.r; R <= range.e.r; ++R) {
|
||
for (let C = range.s.c; C <= range.e.c; ++C) {
|
||
const cellAddress = XLSX.utils.encode_cell({ r: R, c: C })
|
||
if (!ws[cellAddress]) continue
|
||
ws[cellAddress].t = 's' // 设置为字符串类型
|
||
}
|
||
}
|
||
|
||
// 添加工作表到工作簿
|
||
XLSX.utils.book_append_sheet(wb, ws, 'IoT卡导入模板')
|
||
|
||
// 导出文件
|
||
XLSX.writeFile(wb, 'IoT卡导入模板.xlsx')
|
||
|
||
ElMessage.success('IoT卡导入模板下载成功')
|
||
} catch (error) {
|
||
console.error('下载模板失败:', error)
|
||
ElMessage.error('下载模板失败')
|
||
}
|
||
}
|
||
|
||
// 文件选择变化
|
||
const handleFileChange = (uploadFile: any) => {
|
||
const maxSize = 10 * 1024 * 1024
|
||
if (uploadFile.raw && uploadFile.raw.size > maxSize) {
|
||
ElMessage.error('文件大小不能超过 10MB')
|
||
uploadRef.value?.clearFiles()
|
||
fileList.value = []
|
||
return
|
||
}
|
||
|
||
if (uploadFile.raw && !uploadFile.raw.name.endsWith('.xlsx')) {
|
||
ElMessage.error('只能上传 .xlsx 格式的 Excel 文件')
|
||
uploadRef.value?.clearFiles()
|
||
fileList.value = []
|
||
return
|
||
}
|
||
|
||
fileList.value = uploadFile.raw ? [uploadFile.raw] : []
|
||
}
|
||
|
||
// 清空文件
|
||
const clearFiles = () => {
|
||
uploadRef.value?.clearFiles()
|
||
fileList.value = []
|
||
selectedCarrierId.value = undefined
|
||
}
|
||
|
||
// 取消导入
|
||
const handleCancelImport = () => {
|
||
clearFiles()
|
||
importDialogVisible.value = false
|
||
}
|
||
|
||
// 加载运营商列表
|
||
const loadCarrierList = async (carrierName?: string) => {
|
||
carrierLoading.value = true
|
||
try {
|
||
const res = await CarrierService.getCarriers({
|
||
page: 1,
|
||
page_size: 20,
|
||
carrier_name: carrierName || undefined,
|
||
status: 1 // 只加载启用的运营商
|
||
})
|
||
if (res.code === 0) {
|
||
carrierList.value = res.data.items || []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取运营商列表失败:', error)
|
||
} finally {
|
||
carrierLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 运营商搜索处理
|
||
const handleCarrierSearch = (query: string) => {
|
||
loadCarrierList(query)
|
||
}
|
||
|
||
// 提交上传
|
||
const submitUpload = async () => {
|
||
if (!selectedCarrierId.value) {
|
||
ElMessage.warning('请先选择运营商')
|
||
return
|
||
}
|
||
|
||
if (!fileList.value.length) {
|
||
ElMessage.warning('请先选择 Excel 文件')
|
||
return
|
||
}
|
||
|
||
const file = fileList.value[0]
|
||
uploading.value = true
|
||
|
||
try {
|
||
ElMessage.info('正在准备上传...')
|
||
const uploadUrlRes = await StorageService.getUploadUrl({
|
||
file_name: file.name,
|
||
content_type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||
purpose: 'iot_import'
|
||
})
|
||
|
||
if (uploadUrlRes.code !== 0) {
|
||
throw new Error(uploadUrlRes.msg || '获取上传地址失败')
|
||
}
|
||
|
||
const { upload_url, file_key } = uploadUrlRes.data
|
||
|
||
ElMessage.info('正在上传文件...')
|
||
await StorageService.uploadFile(upload_url, file, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
|
||
|
||
ElMessage.info('正在创建导入任务...')
|
||
const importRes = await CardService.importIotCards({
|
||
carrier_id: selectedCarrierId.value,
|
||
file_key,
|
||
batch_no: `IOT-${Date.now()}`
|
||
})
|
||
|
||
if (importRes.code !== 0) {
|
||
throw new Error(importRes.msg || '创建导入任务失败')
|
||
}
|
||
|
||
const taskNo = importRes.data.task_no
|
||
|
||
handleCancelImport()
|
||
getTableData()
|
||
|
||
ElMessage.success({
|
||
message: `导入任务已创建！任务编号：${taskNo}`,
|
||
duration: 3000,
|
||
showClose: true
|
||
})
|
||
} catch (error: any) {
|
||
console.error('IoT卡导入失败:', error)
|
||
ElMessage.error(error.message || 'IoT卡导入失败')
|
||
} finally {
|
||
uploading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.iot-card-task-page {
|
||
:deep(.el-icon--upload) {
|
||
margin-bottom: 16px;
|
||
font-size: 67px;
|
||
color: var(--el-text-color-placeholder);
|
||
}
|
||
|
||
:deep(.el-upload__text) {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-regular);
|
||
|
||
em {
|
||
font-style: normal;
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
}
|
||
</style>
|