This commit is contained in:
chenjianxing 2020-05-16 19:35:11 +08:00
parent a4ab4e238b
commit 8dd6f350f0
11 changed files with 196 additions and 136 deletions

View File

@ -0,0 +1,23 @@
<template>
<el-aside class="ms-aside-container">
<slot></slot>
</el-aside>
</template>
<script>
export default {
name: "MsAsideContainer"
}
</script>
<style scoped>
.ms-aside-container {
border: 1px solid #EBEEF5;
border-radius: 2px;
background: white;
}
</style>

View File

@ -0,0 +1,27 @@
<template>
<el-container class="ms-container">
<slot></slot>
</el-container>
</template>
<script>
export default {
name: "MsContainer"
}
</script>
<style scoped>
.ms-container >>> span.title {
font-size: 16px;
font-weight: 500;
margin-top: 0;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
white-space: nowrap;
}
</style>

View File

@ -0,0 +1,20 @@
<template>
<el-main class="ms-main-container">
<slot></slot>
</el-main>
</template>
<script>
export default {
name: "MsMainContainer"
}
</script>
<style scoped>
.ms-main-container {
padding: 15px;
height: calc(100vh - 80px);
}
</style>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <ms-container>
<div class="main-content"> <ms-main-container>
<el-card class="table-card" v-loading="result.loading"> <el-card class="table-card" v-loading="result.loading">
<template v-slot:header> <template v-slot:header>
<ms-table-header :condition.sync="condition" @search="search" @create="create" <ms-table-header :condition.sync="condition" @search="search" @create="create"
@ -19,26 +19,27 @@
<ms-table-pagination :change="list" :current-page.sync="currentPage" :page-size.sync="pageSize" <ms-table-pagination :change="list" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/> :total="total"/>
</el-card> </el-card>
</ms-main-container>
<el-dialog :title="title" :visible.sync="createVisible"> <el-dialog :title="title" :visible.sync="createVisible">
<el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small"> <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
<el-form-item :label="$t('commons.name')"> <el-form-item :label="$t('commons.name')">
<el-input v-model="form.name" autocomplete="off"></el-input> <el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.description')"> <el-form-item :label="$t('commons.description')">
<el-input type="textarea" v-model="form.description"></el-input> <el-input type="textarea" v-model="form.description"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template v-slot:footer> <template v-slot:footer>
<div class="dialog-footer"> <div class="dialog-footer">
<ms-dialog-footer <ms-dialog-footer
@cancel="createVisible = false" @cancel="createVisible = false"
@confirm="submit('form')"/> @confirm="submit('form')"/>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div>
</div> </ms-container>
</template> </template>
<script> <script>
@ -49,10 +50,14 @@
import MsTableOperator from "../common/components/MsTableOperator"; import MsTableOperator from "../common/components/MsTableOperator";
import MsDialogFooter from "../common/components/MsDialogFooter"; import MsDialogFooter from "../common/components/MsDialogFooter";
import {getCurrentUser} from "../../../common/js/utils"; import {getCurrentUser} from "../../../common/js/utils";
import MsContainer from "../common/components/MsContainer";
import MsMainContainer from "../common/components/MsMainContainer";
export default { export default {
name: "MsProject", name: "MsProject",
components: {MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter}, components: {
MsMainContainer,
MsContainer, MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
data() { data() {
return { return {
createVisible: false, createVisible: false,

View File

@ -28,24 +28,9 @@
<style> <style>
.tree-aside {
position: relative;
border: 1px solid #EBEEF5;
box-sizing: border-box;
height: calc(100vh - 80px);
background: white;
}
.node-tree { .node-tree {
margin: 3%; margin: 3%;
} }
.case-container {
margin-top: 0;
margin-left: 0;
}
</style> </style>
<style scoped> <style scoped>

View File

@ -1,51 +1,51 @@
<template> <template>
<div class="main-content"> <ms-container>
<el-container class="case-container">
<el-aside class="tree-aside">
<select-menu
:data="projects"
:current-data="currentProject"
:title="$t('test_track.project')"
@dataChange="changeProject">
</select-menu>
<node-tree class="node-tree"
v-loading="result.loading"
@nodeSelectEvent="nodeChange"
@refresh="refresh"
:tree-nodes="treeNodes"
:type="'edit'"
:draggable="true"
:select-node.sync="selectNode"
@refreshTable="refreshTable"
ref="nodeTree"/>
</el-aside>
<el-main> <ms-aside-container>
<test-case-list <select-menu
:current-project="currentProject" :data="projects"
:select-node-ids="selectNodeIds" :current-data="currentProject"
:select-parent-nodes="selectParentNodes" :title="$t('test_track.project')"
@testCaseEdit="editTestCase" @dataChange="changeProject"/>
@testCaseCopy="copyTestCase" <node-tree
@testCaseDetail="showTestCaseDetail" class="node-tree"
@refresh="refresh" v-loading="result.loading"
@moveToNode="moveToNode" @nodeSelectEvent="nodeChange"
ref="testCaseList"> @refresh="refresh"
</test-case-list> :tree-nodes="treeNodes"
</el-main> :type="'edit'"
</el-container> :draggable="true"
:select-node.sync="selectNode"
@refreshTable="refreshTable"
ref="nodeTree"/>
</ms-aside-container>
<test-case-edit <ms-main-container>
@refresh="refresh" <test-case-list
:read-only="testCaseReadOnly" :current-project="currentProject"
:tree-nodes="treeNodes" :select-node-ids="selectNodeIds"
:select-node="selectNode" :select-parent-nodes="selectParentNodes"
ref="testCaseEditDialog"> @testCaseEdit="editTestCase"
</test-case-edit> @testCaseCopy="copyTestCase"
@testCaseDetail="showTestCaseDetail"
@refresh="refresh"
@moveToNode="moveToNode"
ref="testCaseList">
</test-case-list>
</ms-main-container>
<test-case-move @refresh="refresh" ref="testCaseMove"/> <test-case-edit
@refresh="refresh"
:read-only="testCaseReadOnly"
:tree-nodes="treeNodes"
:select-node="selectNode"
ref="testCaseEditDialog">
</test-case-edit>
<test-case-move @refresh="refresh" ref="testCaseMove"/>
</ms-container>
</div>
</template> </template>
<script> <script>
@ -56,10 +56,15 @@
import TestCaseList from "./components/TestCaseList"; import TestCaseList from "./components/TestCaseList";
import SelectMenu from "../common/SelectMenu"; import SelectMenu from "../common/SelectMenu";
import TestCaseMove from "./components/TestCaseMove"; import TestCaseMove from "./components/TestCaseMove";
import MsContainer from "../../common/components/MsContainer";
import MsAsideContainer from "../../common/components/MsAsideContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
export default { export default {
name: "TestCase", name: "TestCase",
components: {TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu}, components: {
MsMainContainer,
MsAsideContainer, MsContainer, TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu},
comments: {}, comments: {},
data() { data() {
return { return {

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <ms-container>
<div class="main-content"> <ms-main-container>
<el-row> <el-row>
<el-col :span="15"> <el-col :span="15">
<related-test-plan-list ref="relatedTestPlanList"/> <related-test-plan-list ref="relatedTestPlanList"/>
@ -9,16 +9,18 @@
<test-case-side-list :title="'最近测试'" ref="testCaseRecentList"/> <test-case-side-list :title="'最近测试'" ref="testCaseRecentList"/>
</el-col> </el-col>
</el-row> </el-row>
</div> </ms-main-container>
</div> </ms-container>
</template> </template>
<script> <script>
import RelatedTestPlanList from "./components/RelatedTestPlanList"; import RelatedTestPlanList from "./components/RelatedTestPlanList";
import TestCaseSideList from "./components/TestCaseSideList"; import TestCaseSideList from "./components/TestCaseSideList";
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
export default { export default {
name: "TrackHome", name: "TrackHome",
components: {TestCaseSideList, RelatedTestPlanList}, components: {MsMainContainer, MsContainer, TestCaseSideList, RelatedTestPlanList},
watch: { watch: {
'$route'(to,from) { '$route'(to,from) {
if (to.path.indexOf('/track/home') > -1) { if (to.path.indexOf('/track/home') > -1) {
@ -37,7 +39,7 @@
<style scoped> <style scoped>
.main-content >>> .el-table { .ms-main-container >>> .el-table {
cursor:pointer; cursor:pointer;
} }

View File

@ -1,25 +1,28 @@
<template> <template>
<div class="container"> <ms-container>
<div class="main-content">
<ms-main-container>
<test-plan-list <test-plan-list
@openTestPlanEditDialog="openTestPlanEditDialog" @openTestPlanEditDialog="openTestPlanEditDialog"
@testPlanEdit="openTestPlanEditDialog" @testPlanEdit="openTestPlanEditDialog"
ref="testPlanList"></test-plan-list> ref="testPlanList"/>
<test-plan-edit </ms-main-container>
ref="testPlanEditDialog"
@refresh="refreshTestPlanList"></test-plan-edit> <test-plan-edit ref="testPlanEditDialog" @refresh="refreshTestPlanList"/>
</div>
</div> </ms-container>
</template> </template>
<script> <script>
import TestPlanList from './components/TestPlanList'; import TestPlanList from './components/TestPlanList';
import TestPlanEdit from './components/TestPlanEdit'; import TestPlanEdit from './components/TestPlanEdit';
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
export default { export default {
name: "TestPlan", name: "TestPlan",
components: {TestPlanList, TestPlanEdit}, components: {MsMainContainer, MsContainer, TestPlanList, TestPlanEdit},
data() { data() {
return { return {
} }

View File

@ -1,8 +1,5 @@
<template> <template>
<el-card class="table-card" v-loading="result.loading">
<div class="container">
<el-main class="main-content">
<el-card class="table-card" v-loading="result.loading">
<template v-slot:header> <template v-slot:header>
<ms-table-header :condition.sync="condition" @search="initTableData" @create="testPlanCreate" <ms-table-header :condition.sync="condition" @search="initTableData" @create="testPlanCreate"
:create-tip="$t('test_track.plan.create_plan')" :title="$t('test_track.plan.test_plan')"/> :create-tip="$t('test_track.plan.create_plan')" :title="$t('test_track.plan.test_plan')"/>
@ -67,8 +64,6 @@
<ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize" <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/> :total="total"/>
</el-card> </el-card>
</el-main>
</div>
</template> </template>
<script> <script>

View File

@ -1,38 +1,39 @@
<template> <template>
<div class="main-content">
<el-container class="case-container">
<el-aside class="tree-aside">
<select-menu
:data="testPlans"
:current-data="currentPlan"
:title="$t('test_track.plan_view.plan')"
@dataChange="changePlan"/>
<node-tree class="node-tree" <ms-container>
v-loading="result.loading"
@nodeSelectEvent="nodeChange"
@refresh="refresh"
:tree-nodes="treeNodes"
:draggable="false"
ref="nodeTree"/>
</el-aside>
<el-main> <ms-aside-container>
<test-plan-test-case-list class="table-list" <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" @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
@refresh="refresh" @refresh="refresh"
:plan-id="planId" :plan-id="planId"
:select-node-ids="selectNodeIds" :select-node-ids="selectNodeIds"
:select-parent-nodes="selectParentNodes" :select-parent-nodes="selectParentNodes"
ref="testPlanTestCaseList"/> ref="testPlanTestCaseList"/>
</el-main> </ms-main-container>
</el-container>
<test-case-relevance <test-case-relevance
@refresh="refresh" @refresh="refresh"
:plan-id="planId" :plan-id="planId"
ref="testCaseRelevance"/> ref="testCaseRelevance"/>
</div>
</ms-container>
</template> </template>
@ -42,10 +43,15 @@
import TestPlanTestCaseList from "./comonents/TestPlanTestCaseList"; import TestPlanTestCaseList from "./comonents/TestPlanTestCaseList";
import TestCaseRelevance from "./comonents/TestCaseRelevance"; import TestCaseRelevance from "./comonents/TestCaseRelevance";
import SelectMenu from "../../common/SelectMenu"; import SelectMenu from "../../common/SelectMenu";
import MsContainer from "../../../common/components/MsContainer";
import MsAsideContainer from "../../../common/components/MsAsideContainer";
import MsMainContainer from "../../../common/components/MsMainContainer";
export default { export default {
name: "TestPlanView", name: "TestPlanView",
components: {NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu}, components: {
MsMainContainer,
MsAsideContainer, MsContainer, NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
data() { data() {
return { return {
result: {}, result: {},
@ -128,9 +134,4 @@
</script> </script>
<style scoped> <style scoped>
.el-main {
padding: 15px;
}
</style> </style>

View File

@ -33,14 +33,8 @@ body {
clear: both; clear: both;
} }
.card-container {
position: relative;
}
.card-content {
width: 100%;
position: absolute;
}
.table-card > .el-card__body { .table-card > .el-card__body {
padding-top: 0; padding-top: 0;