Gyyq-Upstairs/src/views/manage-add/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>
          <div style="display: flex; gap: 5%; width: auto">
            <div v-if="checkRole(['common']) && action === 'okay'">
              <el-button
                type="primary"
                v-if="checkRole(['common'])"
                @click="aduitAlltwo"
                >保存</el-button
              >
            </div>
            <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>
        <!-- 目录 -->
        <div class="containerhead">
          <el-menu
            :default-active="activeSection"
            mode="horizontal"
            @select="scrollToSection"
            class="custom-menu"
            ref="menuRef"
            @click="handleMenuClick"
            @mousedown.native.prevent
          >
            <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" @scroll="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" :zwId="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" v-if="checkRole(['common']) && action === 'fill'">
        <el-button type="primary" v-if="checkRole(['common'])" @click="aduitAll"
          >审核通过</el-button
        >
      </div>
    </div>
    <!-- 返回顶部 -->
    <el-backtop
      target=".containerbody"
      :visibility-height="200"
      :bottom="50"
      :right="10"
      style="z-index: 1000; border: 1px solid #2b62f1"
    >
    </el-backtop>
    <!-- 消息提醒 -->
    <div class="message-notice">
      <el-tooltip
        class="item"
        effect="dark"
        content="新增智能提醒"
        placement="top-start"
      >
        <Supericon :xmId="projectId" />
      </el-tooltip>
    </div>
  </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 Supericon from "@/views/components/ProjectDetails/supervisionicon.vue";
import { checkPermi, checkRole } from "@/utils/permission";
import {
  getzwBasicInformationById,
  fillBasicInformation,
  auditBasicInformation,
  tempBasicInformation,
} from "@/api/ManageApi/index";

export default {
  components: {
    xiding,
    Title,
    Basic,
    Buildings,
    Companyenter,
    Liver,
    Memo,
    Models,
    Months,
    Programme,
    Projectgift,
    Projectpicture,
    Projectdraw,
    Others,
    Supericon,
  },
  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,
      scrollTimeout: null,
    };
  },
  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);
    }
  },
  computed: {
    showCompanySection() {
      const isCompany = this.checkRole(["company"]);
      const isCommon = this.checkRole(["common"]);
      // 隐藏企业端
      return isCompany && !isCommon;
    },
  },
  methods: {
    checkPermi,
    checkRole,
    loadData() {
      getzwBasicInformationById(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;
      });
    },
    scrollToSection(id) {
      this.activeSection = id;
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    handleDataUpdate(dataKey, updatedData) {
      if (dataKey === "projectOtherInfos" || dataKey === "wysmxInformations") {
        if (Array.isArray(updatedData)) {
          this[dataKey] = updatedData;
        } else {
          this[dataKey].push(updatedData);
        }
      } else {
        this[dataKey] = updatedData;
      }
    },
    isDefault(obj, defaultObj) {
      for (const key in defaultObj) {
        if (obj[key] !== defaultObj[key]) {
          return false;
        }
      }
      return true;
    },
    saveAll() {
      this.loading = true;
      const tempData = this.prepareSubmitData();
      tempBasicInformation(tempData)
        .then((response) => {
          this.$message.success("暂存成功");
          console.log("暂存数据:", response);
        })
        .catch((error) => {
          this.$message.error("暂存失败");
          console.error("暂存错误:", error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitAll() {
      this.loading = true;
      const submitData = this.prepareSubmitData();
      fillBasicInformation(submitData)
        .then((response) => {
          this.$message.success("提交成功");
          this.isSubmitted = true;
          this.$router.push("/manage");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    aduitAll() {
      const loading = this.$loading({
        lock: true,
        text: "正在提交审核...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const submitData = this.prepareSubmitData();

      auditBasicInformation(submitData)
        .then((response) => {
          this.$message.success("审核通过");
          this.isSubmitted = true;
          this.$router.push("/manage");
        })
        .catch((error) => {
          this.$message.error("审核失败");
        })
        .finally(() => {
          loading.close();
        });
    },
    aduitAlltwo() {
      const loading = this.$loading({
        lock: true,
        text: "正在提交修改...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const submitData = this.prepareSubmitData();

      auditBasicInformation(submitData)
        .then((response) => {
          this.$message.success("修改成功");
          this.isSubmitted = true;
          this.$router.push("/manage");
        })
        .catch((error) => {
          this.$message.error("修改失败");
        })
        .finally(() => {
          loading.close();
        });
    },
    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}`;
    },
    handleScroll() {
      const container = document.querySelector(".containerbody");
      if (!container) return;
      if (this.scrollTimeout) {
        clearTimeout(this.scrollTimeout);
      }
      this.scrollTimeout = setTimeout(() => {
        const scrollPosition = container.scrollTop;
        if (scrollPosition > this.lastScrollTop) {
          this.scrollDirection = 'down';
        } else {
          this.scrollDirection = 'up';
        }
        this.lastScrollTop = scrollPosition;
        const offset = this.scrollDirection === 'down' ? 500 : 200;
        const adjustedScrollPosition = scrollPosition + offset;
        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 <= adjustedScrollPosition) {
              if (this.activeSection !== this.sections[i].id) {
                this.activeSection = this.sections[i].id;
              }
              break;
            }
          }
        }
      }, 50);
    },
    handleMenuClick() {
      if (this.$refs.menuRef) {
          this.$refs.menuRef.$el.blur();
      }
    },
  },
};
</script>

<style scoped>
.containerbody {
  height: calc(100% - 7rem);
  padding: 0.3rem 0.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 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;
  box-shadow: 0 2px 8px rgba(43, 98, 241, 0.3);
}

/* 悬停 */
.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>