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

<template>
    <div class="bigone">
        <!-- 标题和目录 -->
        <xiding>
            <div style="padding: 0 0.9rem 0 0.5rem;">
                <div class="containerheadone" id="listtop">
                    <Title :basicInfo="basicInformation"></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 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>
        </xiding>
        <div class="containerbody" v-if="isContainerVisible" @srorll="handleScroll">
            <!-- 基本信息 -->
            <div id="basic">
                <Basic :action="action" :basicInfo="basicInformation"
                    @update-data="handleDataUpdate('basicInformation', $event)">
                </Basic>
            </div>
            <!-- 规划信息 -->
            <div id="programme">
                <Programme :action="action" :planInfo="planInformation" :xmId="projectId"
                    @update-data="handleDataUpdate('planInformation', $event)">
                </Programme>
            </div>
            <!-- 建筑信息 -->
            <div id="buildings">
                <Buildings :action="action" :xmId="projectId"></Buildings>
            </div>
            <!-- 要素模型信息 -->
            <div id="models">
                <Models :action="action" :wysmxInfo="wysmxInformations"
                    @updata-data="handleDataUpdate('wysmxInformations', $event)">
                </Models>
            </div>
            <!-- 月度进展信息 -->
            <div id="months">
                <Months :action="action" :xmId="projectId"></Months>
            </div>
            <!-- 企业入驻信息 -->
            <div id="companyenter">
                <Companyenter :xmId="projectId" :action="action" :qyrzInfo="qyrzInformation"
                    @update-data="handleDataUpdate('qyrzInformation', $event)">
                </Companyenter>
            </div>
            <!-- 项目画像 -->
            <div id="projectpicture">
                <Projectpicture :action="action" :id="projectId"></Projectpicture>
            </div>
            <!-- 项目图例 -->
            <div id="projectpicturetwo">
                <Projectdraw :action="action" :xmId="projectId"> </Projectdraw>
            </div>
            <!-- 项目巡礼 -->
            <div id="projectgift">
                <Projectgift :action="action" :xmId="projectId"></Projectgift>
            </div>
            <!-- 现场实况 -->
            <div id="liver">
                <Liver :action="action"></Liver>
            </div>
            <!-- 项目备忘录 -->
            <div id="memo">
                <Memo :action="action" :xmId="projectId"></Memo>
            </div>
            <!-- 其他信息 -->
            <div class="bottombox" id="others">
                <Others :action="action" :xmId="projectId" :anotherInfo="projectOtherInfos"
                    @update-data="handleDataUpdate('projectOtherInfos', $event)">
                </Others>
            </div>
            <div class="footer">
                <el-button type="primary"
                    v-if="(checkRole(['company']) && !isSubmitted && action === 'fill') || action === 'fill'"
                    @click="submitAll">提交审核</el-button>
                <el-button type="primary"
                    v-if="(checkRole(['company']) && !isSubmitted && action === 'fill') || action === 'fill'"
                    @click="saveAll">暂存</el-button>
            </div>
        </div>
        <!-- 返回顶部 -->
        <el-backtop target=".containerbody" :visibility-height="200" :bottom="50" :right="10" style="z-index: 1000;">
        </el-backtop>
    </div>
</template>

<script>
import xiding from "./index2.vue"
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 Projectdraw from '@/views/components/ProjectDetails/Projectdraw.vue';
import Others from '@/views/components/ProjectDetails/Others.vue';
import { checkPermi, checkRole } from "@/utils/permission";
import { getBasicInformationById, fillBasicInformation, auditBasicInformation, tempBasicInformation, getqyBasicInformationPage } from '@/api/ManageApi/index';

export default {
    components: {
        Title,
        Basic,
        Buildings,
        Companyenter,
        Liver,
        Memo,
        Models,
        Months,
        Programme,
        Projectgift,
        Projectpicture,
        Projectdraw,
        Others,
        xiding
    },
    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,
            isSubmitted: false,
            basicInformation: {
                acceptanceTime: "",
                begainTime: "",
                endTime: "",
                fj: "",
                introduction: "",
                issuingTime: "",
                jsdd: "",
                jsjd: "",
                jsms: 0,
                label: "",
                latitude: "",
                longitude: "",
                name: "",
                nature: 0,
                id: 0,
                phone: "",
                prioritize: "",
                projectLeader: "",
                sgdw: "",
                sjdw: "",
                ssgnq: 0,
                status: 0,
                tyshxydm: "",
                unitIntroduction: "",
                xmfrdwxz: "",
                xzfl: 0,
                zjzmj: 0,
                ztze: 0,
                zydmj: 0
            },
            planInformation: {
                bzcjzmj: 0,
                dsjzmj: 0,
                dxjzmj: 0,
                fhdj: "",
                fjdctcw: 0,
                ghwj: "",
                jdctcw: 0,
                jrjljzmj: 0,
                jzds: 0,
                jzmd: 0,
                ldl: 0,
                id: 0,
                rjl: 0,
                xmId: 0,
                zgjzcs: 0,
                zgjzgd: 0,
                zjzmj: 0,
                zydmj: 0
            },
            projectOtherInfos: [],
            wysmxInformations: [],
            qyrzInformation: {
                gycfpjwyf: 0,
                gycfpjzj: 0,
                kzczmj: 0,
                params: {},
                remark: "",
                rysl: 0,
                id: 0,
                rzl: 0,
                rzqyhylx: "",
                rzqys: 0,
                xmId: 0,
                yczmj: 0
            },
            projectRemarks: [],
            loading: false,
        };
    },
    created() {
    // 从路由参数中获取 projectId
    this.projectId = Number(this.$route.params.id);
    this.loadData();
    this.action = this.$route.query.action;
    this.loadData();
    // 添加滚动监听
    window.addEventListener("scroll", this.handleScroll);
    const container = document.querySelector(".containerbody");
    if (container) {
      container.addEventListener("scroll", this.handleScroll);
    }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    const container = document.querySelector(".containerbody");
    if (container) {
      container.removeEventListener("scroll", this.handleScroll);
    }
  },
    methods: {
        checkPermi,
        checkRole,
        loadData() {
            this.loading = true; 
            getBasicInformationById(this.projectId).then(response => {
                const data = response.data;
                this.basicInformation = data.basicInformation;
                this.planInformation = data.planInformation;
                this.projectOtherInfos = data.projectOtherInfos;
                this.wysmxInformations = data.wysmxResponses;
                this.qyrzInformation = data.qyrzInformation;
                this.projectRemarks = data.projectRemarks;

            }).finally(() => {
                this.loading = false;
            });
        },
        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); 
        },
        handleScroll() {
      // 获取滚动容器
      const container = document.querySelector(".containerbody");
      if (!container) return;

      // 获取容器的滚动位置
      const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮

      // 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分
      for (let i = this.sections.length - 1; i >= 0; i--) {
        const element = document.getElementById(this.sections[i].id);
        if (element) {
          // 计算元素相对于滚动容器的位置
          const elementPosition = element.offsetTop - container.offsetTop;

          if (elementPosition <= scrollPosition) {
            if (this.activeSection !== this.sections[i].id) {
              this.activeSection = this.sections[i].id;
            }
            break;
          }
        }
      }
    },
        // 子组件的
        handleDataUpdate(dataKey, updatedData) {
            if (dataKey === 'projectOtherInfos' || dataKey === 'wysmxInformations') {
                if (Array.isArray(updatedData)) {
                    this[dataKey] = updatedData;
                } else {
                    this[dataKey].push(updatedData);
                }
            } else {
                this[dataKey] = updatedData;
            }
            console.log(`接收到 ${dataKey} 1234更新:`, updatedData);
        },

        isDefault(obj, defaultObj) {
            for (const key in defaultObj) {
                if (obj[key] !== defaultObj[key]) {
                    return false;
                }
            }
            return true;
        },
        // 暂存数据
        saveAll() {
            // 全局加载动画
            const loading = this.$loading({
                lock: true,
                text: '正在暂存中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            const tempData = this.prepareSubmitData(); // 复用数据

            tempBasicInformation(tempData)
                .then(response => {
                    this.$message.success('暂存成功');
                })
                .catch(error => {
                    this.$message.error('暂存失败');
                })
                .finally(() => {
                    // 关闭动画
                    loading.close();
                });
        },
        // 获取企业入驻总数
        async getEnterpriseCount() {
            try {
                const params = { xmId: this.projectId, current: 1, size: 1 }; // 只需要总数，size=1
                const response = await getqyBasicInformationPage(params);
                return response.data.total || 0; // 返回总数，默认为0
            } catch (error) {
                return 0;
            }
        },
        // 提交数据
        async submitAll() {
            // 创建全局加载动画
            const loading = this.$loading({
                lock: true,
                text: '正在提交...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            // 校验 wysmxInformations
            if (this.wysmxInformations.length === 0 || this.wysmxInformations.includes(null)) {
                this.$message.error('请填写模型管理信息');
                loading.close();
                return;
            }

            // 校验 qyrzInformation 的 rzqys
            const rzqys = await this.getEnterpriseCount();
            if (rzqys === 0 || rzqys === null || rzqys === undefined) {
                this.$message.error('请先导入企业入驻信息');
                loading.close();
                return;
            }

            // 校验 planInformation 
            const planRequiredFields = ['zydmj', 'rjl', 'zjzmj', 'jzds', 'zgjzcs', 'fhdj'];
            const planMissingFields = planRequiredFields.filter(field => !this.planInformation[field]);
            if (planMissingFields.length > 0) {
                this.$message.error('请填写完整的规划信息');
                loading.close();
                return;
            }

            // 校验 basicInformation 
            const basicRequiredFields = ['ssgnq', 'begainTime', 'endTime', 'xzfl', 'jsms'];
            const basicMissingFields = basicRequiredFields.filter(field => !this.basicInformation[field]);
            if (basicMissingFields.length > 0) {
                this.$message.error('请填写完整的基本信息');
                loading.close();
                return;
            }



            // 准备数据并提交
            const submitData = this.prepareSubmitData();
            // console.log('准备提交的完整数据:', JSON.stringify(submitData, null, 2)); 

            fillBasicInformation(submitData)
                .then(response => {
                    this.$message.success('提交成功');
                    this.isSubmitted = true;
                    this.$router.push('/manage');
                })
                .catch(error => {
                    this.$message.error('提交失败');
                    console.error('提交错误:', error);
                })
                .finally(() => {
                    loading.close();
                });
        },

        // 审核通过的提交数据
        aduitAll() {
            this.loading = true;
            const submitData = this.prepareSubmitData();

            auditBasicInformation(submitData)
                .then(response => {
                    console.log('提交成功:', response);
                    this.$message.success('审核通过');
                    this.isContainerVisible = false;
                    this.isSubmitted = true;
                    this.$router.push('/manage');
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        // 准备数据（供暂存和提交共用）
        prepareSubmitData() {
            return {
                basicInformation: this.basicInformation,
                planInformation: this.planInformation,
                projectOtherInfos: this.projectOtherInfos,
                qyrzInformation: this.qyrzInformation,
                wysmxInformations: this.formatWysmxData()
            };
        },

        // 格式化要素模型数据
        formatWysmxData() {
            return this.wysmxInformations.flatMap(item =>
                item.list.map(listItem => ({
                    id: listItem.id,
                    createTime: this.formatDate(new Date()),
                    updateTime: this.formatDate(new Date()),
                    xmId: this.projectId,
                    ysmc: item.ysmc,
                    zdinfor: listItem.zdinfor,
                    zdname: listItem.zdname,
                    createBy: "",
                    updateBy: "",
                    createId: 0,
                    updateId: 0
                }))
            );
        },

        // 日期格式化方法
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },

    }
};
</script>

<style scoped>
.containerbody {
    height: calc(100% - 7rem);
    padding: .3rem .5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
}

.containerheadone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 1rem 0 .7rem;
    background-color: #fff;
}

.containerhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #FFFFFF;
}

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

.custom-menu-item {
    color: #3D424C;
    width: auto;
    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;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.message-notice {
    position: fixed;
    bottom: 40%;
    right: 1%;
    z-index: 1000;
    font-size: 23px;
    cursor: pointer;
}

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