文件上传
This commit is contained in:
parent
714d0dd534
commit
807a6e0e26
|
|
@ -100,6 +100,9 @@ Vue.config.productionTip = false
|
|||
}
|
||||
}) */
|
||||
|
||||
// 创建全局事件总线 $bus
|
||||
Vue.prototype.$bus = new Vue()
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -130,26 +130,29 @@ export default {
|
|||
|
||||
if(Object.keys(this.fileUploadRule).length !== 0){
|
||||
// 文件需要ocr识别
|
||||
this.uploadFile(file);
|
||||
this.uploadFile(file,'识别中');
|
||||
}else{
|
||||
// 文件不需要ocr识别
|
||||
this.uploadFile(file);
|
||||
this.uploadFile(file,'上传中');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 上传文件
|
||||
uploadFile(file){
|
||||
uploadFile(file,text){
|
||||
console.log(file);
|
||||
this.$bus.$emit('startUpload', text);
|
||||
const formData = new FormData();
|
||||
formData.append('file', file.raw);
|
||||
formData.append('params', JSON.stringify(this.fileUploadRule));
|
||||
uploadSmallFileByOcr(formData).then(res => {
|
||||
console.log(res);
|
||||
this.$message.success(res.msg);
|
||||
this.$bus.$emit('endUpload');
|
||||
}).catch(err => {
|
||||
this.$message.error(err.msg);
|
||||
this.$bus.$emit('endUpload');
|
||||
})
|
||||
},
|
||||
// 处理文件超出限制
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
<!-- 企业主体库表单 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 全局上传动画 -->
|
||||
<div v-if="showUploadAnimation" class="global-upload-animation">
|
||||
<div class="animation-mask"></div>
|
||||
<div class="animation-content">
|
||||
<div class="spinner"></div>
|
||||
<div class="animation-text">{{ animationText }}</div>
|
||||
<div class="animation-subtext">正在处理文件，请稍候...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-header">
|
||||
<el-button class="reset-btn" @click="handleClose()">返回</el-button>
|
||||
<el-button class="search-btn" @click="handleSave()">保存</el-button>
|
||||
|
|
@ -23,11 +33,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { decryptWithSM4 } from '@/utils/sm'
|
||||
import BasicInfo from './child/BasicInfo.vue'
|
||||
import LegalPerson from './child/LegalPerson.vue'
|
||||
import AccountOpeningCertificate from './child/AccountOpeningCertificate.vue'
|
||||
|
||||
export default {
|
||||
name: 'EnterpriseForm',
|
||||
components: {
|
||||
|
|
@ -39,6 +51,9 @@ export default {
|
|||
return {
|
||||
id: decryptWithSM4(this.$route.query.id),
|
||||
type: decryptWithSM4(this.$route.query.type),
|
||||
showUploadAnimation: false,
|
||||
uploadQueue: 0, // 上传队列计数器
|
||||
animationText: '识别中'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -48,7 +63,7 @@ export default {
|
|||
this.$tab.closeOpenPage(obj)
|
||||
},
|
||||
// 保存
|
||||
async handleSave() {
|
||||
async handleSave() {
|
||||
try {
|
||||
// 并行校验所有表单
|
||||
const [basicInfoData, legalPersonData, accountData] = await Promise.all([
|
||||
|
|
@ -74,9 +89,46 @@ export default {
|
|||
// console.error('表单校验失败:', error)
|
||||
this.$message.error(error.message || '请完善表单信息')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 开始上传
|
||||
handleStartUpload(data) {
|
||||
this.animationText = data
|
||||
this.uploadQueue++
|
||||
this.showUploadAnimation = true
|
||||
|
||||
},
|
||||
// 结束上传
|
||||
handleEndUpload(data) {
|
||||
if (this.uploadQueue > 0) {
|
||||
this.uploadQueue--
|
||||
}
|
||||
|
||||
// 如果队列为空，隐藏动画
|
||||
if (this.uploadQueue === 0) {
|
||||
this.showUploadAnimation = false
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 监听上传开始事件
|
||||
this.$bus.$on('startUpload', this.handleStartUpload)
|
||||
|
||||
// 监听上传结束事件
|
||||
this.$bus.$on('endUpload', this.handleEndUpload)
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 移除所有事件监听
|
||||
this.$bus.$off('startUpload', this.handleStartUpload)
|
||||
this.$bus.$off('endUpload', this.handleEndUpload)
|
||||
|
||||
// 重置状态
|
||||
this.showUploadAnimation = false
|
||||
this.uploadQueue = 0
|
||||
this.animationText = '识别中'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -86,6 +138,86 @@ export default {
|
|||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 全局上传动画样式
|
||||
.global-upload-animation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
|
||||
.animation-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.animation-content {
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
||||
padding: 40px 50px;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 10px 40px rgba(31, 114, 234, 0.15),
|
||||
0 0 0 1px rgba(31, 114, 234, 0.1);
|
||||
min-width: 280px;
|
||||
animation: slideInUp 0.3s ease-out;
|
||||
|
||||
.spinner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 4px solid #f3f7ff;
|
||||
border-top: 4px solid #1F72EA;
|
||||
border-radius: 50%;
|
||||
animation: spin 1.2s linear infinite;
|
||||
margin: 0 auto 20px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border: 4px solid transparent;
|
||||
border-top: 4px solid #4A8BFF;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-text {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1F72EA;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.animation-subtext {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
|
|
@ -106,14 +238,12 @@ export default {
|
|||
border-radius: 16px 16px 16px 16px;
|
||||
min-height: 600px;
|
||||
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
|
||||
// border: 1px solid #e8f4ff;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -156,4 +286,27 @@ export default {
|
|||
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue