refactor(测试跟踪): 重构测试跟踪详情
This commit is contained in:
chenjianxing
parent
4d52439cfb
commit
80fa0ab394
|
|
@ -1,39 +1,25 @@
|
|||
<template>
|
||||
|
||||
<ms-container>
|
||||
|
||||
<ms-aside-container>
|
||||
<select-menu
|
||||
:data="testPlans"
|
||||
:current-data="currentPlan"
|
||||
:title="$t('test_track.plan_view.plan')"
|
||||
@dataChange="changePlan"/>
|
||||
<node-tree class="node-tree"
|
||||
v-loading="result.loading"
|
||||
@nodeSelectEvent="nodeChange"
|
||||
@refresh="refresh"
|
||||
:tree-nodes="treeNodes"
|
||||
:draggable="false"
|
||||
ref="nodeTree"/>
|
||||
</ms-aside-container>
|
||||
|
||||
<ms-main-container>
|
||||
<test-plan-test-case-list
|
||||
class="table-list"
|
||||
@openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
|
||||
@refresh="refresh"
|
||||
:plan-id="planId"
|
||||
:select-node-ids="selectNodeIds"
|
||||
:select-parent-nodes="selectParentNodes"
|
||||
ref="testPlanTestCaseList"/>
|
||||
</ms-main-container>
|
||||
|
||||
<test-case-relevance
|
||||
@refresh="refresh"
|
||||
:plan-id="planId"
|
||||
ref="testCaseRelevance"/>
|
||||
|
||||
</ms-container>
|
||||
<div>
|
||||
<ms-test-plan-header-bar>
|
||||
<template v-slot:info>
|
||||
<select-menu
|
||||
:data="testPlans"
|
||||
:current-data="currentPlan"
|
||||
:title="$t('test_track.plan_view.plan')"
|
||||
@dataChange="changePlan"/>
|
||||
</template>
|
||||
<template v-slot:menu>
|
||||
<el-menu active-text-color="#6d317c" :default-active="activeIndex"
|
||||
class="el-menu-demo header-menu" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="functional">功能测试用例</el-menu-item>
|
||||
<el-menu-item index="api">接口测试用例</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
</ms-test-plan-header-bar>
|
||||
<test-plan-functional v-if="activeIndex === 'functional'" :plan-id="planId"/>
|
||||
<test-plan-api v-if="activeIndex === 'api'" :plan-id="planId"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -46,20 +32,23 @@
|
|||
import MsContainer from "../../../common/components/MsContainer";
|
||||
import MsAsideContainer from "../../../common/components/MsAsideContainer";
|
||||
import MsMainContainer from "../../../common/components/MsMainContainer";
|
||||
import MsTestPlanHeaderBar from "./comonents/head/TestPlanHeaderBar";
|
||||
import TestPlanFunctional from "./comonents/functional/TestPlanFunctional";
|
||||
import TestPlanApi from "./comonents/api/TestPlanApi";
|
||||
|
||||
export default {
|
||||
name: "TestPlanView",
|
||||
components: {
|
||||
TestPlanApi,
|
||||
TestPlanFunctional,
|
||||
MsTestPlanHeaderBar,
|
||||
MsMainContainer,
|
||||
MsAsideContainer, MsContainer, NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
testPlans: [],
|
||||
currentPlan: {},
|
||||
selectNodeIds: [],
|
||||
selectParentNodes: [],
|
||||
treeNodes: []
|
||||
activeIndex: "functional"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -68,33 +57,11 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
this.openTestCaseEdit(this.$route.path);
|
||||
},
|
||||
watch: {
|
||||
'$route'(to, from) {
|
||||
this.openTestCaseEdit(to.path);
|
||||
},
|
||||
planId() {
|
||||
this.initData();
|
||||
}
|
||||
this.getTestPlans();
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.selectNodeIds = [];
|
||||
this.selectParentNodes = [];
|
||||
this.$refs.testCaseRelevance.search();
|
||||
this.getNodeTreeByPlanId();
|
||||
},
|
||||
initData() {
|
||||
this.getTestPlans();
|
||||
this.getNodeTreeByPlanId();
|
||||
},
|
||||
openTestCaseRelevanceDialog() {
|
||||
this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
|
||||
},
|
||||
getTestPlans() {
|
||||
this.result = this.$post('/test/plan/list/all', {}, response => {
|
||||
this.$post('/test/plan/list/all', {}, response => {
|
||||
this.testPlans = response.data;
|
||||
this.testPlans.forEach(plan => {
|
||||
if (this.planId && plan.id === this.planId) {
|
||||
|
|
@ -103,39 +70,36 @@
|
|||
});
|
||||
});
|
||||
},
|
||||
nodeChange(nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
this.selectParentNodes = pNodes;
|
||||
// 切换node后，重置分页数
|
||||
this.$refs.testPlanTestCaseList.currentPage = 1;
|
||||
this.$refs.testPlanTestCaseList.pageSize = 10;
|
||||
},
|
||||
changePlan(plan) {
|
||||
this.currentPlan = plan;
|
||||
this.$router.push('/track/plan/view/' + plan.id);
|
||||
},
|
||||
getNodeTreeByPlanId() {
|
||||
if(this.planId){
|
||||
this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
|
||||
this.treeNodes = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
openTestCaseEdit(path) {
|
||||
if (path.indexOf("/plan/view/edit") >= 0){
|
||||
let caseId = this.$route.params.caseId;
|
||||
this.$get('/test/plan/case/get/' + caseId, response => {
|
||||
let testCase = response.data;
|
||||
if (testCase) {
|
||||
this.$refs.testPlanTestCaseList.handleEdit(testCase);
|
||||
this.$router.push('/track/plan/view/' + testCase.planId);
|
||||
}
|
||||
});
|
||||
}
|
||||
handleSelect(key) {
|
||||
this.activeIndex = key;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.select-menu {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 80px - 50px);
|
||||
}
|
||||
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 80px - 51px);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.header-menu.el-menu--horizontal > li {
|
||||
height: 49px;
|
||||
line-height: 50px;
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<ms-container>
|
||||
|
||||
<ms-aside-container>
|
||||
<slot name="aside"></slot>
|
||||
</ms-aside-container>
|
||||
|
||||
<ms-main-container>
|
||||
<slot name="main"></slot>
|
||||
</ms-main-container>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
</ms-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsMainContainer from "../../../../common/components/MsMainContainer";
|
||||
import MsAsideContainer from "../../../../common/components/MsAsideContainer";
|
||||
import MsContainer from "../../../../common/components/MsContainer";
|
||||
export default {
|
||||
name: "MsTestPlanCommonComponent",
|
||||
components: {MsContainer, MsAsideContainer, MsMainContainer}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
|
||||
<ms-test-plan-common-component>
|
||||
<template v-slot:aside>
|
||||
<node-tree class="node-tree"
|
||||
v-loading="result.loading"
|
||||
@nodeSelectEvent="nodeChange"
|
||||
@refresh="refresh"
|
||||
:tree-nodes="treeNodes"
|
||||
:draggable="false"
|
||||
ref="nodeTree"/>
|
||||
</template>
|
||||
<template v-slot:main>
|
||||
<test-plan-test-case-list
|
||||
class="table-list"
|
||||
@openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
|
||||
@refresh="refresh"
|
||||
:plan-id="planId"
|
||||
:select-node-ids="selectNodeIds"
|
||||
:select-parent-nodes="selectParentNodes"
|
||||
ref="testPlanTestCaseList"/>
|
||||
</template>
|
||||
|
||||
<test-case-relevance
|
||||
@refresh="refresh"
|
||||
:plan-id="planId"
|
||||
ref="testCaseRelevance"/>
|
||||
</ms-test-plan-common-component>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeTree from "../../../../common/NodeTree";
|
||||
import TestPlanTestCaseList from "../TestPlanTestCaseList";
|
||||
import TestCaseRelevance from "../TestCaseRelevance";
|
||||
import MsTestPlanCommonComponent from "../TestPlanCommonComponent";
|
||||
|
||||
export default {
|
||||
name: "TestPlanApi",
|
||||
components: {
|
||||
MsTestPlanCommonComponent,
|
||||
TestCaseRelevance,
|
||||
TestPlanTestCaseList,
|
||||
NodeTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
selectNodeIds: [],
|
||||
selectParentNodes: [],
|
||||
treeNodes: [],
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'planId'
|
||||
],
|
||||
mounted() {
|
||||
this.initData();
|
||||
this.openTestCaseEdit(this.$route.path);
|
||||
},
|
||||
watch: {
|
||||
'$route'(to, from) {
|
||||
this.openTestCaseEdit(to.path);
|
||||
},
|
||||
planId() {
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.selectNodeIds = [];
|
||||
this.selectParentNodes = [];
|
||||
this.$refs.testCaseRelevance.search();
|
||||
this.getNodeTreeByPlanId();
|
||||
},
|
||||
initData() {
|
||||
this.getNodeTreeByPlanId();
|
||||
},
|
||||
openTestCaseRelevanceDialog() {
|
||||
this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
|
||||
},
|
||||
nodeChange(nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
this.selectParentNodes = pNodes;
|
||||
// 切换node后，重置分页数
|
||||
this.$refs.testPlanTestCaseList.currentPage = 1;
|
||||
this.$refs.testPlanTestCaseList.pageSize = 10;
|
||||
},
|
||||
getNodeTreeByPlanId() {
|
||||
if (this.planId) {
|
||||
this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
|
||||
this.treeNodes = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
openTestCaseEdit(path) {
|
||||
if (path.indexOf("/plan/view/edit") >= 0) {
|
||||
let caseId = this.$route.params.caseId;
|
||||
this.$get('/test/plan/case/get/' + caseId, response => {
|
||||
let testCase = response.data;
|
||||
if (testCase) {
|
||||
this.$refs.testPlanTestCaseList.handleEdit(testCase);
|
||||
this.$router.push('/track/plan/view/' + testCase.planId);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
|
||||
<ms-test-plan-common-component>
|
||||
<template v-slot:aside>
|
||||
<node-tree class="node-tree"
|
||||
v-loading="result.loading"
|
||||
@nodeSelectEvent="nodeChange"
|
||||
@refresh="refresh"
|
||||
:tree-nodes="treeNodes"
|
||||
:draggable="false"
|
||||
ref="nodeTree"/>
|
||||
</template>
|
||||
<template v-slot:main>
|
||||
<test-plan-test-case-list
|
||||
class="table-list"
|
||||
@openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
|
||||
@refresh="refresh"
|
||||
:plan-id="planId"
|
||||
:select-node-ids="selectNodeIds"
|
||||
:select-parent-nodes="selectParentNodes"
|
||||
ref="testPlanTestCaseList"/>
|
||||
</template>
|
||||
|
||||
<test-case-relevance
|
||||
@refresh="refresh"
|
||||
:plan-id="planId"
|
||||
ref="testCaseRelevance"/>
|
||||
</ms-test-plan-common-component>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeTree from "../../../../common/NodeTree";
|
||||
import TestPlanTestCaseList from "../TestPlanTestCaseList";
|
||||
import TestCaseRelevance from "../TestCaseRelevance";
|
||||
import MsTestPlanCommonComponent from "../TestPlanCommonComponent";
|
||||
|
||||
export default {
|
||||
name: "TestPlanFunctional",
|
||||
components: {
|
||||
MsTestPlanCommonComponent,
|
||||
TestCaseRelevance,
|
||||
TestPlanTestCaseList,
|
||||
NodeTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
selectNodeIds: [],
|
||||
selectParentNodes: [],
|
||||
treeNodes: [],
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'planId'
|
||||
],
|
||||
mounted() {
|
||||
this.initData();
|
||||
this.openTestCaseEdit(this.$route.path);
|
||||
},
|
||||
watch: {
|
||||
'$route'(to, from) {
|
||||
this.openTestCaseEdit(to.path);
|
||||
},
|
||||
planId() {
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.selectNodeIds = [];
|
||||
this.selectParentNodes = [];
|
||||
this.$refs.testCaseRelevance.search();
|
||||
this.getNodeTreeByPlanId();
|
||||
},
|
||||
initData() {
|
||||
this.getNodeTreeByPlanId();
|
||||
},
|
||||
openTestCaseRelevanceDialog() {
|
||||
this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
|
||||
},
|
||||
nodeChange(nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
this.selectParentNodes = pNodes;
|
||||
// 切换node后，重置分页数
|
||||
this.$refs.testPlanTestCaseList.currentPage = 1;
|
||||
this.$refs.testPlanTestCaseList.pageSize = 10;
|
||||
},
|
||||
getNodeTreeByPlanId() {
|
||||
if (this.planId) {
|
||||
this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
|
||||
this.treeNodes = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
openTestCaseEdit(path) {
|
||||
if (path.indexOf("/plan/view/edit") >= 0) {
|
||||
let caseId = this.$route.params.caseId;
|
||||
this.$get('/test/plan/case/get/' + caseId, response => {
|
||||
let testCase = response.data;
|
||||
if (testCase) {
|
||||
this.$refs.testPlanTestCaseList.handleEdit(testCase);
|
||||
this.$router.push('/track/plan/view/' + testCase.planId);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="test-plan-header-bar">
|
||||
<div class="header-info">
|
||||
<slot name="info"></slot>
|
||||
</div>
|
||||
<div class="menu-ul">
|
||||
<slot name="menu"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import SelectMenu from "../../../../common/SelectMenu";
|
||||
export default {
|
||||
name: "MsTestPlanHeaderBar",
|
||||
components: {SelectMenu},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.test-plan-header-bar {
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
line-height: 50px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu-ul {
|
||||
width: 500px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue