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

<!-- 企业主体库表单 -->
<template>
    <div class="app-container">
        <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 { decryptWithSM4 } from '@/utils/sm'
import BasicInfoPersonnel from './child/BasicInfo.vue'
import QualificationInfoPersonnel from './child/QualificationInfo.vue'
import OtherInfoPersonnel from './child/OtherInfo.vue'
export default {
    name: 'PersonnelForm',
    components: {
        BasicInfoPersonnel,
        QualificationInfoPersonnel,
        OtherInfoPersonnel
    },
    data() {
        return {
            id: decryptWithSM4(this.$route.query.id),
            type: decryptWithSM4(this.$route.query.type),
            // 人员职位
            personnelPosition: {
                label: '项目经理',
                value: 'project_manager',
                qualification:'建造师证书、安全考核B证'
            },
        }
    },
    methods: {
        // 返回
        handleClose() {
            const obj = { path: "/enterpriseLibrary/enterprise" }
            this.$tab.closeOpenPage(obj)
        },
        // 人员职位
        handlePersonnelPosition(data) {
            this.personnelPosition = data;
        },
        // 保存
       async handleSave() {
            try {
                // 并行校验所有表单
                const [basicInfoPersonnelData, qualificationInfoPersonnelData, otherInfoPersonnelData] = await Promise.all([
                    this.$refs.basicInfoPersonnel.validate(),
                    this.$refs.qualificationInfoPersonnel.validate(),
                    this.$refs.otherInfoPersonnel.validate()
                ])

                // 所有校验通过，组装完整数据
                const formData = {
                    ...basicInfoPersonnelData,
                    ...qualificationInfoPersonnelData,
                    ...otherInfoPersonnelData
                }

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

                // 这里可以调用保存接口
                // await this.saveEnterprise(formData)
                this.$message.success('保存成功')

            } catch (error) {
                // console.error('表单校验失败:', error)
                this.$message.error(error.message || '请完善表单信息')
            }
        }
    },
    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;
}

.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);
    // border: 1px solid #e8f4ff;
    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);
    }
}

.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);
    }
}
</style>