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:
chenjianxing 2021-08-31 18:05:08 +08:00 committed by jianxing
parent 22abd0493f
commit a1de060695
3 changed files with 105 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div> <div>
<ms-drawer :class="{'hidden': asideHidden}" :visible="true" :size="10" direction="left" :show-full-screen="false" :is-show-close="false"> <ms-drawer :class="{'hidden': asideHidden}" :visible="true" :size="10" direction="left" :show-full-screen="false" :is-show-close="false">
<div class="title-item" v-for="item in data" :key="item.title"> <div class="title-item" >
<i class="el-icon-paperclip"></i> <span class="title-name">目录</span>
<a :href="'#' + item.link">{{ item.title }}</a> <el-tabs tab-position="right" v-model="activeName">
<el-tab-pane v-for="item in data" :key="item.title" :label="item.title" :name="item.link"></el-tab-pane>
</el-tabs>
</div> </div>
<div class="hiddenBottom" @click.stop="asideHidden = !asideHidden"> <div class="hiddenBottom" @click.stop="asideHidden = !asideHidden">
<i v-if="!asideHidden" class="el-icon-arrow-left"/> <span>目录</span>
<i v-if="asideHidden" class="el-icon-arrow-right"/>
</div> </div>
</ms-drawer> </ms-drawer>
</div> </div>
@ -22,6 +22,7 @@ export default {
data() { data() {
return { return {
asideHidden: true, asideHidden: true,
activeName: "1",
data: [ data: [
{ {
link: 'overview', link: 'overview',
@ -45,6 +46,12 @@ export default {
} }
] ]
} }
},
watch: {
activeName() {
let url = new URL(window.location.href);
window.location.href = url.origin + '#' + this.activeName;
}
} }
} }
</script> </script>
@ -52,20 +59,22 @@ export default {
<style scoped> <style scoped>
.hiddenBottom { .hiddenBottom {
width: 8px; width: 20px;
height: 50px; height: 60px;
/*top: calc((100vh - 80px)/3);*/ /*top: calc((100vh - 80px)/3);*/
right: -10px; right: -27px;
padding: 3px;
/*top: 0;*/ /*top: 0;*/
top: 40%; top: 40%;
line-height: 50px; line-height: 30px;
border-radius: 0 15px 15px 0; border-radius: 0 15px 15px 0;
background-color: #acb7c1; background-color: #acb7c1;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
opacity: 0.6; opacity: 0.5;
font-size: 2px; font-size: 10px;
font-weight: bold;
margin-left: 1px; margin-left: 1px;
} }
@ -74,9 +83,9 @@ export default {
} }
.hiddenBottom:hover { .hiddenBottom:hover {
background-color: #783887; /*background-color: #777979;*/
opacity: 0.8; opacity: 0.8;
width: 12px; /*width: 12px;*/
} }
.hiddenBottom:hover i { .hiddenBottom:hover i {
@ -87,11 +96,10 @@ export default {
.ms-drawer { .ms-drawer {
padding: 15px; padding: 15px;
height: 230px !important; height: 300px !important;
width: 200px !important; width: 230px !important;
top: calc((100vh - 200px)/3) !important; top: calc((100vh - 200px)/3) !important;
border: 1px solid #E6E6E6; border: 1px solid #E6E6E6;
padding: 10px;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFF; background-color: #FFF;
@ -104,11 +112,15 @@ export default {
} }
.title-item { .title-item {
margin: 15px; padding: 5px
} }
.el-icon-paperclip { .el-icon-paperclip {
margin-right: 5px; margin-right: 5px;
} }
.title-name {
font-size: 18px;
margin-left: 15px;
}
</style> </style>

38
frontend/src/business/components/track/report/components/TestPlanDbReport.vue
View File

@ -7,6 +7,8 @@
ref="drawer" ref="drawer"
v-loading="result.loading"> v-loading="result.loading">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-scrollbar>
<el-row type="flex" class="head-bar"> <el-row type="flex" class="head-bar">
<el-col :span="12"> <el-col :span="12">
<div class="name-edit"> <div class="name-edit">
@ -21,7 +23,6 @@
<!-- </el-button>--> <!-- </el-button>-->
</el-col> </el-col>
</el-row> </el-row>
<el-scrollbar>
<div class="container"> <div class="container">
<test-plan-report-content v-if="showReport" :is-db="true" :report-id="report.id" :plan-id="report.testPlanId"/> <test-plan-report-content v-if="showReport" :is-db="true" :report-id="report.id" :plan-id="report.testPlanId"/>
</div> </div>
@ -44,23 +45,32 @@ export default {
showDialog: false, showDialog: false,
report: {}, report: {},
isTestManagerOrTestUser: false, isTestManagerOrTestUser: false,
showReport: false showReport: false,
originUlr: ''
} }
}, },
mounted() { mounted() {
this.isTestManagerOrTestUser = true; this.isTestManagerOrTestUser = true;
}, },
methods: { methods: {
// listenGoBack() { listenGoBack() {
// //监听浏览器返回操作，关闭该对话框 //监听浏览器返回操作，关闭该对话框
// if (window.history && window.history.pushState) { if (window.history && window.history.pushState) {
// history.pushState(null, null, document.URL); this.originUlr = document.URL;
// window.addEventListener('popstate', this.goBack, false); history.pushState(null, null, document.URL);
// } window.addEventListener('popstate', this.goBack, false);
// }, }
// goBack() { },
// this.handleClose(); goBack() {
// }, let newUlr = document.URL;
// 将上一次url设置成列表的url，回退时关闭
history.pushState(null, null, this.originUlr);
history.pushState(null, null, newUlr);
if (document.URL.split("#").indexOf('/track/testPlan/reportList') > -1) {
history.pushState(null, null, this.originUlr);
this.handleClose();
}
},
open(report) { open(report) {
this.showReport = false; this.showReport = false;
// 每次都重新获取 // 每次都重新获取
@ -69,10 +79,10 @@ export default {
this.report = report; this.report = report;
}); });
this.showDialog = true; this.showDialog = true;
// this.listenGoBack(); this.listenGoBack();
}, },
handleClose() { handleClose() {
// window.removeEventListener('popstate', this.goBack, false); window.removeEventListener('popstate', this.goBack, false);
this.$emit('refresh'); this.$emit('refresh');
this.showDialog = false; this.showDialog = false;
}, },

37
frontend/src/business/components/track/report/components/TestPlanReportReview.vue
View File

@ -7,6 +7,7 @@
ref="drawer" ref="drawer"
v-loading="result.loading"> v-loading="result.loading">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-scrollbar>
<el-row type="flex" class="head-bar"> <el-row type="flex" class="head-bar">
<el-col :span="12"> <el-col :span="12">
<div class="name-edit"> <div class="name-edit">
@ -21,7 +22,6 @@
<!-- </el-button>--> <!-- </el-button>-->
</el-col> </el-col>
</el-row> </el-row>
<el-scrollbar>
<div class="container"> <div class="container">
<test-plan-report-content v-if="showReport" :plan-id="plan.id"/> <test-plan-report-content v-if="showReport" :plan-id="plan.id"/>
</div> </div>
@ -44,23 +44,32 @@ export default {
showDialog: false, showDialog: false,
plan: {}, plan: {},
isTestManagerOrTestUser: false, isTestManagerOrTestUser: false,
showReport: false showReport: false,
originUlr: ''
} }
}, },
mounted() { mounted() {
this.isTestManagerOrTestUser = true; this.isTestManagerOrTestUser = true;
}, },
methods: { methods: {
// listenGoBack() { listenGoBack() {
// //监听浏览器返回操作，关闭该对话框 //监听浏览器返回操作，关闭该对话框
// if (window.history && window.history.pushState) { if (window.history && window.history.pushState) {
// history.pushState(null, null, document.URL); this.originUlr = document.URL;
// window.addEventListener('popstate', this.goBack, false); history.pushState(null, null, document.URL);
// } window.addEventListener('popstate', this.goBack, false);
// }, }
// goBack() { },
// this.handleClose(); goBack() {
// }, let newUlr = document.URL;
// 将上一次url设置成列表的url，回退时关闭
history.pushState(null, null, this.originUlr);
history.pushState(null, null, newUlr);
if (document.URL.split("#").indexOf('/track/plan/all') > -1) {
history.pushState(null, null, this.originUlr);
this.handleClose();
}
},
open(plan) { open(plan) {
this.showReport = false; this.showReport = false;
// 每次都重新获取 // 每次都重新获取
@ -69,10 +78,10 @@ export default {
this.plan = plan; this.plan = plan;
}); });
this.showDialog = true; this.showDialog = true;
// this.listenGoBack(); this.listenGoBack();
}, },
handleClose() { handleClose() {
// window.removeEventListener('popstate', this.goBack, false); window.removeEventListener('popstate', this.goBack, false);
this.$emit('refresh'); this.$emit('refresh');
this.showDialog = false; this.showDialog = false;
}, },