test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 切换项目组件

This commit is contained in:
shiziyuan9527 2020-12-16 10:54:14 +08:00
parent c3ae4e9e02
commit 8fb6dad103
6 changed files with 87 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/business/components/api/head/ApiHeaderMenus.vue
View File

@ -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 为空的情况
if (!this.$refs.projectRecent) {
return;
}
this.$refs.projectRecent.recent();
// // todo 这里偶尔会有 refs 为空的情况
// if (!this.$refs.projectRecent) {
// return;
// }
// this.$refs.projectRecent.recent();
this.$refs.testRecent.recent();
this.$refs.reportRecent.recent();
});

28
frontend/src/business/components/common/head/ProjectMenu.vue
View File

@ -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>

52
frontend/src/business/components/common/head/ProjectSwitch.vue Normal file
View File

@ -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>

4
frontend/src/business/components/common/head/SearchList.vue
View File

@ -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;

32
frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
View File

@ -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 为空的情况
if (!this.$refs.projectRecent) {
return;
}
this.$refs.projectRecent.recent();
// // todo 这里偶尔会有 refs 为空的情况
// if (!this.$refs.projectRecent) {
// return;
// }
// this.$refs.projectRecent.recent();
this.$refs.testRecent.recent();
this.$refs.reportRecent.recent();
});

39
frontend/src/business/components/track/head/TrackHeaderMenus.vue
View File

@ -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 为空的情况
if (!this.$refs.projectRecent) {
return;
}
this.$refs.projectRecent.recent();
// // todo 这里偶尔会有 refs 为空的情况
// if (!this.$refs.projectRecent) {
// return;
// }
// 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>