161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<!-- excel 导入组件 -->
|
|
<template>
|
|
<el-dialog :title="prop.title" v-model="state.upload.open" :close-on-click-modal="false" draggable>
|
|
<el-upload v-loading="state.upload.isUploading" ref="uploadRef" :limit="1" accept=".xlsx, .xls"
|
|
:headers="headers" :action="baseURL + other.adaptationUrl(url)" :disabled="state.upload.isUploading"
|
|
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-error="handleFileError"
|
|
:auto-upload="false" drag>
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">
|
|
{{ $t("excel.operationNotice") }}
|
|
<em>{{ $t("excel.clickUpload") }}</em>
|
|
</div>
|
|
<template #tip>
|
|
<div class="el-upload__tip text-center">
|
|
<span>{{ $t("excel.fileFormat") }}</span>
|
|
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
|
@click="downExcelTemp" v-if="tempUrl">{{ $t("excel.downloadTemplate") }}
|
|
</el-link>
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
<template #footer>
|
|
<el-button type="primary" @click="submitFileForm" :disabled="state.upload.isUploading">
|
|
{{ $t("common.confirmButtonText") }}
|
|
</el-button>
|
|
<el-button @click="state.upload.open = false">{{ $t("common.cancelButtonText") }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!--校验失败错误数据-->
|
|
<el-dialog :title="$t('excel.validationFailureData')" v-model="state.errorVisible" :close-on-click-modal="false"
|
|
draggable>
|
|
<el-table :data="state.errorData">
|
|
<el-table-column property="lineNum" align="center" :label="$t('excel.lineNumbers')" width="100" />
|
|
<el-table-column property="errors" align="center" :label="$t('excel.misDescription')" show-overflow-tooltip>
|
|
<template v-slot="scope">
|
|
<el-tag type="danger" v-for="error in scope.row.errors" :key="error">{{ error }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="upload-excel">
|
|
import { useMessage } from "/@/hooks/message"
|
|
import other from "/@/utils/other"
|
|
import { Session } from "/@/utils/storage"
|
|
|
|
const emit = defineEmits(["sizeChange", "refreshDataList"])
|
|
const prop = defineProps({
|
|
url: {
|
|
type: String,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
tempUrl: {
|
|
type: String,
|
|
},
|
|
})
|
|
|
|
const uploadRef = ref()
|
|
|
|
const state = reactive({
|
|
errorVisible: false,
|
|
errorData: [],
|
|
dialog: {
|
|
title: "",
|
|
isShowDialog: false,
|
|
},
|
|
upload: {
|
|
open: false,
|
|
isUploading: false,
|
|
},
|
|
})
|
|
|
|
/**
|
|
* 下载模板文件
|
|
*/
|
|
const downExcelTemp = async () => {
|
|
try {
|
|
await other.downBlobFile(other.adaptationUrl(prop.tempUrl), {}, "temp.xlsx")
|
|
} catch (error) {
|
|
useMessage().error("模板下载失败，请先维护模板文件")
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 上传进度条变化事件
|
|
*/
|
|
const handleFileUploadProgress = () => {
|
|
state.upload.isUploading = true
|
|
}
|
|
|
|
/**
|
|
* 上传失败事件处理
|
|
*/
|
|
const handleFileError = () => {
|
|
useMessage().error("上传失败,数据格式不合法!")
|
|
state.upload.open = false
|
|
}
|
|
|
|
/**
|
|
* 上传成功事件处理
|
|
* @param {any} response - 上传成功的响应结果
|
|
*/
|
|
const handleFileSuccess = (response: any) => {
|
|
state.upload.isUploading = false
|
|
state.upload.open = false
|
|
uploadRef.value.clearFiles()
|
|
|
|
// 校验失败
|
|
if (response.code === 1) {
|
|
useMessage().error(response.msg ? response.msg : "导入失败，以下数据不合法")
|
|
state.errorVisible = true
|
|
state.errorData = response.data?.errors
|
|
if (!state.errorData && response.data) {
|
|
state.errorData = response.data
|
|
}
|
|
uploadRef.value.clearFiles()
|
|
// 刷新表格
|
|
emit?.("refreshDataList")
|
|
} else {
|
|
useMessage().success(response.msg ? response.msg : "导入成功")
|
|
// 刷新表格
|
|
emit?.("refreshDataList")
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 提交表单，触发上传
|
|
*/
|
|
const submitFileForm = () => {
|
|
state.upload.isUploading = true
|
|
uploadRef.value.submit()
|
|
}
|
|
|
|
/**
|
|
* 显示上传文件对话框，并清除上传信息
|
|
*/
|
|
const show = () => {
|
|
state.upload.isUploading = false
|
|
state.upload.open = true
|
|
}
|
|
|
|
/**
|
|
* 计算请求头部信息
|
|
*/
|
|
const headers = computed(() => {
|
|
return {
|
|
Authorization: "Bearer " + Session.getToken(),
|
|
"TENANT-ID": Session.getTenant(),
|
|
}
|
|
})
|
|
|
|
// 暴露变量
|
|
defineExpose({
|
|
show,
|
|
})
|
|
</script>
|