Platform/src/views/project/Project.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import useProjectID from "@/composables/useProjectID";
import { useRoute } from "vue-router";
import breadcrumbStore from "@/store/modules/breadcrumb";

const route = useRoute();

const { shouldRender, projectID } = useProjectID();

console.log("项目 ID", projectID.value);

const { setBreadcrumb } = breadcrumbStore;
setBreadcrumb([
  {
    label: "项目列表",
    path: "/project-list",
  },
  {
    label: "莲花路电力迁改项目",
  },
]);
</script>

<template>
  <article class="project-page" v-if="shouldRender">
    <header
      class="header"
      id="project-header"
      :class="{ 'short-header': route.fullPath.startsWith('/project/summary') }"
    >
      <h1 class="name">莲花路电力迁改项目</h1>
      <el-descriptions :column="4" size="mini">
        <el-descriptions-item label="申请单位："
          >某某建筑公司</el-descriptions-item
        >
        <el-descriptions-item label="审批单位："
          >某某审批单位</el-descriptions-item
        >
        <el-descriptions-item label="工程类型：">某某类型</el-descriptions-item>
        <el-descriptions-item label="项目编号：">100000</el-descriptions-item>
        <el-descriptions-item label="工程时间："
          >2022-01-01 至 2023-12-31</el-descriptions-item
        >
        <el-descriptions-item label="状态：">
          <el-tag size="small">待审批</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前流程：">
          <el-tag size="small" type="success">某某步骤</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="工程地址："
          >珠海市香洲区某某街道某某路100号</el-descriptions-item
        >
      </el-descriptions>

      <el-affix :offset="64">
        <ul class="nav">
          <router-link
            custom
            :to="`/project?projectID=${projectID}`"
            v-slot="{ navigate, isExactActive }"
          >
            <li
              class="item overview"
              @click="navigate"
              :class="{ 'exact-active': isExactActive }"
            >
              项目概况
            </li>
          </router-link>
          <router-link
            custom
            :to="`/project/process?projectID=${projectID}`"
            v-slot="{ navigate, isExactActive }"
          >
            <li
              class="item process"
              @click="navigate"
              :class="{ 'exact-active': isExactActive }"
            >
              项目流程
            </li>
          </router-link>
          <router-link
            custom
            :to="`/project/summary?projectID=${projectID}`"
            v-slot="{ navigate, isExactActive }"
          >
            <li
              class="item summary"
              @click="navigate"
              :class="{ 'exact-active': isExactActive }"
            >
              项目流汇总
            </li>
          </router-link>
          <!-- <router-link
            custom
            :to="`/project/report?projectID=${projectID}`"
            v-slot="{ navigate, isExactActive }"
          >
            <li class="item report" @click="navigate" :class="{ 'exact-active': isExactActive }">报表</li>
          </router-link> -->
        </ul>
      </el-affix>
    </header>
    <main class="main">
      <router-view></router-view>
    </main>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>