test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/business/components/api/definition/ApiDefinition.vue
View File

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

33
frontend/src/business/components/api/definition/components/ApiCaseList.vue
View File

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

247
frontend/src/business/components/api/definition/components/ApiList.vue
View File

@ -1,100 +1,102 @@
<template> <template>
<div class="card-container">
<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>
<el-table border :data="tableData" row-key="id" class="test-content adjust-table"
@select-all="handleSelectAll"
@select="handleSelect">
<el-table-column type="selection"/>
<el-table-column width="40" :resizable="false" align="center">
<template v-slot:default="scope">
<show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectRows.size"/>
</template>
</el-table-column>
<el-table-column prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/> <div id="svgBox" style="overflow: auto">
<el-table-column <div id="svgTop" style="background-color: white">
prop="status" <el-card class="card-content">
column-key="api_status" <!--<ms-table-header :showCreate="false" :condition.sync="condition" @search="search"-->
:label="$t('api_test.definition.api_status')" <!--:title="$t('api_test.definition.api_title')"/>-->
show-overflow-tooltip> <el-input placeholder="搜索" @blur="search" style="float: right ;width: 300px;margin-bottom: 20px;margin-right: 20px" size="small" v-model="condition.name"/>
<template v-slot:default="scope"> <el-table border :data="tableData" row-key="id" class="test-content adjust-table"
<ms-tag v-if="scope.row.status == 'Prepare'" type="info" @select-all="handleSelectAll"
:content="$t('test_track.plan.plan_status_prepare')"/> @select="handleSelect" :height="screenHeight">
<ms-tag v-if="scope.row.status == 'Underway'" type="primary" <el-table-column type="selection"/>
:content="$t('test_track.plan.plan_status_running')"/> <el-table-column width="40" :resizable="false" align="center">
<ms-tag v-if="scope.row.status == 'Completed'" type="success" <template v-slot:default="scope">
:content="$t('test_track.plan.plan_status_completed')"/> <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectRows.size"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/>
prop="method" <el-table-column
:label="$t('api_test.definition.api_type')" prop="status"
show-overflow-tooltip> column-key="api_status"
<template v-slot:default="scope" class="request-method"> :label="$t('api_test.definition.api_status')"
<el-tag size="mini" show-overflow-tooltip>
:style="{'background-color': getColor(true, scope.row.method)}" class="api-el-tag"> {{ scope.row.method <template v-slot:default="scope">
}} <ms-tag v-if="scope.row.status == 'Prepare'" type="info"
</el-tag> :content="$t('test_track.plan.plan_status_prepare')"/>
</template> <ms-tag v-if="scope.row.status == 'Underway'" type="primary"
</el-table-column> :content="$t('test_track.plan.plan_status_running')"/>
<ms-tag v-if="scope.row.status == 'Completed'" type="success"
:content="$t('test_track.plan.plan_status_completed')"/>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="path" prop="method"
:label="$t('api_test.definition.api_path')" :label="$t('api_test.definition.api_type')"
show-overflow-tooltip/> show-overflow-tooltip>
<template v-slot:default="scope" class="request-method">
<el-tag size="mini"
:style="{'background-color': getColor(true, scope.row.method)}" class="api-el-tag"> {{ scope.row.method
}}
</el-tag>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="userName" prop="path"
:label="$t('api_test.definition.api_principal')" :label="$t('api_test.definition.api_path')"
show-overflow-tooltip/> show-overflow-tooltip/>
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime"> <el-table-column
<template v-slot:default="scope"> prop="userName"
<span>{{ scope.row.updateTime | timestampFormatDate }}</span> :label="$t('api_test.definition.api_principal')"
</template> show-overflow-tooltip/>
</el-table-column>
<el-table-column <el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
prop="caseTotal" <template v-slot:default="scope">
:label="$t('api_test.definition.api_case_number')" <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
show-overflow-tooltip/> </template>
</el-table-column>
<el-table-column <el-table-column
prop="caseStatus" prop="caseTotal"
:label="$t('api_test.definition.api_case_status')" :label="$t('api_test.definition.api_case_number')"
show-overflow-tooltip/> show-overflow-tooltip/>
<el-table-column <el-table-column
prop="casePassingRate" prop="caseStatus"
:label="$t('api_test.definition.api_case_passing_rate')" :label="$t('api_test.definition.api_case_status')"
show-overflow-tooltip/> show-overflow-tooltip/>
<el-table-column
prop="casePassingRate"
:label="$t('api_test.definition.api_case_passing_rate')"
show-overflow-tooltip/>
<el-table-column :label="$t('commons.operating')" min-width="130" align="center"> <el-table-column :label="$t('commons.operating')" min-width="130" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-button type="text" @click="editApi(scope.row)">编辑</el-button> <el-button type="text" @click="editApi(scope.row)">编辑</el-button>
<el-button type="text" @click="handleTestCase(scope.row)">用例</el-button> <el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button> <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
<ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"/>
:total="total"/> </el-card>
</div>
</el-card> <div id="svgResize"/>
<div id="svgDown">
<ms-bottom-container v-bind:enableAsideHidden="isHide"> <ms-bottom-container v-bind:enableAsideHidden="isHide">
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/> <ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/>
</ms-bottom-container> </ms-bottom-container>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -140,6 +142,7 @@
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
screenHeight: document.documentElement.clientHeight - 350,//屏幕高度
} }
}, },
props: { props: {
@ -150,6 +153,9 @@
created: function () { created: function () {
this.initApiTable(); this.initApiTable();
}, },
mounted() {
this.dragControllerDiv();
},
watch: { watch: {
currentProject() { currentProject() {
this.initApiTable(); this.initApiTable();
@ -162,7 +168,7 @@
currentProtocol() { currentProtocol() {
this.initApiTable(); this.initApiTable();
this.apiCaseClose(); this.apiCaseClose();
} },
}, },
methods: { methods: {
initApiTable() { initApiTable() {
@ -247,6 +253,14 @@
}); });
}, },
handleTestCase(testCase) { 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; this.selectApi = testCase;
let request = JSON.parse(testCase.request); let request = JSON.parse(testCase.request);
this.selectApi.url = request.path; this.selectApi.url = request.path;
@ -259,6 +273,13 @@
}); });
}, },
apiCaseClose() { 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; this.isHide = true;
}, },
getColor(enable, method) { getColor(enable, method) {
@ -266,6 +287,33 @@
return this.methodColorMap.get(method); 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> </script>
@ -284,4 +332,33 @@
.api-el-tag { .api-el-tag {
color: white; 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> </style>

5
frontend/src/business/components/api/definition/components/BottomContainer.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-aside :width="width" class="ms-aside-container" <el-aside :width="width" class="ms-aside-container"
:style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}"> :style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
<slot></slot> <slot></slot>
</el-aside> </el-aside>
</template> </template>
@ -23,9 +23,8 @@
<style scoped> <style scoped>
.ms-aside-container { .ms-aside-container {
border: 1px solid #E6E6E6;
border-radius: 2px;
margin-top: 10px; margin-top: 10px;
height: 600px;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFF; background-color: #FFF;
} }