Gyyq-Upstairs/src/views/manage-info/index.vue

<template>
    <div class="bigone">
        <!-- 标题 -->
        <div class="containerheadone" id="listtop">
            <Title :id="projectId"></Title>
            <el-button type="primary" size="medium" plain
                style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="goBack">
                返回
            </el-button>
        </div>
        <div style="display: flex;justify-content: center;">
            <el-button type="primary" v-if="isSubmitted" disabled>已提交</el-button>
        </div>
        <div class="containerbody" v-if="isContainerVisible">
            <!-- 目录 -->
            <div class="containerhead">
                <el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection"
                    class="custom-menu">
                    <el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id"
                        class="custom-menu-item">
                        {{ item.label }}
                    </el-menu-item>
                </el-menu>
            </div>
            <!-- 基本信息 -->
            <div id="basic">
                <Basic :basicInfo="basicInformation" @update-data="handleDataUpdate('basicInformation', $event)">
                </Basic>
            </div>
            <!-- 规划信息 -->
            <div id="programme">
                <Programme :planInfo="planInformation" @update-data="handleDataUpdate('planInformation', $event)">
                </Programme>
            </div>
            <!-- 建筑信息 -->
            <div id="buildings">
                <!-- <Buildings :buildingInfo="buildingInformation"></Buildings> -->
            </div>
            <!-- 要素模型信息 -->
            <div id="models">
                <Models :wysmxInfo="wysmxInformations" @updata-data="handleDataUpdate('wysmxInformations', $event)">
                </Models>
            </div>
            <!-- 月度进展信息 -->
            <div id="months">
                <!-- <Months></Months> -->
            </div>
            <!-- 企业入驻信息 -->
            <div id="companyenter">
                <Companyenter :qyrzInfo="qyrzInformation" @update-data="handleDataUpdate('qyrzInformation', $event)">
                </Companyenter>
            </div>
            <!-- 项目画像 -->
            <div id="projectpicture">
                <!-- <Projectpicture></Projectpicture> -->
            </div>
            <!-- 项目图例 -->
            <div id="projectpicturetwo">
                <!-- <Projectpicturetwo :id="projectId"></Projectpicturetwo> -->
            </div>
            <!-- 项目巡礼 -->
            <div id="projectgift">
                <!-- <Projectgift></Projectgift> -->
            </div>
            <!-- 现场实况 -->
            <div id="liver">
                <!-- <Liver></Liver> -->
            </div>
            <!-- 项目备忘录 -->
            <div id="memo">
                <!-- <Memo :xmId="projectId"></Memo> -->
            </div>
            <!-- 其他信息 -->
            <div class="bottombox" id="others">
                <Others :anotherInfo="projectOtherInfos" @update-data="handleDataUpdate('projectOtherInfos', $event)">
                </Others>
            </div>
            <div class="footer">
                <el-button type="primary" v-if="checkRole(['admin', 'common']) && !isSubmitted">审核通过</el-button>
                <el-button type="primary" v-if="checkRole(['admin', 'company']) && !isSubmitted"
                    @click="submitAll">提交审核</el-button>
            </div>
        </div>
        <!-- 返回顶部按钮 -->
        <el-button icon="el-icon-caret-top" circle id="back-to-top" @click="scrollToTop" plain></el-button>
    </div>
</template>

<script>
import Title from '@/views/components/ProjectDetails/Title.vue';
import Basic from '@/views/components/ProjectDetails/Basic.vue';
import Buildings from '@/views/components/ProjectDetails/Buildings.vue';
import Companyenter from '@/views/components/ProjectDetails/Companyenter.vue';
import Liver from '@/views/components/ProjectDetails/Liver.vue';
import Memo from '@/views/components/ProjectDetails/Memo.vue';
import Models from '@/views/components/ProjectDetails/Models.vue';
import Months from '@/views/components/ProjectDetails/Months.vue';
import Programme from '@/views/components/ProjectDetails/Programme.vue';
import Projectgift from '@/views/components/ProjectDetails/Projectgift.vue';
import Projectpicture from '@/views/components/ProjectDetails/Projectpicture.vue';
import Projectpicturetwo from '@/views/components/ProjectDetails/Projectpicturetwo.vue';
import Others from '@/views/components/ProjectDetails/Others.vue';
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import { getBasicInformationById } from '@/api/ManageApi/index';

export default {
    components: {
        Title,
        Basic,
        Buildings,
        Companyenter,
        Liver,
        Memo,
        Models,
        Months,
        Programme,
        Projectgift,
        Projectpicture,
        Projectpicturetwo,
        Others,
    },
    data() {
        return {
            activeSection: 'basic',
            sections: [
                { id: 'basic', label: '基本信息' },
                { id: 'programme', label: '规划信息' },
                { id: 'buildings', label: '建筑信息' },
                { id: 'models', label: '要素模型信息' },
                { id: 'months', label: '月度进展信息' },
                { id: 'companyenter', label: '企业入驻信息' },
                { id: 'projectpicture', label: '项目画像' },
                { id: 'projectpicturetwo', label: '项目图例' },
                { id: 'projectgift', label: '项目巡礼' },
                { id: 'liver', label: '现场实况' },
                { id: 'memo', label: '项目备忘录' },
                { id: 'others', label: '其他信息' }
            ],
            projectId: null,
            isContainerVisible: true, // 控制 containerbody 的显示状态
            isSubmitted: false, // 控制提交审核按钮的状态和文本内容
            basicInformation: {},
            planInformation: {},
            projectOtherInfos: [],
            wysmxInformations: [],
            qyrzInformation: {},
        };
    },
    created() {
        // 从路由参数中获取 projectId
        this.projectId = Number(this.$route.params.id);
        this.loadData();
    },
    methods: {
        checkPermi,
        checkRole,
        loadData() {
            console.log('Loading data for project ID:', this.projectId);
            getBasicInformationById(this.projectId).then(response => {
                const data = response.data;
                this.basicInformation = data.basicInformation;
                this.planInformation = data.planInformation;
                this.buildingInformation = data.buildingInformation;
                this.projectOtherInfos = data.projectOtherInfos;
                this.wysmxInformations = data.wysmxResponses;
                this.qyrzInformation = data.qyrzInformation;
                console.log(data);
            });
        },
        scrollToSection(id) {
            this.activeSection = id;
            const element = document.getElementById(id);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
        },
        scrollToTop() {
            const basicSection = document.getElementById('listtop');
            if (basicSection) {
                basicSection.scrollIntoView({ behavior: 'smooth' });
            }
        },
        goBack() {
            this.$router.go(-1); // 返回上一个页面
        },
        // 处理来自子组件的数据更新
        handleDataUpdate(dataKey, updatedData) {
            if (dataKey === 'projectOtherInfos' || dataKey === 'wysmxInformations') {
                // 确保 updatedData 是数组
                if (Array.isArray(updatedData)) {
                    this[dataKey] = updatedData;
                } else {
                    // 如果 updatedData 不是数组，则将其添加到相应的数组中
                    this[dataKey].push(updatedData);
                }
            } else {
                this[dataKey] = updatedData;
            }
            console.log(`接收到 ${dataKey} 更新:`, updatedData);
        },
        //提交数据
        submitAll() {
            const submitData = {
                basicInformation: this.basicInformation,
                planInformation: this.planInformation,
                projectOtherInfos: this.projectOtherInfos,
                wysmxInformations: this.wysmxInformations,
                qyrzInformation: this.qyrzInformation
                // 其他数据...
            };

            console.log('提交的数据:', submitData);
            this.$message.success('数据已打印到控制台');
            // 隐藏 containerbody
            this.isContainerVisible = false;
            // 设置按钮为已提交状态
            this.isSubmitted = true;
        }
    }
};
</script>

<style scoped>
.containerbody {
    height: auto;
    padding: .3rem .5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: auto;
}

.containerheadone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: 0 1rem 0 .7rem;
}

.containerhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.custom-menu {
    margin: 1rem;
    display: flex;
    gap: 1rem;
    border: none;
}

.custom-menu-item {
    color: #3D424C;
    width: 7.25rem;
    height: 2rem;
    background: #F4F7FE;
    border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 高亮 */
.custom-menu-item.is-active {
    background-color: #2B62F1;
    color: #fff !important;
}

/* 悬停 */
.custom-menu-item:hover {
    background-color: #2B62F1;
    color: #fff !important;
}

/* 默认的下划线 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: #2B62F1;
    border-bottom: none;
}

.bottombox {
    margin-bottom: 2rem;
}

.bigone {
    position: relative;
}

#back-to-top {
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 99;
    font-size: 18px;
}

.footer {
    display: flex;
    padding: 0 0 2rem 0;
    justify-content: center;
}
</style>