feat(接口定义): 基本功能优化完成

This commit is contained in:
fit2-zhao 2020-11-26 18:29:23 +08:00
parent 5bfbf01c3d
commit bc4aba0210
4 changed files with 181 additions and 112 deletions

View File

@ -1,6 +1,5 @@
<template>
<ms-container>
<ms-aside-container>
<ms-node-tree @selectModule="selectModule" @getApiModuleTree="initTree" @changeProject="changeProject" @changeProtocol="changeProtocol"
@refresh="refresh" @saveAsEdit="editApi" @debug="debug" @exportAPI="exportAPI"/>
@ -61,6 +60,8 @@
</el-tabs>
</ms-main-container>
</ms-container>
</template>
@ -71,7 +72,6 @@
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
import MsAsideContainer from "../../common/components/MsAsideContainer";
import MsBottomContainer from "./components/BottomContainer";
import MsApiConfig from "./components/ApiConfig";
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
@ -93,7 +93,6 @@
MsMainContainer,
MsContainer,
MsAsideContainer,
MsBottomContainer,
MsApiConfig,
MsDebugHttpPage,
MsRunTestHttpPage,
@ -254,5 +253,8 @@
/deep/ .el-tabs__header {
margin-right: 82px;
}
/deep/ .el-main{
overflow: hidden;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div>
<el-container>
<el-container style="padding-bottom: 200px">
<el-header style="width: 100% ;padding: 0px">
<el-card>
<el-row>
@ -8,24 +8,17 @@
<div class="variable-combine"> {{api.name}}</div>
</el-col>
<el-col :span="api.protocol==='HTTP'? 1:3">
<template>
<div>
<ms-tag v-if="api.status == 'Prepare'" type="info"
:content="$t('test_track.plan.plan_status_prepare')"/>
<ms-tag v-if="api.status == 'Underway'" type="primary"
:content="$t('test_track.plan.plan_status_running')"/>
<ms-tag v-if="api.status == 'Completed'" type="success"
:content="$t('test_track.plan.plan_status_completed')"/>
</div>
</template>
<ms-tag v-if="api.status == 'Prepare'" type="info" :content="$t('test_track.plan.plan_status_prepare')"/>
<ms-tag v-if="api.status == 'Underway'" type="primary" :content="$t('test_track.plan.plan_status_running')"/>
<ms-tag v-if="api.status == 'Completed'" type="success" :content="$t('test_track.plan.plan_status_completed')"/>
</el-col>
<el-col :span="api.protocol==='HTTP'? 4:0">
<div class="variable-combine">{{api.path ===null ? " " : api.path}}</div>
<div class="variable-combine" style="margin-left: 10px">{{api.path ===null ? " " : api.path}}</div>
</el-col>
<el-col :span="2">
<div>{{$t('test_track.plan_view.case_count')}}{{apiCaseList.length}}</div>
</el-col>
<el-col :span="4">
<el-col :span="3">
<div>
<el-select size="small" :placeholder="$t('api_test.definition.request.grade_info')" v-model="priorityValue"
class="ms-api-header-select" @change="getApiTest">
@ -71,7 +64,7 @@
</el-col>
<el-col :span="1">
<el-col :span="2">
<button type="button" aria-label="Close" class="el-card-btn" @click="apiCaseClose()"><i
class="el-dialog__close el-icon el-icon-close"></i></button>
</el-col>
@ -87,10 +80,9 @@
<!-- 用例部分 -->
<el-main v-loading="loading">
<div v-for="(item,index) in apiCaseList" :key="index">
<el-card style="margin-top: 10px" @click.native="selectTestCase(item,$event)">
<el-card style="margin-top: 5px" @click.native="selectTestCase(item,$event)">
<el-row>
<el-col :span="5">
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{index+1}}</div>
</div>
@ -100,14 +92,13 @@
<el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
</el-select>
</el-col>
<el-col :span="10">
<i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
@click="active(item)"/>
<el-input v-if="item.type==='create'" size="small" v-model="item.name" :name="index" :key="index"
class="ms-api-header-select" style="width: 180px"
@blur="saveTestCase(item)"
/>
@blur="saveTestCase(item)"/>
<span v-else>
{{item.type!= 'create' ? item.name:''}}
<i class="el-icon-edit" style="cursor:pointer" @click="showInput(item)"/>
@ -117,6 +108,7 @@
<span> {{item.updateTime | timestampFormatDate }}</span> {{item.updateUser}} 更新
</div>
</el-col>
<el-col :span="4">
<ms-tip-button @click="singleRun(item)" :tip="$t('api_test.run')" icon="el-icon-video-play"
style="background-color: #409EFF;color: white" size="mini" circle/>
@ -487,8 +479,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
width: 100%;
font-size: 10px;
}
.icon.is-active {

View File

@ -1,14 +1,15 @@
<template>
<div class="card-container">
<div id="svgBox" style="overflow: auto">
<div id="svgTop" style="background-color: white">
<el-card class="card-content">
<template v-slot:header>
<ms-table-header :showCreate="false" :condition.sync="condition" @search="search"
:title="$t('api_test.definition.api_title')"/>
</template>
<!--<ms-table-header :showCreate="false" :condition.sync="condition" @search="search"-->
<!--:title="$t('api_test.definition.api_title')"/>-->
<el-input placeholder="搜索" @blur="search" style="float: right ;width: 300px;margin-bottom: 20px;margin-right: 20px" size="small" v-model="condition.name"/>
<el-table border :data="tableData" row-key="id" class="test-content adjust-table"
@select-all="handleSelectAll"
@select="handleSelect">
@select="handleSelect" :height="screenHeight">
<el-table-column type="selection"/>
<el-table-column width="40" :resizable="false" align="center">
<template v-slot:default="scope">
@ -84,17 +85,18 @@
</template>
</el-table-column>
</el-table>
<ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
</el-card>
</div>
<div id="svgResize"/>
<div id="svgDown">
<ms-bottom-container v-bind:enableAsideHidden="isHide">
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/>
</ms-bottom-container>
</div>
</div>
</template>
<script>
@ -140,6 +142,7 @@
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 350,//
}
},
props: {
@ -150,6 +153,9 @@
created: function () {
this.initApiTable();
},
mounted() {
this.dragControllerDiv();
},
watch: {
currentProject() {
this.initApiTable();
@ -162,7 +168,7 @@
currentProtocol() {
this.initApiTable();
this.apiCaseClose();
}
},
},
methods: {
initApiTable() {
@ -247,6 +253,14 @@
});
},
handleTestCase(testCase) {
let h = window.screen.height;
let svgTop = document.getElementById("svgTop");
svgTop.style.height = h / 2 - 200 + "px";
let svgDown = document.getElementById("svgDown");
svgDown.style.height = h / 2 + "px";
this.selectApi = testCase;
let request = JSON.parse(testCase.request);
this.selectApi.url = request.path;
@ -259,6 +273,13 @@
});
},
apiCaseClose() {
let h = window.screen.height;
let svgTop = document.getElementById("svgTop");
svgTop.style.height = h - 200 + "px";
let svgDown = document.getElementById("svgDown");
svgDown.style.height = 0 + "px";
this.isHide = true;
},
getColor(enable, method) {
@ -266,6 +287,33 @@
return this.methodColorMap.get(method);
}
},
dragControllerDiv: function () {
let svgResize = document.getElementById("svgResize");
let svgTop = document.getElementById("svgTop");
let svgDown = document.getElementById("svgDown");
let svgBox = document.getElementById("svgBox");
svgResize.onmousedown = function (e) {
let startY = e.clientY;
svgResize.top = svgResize.offsetTop;
document.onmousemove = function (e) {
let endY = e.clientY;
let moveLen = svgResize.top + (endY - startY);
let maxT = svgBox.clientHeight - svgResize.offsetHeight;
if (moveLen < 30) moveLen = 30;
if (moveLen > maxT - 30) moveLen = maxT - 30;
svgResize.style.top = moveLen;
svgTop.style.height = moveLen + "px";
svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + "px";
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
svgResize.releaseCapture && svgResize.releaseCapture();
}
svgResize.setCapture && svgResize.setCapture();
return false;
}
},
}
}
</script>
@ -284,4 +332,33 @@
.api-el-tag {
color: white;
}
#svgBox {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#svgTop {
height: calc(30% - 5px);
width: 100%;
float: left;
overflow: auto;
}
#svgResize {
position: relative;
height: 5px;
width: 100%;
cursor: s-resize;
float: left;
}
#svgDown {
height: 70%;
width: 100%;
float: left;
overflow: hidden;
}
</style>

View File

@ -23,9 +23,8 @@
<style scoped>
.ms-aside-container {
border: 1px solid #E6E6E6;
border-radius: 2px;
margin-top: 10px;
height: 600px;
box-sizing: border-box;
background-color: #FFF;
}