|
@@ -1,304 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div>
|
|
|
|
|
- <div class="overlay" v-if="cardVisible"></div>
|
|
|
|
|
- <el-card v-if="cardVisible" class="pop-card">
|
|
|
|
|
- <template #header>
|
|
|
|
|
- <div style="font-size: 16px; font-weight: 600">批量导入</div>
|
|
|
|
|
- <el-icon
|
|
|
|
|
- :size="18"
|
|
|
|
|
- @click="
|
|
|
|
|
- () => {
|
|
|
|
|
- emits('close');
|
|
|
|
|
- }
|
|
|
|
|
- "
|
|
|
|
|
- style="cursor: pointer"
|
|
|
|
|
- >
|
|
|
|
|
- <Close />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- </template>
|
|
|
|
|
- <div class="upload-content">
|
|
|
|
|
- <el-upload
|
|
|
|
|
- ref="upload"
|
|
|
|
|
- style="width: 384px; height: 192px; border-radius: 5px"
|
|
|
|
|
- :headers="getHeaders()"
|
|
|
|
|
- :multiple="false"
|
|
|
|
|
- :limit="1"
|
|
|
|
|
- drag
|
|
|
|
|
- :action="actionUrl"
|
|
|
|
|
- :with-credentials="true"
|
|
|
|
|
- :auto-upload="false"
|
|
|
|
|
- :before-upload="beforeUpload"
|
|
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
|
|
- :on-exceed="handleExceed"
|
|
|
|
|
- :on-change="handleChange"
|
|
|
|
|
- :on-remove="handleRemove"
|
|
|
|
|
- >
|
|
|
|
|
- <el-icon class="el-icon--upload" style="width: 33px; height: 42px; color: #409efc">
|
|
|
|
|
- <Document />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- <div class="el-upload__text">
|
|
|
|
|
- <div style="font-size: 12px; color: red; margin-bottom: 5px">请下载模板并按要求填写后上传</div>
|
|
|
|
|
- <div style="font-size: 16px">点击或将文件拖拽到这里上传</div>
|
|
|
|
|
- <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45); margin-top: 5px"
|
|
|
|
|
- >文件支持.xlsx .xls格式,仅支持上传一个文件</div
|
|
|
|
|
- >
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-upload>
|
|
|
|
|
- <div style="margin-top: 72px; display: flex; justify-content: flex-end">
|
|
|
|
|
- <el-button @click="handleDownloadTemplate">下载模板</el-button>
|
|
|
|
|
- <el-button type="primary" @click="handleImport" :disabled="isImportDisable">导入</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-card>
|
|
|
|
|
-
|
|
|
|
|
- <el-dialog
|
|
|
|
|
- v-model="DialogVisibleErr"
|
|
|
|
|
- title="Warning"
|
|
|
|
|
- width="544"
|
|
|
|
|
- align-center
|
|
|
|
|
- @close="
|
|
|
|
|
- () => {
|
|
|
|
|
- emits('update');
|
|
|
|
|
- }
|
|
|
|
|
- "
|
|
|
|
|
- >
|
|
|
|
|
- <template #header>
|
|
|
|
|
- <el-icon :size="24" color="#f2b20a" style="margin: 0 5px 2px">
|
|
|
|
|
- <WarnTriangleFilled />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- <div class="header-text">导入提示</div>
|
|
|
|
|
- </template>
|
|
|
|
|
- <div class="sum-count">
|
|
|
|
|
- 成功导入 <span class="succ-sum">{{ sucCount }}</span> 条, 失败 <span class="err-sum">{{ errCount }}</span> 条
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-table :data="errDetail" style="width: 100%" height="190">
|
|
|
|
|
- <el-table-column prop="rowNum" label="行数" width="100" fixed align="center" />
|
|
|
|
|
- <el-table-column prop="failReason" label="失败原因" show-overflow-tooltip />
|
|
|
|
|
- </el-table>
|
|
|
|
|
- <template #footer>
|
|
|
|
|
- <el-button type="primary" @click="handleErrComfirm"> 确定 </el-button>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-dialog>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script setup lang="ts">
|
|
|
|
|
- import { computed, ref } from 'vue';
|
|
|
|
|
- import urlJoin from 'url-join';
|
|
|
|
|
- import axios, { AxiosRequestConfig } from 'axios';
|
|
|
|
|
- import { getHeaders } from '@/utils/http/axios';
|
|
|
|
|
- import { genFileId, ElMessage } from 'element-plus';
|
|
|
|
|
- import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
|
|
|
|
|
- import { Close, Document, WarnTriangleFilled } from '@element-plus/icons-vue';
|
|
|
|
|
- import { useGlobSetting } from '@/hooks/setting';
|
|
|
|
|
-
|
|
|
|
|
- const emits = defineEmits(['close', 'update']);
|
|
|
|
|
-
|
|
|
|
|
- const upload = ref<UploadInstance>();
|
|
|
|
|
- const cardVisible = ref<boolean>(true);
|
|
|
|
|
- const isImportDisable = ref<boolean>(true);
|
|
|
|
|
- const DialogVisibleErr = ref<boolean>(false);
|
|
|
|
|
- const sucCount = ref<number>(0);
|
|
|
|
|
- const errCount = ref<number>(0);
|
|
|
|
|
- const errDetail = ref<{ rowNum: number; failReason: string }[]>([]);
|
|
|
|
|
-
|
|
|
|
|
- const { urlPrefix } = useGlobSetting();
|
|
|
|
|
-
|
|
|
|
|
- const actionUrl = computed(() => {
|
|
|
|
|
- return urlJoin(urlPrefix, `/vehicleInfo/importVehicleInfo`);
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- // 下载模板
|
|
|
|
|
- const handleDownloadTemplate = async () => {
|
|
|
|
|
- try {
|
|
|
|
|
- const config: AxiosRequestConfig = {
|
|
|
|
|
- headers: getHeaders(),
|
|
|
|
|
- responseType: 'blob',
|
|
|
|
|
- };
|
|
|
|
|
- const response = await axios.get(
|
|
|
|
|
- './skyeye-file-upload/sfysecurity/TEMPLATE/import-vehicle-template.xlsx',
|
|
|
|
|
- config,
|
|
|
|
|
- );
|
|
|
|
|
- const blob = new Blob([response.data], {
|
|
|
|
|
- type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
|
|
|
- });
|
|
|
|
|
- // 创建下载链接
|
|
|
|
|
- let downloadLink: HTMLAnchorElement | null = document.createElement('a');
|
|
|
|
|
- const url = window.URL.createObjectURL(blob);
|
|
|
|
|
- downloadLink.href = url;
|
|
|
|
|
- downloadLink.download = '车辆信息管理-批量导入模版.xlsx';
|
|
|
|
|
- downloadLink.click();
|
|
|
|
|
- // 移除下载链接
|
|
|
|
|
- window.URL.revokeObjectURL(url);
|
|
|
|
|
- downloadLink = null;
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('Error downloading file:', error);
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- // 导入
|
|
|
|
|
- const handleImport = async () => {
|
|
|
|
|
- upload.value!.submit();
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- // 上传文件之前的钩子,参数为上传的文件。即上传之前验证文件类型/后缀
|
|
|
|
|
- const beforeUpload = (file) => {
|
|
|
|
|
- const isExcel = /\.(xlsx|xls)$/.test(file.name.toLowerCase());
|
|
|
|
|
- if (!isExcel) {
|
|
|
|
|
- // 提示用户选择正确的文件类型
|
|
|
|
|
- ElMessage({
|
|
|
|
|
- message: '仅支持上传.xlsx .xls格式文件',
|
|
|
|
|
- type: 'error',
|
|
|
|
|
- });
|
|
|
|
|
- return false; // 阻止上传
|
|
|
|
|
- }
|
|
|
|
|
- return true; // 允许上传
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- function mergeFailReasons(data) {
|
|
|
|
|
- const grouped = data.reduce((acc, item) => {
|
|
|
|
|
- if (!acc[item.rowNum]) {
|
|
|
|
|
- acc[item.rowNum] = [];
|
|
|
|
|
- }
|
|
|
|
|
- // 避免重复添加
|
|
|
|
|
- if (!acc[item.rowNum].includes(item.failReason)) {
|
|
|
|
|
- acc[item.rowNum].push(item.failReason);
|
|
|
|
|
- }
|
|
|
|
|
- return acc;
|
|
|
|
|
- }, {});
|
|
|
|
|
-
|
|
|
|
|
- return Object.entries(grouped).map(([rowNum, reasons]) => ({
|
|
|
|
|
- rowNum: parseInt(rowNum),
|
|
|
|
|
- failReason: (reasons as string[]).join('、'),
|
|
|
|
|
- }));
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const handleUploadSuccess = (response) => {
|
|
|
|
|
- sucCount.value = response.data.successCount;
|
|
|
|
|
- errCount.value = response.data.failCount;
|
|
|
|
|
- errDetail.value = response.data.failInfoList;
|
|
|
|
|
-
|
|
|
|
|
- try {
|
|
|
|
|
- if (sucCount.value != 0 && errCount.value === 0 && errDetail.value.length === 0) {
|
|
|
|
|
- ElMessage({
|
|
|
|
|
- message: '添加成功', // 1.全部添加成功 —— failCount === 0
|
|
|
|
|
- type: 'success',
|
|
|
|
|
- });
|
|
|
|
|
- emits('update');
|
|
|
|
|
- } else {
|
|
|
|
|
- DialogVisibleErr.value = true; // 2.有错误 —— 显示错误dialog
|
|
|
|
|
- errDetail.value = mergeFailReasons(errDetail.value);
|
|
|
|
|
- }
|
|
|
|
|
- cardVisible.value = false;
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- ElMessage({
|
|
|
|
|
- message: response.message,
|
|
|
|
|
- type: 'error',
|
|
|
|
|
- });
|
|
|
|
|
- emits('update');
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- const handleErrComfirm = () => {
|
|
|
|
|
- DialogVisibleErr.value = false;
|
|
|
|
|
- emits('update');
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- // 当超出只能上传一个文件的限制时,自动替换上一个文件
|
|
|
|
|
- const handleExceed: UploadProps['onExceed'] = (files) => {
|
|
|
|
|
- upload.value!.clearFiles();
|
|
|
|
|
- const file = files[0] as UploadRawFile;
|
|
|
|
|
- file.uid = genFileId();
|
|
|
|
|
- upload.value!.handleStart(file);
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- const handleChange = () => {
|
|
|
|
|
- isImportDisable.value = false;
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- const handleRemove = () => {
|
|
|
|
|
- isImportDisable.value = true;
|
|
|
|
|
- };
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
|
- .overlay {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 100vw;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .pop-card {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- left: 50%;
|
|
|
|
|
- transform: translate(-50%, -50%);
|
|
|
|
|
- z-index: 1000;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .upload-content {
|
|
|
|
|
- margin: 40px 60px 10px 60px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- :deep(.el-card) {
|
|
|
|
|
- .el-card__header {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- :deep(.el-dialog) {
|
|
|
|
|
- padding: 0px;
|
|
|
|
|
- border-radius: 5px;
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__header {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
- height: 70px;
|
|
|
|
|
- padding: 0px 0px 15px 15px;
|
|
|
|
|
- border-bottom: 1px solid #e7e7e7;
|
|
|
|
|
-
|
|
|
|
|
- .header-text {
|
|
|
|
|
- font-size: 20px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__headerbtn {
|
|
|
|
|
- top: 15px;
|
|
|
|
|
- right: 3px;
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__close {
|
|
|
|
|
- font-size: 20px;
|
|
|
|
|
- color: black;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__body {
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
-
|
|
|
|
|
- .sum-count {
|
|
|
|
|
- font-size: 20px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
-
|
|
|
|
|
- .succ-sum {
|
|
|
|
|
- color: #52c41a;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .err-sum {
|
|
|
|
|
- color: #ff4d4f;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__footer {
|
|
|
|
|
- margin: 0 20px 20px 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|