smart-bid-web/src/views/enterpriseLibrary/personnel/components/PersonnelForm.vue

<!-- 新增人员表单 -->
<template>
    <div class="app-container" :class="{ 'no-pointer-events': showUploadAnimation || showSaveAnimation }">
        <!-- 全局上传动画 -->
        <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 v-if="showSaveAnimation" class="global-upload-animation">
            <div class="animation-mask"></div>
            <div class="animation-content">
                <div class="spinner"></div>
                <div class="animation-text">数据上传中</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>
        </div>
        <div class="content-body">
            <el-row :gutter="24" class="content-row">
                <!-- 基本信息 -->
                <el-col :span="6" class="pane-left">
                    <BasicInfoPersonnel ref="basicInfoPersonnel" @handlePersonnelPosition="handlePersonnelPosition" />
                </el-col>
                <!-- 资质信息 -->
                <el-col :span="6" class="pane-center" v-if="!isProjectChiefEngineer">
                    <QualificationInfoPersonnel ref="qualificationInfoPersonnel" :personnelPosition="personnelPosition" />
                </el-col>
                <!-- 其他信息 -->
                <el-col :span="6" class="pane-right">
                    <OtherInfoPersonnel ref="otherInfoPersonnel" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { encryptWithSM4,decryptWithSM4 } from '@/utils/sm'
import BasicInfoPersonnel from './child/BasicInfo.vue'
import QualificationInfoPersonnel from './child/QualificationInfo.vue'
import OtherInfoPersonnel from './child/OtherInfo.vue'
import { addDataAPI, editDataAPI, getDetailDataAPI } from '@/api/enterpriseLibrary/personnel/personnel'
export default {
    name: 'PersonnelForm',
    components: {
        BasicInfoPersonnel,
        QualificationInfoPersonnel,
        OtherInfoPersonnel
    },
    data() {
        return {
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
            personnelId: decryptWithSM4(this.$route.query.personnelId),
            type: decryptWithSM4(this.$route.query.type),
            // 默认人员职位为项目经理
            personnelPosition: {
                label: '项目经理',
                value: 'project_manager',
                qualification:'建造师证书、安全考核B证'
            },
            showUploadAnimation: false,
            showSaveAnimation: false, // 新增：保存动画状态
            uploadQueue: 0, // 上传队列计数器
            animationText: '识别中',
            isSaving: false, // 新增：保存按钮loading状态
            detailData: {} // 详情数据
        }
    },
    methods: {
        // 返回
        handleClose() {
            const obj = { path: "/personnel/index",
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                }
             }
            this.$tab.closeOpenPage(obj)
        },
        // 人员职位
        handlePersonnelPosition(data) {
            this.personnelPosition = data;
        },
        // 获取资源文件
        getResourceFilePo(fileList) {
            let resourceFiles = fileList.map(file => {
                return file?.response?.fileRes ? {
                    ...file.response.fileRes,
                } : null;
            }).filter(item => item !== null);
            return resourceFiles && resourceFiles.length > 0 ? resourceFiles[0] : null;
        },
        // 获取建造师证书数据
        getBuilderCertificateData(raw) {
            return {
                professionalType: raw.professionalType,
                certificateCode: raw.certificateCode,
                certificateLevel: raw.certificateLevel,
                certificateValidityPeriod: raw.certificateValidityPeriod[0] + '-' + raw.certificateValidityPeriod[1],
                useValidityPeriod: raw.useValidityPeriod[0] + '-' + raw.useValidityPeriod[1],
                certificateType:'econstructor_certificate'

            }
        },
        // 获取证书类型
        getCertificateType(fileList) {
            let resourceFiles = fileList.map(file => {
                return file?.response?.fileRes ? {
                    ...file.response.fileRes,
                } : { ...file };
            });
            return resourceFiles && resourceFiles.length > 0 ? (resourceFiles[0].businessType || resourceFiles[0].fileType) : '';
        },
        // 获取 B证、C证、其他证书数据
        getOtherCertificateData(raw) {
            return {
                certificateCode: raw.certificateCode2,
                certificateValidityPeriod: raw.certificateValidityPeriod2[0] + '-' + raw.certificateValidityPeriod2[1],
                registerProfessional: raw.registerProfessional,
                certificateType: this.getCertificateType(raw.fileList2)
            }
        },
        // 获取职称证书数据
        getTitleData(raw) {
            return {
                titleName: raw.professionalType,
                professionalName: raw.professionalType,
                certificateCode: raw.certificateCode,
                certificateType:'professional_title_certificate'
            }
        },
        // 保存
        async handleSave() {
            // 如果正在保存中，直接返回
            if (this.isSaving) {
                return
            }

            this.isSaving = true
            this.showSaveAnimation = true

            try {
                // 并行校验所有表单
                const [basicInfoData, qualificationData, otherData] = await Promise.all([
                    this.$refs.basicInfoPersonnel.validate(),
                    this.$refs.qualificationInfoPersonnel.validate(),
                    this.$refs.otherInfoPersonnel.validate()
                ])

                // 所有校验通过，组装完整数据
                let formData = {
                    ...basicInfoData,
                    allFiles: [
                        ...basicInfoData.fileList.map(file => JSON.parse(JSON.stringify(file))),
                        ...basicInfoData.fileList2.map(file => JSON.parse(JSON.stringify(file))),
                        ...basicInfoData.fileList3.map(file => JSON.parse(JSON.stringify(file))),
                        ...basicInfoData.fileList4.map(file => JSON.parse(JSON.stringify(file))),
                    ],
                    delFiles: [
                        ...basicInfoData.delFileList,
                    ]
                }

                console.log('所有表单校验通过，完整数据:', formData)

                // 人员相关文件
                let allFiles = formData.allFiles.map(file => {
                    return file?.response?.fileRes ? {
                        ...file.response.fileRes,
                    } : null;
                }).filter(item => item !== null);
                
                // 人员相关证书文件
                let personnelCertificateFiles = [];
                if(qualificationData.fileList){
                    // 建造师证书
                    let obj = {
                        personnelCertificate: this.getBuilderCertificateData(qualificationData),
                        resourceFilePo: this.getResourceFilePo(qualificationData.fileList),
                        delFileList: null,
                    };
                    
                    personnelCertificateFiles.push(obj);
                }
                if(qualificationData.fileList2){
                    // 建造师证书、B证、C证 其他证书
                    let obj = {
                        personnelCertificate: this.getOtherCertificateData(qualificationData),
                        resourceFilePo: this.getResourceFilePo(qualificationData.fileList2),
                        delFileList: null,
                    };
                    personnelCertificateFiles.push(obj);
                }
                if(otherData.fileList){
                    // 职称证书
                    let obj = {
                        personnelCertificate: this.getTitleData(otherData),
                        resourceFilePo: this.getResourceFilePo(otherData.fileList),
                        delFileList: otherData.delFileList,
                    };
                    personnelCertificateFiles.push(obj);
                }
                formData.files = allFiles;
                formData.enterpriseId = this.enterpriseId;
                formData.personnelCertificateFiles = personnelCertificateFiles;
                formData.personnelIntroduction = otherData.personnelIntroduction;

                // 删除不必要的属性
                delete formData.fileList;
                delete formData.fileList2;
                delete formData.fileList3;
                delete formData.fileList4;
                delete formData.delFileList;
                delete formData.allFiles;
                console.log('所有表单校验通过，完整数据2222222:', formData)
                // 保存请求
                /* const res = await this.savePersonnel(formData)
                console.log('res:', res);
                if (res.code === 200) {
                    this.$message.success('保存成功')
                    this.handleClose()
                } */
            } catch (error) {
                console.error('保存失败:', error)
            } finally {
                // 无论成功失败，都关闭动画
                this.isSaving = false
                this.showSaveAnimation = false
            }
        },
        // 保存接口
        async savePersonnel(formData) {
            return new Promise((resolve, reject) => {
                if (this.type === 'add') { // 新增
                    addDataAPI(formData).then(res => {
                        resolve(res)
                    }).catch(error => {
                        reject(error)
                    })
                } else { // 修改
                    formData.personnelId = this.personnelId;
                    editDataAPI(formData).then(res => {
                        resolve(res)
                    }).catch(error => {
                        reject(error)
                    })
                }

            })
        },
        // 开始上传
        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.showSaveAnimation = false
        this.uploadQueue = 0
        this.animationText = '识别中'
        this.isSaving = false
    },
    computed: {
        // 是否为项目总工
        isProjectChiefEngineer() {
            return this.personnelPosition.value === 'project_chief_engineer';
        }
    }

}
</script>

<style scoped lang="scss">
.app-container {
    padding: 24px;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
    min-height: 100vh;
    overflow-y: auto;
    position: relative;

    // 当显示动画时，禁用页面点击
    &.no-pointer-events {
        pointer-events: none;

        // 子元素也继承禁用点击
        * {
            pointer-events: none;
        }
    }
}

// 全局上传动画样式
.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: auto;

    .animation-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.6); // 添加半透明背景
        backdrop-filter: blur(4px);

        // 遮罩层阻止点击
        pointer-events: auto;
    }

    .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;

        // 动画内容可以有点击事件
        pointer-events: auto;

        .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 {
    margin-top: 20px;
}

.content-row {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.pane-left,
.pane-center,
.pane-right {
    background: #fff;
    border-radius: 16px 16px 16px 16px;
    min-height: 600px;
    box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
    padding: 0;
    margin-bottom: 20px;
    flex: 1;
    min-width: 0;
}

.content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.search-btn {
    width: 98px;
    height: 36px;
    background: #1F72EA;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }

    // 当按钮处于loading状态时的样式
    &.is-loading {
        opacity: 0.7;
        pointer-events: none;
    }
}

.reset-btn {
    width: 98px;
    height: 36px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
    border-radius: 4px;
    border: none;
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #f5f5f5;
        color: #409EFF;
        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>