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

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

@ -1,15 +1,15 @@
<template>
<div>
<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">
<i class="el-icon-paperclip"></i>
<a :href="'#' + item.link">{{ item.title }}</a>
</div>
<div class="hiddenBottom" @click.stop="asideHidden = !asideHidden">
<i v-if="!asideHidden" class="el-icon-arrow-left"/>
<i v-if="asideHidden" class="el-icon-arrow-right"/>
<div class="title-item" >
<span class="title-name">目录</span>
<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 class="hiddenBottom" @click.stop="asideHidden = !asideHidden">
<span>目录</span>
</div>
</ms-drawer>
</div>
</template>
@ -22,6 +22,7 @@ export default {
data() {
return {
asideHidden: true,
activeName: "1",
data: [
{
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>
@ -52,20 +59,22 @@ export default {
<style scoped>
.hiddenBottom {
width: 8px;
height: 50px;
width: 20px;
height: 60px;
/*top: calc((100vh - 80px)/3);*/
right: -10px;
right: -27px;
padding: 3px;
/*top: 0;*/
top: 40%;
line-height: 50px;
line-height: 30px;
border-radius: 0 15px 15px 0;
background-color: #acb7c1;
display: inline-block;
position: absolute;
cursor: pointer;
opacity: 0.6;
font-size: 2px;
opacity: 0.5;
font-size: 10px;
font-weight: bold;
margin-left: 1px;
}
@ -74,9 +83,9 @@ export default {
}
.hiddenBottom:hover {
background-color: #783887;
/*background-color: #777979;*/
opacity: 0.8;
width: 12px;
/*width: 12px;*/
}
.hiddenBottom:hover i {
@ -87,11 +96,10 @@ export default {
.ms-drawer {
padding: 15px;
height: 230px !important;
width: 200px !important;
height: 300px !important;
width: 230px !important;
top: calc((100vh - 200px)/3) !important;
border: 1px solid #E6E6E6;
padding: 10px;
border-radius: 10px;
box-sizing: border-box;
background-color: #FFF;
@ -104,11 +112,15 @@ export default {
}
.title-item {
margin: 15px;
padding: 5px
}
.el-icon-paperclip {
margin-right: 5px;
}
.title-name {
font-size: 18px;
margin-left: 15px;
}
</style>

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

@ -7,21 +7,22 @@
ref="drawer"
v-loading="result.loading">
<template v-slot:default="scope">
<el-row type="flex" class="head-bar">
<el-col :span="12">
<div class="name-edit">
<el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
</el-button>&nbsp;
<span class="title">{{report.name}}</span>
</div>
</el-col>
<el-col :span="12" class="head-right">
<!-- <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
<!-- {{$t('test_track.plan_view.export_report')}}-->
<!-- </el-button>-->
</el-col>
</el-row>
<el-scrollbar>
<el-row type="flex" class="head-bar">
<el-col :span="12">
<div class="name-edit">
<el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
</el-button>&nbsp;
<span class="title">{{report.name}}</span>
</div>
</el-col>
<el-col :span="12" class="head-right">
<!-- <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
<!-- {{$t('test_track.plan_view.export_report')}}-->
<!-- </el-button>-->
</el-col>
</el-row>
<div class="container">
<test-plan-report-content v-if="showReport" :is-db="true" :report-id="report.id" :plan-id="report.testPlanId"/>
</div>
@ -44,23 +45,32 @@ export default {
showDialog: false,
report: {},
isTestManagerOrTestUser: false,
showReport: false
showReport: false,
originUlr: ''
}
},
mounted() {
this.isTestManagerOrTestUser = true;
},
methods: {
// listenGoBack() {
// //监听浏览器返回操作，关闭该对话框
// if (window.history && window.history.pushState) {
// history.pushState(null, null, document.URL);
// window.addEventListener('popstate', this.goBack, false);
// }
// },
// goBack() {
// this.handleClose();
// },
listenGoBack() {
//监听浏览器返回操作，关闭该对话框
if (window.history && window.history.pushState) {
this.originUlr = document.URL;
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
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) {
this.showReport = false;
// 每次都重新获取
@ -69,10 +79,10 @@ export default {
this.report = report;
});
this.showDialog = true;
// this.listenGoBack();
this.listenGoBack();
},
handleClose() {
// window.removeEventListener('popstate', this.goBack, false);
window.removeEventListener('popstate', this.goBack, false);
this.$emit('refresh');
this.showDialog = false;
},

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

@ -7,21 +7,21 @@
ref="drawer"
v-loading="result.loading">
<template v-slot:default="scope">
<el-row type="flex" class="head-bar">
<el-col :span="12">
<div class="name-edit">
<el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
</el-button>&nbsp;
<span class="title">{{plan.name}}</span>
</div>
</el-col>
<el-col :span="12" class="head-right">
<!-- <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
<!-- {{$t('test_track.plan_view.export_report')}}-->
<!-- </el-button>-->
</el-col>
</el-row>
<el-scrollbar>
<el-row type="flex" class="head-bar">
<el-col :span="12">
<div class="name-edit">
<el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
</el-button>&nbsp;
<span class="title">{{plan.name}}</span>
</div>
</el-col>
<el-col :span="12" class="head-right">
<!-- <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
<!-- {{$t('test_track.plan_view.export_report')}}-->
<!-- </el-button>-->
</el-col>
</el-row>
<div class="container">
<test-plan-report-content v-if="showReport" :plan-id="plan.id"/>
</div>
@ -44,23 +44,32 @@ export default {
showDialog: false,
plan: {},
isTestManagerOrTestUser: false,
showReport: false
showReport: false,
originUlr: ''
}
},
mounted() {
this.isTestManagerOrTestUser = true;
},
methods: {
// listenGoBack() {
// //监听浏览器返回操作，关闭该对话框
// if (window.history && window.history.pushState) {
// history.pushState(null, null, document.URL);
// window.addEventListener('popstate', this.goBack, false);
// }
// },
// goBack() {
// this.handleClose();
// },
listenGoBack() {
//监听浏览器返回操作，关闭该对话框
if (window.history && window.history.pushState) {
this.originUlr = document.URL;
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
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) {
this.showReport = false;
// 每次都重新获取
@ -69,10 +78,10 @@ export default {
this.plan = plan;
});
this.showDialog = true;
// this.listenGoBack();
this.listenGoBack();
},
handleClose() {
// window.removeEventListener('popstate', this.goBack, false);
window.removeEventListener('popstate', this.goBack, false);
this.$emit('refresh');
this.showDialog = false;
},