feat: 全局获取项目 ID

src/composables/useProjectID.ts

@@ -0,0 +1,33 @@
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { isNil } from 'lodash'
+
+// project 页面及其子页面获取项目 ID
+export default function useProjectID() {
+  const route = useRoute()
+  const router = useRouter()
+
+  // 是否已经获取到了 projectID
+  const shouldRender = ref(false)
+
+  // 项目 ID
+  let projectID = ''
+  watch(() => route.query.projectID, (val) => {
+    if (isNil(val) || val === '') {
+      router.replace('/project-list')
+    } else {
+      shouldRender.value = true
+      projectID = val as string
+    }
+  }, {
+    immediate: true
+  })
+
+  return {
+    // 是否已经获取到了 projectID, Ref 类型
+    shouldRender,
+    projectID
+  }
+}
+
+

src/views/project-list/ProjectList.vue

@@ -14,6 +14,7 @@ const inlineMode = ref(true)
 
 const list = [
   {
+    ID: '1',
     name: "市妇幼保健医院新址配套市政道路工程",
     process: "预算",
     step: "(2) 收件员预审项目",
@@ -23,6 +24,7 @@ const list = [
     offset: "0.00",
   },
   {
+    ID: '2',
     name: "梧桐路（石花西路）电力改迁工程",
     process: "结算",
     step: "(1) 建设单位报审项目",
@@ -32,6 +34,7 @@ const list = [
     offset: "0.00",
   },
   {
+    ID: '3',
     name: "珠海城市职业技术学院机电学院、航空与海洋工程珠海城市职业技术学院机电学院、航空与海洋工程",
     process: "预算",
     step: "(1) 建设单位报审项目",
@@ -41,6 +44,7 @@ const list = [
     offset: "0.00",
   },
   {
+    ID: '4',
     name: "珠海城市职业技术学院机电学院、航空与海洋工程",
     process: "预算",
     step: "(5) 主审人编制审核方案",
@@ -50,6 +54,7 @@ const list = [
     offset: "0.00",
   },
   {
+    ID: '5',
     name: "珠海城市职业技术学院机电学院、航空与海洋工程",
     process: "预算",
     step: "(5) 主审人编制审核方案",
@@ -62,6 +67,10 @@ const list = [
 list.push(...list)
 const projectList = reactive(list);
 
+const onSubmit = () => {
+  //
+}
+
 const { setBreadcrumb } = breadcrumbStore
 setBreadcrumb([
   {
@@ -120,7 +129,10 @@ setBreadcrumb([
       <el-table :data="projectList">
         <el-table-column prop="name" label="项目名称" :min-width="300">
           <template #default="scope">
-            <router-link to="/project" class="link">{{ scope.row.name }}</router-link>
+            <router-link
+              :to="`/project?projectID=${scope.row.ID}`"
+              class="link"
+            >{{ scope.row.name }}</router-link>
           </template>
         </el-table-column>
         <el-table-column prop="process" label="项目流程" :min-width="80" />

src/views/project/Project.vue

@@ -1,10 +1,17 @@
 <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)
+
 const { setBreadcrumb } = breadcrumbStore
 setBreadcrumb([
   {
@@ -18,7 +25,7 @@ setBreadcrumb([
 </script>
 
 <template>
-  <article class="project-page">
+  <article class="project-page" v-if="shouldRender">
     <header
       class="header"
       id="project-header"
@@ -42,40 +49,46 @@ setBreadcrumb([
 
       <el-affix :offset="64">
         <ul class="nav">
-          <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
+          <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" v-slot="{ navigate, isExactActive }">
+          <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" v-slot="{ navigate, isExactActive }">
+          <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"
-              v-slot="{ navigate, isExactActive }"
+          <!-- <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>-->
+            <li class="item report" @click="navigate" :class="{ 'exact-active': isExactActive }">报表</li>
+          </router-link> -->
         </ul>
       </el-affix>
     </header>

src/views/project/overview/Overview.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import {onMounted, reactive, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { registerRefreshCallback } from '@/composables/useRefresh'
+import useProjectID from '@/composables/useProjectID'
 
 import * as echarts from 'echarts';
 
+const {
+  shouldRender,
+  projectID
+} = useProjectID()
+
+console.log('项目 ID', projectID)
+
 const chart1Ref = ref<HTMLDivElement>()
 const chart2Ref = ref<HTMLDivElement>()
 const chart3Ref = ref<HTMLDivElement>()
 
+
 onMounted(() => {
   if (chart1Ref.value && chart2Ref.value && chart3Ref.value) {
     const myChart1 = echarts.init(chart1Ref.value);
@@ -26,9 +35,9 @@ onMounted(() => {
           type: 'bar',
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {offset: 0, color: '#83bff6'},
-              {offset: 0.5, color: '#188df0'},
-              {offset: 1, color: '#188df0'}
+              { offset: 0, color: '#83bff6' },
+              { offset: 0.5, color: '#188df0' },
+              { offset: 1, color: '#188df0' }
             ])
           },
         }
@@ -66,9 +75,9 @@ onMounted(() => {
             show: false
           },
           data: [
-            {value: 1048, name: '人工费'},
-            {value: 735, name: '材料费'},
-            {value: 580, name: '其他'},
+            { value: 1048, name: '人工费' },
+            { value: 735, name: '材料费' },
+            { value: 580, name: '其他' },
           ]
         }
       ]
@@ -199,32 +208,32 @@ registerRefreshCallback(() => {
 </script>
 
 <template>
-  <article class="overview-page">
+  <article class="overview-page" v-if="shouldRender">
     <el-row :gutter="24" class="first-row">
       <el-col :span="6">
         <el-card shadow="never">
-          <img src="@/assets/icon1.svg" class="icon" alt="">
+          <img src="@/assets/icon1.svg" class="icon" alt />
           <span class="number">21.2 k</span>
           <span class="index">指标1</span>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card shadow="never">
-          <img src="@/assets/icon2.svg" class="icon" alt="">
+          <img src="@/assets/icon2.svg" class="icon" alt />
           <span class="number">1.6 k</span>
           <span class="index">指标2</span>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card shadow="never">
-          <img src="@/assets/icon3.svg" class="icon" alt="">
+          <img src="@/assets/icon3.svg" class="icon" alt />
           <span class="number">826.0</span>
           <span class="index">指标3</span>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card shadow="never">
-          <img src="@/assets/icon4.svg" class="icon" alt="">
+          <img src="@/assets/icon4.svg" class="icon" alt />
           <span class="number">28.8 %</span>
           <span class="index">指标4</span>
         </el-card>
@@ -283,20 +292,18 @@ registerRefreshCallback(() => {
         <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-item label="工程地址：">珠海市香洲区某某街道某某路100号</el-descriptions-item>
       </el-descriptions>
     </el-card>
 
     <el-card shadow="never" header="审批人员">
       <!-- 列表 -->
       <el-table :data="appoveList">
-        <el-table-column prop="name" label="姓名"/>
-        <el-table-column prop="number" label="工号"/>
+        <el-table-column prop="name" label="姓名" />
+        <el-table-column prop="number" label="工号" />
         <el-table-column prop="department" label="所属部门"></el-table-column>
         <template #empty>
-          <el-empty :image-size="120" description="暂无数据"/>
+          <el-empty :image-size="120" description="暂无数据" />
         </template>
       </el-table>
     </el-card>
@@ -304,22 +311,20 @@ registerRefreshCallback(() => {
     <el-card shadow="never" header="操作日志">
       <!-- 列表 -->
       <el-table :data="logList">
-        <el-table-column prop="type" label="操作类型"/>
-        <el-table-column prop="who" label="操作人"/>
+        <el-table-column prop="type" label="操作类型" />
+        <el-table-column prop="who" label="操作人" />
         <el-table-column prop="result" label="执行结果">
           <template #default="scope">
-            <el-tag effect="dark" type="success">
-              {{ scope.row.result }}
-            </el-tag>
+            <el-tag effect="dark" type="success">{{ scope.row.result }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="time" label="操作时间"/>
-        <el-table-column prop="remark" label="备注"/>
+        <el-table-column prop="time" label="操作时间" />
+        <el-table-column prop="remark" label="备注" />
         <template #empty>
-          <el-empty :image-size="120" description="暂无项目"/>
+          <el-empty :image-size="120" description="暂无项目" />
         </template>
       </el-table>
-      <el-pagination background layout="total, prev, pager, next" :total="50"/>
+      <el-pagination background layout="total, prev, pager, next" :total="50" />
     </el-card>
   </article>
 </template>

src/views/project/process/Process.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
+import useProjectID from '@/composables/useProjectID'
+
+const {
+  shouldRender,
+  projectID
+} = useProjectID()
+
+console.log('项目 ID', projectID)
 
 const steps = reactive([
   {
@@ -86,7 +94,7 @@ const steps = reactive([
 </script>
 
 <template>
-  <article class="process-page">
+  <article class="process-page" v-if="shouldRender">
     <!-- <header class="header">
       <ul class="tabs">
         <li class="tab">预算</li>
@@ -96,19 +104,17 @@ const steps = reactive([
         <li class="tab">决算</li>
       </ul>
       <el-button type="primary">台账审核</el-button>
-    </header> -->
+    </header>-->
     <div class="wrap">
       <el-affix :offset="130">
         <el-card header="步骤" shadow="never" class="step">
-          <el-tree
-            :data="steps"
-            default-expand-all
-            :expand-on-click-node="false"
-          />
+          <el-tree :data="steps" default-expand-all :expand-on-click-node="false" />
         </el-card>
       </el-affix>
       <el-card shadow="never" class="preview">
-        <div class="btns"><el-button type="primary">台账审核</el-button></div>
+        <div class="btns">
+          <el-button type="primary">台账审核</el-button>
+        </div>
         <div class="area">表单/文件</div>
         <div class="btn-wrap">
           <el-button type="success">审核通过</el-button>

src/views/project/report/Report.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
+import useProjectID from '@/composables/useProjectID'
+
+const {
+  shouldRender,
+  projectID
+} = useProjectID()
+
+console.log('项目 ID', projectID)
 </script>
 
 <template>

src/views/project/summary/Summary.vue

@@ -11,6 +11,15 @@ import { Subject } from "@/types/subject";
 import useSummaryLayout from './scripts/useSummaryLayout'
 import { registerRefreshCallback } from '@/composables/useRefresh'
 
+import useProjectID from '@/composables/useProjectID'
+
+const {
+  shouldRender,
+  projectID
+} = useProjectID()
+
+console.log('项目 ID', projectID)
+
 // 布局相关代码
 const {
   subjectTreeSize,
@@ -109,7 +118,7 @@ registerRefreshCallback(() => {
 </script>
 
 <template>
-  <article class="summary-page" v-loading="loading">
+  <article class="summary-page" v-loading="loading" v-if="shouldRender">
     <resizable-layout>
       <resizable-layout-item
         :weight="subjectTreeSize"