refactor: 切换项目组件

frontend/src/business/components/api/head/ApiHeaderMenus.vue

@@ -1,25 +1,10 @@
 <template>
   <div id="menu-bar" v-if="isRouterAlive">
     <el-row type="flex">
+      <project-change :project-name="currentProject"/>
       <el-col :span="14">
         <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
 
-          <el-submenu :class="{'deactivation':!isProjectActivation}"
-                      v-permission="['test_manager','test_user','test_viewer']" index="3">
-            <template v-slot:title>
-              <span style="display: inline-block;width: 150px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" :title="currentProject">
-                {{ $t('commons.project') }}: {{currentProject}}
-              </span>
-            </template>
-            <search-list ref="projectRecent" :options="projectRecent" :current-project.sync="currentProject"/>
-            <el-divider class="menu-divider"/>
-            <el-menu-item :index="'/setting/project/create'">
-              <font-awesome-icon :icon="['fa', 'plus']"/>
-              <span style="padding-left: 7px;">{{ $t("project.create") }}</span>
-            </el-menu-item>
-            <ms-show-all :index="'/setting/project/all'"/>
-          </el-submenu>
-
           <el-menu-item :index="'/api/home'">
             {{ $t("i18n.home") }}
           </el-menu-item>
@@ -75,10 +60,11 @@ import MsCreateButton from "../../common/head/CreateButton";
 import MsCreateTest from "../../common/head/CreateTest";
 import {ApiEvent, LIST_CHANGE} from "@/business/components/common/head/ListEvent";
 import SearchList from "@/business/components/common/head/SearchList";
+import ProjectChange from "@/business/components/common/head/ProjectSwitch";
 
 export default {
   name: "MsApiHeaderMenus",
-  components: {SearchList, MsCreateTest, MsCreateButton, MsShowAll, MsRecentList},
+  components: {SearchList, MsCreateTest, MsCreateButton, MsShowAll, MsRecentList, ProjectChange},
   data() {
     return {
       projectRecent: {
@@ -123,11 +109,11 @@ export default {
   methods: {
     registerEvents() {
       ApiEvent.$on(LIST_CHANGE, () => {
-        // todo 这里偶尔会有 refs 为空的情况
+        // // todo 这里偶尔会有 refs 为空的情况
-        if (!this.$refs.projectRecent) {
+        // if (!this.$refs.projectRecent) {
-          return;
+        //   return;
-        }
+        // }
-        this.$refs.projectRecent.recent();
+        // this.$refs.projectRecent.recent();
         this.$refs.testRecent.recent();
         this.$refs.reportRecent.recent();
       });

frontend/src/business/components/common/head/ProjectMenu.vue

@@ -1,28 +0,0 @@
-<template>
-  <span>
-    <el-submenu index="10">
-      <template v-slot:title>操作</template>
-      <el-input
-        placeholder="请输入内容"
-        prefix-icon="el-icon-search"
-        v-model="input2">
-      </el-input>
-    </el-submenu>
-  </span>
-
-</template>
-
-<script>
-export default {
-  name: "ProjectMenu",
-  data() {
-    return {
-      input2: '1'
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

frontend/src/business/components/common/head/ProjectSwitch.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-menu class="header-menu" :unique-opened="true" mode="horizontal" default-active="1">
+    <!-- 不激活项目路由-->
+    <el-menu-item index="1" v-show="false">Placeholder</el-menu-item>
+    <el-submenu v-permission="['test_manager','test_user','test_viewer']" index="2" popper-class="submenu">
+      <template v-slot:title>
+        <span class="project-name" :title="currentProject">
+          {{ $t('commons.project') }}: {{currentProject}}
+        </span>
+      </template>
+      <search-list :current-project.sync="currentProject"/>
+      <el-divider/>
+      <el-menu-item :index="'/setting/project/create'">
+        <font-awesome-icon :icon="['fa', 'plus']"/>
+        <span style="padding-left: 7px;">{{ $t("project.create") }}</span>
+      </el-menu-item>
+      <ms-show-all :index="'/setting/project/all'"/>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+import SearchList from "@/business/components/common/head/SearchList";
+import MsShowAll from "@/business/components/common/head/ShowAll";
+
+export default {
+  name: "ProjectSwitch",
+  props: {
+    projectName: String
+  },
+  components: {SearchList, MsShowAll},
+  data() {
+    return {
+      currentProject: this.projectName
+    }
+  }
+}
+</script>
+
+<style scoped>
+.project-name {
+  display: inline-block;
+  width: 130px;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+
+.el-divider--horizontal {
+  margin: 0;
+}
+</style>

frontend/src/business/components/common/head/SearchList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="result.loading" class="search-list">
+  <div v-loading="result.loading">
     <el-input placeholder="搜索项目"
               prefix-icon="el-icon-search"
               v-model="searchString"
@@ -135,7 +135,7 @@ export default {
 
 .title {
   display: inline-block;
-  padding-left: 20px;
+  padding-left: 15px;
   max-width: 200px;
   white-space: nowrap;
   overflow: hidden;

frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue

@@ -1,25 +1,9 @@
 <template>
   <div id="menu-bar">
     <el-row type="flex">
-      <el-col :span="10">
+      <project-change :project-name="currentProject"/>
+      <el-col :span="12">
         <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
-
-          <el-submenu v-permission="['test_manager','test_user','test_viewer']"
-                      index="3" popper-class="submenu">
-            <template v-slot:title>
-              <span style="display: inline-block;width: 150px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" :title="currentProject">
-                {{ $t('commons.project') }}: {{currentProject}}
-              </span>
-            </template>
-            <search-list ref="projectRecent" :options="projectRecent" :current-project.sync="currentProject"/>
-            <el-divider/>
-            <el-menu-item :index="'/setting/project/create'">
-              <font-awesome-icon :icon="['fa', 'plus']"/>
-              <span style="padding-left: 7px;">{{ $t("project.create") }}</span>
-            </el-menu-item>
-            <ms-show-all :index="'/setting/project/all'"/>
-          </el-submenu>
-
           <el-menu-item :index="'/performance/home'">
             {{ $t("i18n.home") }}
           </el-menu-item>
@@ -61,10 +45,12 @@ import MsCreateButton from "../../common/head/CreateButton";
 import MsShowAll from "../../common/head/ShowAll";
 import {LIST_CHANGE, PerformanceEvent} from "@/business/components/common/head/ListEvent";
 import SearchList from "@/business/components/common/head/SearchList";
+import ProjectChange from "@/business/components/common/head/ProjectSwitch";
 
 export default {
   name: "PerformanceHeaderMenus",
   components: {
+    ProjectChange,
     SearchList,
     MsCreateButton,
     MsShowAll,
@@ -108,11 +94,11 @@ export default {
   methods: {
     registerEvents() {
       PerformanceEvent.$on(LIST_CHANGE, () => {
-        // todo 这里偶尔会有 refs 为空的情况
+        // // todo 这里偶尔会有 refs 为空的情况
-        if (!this.$refs.projectRecent) {
+        // if (!this.$refs.projectRecent) {
-          return;
+        //   return;
-        }
+        // }
-        this.$refs.projectRecent.recent();
+        // this.$refs.projectRecent.recent();
         this.$refs.testRecent.recent();
         this.$refs.reportRecent.recent();
       });

frontend/src/business/components/track/head/TrackHeaderMenus.vue

@@ -2,25 +2,10 @@
 
   <div id="menu-bar" v-if="isRouterAlive">
     <el-row type="flex">
-      <el-col :span="16">
+      <project-change :project-name="currentProject"/>
+      <el-col :span="14">
         <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
                  :default-active='$route.path'>
-          <el-submenu :class="{'deactivation':!isProjectActivation}"
-                      v-permission="['test_manager','test_user','test_viewer']" index="3" popper-class="submenu">
-            <template v-slot:title>
-              <span style="display: inline-block;width: 150px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" :title="currentProject">
-                {{ $t('commons.project') }}: {{currentProject}}
-              </span>
-            </template>
-            <search-list ref="projectRecent" :options="projectRecent" :current-project.sync="currentProject"/>
-            <el-divider/>
-            <el-menu-item :index="'/setting/project/create'">
-              <font-awesome-icon :icon="['fa', 'plus']"/>
-              <span style="padding-left: 7px;">{{ $t("project.create") }}</span>
-            </el-menu-item>
-            <ms-show-all :index="'/setting/project/all'"/>
-          </el-submenu>
-
           <el-menu-item :index="'/track/home'">
             {{ $t("i18n.home") }}
           </el-menu-item>
@@ -70,10 +55,11 @@ import MsRecentList from "../../common/head/RecentList";
 import MsCreateButton from "../../common/head/CreateButton";
 import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
 import SearchList from "@/business/components/common/head/SearchList";
+import ProjectChange from "@/business/components/common/head/ProjectSwitch";
 
 export default {
   name: "TrackHeaderMenus",
-  components: {SearchList, MsShowAll, MsRecentList, MsCreateButton},
+  components: {ProjectChange, SearchList, MsShowAll, MsRecentList, MsCreateButton},
   data() {
     return {
       testPlanViewPath: '',
@@ -163,11 +149,11 @@ export default {
     },
     registerEvents() {
       TrackEvent.$on(LIST_CHANGE, () => {
-        // todo 这里偶尔会有 refs 为空的情况
+        // // todo 这里偶尔会有 refs 为空的情况
-        if (!this.$refs.projectRecent) {
+        // if (!this.$refs.projectRecent) {
-          return;
+        //   return;
-        }
+        // }
-        this.$refs.projectRecent.recent();
+        // this.$refs.projectRecent.recent();
         this.$refs.planRecent.recent();
         this.$refs.caseRecent.recent();
       });
@@ -199,4 +185,11 @@ export default {
   border-bottom: white !important;
 }
 
+/*.project-change {*/
+/*  height: 40px;*/
+/*  line-height: 40px;*/
+/*  color: inherit;*/
+/*  margin-left: 20px;*/
+/*}*/
+
 </style>