smart-bid-web/src/views/enterpriseLibrary/enterprise/components/EnterpriseDetail.vue

<!-- 企业主体库表单 -->
<template>
    <div class="app-container">
        <div class="content-header">
            <el-button class="reset-btn" @click="handleClose()">返回</el-button>
            <el-button class="edit-btn" @click="handleEdit()">编辑</el-button>
        </div>
        <div class="content-body">
            <el-row :gutter="24" class="content-row">
                <!-- 基本信息 -->
                <el-col :span="6" class="pane-left">
                    <BasicInfoDetail ref="basicInfoDetail" :detailData="detailData" />
                </el-col>
            </el-row>
            <el-row :gutter="24" class="content-row">
                <!-- 法人信息 -->
                <el-col :span="6" class="pane-center">
                    <LegalPersonDetail ref="legalPersonDetail" :detailData="detailData" />
                </el-col>

            </el-row>
            <el-row :gutter="24" class="content-row">
                <!-- 开户证明 -->
                <el-col :span="6" class="pane-right">
                    <AccountOpeningCertificateDetail ref="accountOpeningCertificateDetail" :detailData="detailData" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
import BasicInfoDetail from './child/BasicInfoDetail.vue'
import LegalPersonDetail from './child/LegalPersonDetail.vue'
import AccountOpeningCertificateDetail from './child/AccountOpeningCertificateDetail.vue'
import { getDetailDataAPI } from '@/api/enterpriseLibrary/enterprise/enterprise'

export default {
    name: 'EnterpriseDetail',
    components: {
        BasicInfoDetail,
        LegalPersonDetail,
        AccountOpeningCertificateDetail
    },
    data() {
        return {
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
            type: decryptWithSM4(this.$route.query.type),
            detailData: {} // 详情数据
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        // 返回
        handleClose() {
            const obj = { path: "/enterpriseLibrary/enterprise" }
            this.$tab.closeOpenPage(obj)
        },
        // 获取详情
        async getDetail() {
            const res = await getDetailDataAPI({ enterpriseId: this.enterpriseId })
            this.detailData = res.data;
        },
        // 编辑
        handleEdit() {
            this.$router.push({
                name: 'EnterpriseEditForm',
                query: {
                    type: encryptWithSM4('edit'),
                    enterpriseId: encryptWithSM4(this.detailData.enterpriseId + '' || '0'),
                }
            })
        }
    }

}
</script>

<style scoped lang="scss">
.app-container {
    height: calc(100vh - 84px);
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: 0;
}

.content-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
    min-height: 0; // 确保 flex 子元素可以正确收缩
}

.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: 300px;
    box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
    // border: 1px solid #e8f4ff;
    padding: 0;
    margin-bottom: 10px;
    flex: 1;
    min-width: 0;
}


.content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.edit-btn {
    width: 98px;
    height: 36px;
    background: #EAA819;
    box-shadow: 0px 4px 8px 0px rgba(255, 156, 51, 0.5);
    border-radius: 4px 4px 4px 4px;
    border-color: #EAA819;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #ffb733;
        border-color: #ffb733;
        box-shadow: 0px 6px 12px 0px rgba(255, 156, 51, 0.6);
        transform: translateY(-1px);
    }
}

.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: #606266;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #f5f7fa;
        color: #409EFF;
        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
    }
}
</style>