smart-bid-web/src/views/enterpriseLibrary/technical/components/TechnicalDetail.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="basicInfo" :detailData="detailData" />
                </el-col>
                <!-- 文件上传 -->
                <el-col :span="6" class="pane-center">
                    <FileInfoDetail ref="fileInfo" :detailData="detailData" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { encryptWithSM4,decryptWithSM4 } from '@/utils/sm'
import BasicInfoDetail from './child/BasicInfoDetail.vue'
import FileInfoDetail from './child/FileInfoDetail.vue'
import { getDetailDataAPI } from '@/api/enterpriseLibrary/technical/technical'

export default {
    name: 'TechnicalDetail',
    components: {
        BasicInfoDetail,
        FileInfoDetail,
    },
    data() {
        return {
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
            technicalSolutionTypeId: decryptWithSM4(this.$route.query.technicalSolutionTypeId),
            technicalSolutionId: decryptWithSM4(this.$route.query.technicalSolutionId),
            type: decryptWithSM4(this.$route.query.type),
            showUploadAnimation: false,
            detailData: {} // 详情数据
        }
    },
    created() {
        this.getDetail()
    },
    methods: {

        // 返回
        handleClose() {
            const obj = {
                path: "/technical/index",
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                    checkedCategory: encryptWithSM4(this.technicalSolutionTypeId + ''),
                }
            }
            this.$tab.closeOpenPage(obj)
        },
        // 获取详情
        async getDetail() {
            if (this.type === 'detail') {
                const res = await getDetailDataAPI({ technicalSolutionTypeId: this.technicalSolutionTypeId, 
                    technicalSolutionId: this.technicalSolutionId ,type:'detail'})
                console.log('res:', res);
                this.detailData = res.data;
            }
        },
        // 编辑
        handleEdit() {
            this.$router.push({
                name: 'TechnicalEdit',
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                    technicalSolutionTypeId: encryptWithSM4(this.technicalSolutionTypeId || '0'),
                    type: encryptWithSM4('edit'),
                    technicalSolutionId: encryptWithSM4(this.technicalSolutionId + '' || '0'),
                }
            })
        },
    },
}
</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;
        }
    }
}

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

.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: #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>