278 lines
8.6 KiB
Vue
278 lines
8.6 KiB
Vue
<template>
|
||
<div class="page_container">
|
||
<div class="container">
|
||
<div class="upload-container">
|
||
<!-- Excel文件上传 -->
|
||
<div class="upload-card">
|
||
<div class="upload-icon" style="color: #67C23A;">
|
||
<i class="el-icon-document"></i>
|
||
</div>
|
||
<div class="upload-title">异常信息Excel文件上传</div>
|
||
<div class="upload-desc">支持.xlsx和.xls格式，最大10MB</div>
|
||
<div class="upload-btn">
|
||
<el-upload
|
||
ref="excelUpload1"
|
||
:action="`${serverUrl}/anomalyInfo/importErrorInfoExcel`"
|
||
:limit="1"
|
||
:before-upload="beforeExcelUpload"
|
||
:on-success="handleExcelSuccess1"
|
||
:on-error="handleError"
|
||
:file-list="excelFileList1"
|
||
accept=".xlsx, .xls">
|
||
<el-button size="medium" type="success" icon="el-icon-upload">上传Excel文件</el-button>
|
||
</el-upload>
|
||
</div>
|
||
<div class="upload-progress" v-if="excelProgress1 > 0">
|
||
<el-progress :percentage="excelProgress1" :status="excelStatus1"></el-progress>
|
||
</div>
|
||
<div class="file-list">
|
||
<div class="file-item" v-for="file in excelFileList1" :key="file.uid">
|
||
<i class="el-icon-document" style="color: #67C23A;"></i>
|
||
<span class="file-name">{{ file.name }}</span>
|
||
<span class="file-status" :class="{ error: file.status === 'error' }">
|
||
{{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二个Excel文件上传 -->
|
||
<div class="upload-card">
|
||
<div class="upload-icon" style="color: #E6A23C;">
|
||
<i class="el-icon-document"></i>
|
||
</div>
|
||
<div class="upload-title">异常信息处理方式Excel文件上传</div>
|
||
<div class="upload-desc">支持.xlsx和.xls格式，最大10MB</div>
|
||
<div class="upload-btn">
|
||
<el-upload
|
||
ref="excelUpload2"
|
||
:action="`${serverUrl}/anomalyInfo/importErrorHandlingExcel`"
|
||
:on-success="handleExcelSuccess2"
|
||
:on-error="handleError"
|
||
:before-upload="beforeExcelUpload"
|
||
:file-list="excelFileList2"
|
||
:limit="1"
|
||
accept=".xlsx, .xls">
|
||
<el-button size="medium" type="warning" icon="el-icon-upload">上传Excel文件</el-button>
|
||
</el-upload>
|
||
</div>
|
||
<div class="upload-progress" v-if="excelProgress2 > 0">
|
||
<el-progress :percentage="excelProgress2" :status="excelStatus2"></el-progress>
|
||
</div>
|
||
<div class="file-list">
|
||
<div class="file-item" v-for="file in excelFileList2" :key="file.uid">
|
||
<i class="el-icon-document" style="color: #E6A23C;"></i>
|
||
<span class="file-name">{{ file.name }}</span>
|
||
<span class="file-status" :class="{ error: file.status === 'error' }">
|
||
{{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ZIP文件上传 -->
|
||
<div class="upload-card">
|
||
<div class="upload-icon" style="color: #409EFF;">
|
||
<i class="el-icon-folder-opened"></i>
|
||
</div>
|
||
<div class="upload-title">异常处理图片ZIP文件上传</div>
|
||
<div class="upload-desc">支持.zip格式，最大50MB</div>
|
||
<div class="upload-btn">
|
||
<el-upload
|
||
ref="zipUpload"
|
||
:action="`${serverUrl}/anomalyInfo/importErrorImage`"
|
||
:on-success="handleZipSuccess"
|
||
:on-error="handleError"
|
||
:before-upload="beforeZipUpload"
|
||
:file-list="zipFileList"
|
||
:limit="1"
|
||
accept=".zip">
|
||
<el-button size="medium" type="primary" icon="el-icon-upload">上传ZIP文件</el-button>
|
||
</el-upload>
|
||
</div>
|
||
<div class="upload-progress" v-if="zipProgress > 0">
|
||
<el-progress :percentage="zipProgress" :status="zipStatus"></el-progress>
|
||
</div>
|
||
<div class="file-list">
|
||
<div class="file-item" v-for="file in zipFileList" :key="file.uid">
|
||
<i class="el-icon-folder-opened" style="color: #409EFF;"></i>
|
||
<span class="file-name">{{ file.name }}</span>
|
||
<span class="file-status" :class="{ error: file.status === 'error' }">
|
||
{{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/* eslint-disable */
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
name: 'ModuleRelocation',
|
||
data () {
|
||
return {
|
||
dataList: [],
|
||
excelFileList1: [],
|
||
excelProgress1: 0,
|
||
excelStatus1: '',
|
||
excelFileList2: [],
|
||
excelProgress2: 0,
|
||
excelStatus2: '',
|
||
zipFileList: [],
|
||
zipProgress: 0,
|
||
zipStatus: ''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['serverUrl'])
|
||
},
|
||
methods: {
|
||
// Excel文件上传前的验证
|
||
beforeExcelUpload(file) {
|
||
const isExcel = file.type === 'application/vnd.ms-excel' ||
|
||
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||
|
||
if (!isExcel) {
|
||
this.$message.error('只能上传Excel文件!');
|
||
}
|
||
if (!isLt10M) {
|
||
this.$message.error('Excel文件大小不能超过10MB!');
|
||
}
|
||
return isExcel && isLt10M;
|
||
},
|
||
// ZIP文件上传前的验证
|
||
beforeZipUpload(file) {
|
||
const isZip = file.type === 'application/zip' ||
|
||
file.type === 'application/x-zip-compressed';
|
||
const isLt50M = file.size / 1024 / 1024 < 50;
|
||
|
||
if (!isZip) {
|
||
this.$message.error('只能上传ZIP文件!');
|
||
}
|
||
if (!isLt50M) {
|
||
this.$message.error('ZIP文件大小不能超过50MB!');
|
||
}
|
||
return isZip && isLt50M;
|
||
},
|
||
// 第一个Excel上传成功回调
|
||
handleExcelSuccess1(response, file, fileList) {
|
||
this.excelFileList1 = fileList;
|
||
this.excelProgress1 = 100;
|
||
this.excelStatus1 = 'success';
|
||
this.$message.success('第一个Excel文件上传成功!');
|
||
},
|
||
// 第二个Excel上传成功回调
|
||
handleExcelSuccess2(response, file, fileList) {
|
||
this.excelFileList2 = fileList;
|
||
this.excelProgress2 = 100;
|
||
this.excelStatus2 = 'success';
|
||
this.$message.success('第二个Excel文件上传成功!');
|
||
},
|
||
// ZIP上传成功回调
|
||
handleZipSuccess(response, file, fileList) {
|
||
this.zipFileList = fileList;
|
||
this.zipProgress = 100;
|
||
this.zipStatus = 'success';
|
||
this.$message.success('ZIP文件上传成功!');
|
||
},
|
||
// 上传失败回调
|
||
handleError(err, file, fileList) {
|
||
this.$message.error('文件上传失败!');
|
||
if (file.raw.type.includes('excel') || file.name.includes('.xls')) {
|
||
this.excelProgress1 = 0;
|
||
this.excelProgress2 = 0;
|
||
} else {
|
||
this.zipProgress = 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.upload-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
}
|
||
.upload-card {
|
||
flex: 1;
|
||
min-width: 300px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
padding: 25px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.upload-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.upload-icon {
|
||
font-size: 48px;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
.upload-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.upload-desc {
|
||
color: #909399;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
}
|
||
.upload-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.file-list {
|
||
margin-top: 20px;
|
||
}
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
.file-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.file-name {
|
||
flex: 1;
|
||
margin-left: 10px;
|
||
}
|
||
.file-status {
|
||
color: #67C23A;
|
||
}
|
||
.file-status.error {
|
||
color: #F56C6C;
|
||
}
|
||
.upload-progress {
|
||
margin-top: 15px;
|
||
}
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
color: #909399;
|
||
font-size: 14px;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.upload-container {
|
||
flex-direction: column;
|
||
}
|
||
.upload-card {
|
||
min-width: 100%;
|
||
}
|
||
}
|
||
</style>
|