fix: 全局获取项目 ID 错误

.eslintrc.js

@@ -16,22 +16,23 @@ module.exports = {
   },
   rules: {
     /* "import/extensions": [
-            "error",
-            "ignorePackages",
-            {
-              js: "never",
-              mjs: "never",
-              jsx: "never",
-              ts: "never",
-              tsx: "never",
-            },
-          ], */
+                    "error",
+                    "ignorePackages",
+                    {
+                      js: "never",
+                      mjs: "never",
+                      jsx: "never",
+                      ts: "never",
+                      tsx: "never",
+                    },
+                  ], */
     "import/no-unresolved": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "import/extensions": "off",
+    "vuejs-accessibility/click-events-have-key-events": "off",
     "no-unused-expressions": [
       "error",
       {

src/composables/useProjectID.ts

@@ -1,25 +1,26 @@
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { isNil } from "lodash";
 
 // project 页面及其子页面获取项目 ID
 export default function useProjectID() {
   const route = useRoute();
+  console.log("route", route);
   const router = useRouter();
 
   // 是否已经获取到了 projectID
   const shouldRender = ref(false);
 
   // 项目 ID
-  let projectID = "";
+  const projectID = computed(() => route.query.projectID);
   watch(
-    () => route.query.projectID,
-    (val) => {
-      if (isNil(val) || val === "") {
-        router.replace("/project-list");
+    projectID,
+    async (val) => {
+      if (route.path.startsWith("/project") && (isNil(val) || val === "")) {
+        shouldRender.value = false;
+        await router.replace("/project-list");
       } else {
         shouldRender.value = true;
-        projectID = val as string;
       }
     },
     {
@@ -28,7 +29,7 @@ export default function useProjectID() {
   );
 
   return {
-    // 是否已经获取到了 projectID, Ref 类型
+    // 是否已经获取到了 projectID
     shouldRender,
     projectID,
   };

src/types/components/context-menu.d.ts

@@ -0,0 +1,19 @@
+declare namespace ContextMenu {
+  interface IContextMenuComponent {
+    // 隐藏
+    Hide: () => void;
+  }
+
+  // 菜单项的每一个 item
+  interface IMenuItem {
+    text: (() => string) | string;
+    icon?: string;
+    hidden?: (() => boolean) | boolean;
+    disable?: (() => Promise<boolean> | boolean) | boolean;
+    callback?: (inputVal?: number | string) => void;
+    submenu?: IMenuItem[][];
+  }
+
+  // 菜单项分组
+  type MenuGroup = IMenuItem[];
+}

src/types/components.d.ts

@@ -1,43 +1,5 @@
 import Handsontable, { GridSettings } from "@sc/handsontable";
 
-declare namespace ContextMenu {
-  interface IContextMenuComponent {
-    // 隐藏
-    Hide: () => void;
-  }
-
-  // 菜单项的每一个 item
-  interface IMenuItem {
-    text: (() => string) | string;
-    icon?: string;
-    hidden?: (() => boolean) | boolean;
-    disable?: (() => Promise<boolean> | boolean) | boolean;
-    callback?: (inputVal?: number | string) => void;
-    submenu?: IMenuItem[][];
-  }
-
-  // 菜单项分组
-  type MenuGroup = IMenuItem[];
-}
-
-declare namespace ResizableLayout {
-  interface IDataParam {
-    index: number;
-    instance: any;
-    minSize: number;
-  }
-
-  interface IMoveParam {
-    index: number; // 当前layoutItem是父组件的第几个子组件
-    distance: number; // 鼠标移动的距离，负数代表左移，正数代表右移
-    moveId: symbol; // move事件的唯一标志
-  }
-
-  interface IResizableLayoutComponent {
-    Refresh: () => void;
-  }
-}
-
 type Renderer = (
   instance: Handsontable,
   TD: HTMLElement,

src/types/components/resizable-layout.d.ts

@@ -0,0 +1,17 @@
+declare namespace ResizableLayout {
+  interface IDataParam {
+    index: number;
+    instance: any;
+    minSize: number;
+  }
+
+  interface IMoveParam {
+    index: number; // 当前layoutItem是父组件的第几个子组件
+    distance: number; // 鼠标移动的距离，负数代表左移，正数代表右移
+    moveId: symbol; // move事件的唯一标志
+  }
+
+  interface IResizableLayoutComponent {
+    Refresh: () => void;
+  }
+}

src/views/main-frame/MainFrame.vue

@@ -30,13 +30,13 @@ const breadcrumbs = computed(() => breadcrumbStore.breadcrumbs);
         <iconfont class="icon dsk-undo" :class="{ refreshing }" />
       </span>
       <el-breadcrumb separator="/">
-        <template v-for="item in breadcrumbs">
-          <el-breadcrumb-item v-if="isUndefined(item.path)">{{
-            item.label
-          }}</el-breadcrumb-item>
-          <el-breadcrumb-item v-else :to="{ path: item.path }">{{
-            item.label
-          }}</el-breadcrumb-item>
+        <template v-for="(item, index) in breadcrumbs" :key="index">
+          <el-breadcrumb-item v-if="isUndefined(item.path)">
+            {{ item.label }}
+          </el-breadcrumb-item>
+          <el-breadcrumb-item v-else :to="{ path: item.path }">
+            {{ item.label }}
+          </el-breadcrumb-item>
         </template>
       </el-breadcrumb>
       <span class="data-big-screen">
@@ -57,13 +57,17 @@ const breadcrumbs = computed(() => breadcrumbStore.breadcrumbs);
     </header>
     <aside class="aside">
       <ul class="menu">
-        <router-link custom to="/" v-slot="{ navigate, isExactActive }">
+        <router-link
+          custom
+          :to="{ name: 'Workbench' }"
+          v-slot="{ navigate, isExactActive }"
+        >
           <li class="item" @click="navigate" :class="{ active: isExactActive }">
             <iconfont class="icon dsk-dashboard-one" />
           </li>
         </router-link>
 
-        <router-link custom to="/project-list" v-slot="{ navigate }">
+        <router-link custom :to="{ name: 'ProjectList' }" v-slot="{ navigate }">
           <li
             class="item"
             @click="navigate"
@@ -74,7 +78,7 @@ const breadcrumbs = computed(() => breadcrumbStore.breadcrumbs);
         </router-link>
         <router-link
           custom
-          to="/data-library"
+          :to="{ name: 'DataLibrary' }"
           v-slot="{ navigate, isExactActive }"
         >
           <li class="item" @click="navigate" :class="{ active: isExactActive }">

src/views/project/Project.vue

@@ -8,7 +8,7 @@ const route = useRoute();
 
 const { shouldRender, projectID } = useProjectID();
 
-console.log("项目 ID", projectID);
+console.log("项目 ID", projectID.value);
 
 const { setBreadcrumb } = breadcrumbStore;
 setBreadcrumb([

src/views/project/overview/Overview.vue

@@ -7,7 +7,7 @@ import * as echarts from "echarts";
 
 const { shouldRender, projectID } = useProjectID();
 
-console.log("项目 ID", projectID);
+console.log("项目 ID", projectID.value);
 
 const chart1Ref = ref<HTMLDivElement>();
 const chart2Ref = ref<HTMLDivElement>();

src/views/project/process/Process.vue

@@ -4,7 +4,7 @@ import useProjectID from "@/composables/useProjectID";
 
 const { shouldRender, projectID } = useProjectID();
 
-console.log("项目 ID", projectID);
+console.log("项目 ID", projectID.value);
 
 const steps = reactive([
   {

src/views/project/report/Report.vue

@@ -4,7 +4,7 @@ import useProjectID from "@/composables/useProjectID";
 
 const { shouldRender, projectID } = useProjectID();
 
-console.log("项目 ID", projectID);
+console.log("项目 ID", projectID.value);
 </script>
 
 <template>

src/views/project/summary/Summary.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, nextTick } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import SubjectTree from "./components/subject-tree/SubjectTree.vue";
 import ToolBar from "./components/tool-bar/ToolBar.vue";
 import CostTable from "./components/cost-table/CostTable.vue";
@@ -15,7 +15,7 @@ import useProjectID from "@/composables/useProjectID";
 
 const { shouldRender, projectID } = useProjectID();
 
-console.log("项目 ID", projectID);
+console.log("项目 ID", projectID.value);
 
 // 布局相关代码
 const {

src/views/project/summary/components/subject-tree/SubjectTree.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-// import { ContextMenu } from "@/types/components";
 import { Subject } from "@/types/subject";
 import { ref, PropType, toRaw, onMounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { isUndefined } from "lodash";
 import { SubjectStructure } from "@/constants/subject";
 import useStructureRouter from "@/composables/useStructureRouter";
+import useProjectID from "@/composables/useProjectID";
+
+const { projectID } = useProjectID();
+
+console.log("项目 ID", projectID.value);
 
 const props = defineProps({
   treeData: {
@@ -18,6 +21,7 @@ const router = useRouter();
 const route = useRoute();
 
 // 上下文菜单设置
+// eslint-disable-next-line no-undef
 const menuGroup: ContextMenu.MenuGroup[] = [
   [
     {
@@ -207,7 +211,7 @@ watch(structure, (val) => {
       <li
         class="tab"
         :class="{ active: route.query.structure !== SubjectStructure.ARRANGE }"
-        @click="router.push({ name: 'Summary' })"
+        @click="router.push({ name: 'Summary', query: { projectID } })"
       >
         原始结构
       </li>
@@ -215,7 +219,10 @@ watch(structure, (val) => {
         class="tab"
         :class="{ active: route.query.structure === SubjectStructure.ARRANGE }"
         @click="
-          router.push({ name: 'Summary', query: { structure: 'arrange' } })
+          router.push({
+            name: 'Summary',
+            query: { projectID, structure: 'arrange' },
+          })
         "
       >
         整理结构

src/views/workbench/Workbench.vue

@@ -31,19 +31,23 @@ setBreadcrumb([
         <ul class="summary">
           <li class="item project-count">
             <span class="text">
-              <img src="@/assets/project-icon.svg" class="icon" alt />项目数
+              <img src="@/assets/project-icon.svg" class="icon" alt="" />项目数
             </span>
             <span class="number">12</span>
           </li>
           <li class="item todo">
             <span class="text">
-              <img src="@/assets/todo-icon.svg" class="icon" alt />待办项
+              <img src="@/assets/todo-icon.svg" class="icon" alt="" />待办项
             </span>
             <span class="number">4/10</span>
           </li>
           <li class="item enterprise">
             <span class="text">
-              <img src="@/assets/enterprise-icon.svg" class="icon" alt />企业数
+              <img
+                src="@/assets/enterprise-icon.svg"
+                class="icon"
+                alt=""
+              />企业数
             </span>
             <span class="number">12</span>
           </li>
@@ -57,12 +61,12 @@ setBreadcrumb([
           <template #header>
             <div class="card-header">
               <span class="text">
-                <img src="@/assets/project-icon.svg" alt class="icon" />
+                <img src="@/assets/project-icon.svg" alt="" class="icon" />
                 我的项目
               </span>
               <router-link class="link" to="/project-list"
-                >全部项目</router-link
-              >
+                >全部项目
+              </router-link>
             </div>
           </template>
           <div class="card-body">
@@ -81,7 +85,7 @@ setBreadcrumb([
           <template #header>
             <div class="card-header">
               <span class="text">
-                <img src="@/assets/comment-icon.svg" alt class="icon" />
+                <img src="@/assets/comment-icon.svg" alt="" class="icon" />
                 动态
               </span>
             </div>
@@ -94,9 +98,9 @@ setBreadcrumb([
                   <p class="content">
                     <strong class="name">李四</strong>
                     <span class="do">编辑了</span>
-                    <router-link to="/project" class="link"
-                      >市妇幼保健医院道路工程</router-link
-                    >
+                    <router-link to="/project?projectID=1" class="link"
+                      >市妇幼保健医院道路工程
+                    </router-link>
                   </p>
                   <time class="time">2019-06-01 11:35:20</time>
                 </div>
@@ -168,7 +172,7 @@ setBreadcrumb([
           <template #header>
             <div class="card-header">
               <span class="text">
-                <img src="@/assets/todo-icon.svg" alt class="icon" />
+                <img src="@/assets/todo-icon.svg" alt="" class="icon" />
                 待办事项
               </span>
             </div>