mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-05 21:49:23 +08:00
feat(接口定义): 基本功能优化完成
This commit is contained in:
parent
5bfbf01c3d
commit
bc4aba0210
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -1,100 +1,102 @@
|
||||
<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/>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
column-key="api_status"
|
||||
:label="$t('api_test.definition.api_status')"
|
||||
show-overflow-tooltip>
|
||||
<template v-slot:default="scope">
|
||||
<ms-tag v-if="scope.row.status == 'Prepare'" type="info"
|
||||
:content="$t('test_track.plan.plan_status_prepare')"/>
|
||||
<ms-tag v-if="scope.row.status == 'Underway'" type="primary"
|
||||
: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>
|
||||
<div id="svgBox" style="overflow: auto">
|
||||
<div id="svgTop" style="background-color: white">
|
||||
<el-card class="card-content">
|
||||
<!--<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" :height="screenHeight">
|
||||
<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="method"
|
||||
:label="$t('api_test.definition.api_type')"
|
||||
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 prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
column-key="api_status"
|
||||
:label="$t('api_test.definition.api_status')"
|
||||
show-overflow-tooltip>
|
||||
<template v-slot:default="scope">
|
||||
<ms-tag v-if="scope.row.status == 'Prepare'" type="info"
|
||||
:content="$t('test_track.plan.plan_status_prepare')"/>
|
||||
<ms-tag v-if="scope.row.status == 'Underway'" type="primary"
|
||||
: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
|
||||
prop="path"
|
||||
:label="$t('api_test.definition.api_path')"
|
||||
show-overflow-tooltip/>
|
||||
<el-table-column
|
||||
prop="method"
|
||||
:label="$t('api_test.definition.api_type')"
|
||||
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
|
||||
prop="userName"
|
||||
:label="$t('api_test.definition.api_principal')"
|
||||
show-overflow-tooltip/>
|
||||
<el-table-column
|
||||
prop="path"
|
||||
:label="$t('api_test.definition.api_path')"
|
||||
show-overflow-tooltip/>
|
||||
|
||||
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
:label="$t('api_test.definition.api_principal')"
|
||||
show-overflow-tooltip/>
|
||||
|
||||
<el-table-column
|
||||
prop="caseTotal"
|
||||
:label="$t('api_test.definition.api_case_number')"
|
||||
show-overflow-tooltip/>
|
||||
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="caseStatus"
|
||||
:label="$t('api_test.definition.api_case_status')"
|
||||
show-overflow-tooltip/>
|
||||
<el-table-column
|
||||
prop="caseTotal"
|
||||
:label="$t('api_test.definition.api_case_number')"
|
||||
show-overflow-tooltip/>
|
||||
|
||||
<el-table-column
|
||||
prop="casePassingRate"
|
||||
:label="$t('api_test.definition.api_case_passing_rate')"
|
||||
show-overflow-tooltip/>
|
||||
<el-table-column
|
||||
prop="caseStatus"
|
||||
:label="$t('api_test.definition.api_case_status')"
|
||||
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">
|
||||
<template v-slot:default="scope">
|
||||
<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="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
|
||||
:total="total"/>
|
||||
|
||||
</el-card>
|
||||
|
||||
<ms-bottom-container v-bind:enableAsideHidden="isHide">
|
||||
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/>
|
||||
</ms-bottom-container>
|
||||
|
||||
<el-table-column :label="$t('commons.operating')" min-width="130" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<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="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
|
||||
</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>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-aside :width="width" class="ms-aside-container"
|
||||
:style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
|
||||
:style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
|
||||
<slot></slot>
|
||||
</el-aside>
|
||||
</template>
|
||||
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user