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

Merge remote-tracking branch 'origin/v1.6' into v1.6 

# Conflicts:
#	backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
#	frontend/src/business/components/api/definition/components/list/ApiList.vue
This commit is contained in:
song.tianyang 2020-12-29 17:46:22 +08:00
parent f2908ac330 af61afde13
commit 7cc9f8c01d
32 changed files with 451 additions and 1339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/src/main/java/io/metersphere/api/controller/ApiDefinitionController.java
View File

@ -41,6 +41,13 @@ public class ApiDefinitionController {
return PageUtils.setPageInfo(page, apiDefinitionService.list(request)); return PageUtils.setPageInfo(page, apiDefinitionService.list(request));
} }
@PostMapping("/list/relevance/{goPage}/{pageSize}")
public Pager<List<ApiDefinitionResult>> listRelevance(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody ApiDefinitionRequest request) {
Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
request.setWorkspaceId(SessionUtils.getCurrentWorkspaceId());
return PageUtils.setPageInfo(page, apiDefinitionService.listRelevance(request));
}
@PostMapping("/list/all") @PostMapping("/list/all")
public List<ApiDefinitionResult> list(@RequestBody ApiDefinitionRequest request) { public List<ApiDefinitionResult> list(@RequestBody ApiDefinitionRequest request) {
return apiDefinitionService.list(request); return apiDefinitionService.list(request);

1
backend/src/main/java/io/metersphere/api/dto/definition/ApiDefinitionRequest.java
View File

@ -20,6 +20,7 @@ public class ApiDefinitionRequest {
private String name; private String name;
private String workspaceId; private String workspaceId;
private String userId; private String userId;
private String planId;
private boolean recent = false; private boolean recent = false;
private List<OrderRequest> orders; private List<OrderRequest> orders;
private List<String> filters; private List<String> filters;

6
backend/src/main/java/io/metersphere/api/parse/Swagger2Parser.java
View File

@ -283,6 +283,12 @@ public class Swagger2Parser extends ApiImportAbstractParser {
} else { } else {
jsonObject.put(key, new ArrayList<>()); jsonObject.put(key, new ArrayList<>());
} }
} else if (value instanceof RefProperty) {
RefProperty refProperty = (RefProperty) value;
String simpleRef = refProperty.getSimpleRef();
refSet.add(simpleRef);
Model model = definitions.get(simpleRef);
jsonObject.put(key, getBodyParameters(model.getProperties(), refSet));
} else { } else {
jsonObject.put(key, getDefaultValueByPropertyType(value)); jsonObject.put(key, getDefaultValueByPropertyType(value));
} }

45
backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
View File

@ -79,23 +79,7 @@ public class ApiDefinitionService {
public List<ApiDefinitionResult> list(ApiDefinitionRequest request) { public List<ApiDefinitionResult> list(ApiDefinitionRequest request) {
request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders())); request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
List<ApiDefinitionResult> resList = extApiDefinitionMapper.list(request); List<ApiDefinitionResult> resList = extApiDefinitionMapper.list(request);
if (!resList.isEmpty()) { calculateResult(resList);
List<String> ids = resList.stream().map(ApiDefinitionResult::getId).collect(Collectors.toList());
List<ApiComputeResult> results = extApiDefinitionMapper.selectByIds(ids);
Map<String, ApiComputeResult> resultMap = results.stream().collect(Collectors.toMap(ApiComputeResult::getApiDefinitionId, Function.identity()));
for (ApiDefinitionResult res : resList) {
ApiComputeResult compRes = resultMap.get(res.getId());
if (compRes != null) {
res.setCaseTotal(compRes.getCaseTotal());
res.setCasePassingRate(compRes.getPassRate());
res.setCaseStatus(compRes.getStatus());
} else {
res.setCaseTotal("-");
res.setCasePassingRate("-");
res.setCaseStatus("-");
}
}
}
return resList; return resList;
} }
@ -517,4 +501,31 @@ public class ApiDefinitionService {
} }
extApiDefinitionMapper.removeToGc(apiIds); extApiDefinitionMapper.removeToGc(apiIds);
} }
public List<ApiDefinitionResult> listRelevance(ApiDefinitionRequest request) {
request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
List<ApiDefinitionResult> resList = extApiDefinitionMapper.listRelevance(request);
calculateResult(resList);
return resList;
}
public void calculateResult(List<ApiDefinitionResult> resList) {
if (!resList.isEmpty()) {
List<String> ids = resList.stream().map(ApiDefinitionResult::getId).collect(Collectors.toList());
List<ApiComputeResult> results = extApiDefinitionMapper.selectByIds(ids);
Map<String, ApiComputeResult> resultMap = results.stream().collect(Collectors.toMap(ApiComputeResult::getApiDefinitionId, Function.identity()));
for (ApiDefinitionResult res : resList) {
ApiComputeResult compRes = resultMap.get(res.getId());
if (compRes != null) {
res.setCaseTotal(compRes.getCaseTotal());
res.setCasePassingRate(compRes.getPassRate());
res.setCaseStatus(compRes.getStatus());
} else {
res.setCaseTotal("-");
res.setCasePassingRate("-");
res.setCaseStatus("-");
}
}
}
}
} }

2
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.java
View File

@ -28,4 +28,6 @@ public interface ExtApiDefinitionMapper {
List<ApiDataCountResult> countApiCoverageByProjectID(String projectId); List<ApiDataCountResult> countApiCoverageByProjectID(String projectId);
ApiDefinition getNextNum(@Param("projectId") String projectId); ApiDefinition getNextNum(@Param("projectId") String projectId);
List<ApiDefinitionResult> listRelevance(@Param("request")ApiDefinitionRequest request);
} }

59
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml
View File

@ -295,4 +295,63 @@
<select id="getNextNum" resultType="io.metersphere.base.domain.ApiDefinition"> <select id="getNextNum" resultType="io.metersphere.base.domain.ApiDefinition">
SELECT * FROM api_definition WHERE api_definition.project_id = #{projectId} ORDER BY num DESC LIMIT 1; SELECT * FROM api_definition WHERE api_definition.project_id = #{projectId} ORDER BY num DESC LIMIT 1;
</select> </select>
<select id="listRelevance" resultType="io.metersphere.api.dto.definition.ApiDefinitionResult">
select api_definition.id, api_definition.project_id, api_definition.num,
api_definition.name,api_definition.protocol,api_definition.path,api_definition.module_id,api_definition.module_path,api_definition.method,
api_definition.description,api_definition.request,api_definition.response,api_definition.environment_id,
api_definition.status, api_definition.user_id, api_definition.create_time, api_definition.update_time
from api_definition
inner join
api_test_case c
on c.api_definition_id = api_definition.id
and not exists (
select id
from test_plan_api_case t
where t.api_case_id = c.id
and t.test_plan_id = #{request.planId}
)
<where>
<if test="request.combine != null">
<include refid="combine">
<property name="condition" value="request.combine"/>
<property name="name" value="request.name"/>
</include>
</if>
<if test="request.name != null">
and api_definition.name like CONCAT('%', #{request.name},'%')
</if>
<if test="request.protocol != null">
AND api_definition.protocol = #{request.protocol}
</if>
<if test="request.id != null">
AND api_definition.id = #{request.id}
</if>
<if test="request.moduleId != null">
AND api_definition.module_id = #{request.moduleId}
</if>
<if test="request.projectId != null">
AND api_definition.project_id = #{request.projectId}
</if>
<if test="request.moduleIds != null and request.moduleIds.size() > 0">
AND api_definition.module_id in
<foreach collection="request.moduleIds" item="nodeId" separator="," open="(" close=")">
#{nodeId}
</foreach>
</if>
<if test="request.filters != null and request.filters.size() > 0">
and api_definition.status in
<foreach collection="request.filters" item="value" separator="," open="(" close=")">
#{value}
</foreach>
</if>
</where>
<if test="request.orders != null and request.orders.size() > 0">
order by
<foreach collection="request.orders" separator="," item="order">
api_definition.${order.name} ${order.type}
</foreach>
</if>
</select>
</mapper> </mapper>

20
backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml
View File

@ -19,7 +19,7 @@
select select
t.id, t.environment_id, t.create_time, t.update_time, t.id, t.environment_id, t.create_time, t.update_time,
c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id, c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id,
a.module_id, a.path, a.protocol, ader.status execResult a.module_id, a.path, a.protocol, t.status execResult
from from
test_plan_api_case t test_plan_api_case t
inner join inner join
@ -32,24 +32,6 @@
api_definition a api_definition a
on on
c.api_definition_id = a.id c.api_definition_id = a.id
left join (
select
e.status, e.id, e.resource_id
from
api_definition_exec_result e
left join (
select
max(start_time) start_time , resource_id
from
api_definition_exec_result
group by
resource_id
) as b
on e.resource_id = b.resource_id
where
e.start_time = b.start_time and e.type = 'API_PLAN'
) as ader
on t.id = ader.resource_id
<if test="request.protocol != null and request.protocol!=''"> <if test="request.protocol != null and request.protocol!=''">
and a.protocol = #{request.protocol} and a.protocol = #{request.protocol}
</if> </if>

2
backend/src/main/java/io/metersphere/xpack

@ -1 +1 @@
Subproject commit c10b11f224e4186306e6ae3a3976e29a42af96a5 Subproject commit f27d1609d77f7d6c988d37d709466e844d350e17

3
frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
View File

@ -9,7 +9,7 @@
<el-table ref="scenarioTable" border :data="tableData" class="adjust-table" @select-all="select" @select="select" <el-table ref="scenarioTable" border :data="tableData" class="adjust-table" @select-all="select" @select="select"
v-loading="loading"> v-loading="loading">
<el-table-column type="selection" width="38"/> <el-table-column type="selection" width="38"/>
<el-table-column width="40" :resizable="false" align="center"> <el-table-column v-if="!referenced" width="40" :resizable="false" align="center">
<el-dropdown slot="header" style="width: 14px"> <el-dropdown slot="header" style="width: 14px">
<span class="el-dropdown-link" style="width: 14px"> <span class="el-dropdown-link" style="width: 14px">
<i class="el-icon-arrow-down el-icon--right" style="margin-left: 0px"></i> <i class="el-icon-arrow-down el-icon--right" style="margin-left: 0px"></i>
@ -23,6 +23,7 @@
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<template v-slot:default="{row}"> <template v-slot:default="{row}">
<show-more-btn :is-show="isSelect(row)" :buttons="buttons" :size="selectDataCounts"/> <show-more-btn :is-show="isSelect(row)" :buttons="buttons" :size="selectDataCounts"/>
</template> </template>

8
frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
View File

@ -15,10 +15,9 @@
ref="nodeTree"> ref="nodeTree">
<template v-slot:header> <template v-slot:header>
<el-input class="module-input" :placeholder="$t('test_track.module.search')" v-model="condition.filterText" <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
size="small">
<template v-slot:append> <template v-slot:append>
<el-button icon="el-icon-folder-add" @click="addScenario" v-tester/> <el-button v-if="!isReadOnly" icon="el-icon-folder-add" @click="addScenario" v-tester/>
</template> </template>
</el-input> </el-input>
<module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/> <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
@ -247,7 +246,4 @@
width: 30px; width: 30px;
} }
.module-input {
width: 275px;
}
</style> </style>

12
frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
View File

@ -115,7 +115,6 @@
<el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox> <el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox>
</el-col> </el-col>
<el-col :span="7" class="ms-font"> <el-col :span="7" class="ms-font">
{{$t('api_test.definition.request.run_env')}}：
<el-select v-model="currentEnvironmentId" size="small" class="ms-htt-width" <el-select v-model="currentEnvironmentId" size="small" class="ms-htt-width"
:placeholder="$t('api_test.definition.request.run_env')" :placeholder="$t('api_test.definition.request.run_env')"
clearable> clearable>
@ -177,6 +176,7 @@
</el-col> </el-col>
<!-- 按钮列表 --> <!-- 按钮列表 -->
<el-col :span="3"> <el-col :span="3">
<div @click="fabClick">
<vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions" <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
:click-auto-close="false" v-outside-click="outsideClick"> :click-auto-close="false" v-outside-click="outsideClick">
<fab-item <fab-item
@ -190,6 +190,7 @@
:icon="item.icon" :icon="item.icon"
@clickItem="item.click"/> @clickItem="item.click"/>
</vue-fab> </vue-fab>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -248,7 +249,7 @@
import InputTag from 'vue-input-tag' import InputTag from 'vue-input-tag'
import "@/common/css/material-icons.css" import "@/common/css/material-icons.css"
import OutsideClick from "@/common/js/outside-click"; import OutsideClick from "@/common/js/outside-click";
import ScenarioApiRelevance from "./api/ScenarioApiRelevance"; import ScenarioApiRelevance from "./api/ApiRelevance";
import ScenarioRelevance from "./api/ScenarioRelevance"; import ScenarioRelevance from "./api/ScenarioRelevance";
export default { export default {
@ -451,9 +452,14 @@
return false; return false;
}, },
outsideClick(e) { outsideClick(e) {
e.stopPropagation() e.stopPropagation();
this.showAll(); this.showAll();
}, },
fabClick() {
if (this.operatingElements.length < 1) {
this.$info("引用的场景或接口无法添加配置");
}
},
addComponent(type) { addComponent(type) {
switch (type) { switch (type) {
case ELEMENT_TYPE.IfController: case ELEMENT_TYPE.IfController:

337
frontend/src/business/components/api/automation/scenario/api/ApiCaseList.vue
View File

@ -1,337 +0,0 @@
<template>
<div>
<el-container style="padding-bottom: 300px">
<el-header style="width: 100% ;padding: 0px">
<el-card>
<el-row>
<el-col :span="2" class="ms-api-col">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</el-col>
<el-col :span="api.protocol==='HTTP'? 3:6" class="ms-api-col">
<div class="variable-combine"> {{api.name}}</div>
</el-col>
<el-col :span="api.protocol==='HTTP'? 1:3" class="ms-api-col">
<el-tag size="mini" :style="{'background-color': getColor(true, api.method), border: getColor(true, api.method)}" class="api-el-tag">
{{ api.method}}
</el-tag>
</el-col>
<el-col :span="api.protocol==='HTTP'? 5:0" class="ms-api-col">
<div class="variable-combine" style="margin-left: 10px">{{api.path ===null ? " " : api.path}}</div>
</el-col>
<el-col :span="2" class="ms-api-col">
<div>{{$t('test_track.plan_view.case_count')}}：{{apiCaseList.length}}</div>
</el-col>
<el-col :span="4">
<div>
<el-select size="small" :placeholder="$t('api_test.definition.request.grade_info')" v-model="priorityValue"
class="ms-api-header-select" @change="getApiTest">
<el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
</el-select>
</div>
</el-col>
<el-col :span="4">
<div class="ms-api-header-select">
<el-input size="small" :placeholder="$t('api_test.definition.request.select_case')"
v-model="name" @blur="getApiTest"/>
</div>
</el-col>
<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>
</el-row>
</el-card>
</el-header>
<!-- 用例部分 -->
<el-main v-loading="loading" style="overflow: auto;padding: 5px 10px 10px">
<el-checkbox-group v-model="checkedIndex" @change="handleCheckedChange">
<div v-for="(item,index) in apiCaseList" :key="index">
<el-card style="margin-top: 5px">
<el-row>
<el-col :span="1" class="ms-api-col">
<el-checkbox :key="item.id" :label="index+1"/>
</el-col>
<el-col :span="3">
<el-select size="small" v-model="item.priority" class="ms-api-select">
<el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
</el-select>
</el-col>
<el-col :span="14">
<span v-if="item.type!='create'" style="color: #303132;font-size: 13px">
<i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
@click="active(item)"/>
{{item.name}}
</span>
<div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
<span>
{{item.createTime | timestampFormatDate }}
{{item.createUser}} {{$t('api_test.definition.request.create_info')}}
</span>
<span>
{{item.updateTime | timestampFormatDate }}
{{item.updateUser}} {{$t('api_test.definition.request.update_info')}}
</span>
</div>
</el-col>
<el-col :span="6">
<div v-if="item.type!='create'">{{getResult(item.execResult)}}</div>
<div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
<span> {{item.updateTime | timestampFormatDate }}</span>
{{item.updateUser}}
</div>
</el-col>
</el-row>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="item.active">
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<ms-api-request-form :is-read-only="isReadOnly" :headers="item.request.headers " :request="item.request" v-if="api.protocol==='HTTP'"/>
<ms-tcp-basis-parameters :request="item.request" v-if="api.protocol==='TCP'"/>
<ms-sql-basis-parameters :request="item.request" v-if="api.protocol==='SQL'"/>
<ms-dubbo-basis-parameters :request="item.request" v-if="api.protocol==='DUBBO'"/>
<!-- 保存操作 -->
<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)">
{{$t('commons.save')}}
</el-button>
</div>
</el-collapse-transition>
</el-card>
</div>
</el-checkbox-group>
</el-main>
</el-container>
</div>
</template>
<script>
import MsTag from "../../../../common/components/MsTag";
import MsTipButton from "../../../../common/components/MsTipButton";
import MsApiRequestForm from "../../../definition/components/request/http/ApiRequestForm";
import {downloadFile, getUUID, getCurrentProjectID} from "@/common/js/utils";
import {PRIORITY, RESULT_MAP} from "../../../definition/model/JsonData";
import MsApiAssertions from "../../../definition/components/assertion/ApiAssertions";
import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
import MsTcpBasisParameters from "../../../definition/components/request/tcp/BasisParameters";
import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
import MsApiExtendBtns from "../../../definition/components/reference/ApiExtendBtns";
import {API_METHOD_COLOUR} from "../../../definition/model/JsonData";
export default {
name: 'ApiCaseList',
components: {
MsTag,
MsTipButton,
MsApiRequestForm,
MsApiAssertions,
MsSqlBasisParameters,
MsTcpBasisParameters,
MsDubboBasisParameters,
MsApiExtendBtns
},
props: {
api: {
type: Object
},
visible: {
type: String,
},
loaded: Boolean,
refreshSign: String,
currentRow: Object,
},
data() {
return {
grades: [],
environments: [],
environment: {},
name: "",
priorityValue: "",
isReadOnly: false,
selectedEvent: Object,
priority: PRIORITY,
apiCaseList: [],
loading: false,
runData: [],
reportId: "",
projectId: "",
methodColorMap: new Map(API_METHOD_COLOUR),
checkAll: false,
checkedIndex: [],
isIndeterminate: true
}
},
watch: {
// 初始化
api() {
this.getApiTest();
},
visible() {
this.getApiTest();
}
},
created() {
this.projectId = getCurrentProjectID();
this.getApiTest();
},
methods: {
getResult(data) {
if (RESULT_MAP.get(data)) {
return RESULT_MAP.get(data);
} else {
return RESULT_MAP.get("default");
}
},
showInput(row) {
row.type = "create";
row.active = true;
this.active(row);
},
apiCaseClose() {
this.apiCaseList = [];
this.$emit('apiCaseClose');
},
active(item) {
item.active = !item.active;
},
getApiTest() {
if (this.api) {
this.loading = true;
if (this.currentRow) {
this.currentRow.cases = [];
}
let condition = {};
condition.projectId = this.projectId;
condition.apiDefinitionId = this.api.id;
condition.priority = this.priorityValue;
condition.name = this.name;
this.$post("/api/testcase/list", condition, response => {
for (let index in response.data) {
let test = response.data[index];
test.checked = false;
test.request = JSON.parse(test.request);
}
this.loading = false;
this.apiCaseList = response.data;
});
}
},
validate(row) {
if (!row.name) {
this.$warning(this.$t('api_test.input_name'));
return true;
}
},
getColor(enable, method) {
if (enable) {
return this.methodColorMap.get(method);
}
},
handleCheckAllChange(val) {
this.currentRow.cases = [];
if (val) {
let index = 1;
this.apiCaseList.forEach(item => {
this.checkedIndex.push(index);
item.protocol = this.api.protocol;
item.hashTree = [];
this.currentRow.cases.push(item)
index++;
})
} else {
this.checkedIndex = [];
}
this.isIndeterminate = false;
},
handleCheckedChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.apiCaseList.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.apiCaseList.length;
this.currentRow.cases = [];
value.forEach(i => {
let index = i - 1;
let item = this.apiCaseList[index];
item.protocol = this.api.protocol;
item.hashTree = [];
this.currentRow.cases.push(item);
})
}
}
}
</script>
<style scoped>
.ms-api-select {
margin-left: 20px;
width: 80px;
}
.ms-api-header-select {
margin-left: 20px;
min-width: 100px;
}
.el-card-btn {
float: right;
top: 20px;
right: 0px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 18px;
margin-left: 30px;
}
.ms-api-label {
/*color: #CCCCCC;*/
}
.ms-api-col {
margin-top: 5px;
}
.variable-combine {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
}
.icon.is-active {
transform: rotate(90deg);
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 20px 0;
}
.environment-button {
margin-left: 20px;
padding: 7px;
}
.api-el-tag {
color: white;
}
.is-selected {
background: #EFF7FF;
}
</style>

150
frontend/src/business/components/api/automation/scenario/api/ApiDefinition.vue
View File

@ -1,150 +0,0 @@
<template>
<ms-container>
<ms-aside-container>
<ms-node-tree @nodeSelectEvent="selectModule" @getApiModuleTree="initTree" @protocolChange="changeProtocol"
@refresh="refresh" @saveAsEdit="editApi" @exportAPI="exportAPI"/>
</ms-aside-container>
<ms-main-container>
<!-- 主框架列表 -->
<el-tabs v-model="apiDefaultTab">
<el-tab-pane
:key="item.name"
v-for="(item) in apiTabs"
:label="item.title"
:closable="item.closable"
:name="item.name">
<!-- 列表集合 -->
<ms-api-list
v-if="item.type === 'list'"
:current-protocol="currentProtocol"
:current-module="currentModule"
@editApi="editApi"
@handleCase="handleCase"
:visible="visible"
:currentRow="currentRow"
ref="apiList"/>
</el-tab-pane>
</el-tabs>
</ms-main-container>
</ms-container>
</template>
<script>
import MsNodeTree from '../../../definition/components/module/ApiModule';
import MsApiList from './ApiList';
import MsContainer from "../../../../common/components/MsContainer";
import MsMainContainer from "../../../../common/components/MsMainContainer";
import MsAsideContainer from "../../../../common/components/MsAsideContainer";
import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
export default {
name: "ApiDefinition",
components: {
MsNodeTree,
MsApiList,
MsMainContainer,
MsContainer,
MsAsideContainer,
},
props: {
visible: {
type: String,
},
currentRow: {
type: Object,
}
},
data() {
return {
isHide: true,
apiDefaultTab: 'default',
currentProtocol: null,
currentModule: null,
currentApi: {},
moduleOptions: {},
runTestData: {},
apiTabs: [{
title: this.$t('api_test.definition.api_title'),
name: 'default',
type: "list",
closable: false
}],
}
},
methods: {
editApi(row) {
this.currentApi = row;
},
handleCase(testCase) {
this.currentApi = testCase;
this.isHide = false;
},
apiCaseClose() {
this.isHide = true;
},
selectModule(data) {
this.currentModule = data.data;
},
exportAPI() {
if (!this.$refs.apiList[0].tableData) {
return;
}
let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol, data: this.$refs.apiList[0].tableData}
downloadFile("导出API.json", JSON.stringify(obj));
},
refresh(data) {
this.$refs.apiList[0].initApiTable(data);
},
setTabTitle(data) {
for (let index in this.apiTabs) {
let tab = this.apiTabs[index];
if (tab.name === this.apiDefaultTab) {
tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
break;
}
}
this.runTestData = data;
},
saveApi(data) {
this.setTabTitle(data);
this.$refs.apiList[0].initApiTable(data);
},
initTree(data) {
this.moduleOptions = data;
},
changeProtocol(data) {
this.currentProtocol = data;
}
}
}
</script>
<style scoped>
.ms-api-buttion {
position: absolute;
top: 100px;
right: 4px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
margin-right: 10px;
font-size: 16px;
}
.ms-api-div {
overflow-y: auto;
height: calc(100vh - 155px)
}
/deep/ .el-tabs__header {
margin: 0 0 5px;
}
/deep/ .el-main {
overflow: hidden;
}
</style>

412
frontend/src/business/components/api/automation/scenario/api/ApiList.vue
View File

@ -1,412 +0,0 @@
<template>
<div id="svgBox" style="overflow: auto">
<div id="svgTop" style="background-color: white">
<el-card class="card-content">
<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="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" effect="plain" :content="$t('test_track.plan.plan_status_prepare')"/>
<ms-tag v-if="scope.row.status == 'Underway'" type="warning" effect="plain" :content="$t('test_track.plan.plan_status_running')"/>
<ms-tag v-if="scope.row.status == 'Completed'" type="success" effect="plain" :content="$t('test_track.plan.plan_status_completed')"/>
<ms-tag v-if="scope.row.status == 'Trash'" type="danger" effect="plain" content="废弃"/>
</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="path"
:label="$t('api_test.definition.api_path')"
show-overflow-tooltip/>
<el-table-column
prop="userName"
:label="$t('api_test.definition.api_principal')"
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="caseTotal"
:label="$t('api_test.definition.api_case_number')"
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="80" align="center">
<template v-slot:default="scope">
<el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
</template>
</el-table-column>
</el-table>
<ms-table-pagination :change="initTable" :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="initTable" :visible="visible" :currentRow="currentRow" :api="selectApi"/>
</ms-bottom-container>
</div>
</div>
</template>
<script>
import MsTableHeader from '../../../../../components/common/components/MsTableHeader';
import MsTableOperator from "../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
import MsTableButton from "../../../../common/components/MsTableButton";
import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
import MsTablePagination from "../../../../common/pagination/TablePagination";
import MsTag from "../../../../common/components/MsTag";
import MsApiCaseList from "./ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../../../definition/components/BottomContainer";
import ShowMoreBtn from "../../../../../components/track/case/components/ShowMoreBtn";
import {API_METHOD_COLOUR} from "../../../definition/model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
export default {
name: "ApiList",
components: {
MsTableButton,
MsTableOperatorButton,
MsTableOperator,
MsTableHeader,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn
},
data() {
return {
condition: {},
isHide: true,
selectApi: {},
moduleId: "",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch}],
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
projectId: "",
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
}
},
props: {
currentProtocol: String,
currentModule: Object,
visible: {
type: String,
},
currentRow: {
type: Object,
}
},
created: function () {
this.projectId = getCurrentProjectID();
this.initTable();
},
mounted() {
this.dragControllerDiv();
},
watch: {
currentModule() {
this.initTable();
this.apiCaseClose();
},
visible() {
this.initTable();
this.apiCaseClose();
},
currentProtocol() {
this.initTable();
this.apiCaseClose();
},
},
methods: {
initTable() {
this.selectRows = new Set();
this.condition.filters = ["Prepare", "Underway", "Completed"];
if (this.currentModule) {
this.condition.moduleIds = [this.currentModule.id];
}
if (this.trashEnable) {
this.condition.filters = ["Trash"];
this.condition.moduleIds = [];
}
if (this.projectId != null) {
this.condition.projectId = this.projectId;
}
if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
}
this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
});
},
handleSelect(selection, row) {
row.hashTree = [];
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
} else {
this.$set(row, "showMore", true);
this.selectRows.add(row);
}
let arr = Array.from(this.selectRows);
if (this.currentRow) {
this.currentRow.apis = arr;
}
// 选中1个以上的用例时显示更多操作
if (this.selectRows.size === 1) {
this.$set(arr[0], "showMore", false);
} else if (this.selectRows.size === 2) {
arr.forEach(row => {
this.$set(row, "showMore", true);
})
}
},
handleSelectAll(selection) {
if (selection.length > 0) {
if (selection.length === 1) {
selection.hashTree = [];
this.selectRows.add(selection[0]);
} else {
this.tableData.forEach(item => {
item.hashTree = [];
this.$set(item, "showMore", true);
this.selectRows.add(item);
});
}
} else {
this.selectRows.clear();
this.tableData.forEach(row => {
this.$set(row, "showMore", false);
})
}
if (this.currentRow) {
let arr = Array.from(this.selectRows);
this.currentRow.apis = arr;
}
},
search() {
this.initTable();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
editApi(row) {
this.$emit('editApi', row);
},
reductionApi(row) {
row.status = 'Underway';
row.request = null;
row.response = null;
this.$fileUpload("/api/definition/update", null, [], row, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
if (this.currentModule != undefined && this.currentModule.id == "gc") {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = Array.from(this.selectRows).map(row => row.id);
this.$post('/api/definition/deleteBatch/', ids, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
});
}
}
});
} else {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = Array.from(this.selectRows).map(row => row.id);
this.$post('/api/definition/removeToGc/', ids, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
});
}
}
});
}
},
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;
this.isHide = false;
},
handleDelete(api) {
if (this.currentModule != undefined && this.currentModule.id == "gc") {
this.$get('/api/definition/delete/' + api.id, () => {
this.$success(this.$t('commons.delete_success'));
this.initTable();
});
return;
}
this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = [api.id];
this.$post('/api/definition/removeToGc/', ids, () => {
this.$success(this.$t('commons.delete_success'));
this.initTable();
});
}
}
});
},
apiCaseClose() {
this.selectApi = {};
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) {
if (enable) {
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>
<style scoped>
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.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>

41
frontend/src/business/components/api/automation/scenario/api/ScenarioApiRelevance.vue → frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<el-dialog class="api-relevance" :title="'接口导入'" <relevance-dialog :title="'接口导入'" ref="relevanceDialog">
:visible.sync="dialogVisible"
width="70%"
:close-on-click-modal="false"
top="50px">
<ms-container> <template v-slot:aside>
<ms-aside-container :enable-aside-hidden="false">
<ms-api-module <ms-api-module
@nodeSelectEvent="nodeChange" @nodeSelectEvent="nodeChange"
@protocolChange="handleProtocolChange" @protocolChange="handleProtocolChange"
@ -14,17 +9,15 @@
@setModuleOptions="setModuleOptions" @setModuleOptions="setModuleOptions"
:is-read-only="true" :is-read-only="true"
ref="nodeTree"/> ref="nodeTree"/>
</ms-aside-container> </template>
<ms-main-container>
<scenario-relevance-api-list <scenario-relevance-api-list
v-if="isApiListEnable" v-if="isApiListEnable"
:current-protocol="currentProtocol" :current-protocol="currentProtocol"
:select-node-ids="selectNodeIds" :select-node-ids="selectNodeIds"
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange" @isApiListEnableChange="isApiListEnableChange"
ref="apiList" ref="apiList"/>
/>
<scenario-relevance-case-list <scenario-relevance-case-list
v-if="!isApiListEnable" v-if="!isApiListEnable"
@ -33,32 +26,31 @@
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange" @isApiListEnableChange="isApiListEnableChange"
ref="apiCaseList"/> ref="apiCaseList"/>
</ms-main-container>
</ms-container>
<template v-slot:footer> <template v-slot:footer>
<el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button> <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
<el-button v-if="!isApiListEnable" type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button> <el-button v-if="!isApiListEnable" type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
</template> </template>
</el-dialog> </relevance-dialog>
</template> </template>
<script> <script>
import ScenarioRelevanceCaseList from "./ScenarioRelevanceCaseList"; import ScenarioRelevanceCaseList from "./RelevanceCaseList";
import MsApiModule from "../../../definition/components/module/ApiModule"; import MsApiModule from "../../../definition/components/module/ApiModule";
import MsContainer from "../../../../common/components/MsContainer"; import MsContainer from "../../../../common/components/MsContainer";
import MsAsideContainer from "../../../../common/components/MsAsideContainer"; import MsAsideContainer from "../../../../common/components/MsAsideContainer";
import MsMainContainer from "../../../../common/components/MsMainContainer"; import MsMainContainer from "../../../../common/components/MsMainContainer";
import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList"; import ScenarioRelevanceApiList from "./RelevanceApiList";
import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
export default { export default {
name: "ScenarioApiRelevance", name: "ApiRelevance",
components: { components: {
RelevanceDialog,
ScenarioRelevanceApiList, ScenarioRelevanceApiList,
MsMainContainer, MsAsideContainer, MsContainer, MsApiModule, ScenarioRelevanceCaseList}, MsMainContainer, MsAsideContainer, MsContainer, MsApiModule, ScenarioRelevanceCaseList},
data() { data() {
return { return {
dialogVisible: false,
result: {}, result: {},
currentProtocol: null, currentProtocol: null,
selectNodeIds: [], selectNodeIds: [],
@ -91,10 +83,10 @@
}, },
close() { close() {
this.refresh(); this.refresh();
this.dialogVisible = false; this.$refs.relevanceDialog.close();
}, },
open() { open() {
this.dialogVisible = true; this.$refs.relevanceDialog.open();
}, },
isApiListEnableChange(data) { isApiListEnableChange(data) {
this.isApiListEnable = data; this.isApiListEnable = data;
@ -120,13 +112,4 @@
</script> </script>
<style scoped> <style scoped>
.ms-aside-container {
border: 0px;
}
.api-relevance >>> .el-dialog__body {
padding: 10px 20px;
}
</style> </style>

34
frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceApiList.vue → frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
View File

@ -3,6 +3,8 @@
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange"> @isApiListEnableChange="isApiListEnableChange">
<ms-environment-select :project-id="projectId" v-if="isTestPlan" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/>
<el-input placeholder="搜索" @blur="initTable" class="search-input" size="small" @keyup.enter.native="initTable" v-model="condition.name"/> <el-input placeholder="搜索" @blur="initTable" class="search-input" size="small" @keyup.enter.native="initTable" v-model="condition.name"/>
<el-table v-loading="result.loading" <el-table v-loading="result.loading"
@ -43,11 +45,6 @@
:label="$t('api_test.definition.api_path')" :label="$t('api_test.definition.api_path')"
show-overflow-tooltip/> show-overflow-tooltip/>
<el-table-column
prop="userName"
:label="$t('api_test.definition.api_principal')"
show-overflow-tooltip/>
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime"> <el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span> <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@ -90,10 +87,12 @@
import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem"; import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
import {_filter, _sort} from "../../../../../../common/js/utils"; import {_filter, _sort} from "../../../../../../common/js/utils";
import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils"; import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
export default { export default {
name: "ScenarioRelevanceApiList", name: "RelevanceApiList",
components: { components: {
MsEnvironmentSelect,
PriorityTableItem, PriorityTableItem,
ApiListContainer, ApiListContainer,
MsTableOperatorButton, MsTableOperatorButton,
@ -129,6 +128,7 @@
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
environmentId: ""
} }
}, },
props: { props: {
@ -150,8 +150,9 @@
type: Boolean, type: Boolean,
default: false, default: false,
}, },
relevanceProjectId: String, projectId: String,
planId: String planId: String,
isTestPlan: Boolean
}, },
created: function () { created: function () {
this.initTable(); this.initTable();
@ -163,6 +164,9 @@
currentProtocol() { currentProtocol() {
this.initTable(); this.initTable();
}, },
projectId() {
this.initTable();
}
}, },
computed: {}, computed: {},
methods: { methods: {
@ -179,12 +183,19 @@
} }
if (this.projectId != null) { if (this.projectId != null) {
this.condition.projectId = this.projectId; this.condition.projectId = this.projectId;
} else {
this.condition.projectId = getCurrentProjectID();
} }
if (this.currentProtocol != null) { if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol; this.condition.protocol = this.currentProtocol;
} }
this.condition.projectId = getCurrentProjectID(); let url = '/api/definition/list/';
this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => { if (this.isTestPlan) {
url = '/api/definition/list/relevance/';
this.condition.planId = this.planId;
}
this.result = this.$post(url + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount; this.total = response.data.itemCount;
this.tableData = response.data.listObject; this.tableData = response.data.listObject;
}); });
@ -218,6 +229,9 @@
getColor(method) { getColor(method) {
return this.methodColorMap.get(method); return this.methodColorMap.get(method);
}, },
setEnvironment(data) {
this.environmentId = data.id;
}
}, },
} }
</script> </script>

33
frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceCaseList.vue → frontend/src/business/components/api/automation/scenario/api/RelevanceCaseList.vue
View File

@ -4,6 +4,8 @@
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange"> @isApiListEnableChange="isApiListEnableChange">
<ms-environment-select :project-id="projectId" v-if="isTestPlan" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/>
<el-input placeholder="搜索" @blur="initTable" @keyup.enter.native="initTable" class="search-input" size="small" v-model="condition.name"/> <el-input placeholder="搜索" @blur="initTable" @keyup.enter.native="initTable" class="search-input" size="small" v-model="condition.name"/>
<el-table v-loading="result.loading" <el-table v-loading="result.loading"
@ -73,10 +75,12 @@
import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem"; import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
import {_filter, _sort} from "../../../../../../common/js/utils"; import {_filter, _sort} from "../../../../../../common/js/utils";
import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils"; import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
export default { export default {
name: "ScenarioRelevanceCaseList", name: "RelevanceCaseList",
components: { components: {
MsEnvironmentSelect,
PriorityTableItem, PriorityTableItem,
ApiListContainer, ApiListContainer,
MsTableOperatorButton, MsTableOperatorButton,
@ -111,6 +115,7 @@
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
environmentId: ""
} }
}, },
props: { props: {
@ -132,8 +137,9 @@
type: Boolean, type: Boolean,
default: false, default: false,
}, },
relevanceProjectId: String, projectId: String,
planId: String planId: String,
isTestPlan: Boolean
}, },
created: function () { created: function () {
this.initTable(); this.initTable();
@ -145,6 +151,9 @@
currentProtocol() { currentProtocol() {
this.initTable(); this.initTable();
}, },
projectId() {
this.initTable();
}
}, },
computed: { computed: {
@ -157,11 +166,22 @@
this.selectRows = new Set(); this.selectRows = new Set();
this.condition.status = ""; this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds; this.condition.moduleIds = this.selectNodeIds;
if (this.projectId != null) {
this.condition.projectId = this.projectId;
} else {
this.condition.projectId = getCurrentProjectID();
}
if (this.currentProtocol != null) { if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol; this.condition.protocol = this.currentProtocol;
} }
this.condition.projectId = getCurrentProjectID(); let url = '/api/testcase/list/';
this.result = this.$post("/api/testcase/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => { if (this.isTestPlan) {
url = '/test/plan/api/case/relevance/list/';
this.condition.planId = this.planId;
}
this.result = this.$post(url + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount; this.total = response.data.itemCount;
this.tableData = response.data.listObject; this.tableData = response.data.listObject;
}); });
@ -209,6 +229,9 @@
this.$refs.caseList.open(selectApi, testCase.id); this.$refs.caseList.open(selectApi, testCase.id);
}); });
}, },
setEnvironment(data) {
this.environmentId = data.id;
}
}, },
} }
</script> </script>

36
frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<el-dialog class="api-relevance" :title="'场景导入'" <relevance-dialog :title="'场景导入'" ref="relevanceDialog">
:visible.sync="dialogVisible"
width="70%"
:close-on-click-modal="false"
top="50px">
<ms-container> <template v-slot:aside>
<ms-aside-container :enable-aside-hidden="false">
<ms-api-scenario-module <ms-api-scenario-module
@nodeSelectEvent="nodeChange" @nodeSelectEvent="nodeChange"
@refreshTable="refresh" @refreshTable="refresh"
@ -14,51 +9,48 @@
@enableTrash="false" @enableTrash="false"
:is-read-only="true" :is-read-only="true"
ref="nodeTree"/> ref="nodeTree"/>
</ms-aside-container> </template>
<ms-main-container>
<ms-api-scenario-list <ms-api-scenario-list
:select-node-ids="selectNodeIds" :select-node-ids="selectNodeIds"
:referenced="true" :referenced="true"
:trash-enable="false" :trash-enable="false"
@selection="setData" @selection="setData"
ref="apiScenarioList"/> ref="apiScenarioList"/>
</ms-main-container>
</ms-container>
<template v-slot:footer> <template v-slot:footer>
<el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button> <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
<el-button type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button> <el-button type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
</template> </template>
</el-dialog> </relevance-dialog>
</template> </template>
<script> <script>
import ScenarioRelevanceCaseList from "./ScenarioRelevanceCaseList"; import ScenarioRelevanceCaseList from "./RelevanceCaseList";
import MsApiModule from "../../../definition/components/module/ApiModule"; import MsApiModule from "../../../definition/components/module/ApiModule";
import MsContainer from "../../../../common/components/MsContainer"; import MsContainer from "../../../../common/components/MsContainer";
import MsAsideContainer from "../../../../common/components/MsAsideContainer"; import MsAsideContainer from "../../../../common/components/MsAsideContainer";
import MsMainContainer from "../../../../common/components/MsMainContainer"; import MsMainContainer from "../../../../common/components/MsMainContainer";
import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList"; import ScenarioRelevanceApiList from "./RelevanceApiList";
import MsApiScenarioModule from "../ApiScenarioModule"; import MsApiScenarioModule from "../ApiScenarioModule";
import MsApiScenarioList from "../ApiScenarioList"; import MsApiScenarioList from "../ApiScenarioList";
import {getUUID} from "../../../../../../common/js/utils"; import {getUUID} from "../../../../../../common/js/utils";
import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
export default { export default {
name: "ScenarioRelevance", name: "ScenarioRelevance",
components: { components: {
RelevanceDialog,
MsApiScenarioList, MsApiScenarioList,
MsApiScenarioModule, MsApiScenarioModule,
MsMainContainer, MsAsideContainer, MsContainer}, MsMainContainer, MsAsideContainer, MsContainer},
data() { data() {
return { return {
dialogVisible: false,
result: {}, result: {},
currentProtocol: null, currentProtocol: null,
selectNodeIds: [], selectNodeIds: [],
moduleOptions: {}, moduleOptions: {},
isApiListEnable: true, isApiListEnable: true,
currentScenario: [], currentScenario: [],
currentScenarioIds: [], currentScenarioIds: [],
} }
@ -97,10 +89,10 @@
}, },
close() { close() {
this.refresh(); this.refresh();
this.dialogVisible = false; this.$refs.relevanceDialog.close();
}, },
open() { open() {
this.dialogVisible = true; this.$refs.relevanceDialog.open();
if (this.$refs.apiScenarioList) { if (this.$refs.apiScenarioList) {
this.$refs.apiScenarioList.search(); this.$refs.apiScenarioList.search();
} }
@ -127,12 +119,4 @@
<style scoped> <style scoped>
.ms-aside-container {
border: 0px;
}
.api-relevance >>> .el-dialog__body {
padding: 10px 20px;
}
</style> </style>

133
frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
View File

@ -1,24 +1,10 @@
<template> <template>
<div> <div>
<api-list-container <api-list-container
:is-show-change-button="!isPlanModel"
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange"> @isApiListEnableChange="isApiListEnableChange">
<ms-environment-select v-if="isRelevanceModel" :project-id="relevanceProjectId" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/> <el-input placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
<el-input v-if="!isPlanModel" placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
<template v-slot:header>
<test-plan-case-list-header
:project-id="getProjectId()"
:condition="condition"
:plan-id="planId"
@refresh="initTable"
@relevanceCase="$emit('relevanceCase')"
@setEnvironment="setEnvironment"
v-if="isPlanModel"/>
</template>
<el-table v-loading="result.loading" <el-table v-loading="result.loading"
border border
@ -30,7 +16,7 @@
<el-table-column type="selection"/> <el-table-column type="selection"/>
<el-table-column width="40" :resizable="false" align="center"> <el-table-column width="40" :resizable="false" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<show-more-btn :is-show="scope.row.showMore && !isReadOnly && !isRelevanceModel" :buttons="buttons" :size="selectRows.size"/> <show-more-btn :is-show="scope.row.showMore && !isReadOnly" :buttons="buttons" :size="selectRows.size"/>
</template> </template>
</el-table-column> </el-table-column>
@ -69,7 +55,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="!isReadOnly && !isRelevanceModel" :label="$t('commons.operating')" min-width="130" align="center"> <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<!--<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable">{{$t('commons.reduction')}}</el-button>--> <!--<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable">{{$t('commons.reduction')}}</el-button>-->
<el-button type="text" @click="handleTestCase(scope.row)" v-if="!trashEnable">{{$t('commons.edit')}}</el-button> <el-button type="text" @click="handleTestCase(scope.row)" v-if="!trashEnable">{{$t('commons.edit')}}</el-button>
@ -82,9 +68,9 @@
:total="total"/> :total="total"/>
</api-list-container> </api-list-container>
<api-case-list v-if="!isRelevanceModel" @showExecResult="showExecResult" @refresh="initTable" :currentApi="selectCase" ref="caseList"/> <api-case-list @showExecResult="showExecResult" @refresh="initTable" :currentApi="selectCase" ref="caseList"/>
<!--批量编辑--> <!--批量编辑-->
<ms-batch-edit v-if="!isRelevanceModel" ref="batchEdit" @batchEdit="batchEdit" :typeArr="typeArr" :value-arr="valueArr"/> <ms-batch-edit ref="batchEdit" @batchEdit="batchEdit" :typeArr="typeArr" :value-arr="valueArr"/>
</div> </div>
</template> </template>
@ -109,12 +95,11 @@
import {_filter, _sort} from "../../../../../../common/js/utils"; import {_filter, _sort} from "../../../../../../common/js/utils";
import TestPlanCaseListHeader from "../../../../track/plan/view/comonents/api/TestPlanCaseListHeader"; import TestPlanCaseListHeader from "../../../../track/plan/view/comonents/api/TestPlanCaseListHeader";
import MsEnvironmentSelect from "../case/MsEnvironmentSelect"; import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
export default { export default {
name: "ApiCaseSimpleList", name: "ApiCaseSimpleList",
components: { components: {
MsEnvironmentSelect,
TestPlanCaseListHeader,
ApiCaseList, ApiCaseList,
PriorityTableItem, PriorityTableItem,
ApiListContainer, ApiListContainer,
@ -213,14 +198,7 @@
} }
}, },
computed: { computed: {
// 测试计划关联测试列表
isRelevanceModel() {
return this.model === 'relevance'
},
// 测试计划接口用例列表
isPlanModel() {
return this.model === 'plan'
},
// 接口定义用例列表 // 接口定义用例列表
isApiModel() { isApiModel() {
return this.model === 'api' return this.model === 'api'
@ -232,7 +210,6 @@
}, },
initTable() { initTable() {
this.selectRows = new Set(); this.selectRows = new Set();
// this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.status = ""; this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds; this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) { if (this.trashEnable) {
@ -240,46 +217,18 @@
this.condition.moduleIds = []; this.condition.moduleIds = [];
} }
this.buildCondition(this.condition); this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) { if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol; this.condition.protocol = this.currentProtocol;
} }
if (this.condition.projectId) { if (this.condition.projectId) {
this.result = this.$post(this.getListUrl() + this.currentPage + "/" + this.pageSize, this.condition, response => { this.result = this.$post('/api/testcase/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount; this.total = response.data.itemCount;
this.tableData = response.data.listObject; this.tableData = response.data.listObject;
}); });
} }
}, },
buildCondition(condition) {
if (this.isPlanModel) {
condition.planId = this.planId;
} else if (this.isRelevanceModel) {
condition.planId = this.planId;
condition.projectId = this.getProjectId();
} else {
condition.projectId = this.getProjectId();
}
},
getListUrl() {
if (this.isPlanModel) {
return '/test/plan/api/case/list/';
} else if (this.isRelevanceModel) {
return '/test/plan/api/case/relevance/list/';
} else {
return '/api/testcase/list/';
}
},
getDeleteUrl(apiCase) {
if (this.isPlanModel) {
return '/test/plan/api/case/delete/' + this.planId + '/' + apiCase.id;
} else if (this.isRelevanceModel) {
return '/api/testcase/delete/' + apiCase.id;
} else {
return '/api/testcase/delete/' + apiCase.id;
}
},
// getMaintainerOptions() { // getMaintainerOptions() {
// let workspaceId = localStorage.getItem(WORKSPACE_ID); // let workspaceId = localStorage.getItem(WORKSPACE_ID);
// this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => { // this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
@ -287,23 +236,7 @@
// }); // });
// }, // },
handleSelect(selection, row) { handleSelect(selection, row) {
row.hashTree = []; _handleSelect(this, selection, row, this.selectRows);
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
} else {
this.$set(row, "showMore", true);
this.selectRows.add(row);
}
let arr = Array.from(this.selectRows);
// 选中1个以上的用例时显示更多操作
if (this.selectRows.size === 1) {
this.$set(arr[0], "showMore", false);
} else if (this.selectRows.size === 2) {
arr.forEach(row => {
this.$set(row, "showMore", true);
})
}
}, },
showExecResult(row) { showExecResult(row) {
this.visible = false; this.visible = false;
@ -322,23 +255,7 @@
this.initTable(); this.initTable();
}, },
handleSelectAll(selection) { handleSelectAll(selection) {
if (selection.length > 0) { _handleSelectAll(this, selection, this.tableData, this.selectRows);
if (selection.length === 1) {
selection.hashTree = [];
this.selectRows.add(selection[0]);
} else {
this.tableData.forEach(item => {
item.hashTree = [];
this.$set(item, "showMore", true);
this.selectRows.add(item);
});
}
} else {
this.selectRows.clear();
this.tableData.forEach(row => {
this.$set(row, "showMore", false);
})
}
}, },
search() { search() {
this.initTable(); this.initTable();
@ -377,7 +294,7 @@
confirmButtonText: this.$t('commons.confirm'), confirmButtonText: this.$t('commons.confirm'),
callback: (action) => { callback: (action) => {
if (action === 'confirm') { if (action === 'confirm') {
this.$post(this.getBatchDeleteParam(), this.buildBatchDeleteParam(), () => { this.$post('/api/testcase/deleteBatch/', Array.from(this.selectRows).map(row => row.id), () => {
this.selectRows.clear(); this.selectRows.clear();
this.initTable(); this.initTable();
this.$success(this.$t('commons.delete_success')); this.$success(this.$t('commons.delete_success'));
@ -401,23 +318,6 @@
// }); // });
// } // }
}, },
buildBatchDeleteParam() {
if (this.isPlanModel) {
let request = {};
request.ids = Array.from(this.selectRows).map(row => row.id);
request.planId = this.planId;
return request;
} else {
return Array.from(this.selectRows).map(row => row.id);
}
},
getBatchDeleteParam() {
if (this.isPlanModel) {
return '/test/plan/api/case/batch/delete';
} else {
return '/api/testcase/deleteBatch/';
}
},
handleEditBatch() { handleEditBatch() {
this.$refs.batchEdit.open(); this.$refs.batchEdit.open();
}, },
@ -434,7 +334,7 @@
}, },
handleDelete(apiCase) { handleDelete(apiCase) {
// if (this.trashEnable) { // if (this.trashEnable) {
this.$get(this.getDeleteUrl(apiCase), () => { this.$get('/api/testcase/delete/' + apiCase.id, () => {
this.$success(this.$t('commons.delete_success')); this.$success(this.$t('commons.delete_success'));
this.initTable(); this.initTable();
}); });
@ -453,13 +353,6 @@
// } // }
// }); // });
}, },
getProjectId() {
if (!this.isRelevanceModel) {
return getCurrentProjectID();
} else {
return this.relevanceProjectId;
}
},
setEnvironment(data) { setEnvironment(data) {
this.environmentId = data.id; this.environmentId = data.id;
} }

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

@ -8,7 +8,7 @@
<el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search" v-model="condition.name"/> <el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search" v-model="condition.name"/>
<el-table v-loading="result.loading" ref="apiDefinitionTable" <el-table v-loading="result.loading"
border border
:data="tableData" row-key="id" class="test-content adjust-table" :data="tableData" row-key="id" class="test-content adjust-table"
@select-all="handleSelectAll" @select-all="handleSelectAll"
@ -29,7 +29,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<template v-slot:default="scope"> <template v-slot:default="scope">
<show-more-btn :is-show="scope.row.showMore && !isReadOnly && !isRelevance" :buttons="buttons" :size="selectDataCounts"/> <show-more-btn :is-show="scope.row.showMore && !isReadOnly" :buttons="buttons" :size="selectDataCounts"/>
</template> </template>
</el-table-column> </el-table-column>
@ -127,12 +127,10 @@
import {getCurrentProjectID} from "@/common/js/utils"; import {getCurrentProjectID} from "@/common/js/utils";
import {WORKSPACE_ID} from '../../../../../../common/js/constants'; import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import ApiListContainer from "./ApiListContainer"; import ApiListContainer from "./ApiListContainer";
import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
export default { export default {
name: "ApiList", name: "ApiList",
components: { components: {
MsEnvironmentSelect,
ApiListContainer, ApiListContainer,
MsTableButton, MsTableButton,
MsTableOperatorButton, MsTableOperatorButton,
@ -200,8 +198,6 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
relevanceProjectId: String,
isRelevance: Boolean
}, },
created: function () { created: function () {
this.initTable(); this.initTable();
@ -218,9 +214,6 @@
if (this.trashEnable) { if (this.trashEnable) {
this.initTable(); this.initTable();
} }
},
relevanceProjectId() {
this.initTable();
} }
}, },
methods: { methods: {
@ -242,7 +235,7 @@
this.condition.moduleIds = []; this.condition.moduleIds = [];
} }
this.condition.projectId = this.getProjectId(); this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) { if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol; this.condition.protocol = this.currentProtocol;
} }
@ -427,16 +420,6 @@
showExecResult(row) { showExecResult(row) {
this.$emit('showExecResult', row); this.$emit('showExecResult', row);
}, },
getProjectId() {
if (!this.isCaseRelevance) {
return getCurrentProjectID();
} else {
return this.relevanceProjectId;
}
},
setEnvironment(data) {
this.environmentId = data.id;
},
selectRowsCount(selection){ selectRowsCount(selection){
let selectedIDs = this.getIds(selection); let selectedIDs = this.getIds(selection);
let allIDs = this.tableData.map(s=>s.id); let allIDs = this.tableData.map(s=>s.id);

5
frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
View File

@ -50,6 +50,7 @@
<el-button slot="reference" :disabled="isReadOnly" class="scenario-create" type="primary" size="mini" <el-button slot="reference" :disabled="isReadOnly" class="scenario-create" type="primary" size="mini"
icon="el-icon-plus" plain/> icon="el-icon-plus" plain/>
</el-popover> </el-popover>
<ms-horizontal-drag-bar/>
</el-aside> </el-aside>
<el-main class="scenario-main"> <el-main class="scenario-main">
@ -76,11 +77,13 @@ import {Request, Scenario} from "../model/ScenarioModel";
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import MsApiScenarioSelect from "@/business/components/api/test/components/ApiScenarioSelect"; import MsApiScenarioSelect from "@/business/components/api/test/components/ApiScenarioSelect";
import {parseEnvironment} from "../model/EnvironmentModel"; import {parseEnvironment} from "../model/EnvironmentModel";
import MsHorizontalDragBar from "../../../common/components/MsHorizontalDragBar";
export default { export default {
name: "MsApiScenarioConfig", name: "MsApiScenarioConfig",
components: { components: {
MsHorizontalDragBar,
MsApiScenarioSelect, MsApiScenarioSelect,
MsApiRequestConfig, MsApiRequestConfig,
MsApiScenarioForm, MsApiScenarioForm,
@ -111,7 +114,6 @@ export default {
currentScenario: {} currentScenario: {}
} }
}, },
watch: { watch: {
test() { test() {
this.initScenarioEnvironment(); this.initScenarioEnvironment();
@ -337,4 +339,5 @@ export default {
border-right: 2px solid #909399; border-right: 2px solid #909399;
color: #8a8b8d; color: #8a8b8d;
} }
</style> </style>

15
frontend/src/business/components/common/components/MsAsideContainer.vue
View File

@ -1,17 +1,20 @@
<template> <template>
<el-aside :width="width" class="ms-aside-container" <el-aside :width="width" class="ms-aside-container"
:style="{'margin-left': !asideHidden ? 0 : '-' + width}"> :style="{'margin-left': !asideHidden ? 0 : '-' + width}">
<div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': asideHidden ? 0 : width}"> <!--<div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden">-->
<i v-if="!asideHidden" class="el-icon-arrow-left"/> <!--<i v-if="!asideHidden" class="el-icon-arrow-left"/>-->
<i v-if="asideHidden" class="el-icon-arrow-right"/> <!--<i v-if="asideHidden" class="el-icon-arrow-right"/>-->
</div> <!--</div>-->
<slot></slot> <slot></slot>
<ms-horizontal-drag-bar/>
</el-aside> </el-aside>
</template> </template>
<script> <script>
import MsHorizontalDragBar from "./MsHorizontalDragBar";
export default { export default {
name: "MsAsideContainer", name: "MsAsideContainer",
components: {MsHorizontalDragBar},
props: { props: {
width: { width: {
type: String, type: String,
@ -39,12 +42,16 @@
box-sizing: border-box; box-sizing: border-box;
background-color: #FFF; background-color: #FFF;
height: calc(100vh - 80px); height: calc(100vh - 80px);
border-right: 0px;
position: relative;
} }
.hiddenBottom { .hiddenBottom {
width: 8px; width: 8px;
height: 50px; height: 50px;
top: calc((100vh - 80px)/3); top: calc((100vh - 80px)/3);
right: -10px;
/*top: 0;*/
line-height: 50px; line-height: 50px;
border-radius: 0 15px 15px 0; border-radius: 0 15px 15px 0;
background-color: #acb7c1; background-color: #acb7c1;

28
frontend/src/business/components/common/components/MsHorizontalDragBar.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="drag-bar" v-horizontal-drag/>
</template>
<script>
export default {
name: "MsHorizontalDragBar"
}
</script>
<style scoped>
.drag-bar {
height: 100%;
width: 1px;
position: absolute;
right: 0px;
top: 0;
cursor: col-resize;
background-color: #E6E6E6;
border: 0px;
}
.drag-bar:hover {
width: 3px;
}
</style>

50
frontend/src/business/components/track/plan/view/comonents/api/TestCaseApiRelevance.vue
View File

@ -12,42 +12,32 @@
@protocolChange="handleProtocolChange" @protocolChange="handleProtocolChange"
@refreshTable="refresh" @refreshTable="refresh"
@setModuleOptions="setModuleOptions" @setModuleOptions="setModuleOptions"
:relevance-project-id="projectId"
:is-read-only="true" :is-read-only="true"
:type="'edit'"
ref="nodeTree"/> ref="nodeTree"/>
</template> </template>
<!-- 列表集合 --> <relevance-api-list
<api-list
v-if="isApiListEnable" v-if="isApiListEnable"
:current-protocol="currentProtocol" :current-protocol="currentProtocol"
:currentRow="currentRow"
:select-node-ids="selectNodeIds" :select-node-ids="selectNodeIds"
:trash-enable="trashEnable"
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
:is-case-relevance="true" :project-id="projectId"
:relevance-project-id="projectId" :is-test-plan="true"
:is-relevance="true" :plan-id="planId"
@isApiListEnableChange="isApiListEnableChange" @isApiListEnableChange="isApiListEnableChange"
ref="apiList"/> ref="apiList"/>
<!--测试用例列表--> <relevance-case-list
<api-case-simple-list
v-if="!isApiListEnable" v-if="!isApiListEnable"
:current-protocol="currentProtocol" :current-protocol="currentProtocol"
:currentRow="currentRow"
:select-node-ids="selectNodeIds" :select-node-ids="selectNodeIds"
:trash-enable="trashEnable"
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
:is-case-relevance="true" :project-id="projectId"
:relevance-project-id="projectId" :is-test-plan="true"
:plan-id="planId" :plan-id="planId"
:model="'relevance'"
@isApiListEnableChange="isApiListEnableChange" @isApiListEnableChange="isApiListEnableChange"
ref="apiCaseList"/> ref="apiCaseList"/>
</test-case-relevance-base> </test-case-relevance-base>
</template> </template>
@ -56,15 +46,14 @@
import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase"; import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
import MsApiModule from "../../../../../api/definition/components/module/ApiModule"; import MsApiModule from "../../../../../api/definition/components/module/ApiModule";
import {getCurrentProjectID} from "../../../../../../../common/js/utils"; import RelevanceApiList from "../../../../../api/automation/scenario/api/RelevanceApiList";
import ApiList from "../../../../../api/definition/components/list/ApiList"; import RelevanceCaseList from "../../../../../api/automation/scenario/api/RelevanceCaseList";
import ApiCaseSimpleList from "../../../../../api/definition/components/list/ApiCaseSimpleList";
export default { export default {
name: "TestCaseApiRelevance", name: "TestCaseApiRelevance",
components: { components: {
ApiCaseSimpleList, RelevanceCaseList,
ApiList, RelevanceApiList,
MsApiModule, MsApiModule,
TestCaseRelevanceBase, TestCaseRelevanceBase,
}, },
@ -94,8 +83,20 @@
}, },
methods: { methods: {
open() { open() {
this.init();
this.$refs.baseRelevance.open(); this.$refs.baseRelevance.open();
}, },
init() {
if (this.$refs.apiList) {
this.$refs.apiList.initTable();
}
if (this.$refs.apiCaseList) {
this.$refs.apiCaseList.initTable();
}
if (this.$refs.nodeTree) {
this.$refs.nodeTree.list();
}
},
setProject(projectId) { setProject(projectId) {
this.projectId = projectId; this.projectId = projectId;
}, },
@ -145,11 +146,6 @@
param.planId = this.planId; param.planId = this.planId;
param.selectIds = selectIds; param.selectIds = selectIds;
param.environmentId = environmentId; param.environmentId = environmentId;
// param.request = this.condition;
// 选择全选则全部加入到评审，无论是否加载完全部
// if (this.testCases.length === param.testCaseIds.length) {
// param.testCaseIds = ['all'];
// }
this.result = this.$post(url, param, () => { this.result = this.$post(url, param, () => {
this.$success(this.$t('commons.save_success')); this.$success(this.$t('commons.save_success'));

17
frontend/src/business/components/track/plan/view/comonents/api/TestPlanApi.vue
View File

@ -162,18 +162,6 @@
this.moduleOptions = data; this.moduleOptions = data;
}, },
saveCaseRelevance() {
let url = '';
let selectIds = [];
let param = {};
param.planId = this.planId;
param.selectIds = selectIds;
this.result = this.$post(url, param, () => {
this.$success(this.$t('commons.save_success'));
this.refresh();
this.$refs.baseRelevance.close();
});
},
openTestCaseRelevanceDialog(model) { openTestCaseRelevanceDialog(model) {
if (model === 'scenario') { if (model === 'scenario') {
this.$refs.scenarioCaseRelevance.open(); this.$refs.scenarioCaseRelevance.open();
@ -194,4 +182,9 @@
margin: 5px 10px; margin: 5px 10px;
} }
/deep/ .run-button {
background-color: #409EFF;
border-color: #409EFF;
}
</style> </style>

10
frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
View File

@ -81,8 +81,10 @@
<el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center"> <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-button type="text" @click="singleRun(scope.row)">{{$t('api_test.run')}}</el-button> <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{$t('commons.delete')}}</el-button> @exec="singleRun(scope.row)" v-tester/>
<ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/>
</template> </template>
</el-table-column> </el-table-column>
@ -334,7 +336,7 @@
this.selectRows.clear(); this.selectRows.clear();
this.initTable(); this.initTable();
this.$emit('refresh'); this.$emit('refresh');
this.$success(this.$t('commons.delete_success')); this.$success(this.$t('test_track.cancel_relevance_success'));
}); });
} }
} }
@ -414,7 +416,7 @@
}, },
handleDelete(apiCase) { handleDelete(apiCase) {
this.$get('/test/plan/api/case/delete/' + this.planId + '/' + apiCase.id, () => { this.$get('/test/plan/api/case/delete/' + this.planId + '/' + apiCase.id, () => {
this.$success(this.$t('commons.delete_success')); this.$success(this.$t('test_track.cancel_relevance_success'));
this.$emit('refresh'); this.$emit('refresh');
this.initTable(); this.initTable();
}); });

12
frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
View File

@ -51,8 +51,10 @@
show-overflow-tooltip/> show-overflow-tooltip/>
<el-table-column :label="$t('commons.operating')" width="200px" v-if="!referenced"> <el-table-column :label="$t('commons.operating')" width="200px" v-if="!referenced">
<template v-slot:default="{row}"> <template v-slot:default="{row}">
<el-button type="text" @click="execute(row)">{{ $t('api_test.automation.execute') }}</el-button> <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
<el-button type="text" @click="remove(row)">{{ $t('api_test.automation.remove') }}</el-button> @exec="execute(row)" v-tester/>
<ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
icon="el-icon-unlock" type="danger" @exec="remove(row)" v-tester/>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -81,10 +83,12 @@
import MsTestPlanList from "../../../../../api/automation/scenario/testplan/TestPlanList"; import MsTestPlanList from "../../../../../api/automation/scenario/testplan/TestPlanList";
import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader"; import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
import {_handleSelect, _handleSelectAll} from "../../../../../../../common/js/tableUtils"; import {_handleSelect, _handleSelectAll} from "../../../../../../../common/js/tableUtils";
import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
export default { export default {
name: "MsTestPlanApiScenarioList", name: "MsTestPlanApiScenarioList",
components: { components: {
MsTableOperatorButton,
TestPlanScenarioListHeader, TestPlanScenarioListHeader,
MsTablePagination, MsTableMoreBtn, ShowMoreBtn, MsTableHeader, MsTag, MsApiReportDetail, MsScenarioExtendButtons, MsTestPlanList}, MsTablePagination, MsTableMoreBtn, ShowMoreBtn, MsTableHeader, MsTag, MsApiReportDetail, MsScenarioExtendButtons, MsTestPlanList},
props: { props: {
@ -189,7 +193,7 @@
}, },
remove(row) { remove(row) {
this.$get('/test/plan/scenario/case/delete/' + this.planId + '/' + row.id, () => { this.$get('/test/plan/scenario/case/delete/' + this.planId + '/' + row.id, () => {
this.$success(this.$t('commons.delete_success')); this.$success(this.$t('test_track.cancel_relevance_success'));
this.$emit('refresh'); this.$emit('refresh');
this.search(); this.search();
}); });
@ -215,7 +219,7 @@
this.$post('/test/plan/scenario/case/batch/delete', param, () => { this.$post('/test/plan/scenario/case/batch/delete', param, () => {
this.selectRows.clear(); this.selectRows.clear();
this.search(); this.search();
this.$success(this.$t('commons.delete_success')); this.$success(this.$t('test_track.cancel_relevance_success'));
this.$emit('refresh'); this.$emit('refresh');
}); });
} }

69
frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<el-dialog :title="title"
:visible.sync="dialogVisible"
@close="close"
width="60%" v-loading="result.loading"
:close-on-click-modal="false"
top="50px">
<el-container class="main-content">
<el-aside class="tree-aside" width="250px">
<slot name="aside"></slot>
</el-aside>
<el-container>
<el-main class="case-content">
<slot></slot>
</el-main>
</el-container>
</el-container>
<template v-slot:footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</template>
<script>
import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
import SelectMenu from "../../../../common/SelectMenu";
export default {
name: "RelevanceDialog",
components: {
SelectMenu,
MsDialogFooter,
},
data() {
return {
result: {},
dialogVisible: false,
};
},
props: ['title'],
methods: {
open() {
this.dialogVisible = true;
},
close() {
this.dialogVisible = false;
},
}
}
</script>
<style scoped>
.el-dialog {
min-height: 700px;
}
.el-dialog >>> .el-dialog__body {
padding: 10px 20px;
}
</style>

96
frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue
View File

@ -1,14 +1,7 @@
<template> <template>
<div> <relevance-dialog :title="$t('test_track.plan_view.relevance_test_case')" ref="relevanceDialog">
<el-dialog :title="$t('test_track.plan_view.relevance_test_case')"
:visible.sync="dialogVisible"
@close="close"
width="60%" v-loading="result.loading"
:close-on-click-modal="false"
top="50px">
<el-container class="main-content"> <template v-slot:aside>
<el-aside class="tree-aside" width="250px">
<select-menu <select-menu
:data="projects" :data="projects"
width="160px" width="160px"
@ -16,40 +9,37 @@
:title="$t('test_track.switch_project')" :title="$t('test_track.switch_project')"
@dataChange="changeProject"/> @dataChange="changeProject"/>
<slot name="aside"></slot> <slot name="aside"></slot>
</el-aside>
<el-container>
<el-main class="case-content">
<slot></slot>
</el-main>
</el-container>
</el-container>
<template v-slot:footer>
<ms-dialog-footer @cancel="dialogVisible = false" @confirm="save"/>
</template> </template>
</el-dialog> <slot></slot>
</div> <template v-slot:footer>
<ms-dialog-footer @cancel="close" @confirm="save"/>
</template>
<template v-slot:footer>
<ms-dialog-footer @cancel="close" @confirm="save"/>
</template>
</relevance-dialog>
</template> </template>
<script> <script>
import MsDialogFooter from '../../../../../common/components/MsDialogFooter' import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
import SelectMenu from "../../../../common/SelectMenu"; import SelectMenu from "../../../../common/SelectMenu";
import RelevanceDialog from "./RelevanceDialog";
export default { export default {
name: "TestCaseRelevanceBase", name: "TestCaseRelevanceBase",
components: { components: {
RelevanceDialog,
SelectMenu, SelectMenu,
MsDialogFooter, MsDialogFooter,
}, },
data() { data() {
return { return {
result: {}, result: {},
dialogVisible: false,
currentProject: {}, currentProject: {},
projectId: '', projectId: '',
projectName: '', projectName: '',
@ -66,10 +56,6 @@
}, },
methods: { methods: {
open() {
this.getProject();
this.dialogVisible = true;
},
refreshNode() { refreshNode() {
this.$emit('refresh'); this.$emit('refresh');
@ -80,7 +66,12 @@
}, },
close() { close() {
this.dialogVisible = false; this.$refs.relevanceDialog.close();
},
open() {
this.getProject();
this.$refs.relevanceDialog.open();
}, },
getProject() { getProject() {
@ -108,53 +99,4 @@
</script> </script>
<style scoped> <style scoped>
.tb-edit .el-input {
display: none;
color: black;
}
.tb-edit .current-row .el-input {
display: block;
}
.tb-edit .current-row .el-input + span {
display: none;
}
.node-tree {
margin-right: 10px;
}
.el-header {
background-color: darkgrey;
color: #333;
line-height: 60px;
}
.case-content {
padding: 0px 20px;
height: 100%;
/*border: 1px solid #EBEEF5;*/
}
.tree-aside {
min-height: 300px;
max-height: 100%;
}
.main-content {
min-height: 300px;
height: 100%;
/*border: 1px solid #EBEEF5;*/
}
.project-link {
float: right;
margin-right: 12px;
margin-bottom: 10px;
}
</style> </style>

4
frontend/src/business/main.js
View File

@ -18,6 +18,7 @@ import '../common/css/menu-header.css';
import '../common/css/main.css'; import '../common/css/main.css';
import CKEditor from '@ckeditor/ckeditor5-vue'; import CKEditor from '@ckeditor/ckeditor5-vue';
import VueFab from 'vue-float-action-button' import VueFab from 'vue-float-action-button'
import {horizontalDrag} from "../common/js/directive";
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(icon); Vue.use(icon);
@ -43,6 +44,9 @@ Vue.directive('xpack', xpack);
Vue.directive('tester', tester); Vue.directive('tester', tester);
//支持左右拖拽
Vue.directive('horizontal-drag', horizontalDrag);
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,

17
frontend/src/common/js/directive.js Normal file
View File

@ -0,0 +1,17 @@
export const horizontalDrag = {
inserted(el, binding) {
el.onmousedown = function (e) {
const init = e.clientX;
const parent = el.parentNode;
const initWidth = parent.offsetWidth;
document.onmousemove = function (e) {
const end = e.clientX;
const newWidth = end - init + initWidth;
parent.style.width = newWidth + "px";
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
};
}
};

5
frontend/src/common/js/tableUtils.js
View File

@ -29,12 +29,7 @@ export function _handleSelect(component, selection, row, selectRows) {
selectRows.add(row); selectRows.add(row);
} }
let arr = Array.from(selectRows); let arr = Array.from(selectRows);
// 选中1个以上的用例时显示更多操作
if (selectRows.size === 1) {
component.$set(arr[0], "showMore", false);
} else if (selectRows.size === 2) {
arr.forEach(row => { arr.forEach(row => {
component.$set(row, "showMore", true); component.$set(row, "showMore", true);
}) })
} }
}