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

feat: 接口测试首页优化 

接口测试首页优化
This commit is contained in:
song.tianyang 2021-01-05 17:43:55 +08:00
parent 3cb27580b7
commit 9a32e83a01
32 changed files with 1551 additions and 1137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
backend/src/main/java/io/metersphere/api/controller/APITestController.java
View File

@ -285,17 +285,17 @@ public class APITestController {
long taskCountInThisWeek = scheduleService.countTaskByProjectIdInThisWeek(projectId);
apiCountResult.setThisWeekAddedCount(taskCountInThisWeek);
long api_executedInThisWeekCountNumber = apiReportService.countByProjectIdAndCreateInThisWeek(projectId);
long scene_executedInThisWeekCountNumber = apiScenarioReportService.countByProjectIdAndCreateAndByScheduleInThisWeek(projectId);
long executedInThisWeekCountNumber = api_executedInThisWeekCountNumber+scene_executedInThisWeekCountNumber;
// long api_executedInThisWeekCountNumber = apiReportService.countByProjectIdAndCreateInThisWeek(projectId);
long executedInThisWeekCountNumber = apiScenarioReportService.countByProjectIdAndCreateAndByScheduleInThisWeek(projectId);
// long executedInThisWeekCountNumber = api_executedInThisWeekCountNumber+scene_executedInThisWeekCountNumber;
apiCountResult.setThisWeekExecutedCount(executedInThisWeekCountNumber);
//统计 失败 成功 以及总数
List<ApiDataCountResult> api_allExecuteResult = apiReportService.countByProjectIdGroupByExecuteResult(projectId);
List<ApiDataCountResult> scene_allExecuteResult = apiScenarioReportService.countByProjectIdGroupByExecuteResult(projectId);
List<ApiDataCountResult> allExecuteResult = new ArrayList<>();
allExecuteResult.addAll(api_allExecuteResult);
allExecuteResult.addAll(scene_allExecuteResult);
// List<ApiDataCountResult> api_allExecuteResult = apiReportService.countByProjectIdGroupByExecuteResult(projectId);
List<ApiDataCountResult> allExecuteResult = apiScenarioReportService.countByProjectIdGroupByExecuteResult(projectId);
// List<ApiDataCountResult> allExecuteResult = new ArrayList<>();
// allExecuteResult.addAll(api_allExecuteResult);
// allExecuteResult.addAll(scene_allExecuteResult);
apiCountResult.countScheduleExecute(allExecuteResult);
long allCount = apiCountResult.getExecutedCount();
@ -322,11 +322,12 @@ public class APITestController {
if(dataIndex<selectDataList.size()){
ExecutedCaseInfoResult selectData = selectDataList.get(dataIndex);
dataDTO.setCaseID(selectData.getTestCaseID());
dataDTO.setCaseName(selectData.getCaseName());
dataDTO.setTestPlan(selectData.getTestPlan());
dataDTO.setFailureTimes(selectData.getFailureTimes());
dataDTO.setCaseType(selectData.getCaseType());
dataDTO.setTestPlanDTOList(selectData.getTestPlanDTOList());
}else {
dataDTO.setCaseName("");
dataDTO.setTestPlan("");

3
backend/src/main/java/io/metersphere/api/dto/automation/ApiScenarioRequest.java
View File

@ -24,4 +24,7 @@ public class ApiScenarioRequest {
private List<String> filters;
private Map<String, Object> combine;
private List<String> ids;
private boolean isSelectThisWeedData;
private long createTime = 0;
private String executeStatus;
}

5
backend/src/main/java/io/metersphere/api/dto/datacount/ExecutedCaseInfoResult.java
View File

@ -1,14 +1,18 @@
package io.metersphere.api.dto.datacount;
import io.metersphere.track.dto.TestPlanDTO;
import lombok.Getter;
import lombok.Setter;
import java.util.List;
/**
* 已执行的案例
*/
@Getter
@Setter
public class ExecutedCaseInfoResult {
private String testCaseID;
//案例名称
private String caseName;
//所属测试计划
@ -17,4 +21,5 @@ public class ExecutedCaseInfoResult {
private Long failureTimes;
//案例类型
private String caseType;
private List<TestPlanDTO> testPlanDTOList;
}

7
backend/src/main/java/io/metersphere/api/dto/datacount/response/ExecutedCaseInfoDTO.java
View File

@ -1,8 +1,11 @@
package io.metersphere.api.dto.datacount.response;
import io.metersphere.track.dto.TestPlanDTO;
import lombok.Getter;
import lombok.Setter;
import java.util.List;
/**
* 已执行的案例
*/
@ -19,4 +22,8 @@ public class ExecutedCaseInfoDTO {
private Long failureTimes;
//案例类型
private String caseType;
//案例ID
private String caseID;
//测试计划集合
private List<TestPlanDTO> testPlanDTOList;
}

2
backend/src/main/java/io/metersphere/api/dto/datacount/response/TaskInfoResult.java
View File

@ -15,6 +15,8 @@ public class TaskInfoResult {
private String taskID;
//场景名称
private String scenario;
//场景ID
private String scenarioId;
//规则
private String rule;
//任务状态

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

@ -26,4 +26,8 @@ public class ApiDefinitionRequest {
private List<String> filters;
private Map<String, Object> combine;
private List<String> ids;
private boolean isSelectThisWeedData = false;
private long createTime = 0;
private String status;
private String apiCaseCoverage;
}

2
backend/src/main/java/io/metersphere/api/dto/definition/ApiTestCaseRequest.java
View File

@ -24,4 +24,6 @@ public class ApiTestCaseRequest {
private List<String> moduleIds;
private List<OrderRequest> orders;
private Map<String, List<String>> filters;
private boolean isSelectThisWeedData;
private long createTime = 0;
}

7
backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
View File

@ -75,6 +75,13 @@ public class ApiAutomationService {
public List<ApiScenarioDTO> list(ApiScenarioRequest request) {
request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
if(request.isSelectThisWeedData()){
Map<String, Date> weekFirstTimeAndLastTime = DateUtils.getWeedFirstTimeAndLastTime(new Date());
Date weekFirstTime = weekFirstTimeAndLastTime.get("firstTime");
if(weekFirstTime!=null){
request.setCreateTime(weekFirstTime.getTime());
}
}
List<ApiScenarioDTO> list = extApiScenarioMapper.list(request);
return list;
}

20
backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java
View File

@ -10,7 +10,10 @@ import io.metersphere.base.mapper.ext.ExtApiDefinitionExecResultMapper;
import io.metersphere.commons.constants.ApiRunMode;
import io.metersphere.commons.utils.DateUtils;
import io.metersphere.commons.utils.SessionUtils;
import io.metersphere.track.dto.TestPlanDTO;
import io.metersphere.track.request.testcase.QueryTestPlanRequest;
import io.metersphere.track.service.TestPlanApiCaseService;
import io.metersphere.track.service.TestPlanService;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@ -30,6 +33,8 @@ public class ApiDefinitionExecResultService {
private ExtApiDefinitionExecResultMapper extApiDefinitionExecResultMapper;
@Resource
private TestPlanApiCaseService testPlanApiCaseService;
@Resource
private TestPlanService testPlanService;
public void saveApiResult(TestResult result, String type) {
@ -100,9 +105,22 @@ public class ApiDefinitionExecResultService {
List<ExecutedCaseInfoResult>list = extApiDefinitionExecResultMapper.findFaliureCaseInfoByProjectIDAndExecuteTimeAndLimitNumber(projectId, startTime.getTime());
List<ExecutedCaseInfoResult> returnList = new ArrayList<>(limitNumber);
for(int i = 0;i<list.size();i++){
if(i<limitNumber){
returnList.add(list.get(i));
//开始遍历查询TestPlan信息 --> 提供前台做超链接
ExecutedCaseInfoResult item = list.get(i);
QueryTestPlanRequest planRequest = new QueryTestPlanRequest();
planRequest.setProjectId(projectId);
if("scenario".equals(item.getCaseType())){
planRequest.setScenarioId(item.getTestCaseID());
}else if("apiCase".equals(item.getCaseType())){
planRequest.setApiId(item.getTestCaseID());
}
List<TestPlanDTO> dtoList = testPlanService.selectTestPlanByRelevancy(planRequest);
item.setTestPlanDTOList(dtoList);
returnList.add(item);
}else {
break;
}

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

@ -78,6 +78,16 @@ public class ApiDefinitionService {
public List<ApiDefinitionResult> list(ApiDefinitionRequest request) {
request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
//判断是否查询本周数据
if(request.isSelectThisWeedData()){
Map<String, Date> weekFirstTimeAndLastTime = DateUtils.getWeedFirstTimeAndLastTime(new Date());
Date weekFirstTime = weekFirstTimeAndLastTime.get("firstTime");
if(weekFirstTime!=null){
request.setCreateTime(weekFirstTime.getTime());
}
}
List<ApiDefinitionResult> resList = extApiDefinitionMapper.list(request);
calculateResult(resList);
return resList;

7
backend/src/main/java/io/metersphere/api/service/ApiTestCaseService.java
View File

@ -78,6 +78,13 @@ public class ApiTestCaseService {
public List<ApiTestCaseDTO> listSimple(ApiTestCaseRequest request) {
request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
if(request.isSelectThisWeedData()){
Map<String, Date> weekFirstTimeAndLastTime = DateUtils.getWeedFirstTimeAndLastTime(new Date());
Date weekFirstTime = weekFirstTimeAndLastTime.get("firstTime");
if(weekFirstTime!=null){
request.setCreateTime(weekFirstTime.getTime());
}
}
List<ApiTestCaseDTO> apiTestCases = extApiTestCaseMapper.listSimple(request);
if (CollectionUtils.isEmpty(apiTestCases)) {
return apiTestCases;

24
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
View File

@ -34,7 +34,7 @@
<select id="findFaliureCaseInfoByProjectIDAndExecuteTimeAndLimitNumber" resultType="io.metersphere.api.dto.datacount.ExecutedCaseInfoResult">
SELECT * FROM (
SELECT testCase.testCaseName AS caseName,testCase.testPlanName AS testPlan ,caseErrorCountData.dataCountNumber AS failureTimes,'apiCase' AS caseType
SELECT testCase.testCaseID,testCase.testCaseName AS caseName,testCase.testPlanName AS testPlan ,caseErrorCountData.dataCountNumber AS failureTimes,'apiCase' AS caseType
FROM (
SELECT apiCase.id AS testCaseID,apiCase.`name` AS testCaseName,group_concat(testPlan.`name`) AS testPlanName FROM api_test_case apiCase
INNER JOIN test_plan_api_case testPlanCase ON testPlanCase.api_case_id = apiCase.id
@ -50,20 +50,16 @@
) caseErrorCountData ON caseErrorCountData.testCaseID =testCase.testCaseID
WHERE caseErrorCountData.executeTime >= #{startTimestamp}
UNION
SELECT scene.`name` AS caseName,apiScene.testPlanName AS testPlan,count(report.id) AS failureTimes,'scenario' AS caseType
SELECT scene.id AS testCaseID,scene.`name` AS caseName,apiScene.testPlanName AS testPlan,count(report.id) AS failureTimes,'scenario' AS caseType
FROM api_scenario_report report
INNER JOIN api_scenario_report_detail reportDetail ON report.id = reportDetail.report_id
INNER JOIN api_scenario scene ON report.scenario_id = scene.id
INNER JOIN
(
SELECT
apiScene.api_scenario_id,
group_concat(testPlan.`name`) AS testPlanName
FROM
test_plan_api_scenario apiScene
INNER JOIN test_plan testPlan ON testPlan.id = apiScene.test_plan_id
GROUP BY apiScene.api_scenario_id
)apiScene ON apiScene.api_scenario_id = scene.id
INNER JOIN api_scenario_report_detail reportDetail ON report.id = reportDetail.report_id
INNER JOIN api_scenario scene ON report.scenario_id = scene.id
INNER JOIN(
SELECT apiScene.api_scenario_id, group_concat(testPlan.`name`) AS testPlanName
FROM test_plan_api_scenario apiScene
INNER JOIN test_plan testPlan ON testPlan.id = apiScene.test_plan_id
GROUP BY apiScene.api_scenario_id
)apiScene ON apiScene.api_scenario_id = scene.id
WHERE report.project_id = #{projectId}
AND ( report.STATUS = 'Error' OR report.STATUS = 'Fail' ) AND report.create_time >= #{startTimestamp}
GROUP BY scene.id

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

@ -227,6 +227,9 @@
<if test="request.userId != null">
AND api_definition.user_id = #{request.userId}
</if>
<if test="request.createTime >0">
AND api_definition.create_time >= #{request.createTime}
</if>
<if test="request.moduleId != null">
AND api_definition.module_id = #{request.moduleId}
</if>
@ -245,6 +248,16 @@
#{value}
</foreach>
</if>
<if test="request.apiCaseCoverage == 'uncoverage' ">
and api_definition.id not in
(SELECT api_definition_id FROM api_test_case)
</if>
<if test="request.apiCaseCoverage == 'coverage' ">
and api_definition.id in
(SELECT api_definition_id FROM api_test_case)
</if>
</where>
<if test="request.orders != null and request.orders.size() > 0">
order by

13
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.xml
View File

@ -40,6 +40,9 @@
<if test="request.projectId != null">
AND api_scenario.project_id = #{request.projectId}
</if>
<if test="request.createTime >0 ">
AND api_scenario.create_time >= #{request.createTime}
</if>
<if test="request.ids != null and request.ids.size() > 0">
AND api_scenario.id in
<foreach collection="request.ids" item="itemId" separator="," open="(" close=")">
@ -58,6 +61,16 @@
#{value}
</foreach>
</if>
<if test="request.executeStatus == 'unExecute'">
and api_scenario.last_result IS NULL
</if>
<if test="request.executeStatus == 'executeFailed'">
and api_scenario.last_result = 'Fail'
</if>
<if test="request.executeStatus == 'executePass'">
and api_scenario.last_result = 'Success'
</if>
</where>
<if test="request.orders != null and request.orders.size() > 0">
order by

6
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
View File

@ -228,6 +228,9 @@
<if test="request.projectId != null and request.projectId!=''">
c.project_id = #{request.projectId}
</if>
<if test="request.id != null and request.id!=''">
and c.id = #{request.id}
</if>
<if test="request.ids != null and request.ids.size() > 0">
<if test="request.projectId != null and request.projectId!=''">
and
@ -240,6 +243,9 @@
<if test="request.name != null and request.name!=''">
and c.name like CONCAT('%', #{request.name},'%')
</if>
<if test="request.createTime > 0">
and c.create_time >= #{request.createTime}
</if>
<if test="request.moduleIds != null and request.moduleIds.size() > 0">
and a.module_id in
<foreach collection="request.moduleIds" item="nodeId" separator="," open="(" close=")">

13
backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.xml
View File

@ -38,30 +38,19 @@
<select id="countTaskByProjectId" resultType="java.lang.Long">
SELECT COUNT(id) AS countNumber FROM `schedule` WHERE resource_id IN (
SELECT id FROM api_test WHERE project_id = #{0,jdbcType=VARCHAR} AND status != 'Trash'
UNION
SELECT id FROM api_scenario WHERE project_id = #{0,jdbcType=VARCHAR} AND status != 'Trash'
)
</select>
<select id="countTaskByProjectIdAndCreateTimeRange" resultType="java.lang.Long">
SELECT COUNT(id) AS countNumber FROM `schedule`
WHERE resource_id IN (
SELECT atest.id FROM api_test atest
WHERE atest.project_id = #{projectId,jdbcType=VARCHAR} AND atest.status != 'Trash'
UNION
SELECT scene.id FROM api_scenario scene
WHERE scene.project_id = #{projectId,jdbcType=VARCHAR} AND scene.status != 'Trash'
)
AND create_time BETWEEN #{startTime} and #{endTime}
</select>
<select id="findRunningTaskInfoByProjectID" resultType="io.metersphere.api.dto.datacount.response.TaskInfoResult">
SELECT apiTest.`name` AS scenario,sch.id AS taskID,sch.`value` AS rule,sch.`enable` AS `taskStatus`,u.`name` AS creator,sch.update_time AS updateTime
FROM api_test apiTest
INNER JOIN `schedule` sch ON apiTest.id = sch.resource_id
INNER JOIN `user` u ON u.id = sch.user_id
WHERE sch.`enable` = true AND apiTest.project_id = #{0,jdbcType=VARCHAR}
UNION
SELECT apiScene.`name` AS scenario,sch.id AS taskID,sch.`value` AS rule,sch.`enable` AS `taskStatus`,u.`name` AS creator,sch.update_time AS updateTime
SELECT apiScene.id AS scenarioId,apiScene.`name` AS scenario,sch.id AS taskID,sch.`value` AS rule,sch.`enable` AS `taskStatus`,u.`name` AS creator,sch.update_time AS updateTime
FROM api_scenario apiScene
INNER JOIN `schedule` sch ON apiScene.id = sch.resource_id
INNER JOIN `user` u ON u.id = sch.user_id

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

@ -213,7 +213,7 @@
<select id="selectTestPlanByRelevancy" resultMap="BaseResultMap" parameterType="io.metersphere.track.request.testcase.QueryTestPlanRequest">
SELECT * FROM TEST_PLAN p LEFT JOIN test_plan_project t ON t.test_plan_id=p.id
<where>
AND t.project_id = #{request.projectId}
AND (t.project_id = #{request.projectId} or p.project_id = #{request.projectId})
<if test="request.scenarioId != null">
AND p.id IN (SELECT test_plan_id FROM test_plan_api_scenario WHERE api_scenario_id = #{request.scenarioId} )
</if>

4
backend/src/main/java/io/metersphere/track/service/TestPlanService.java
View File

@ -37,6 +37,7 @@ import io.metersphere.track.request.testcase.QueryTestPlanRequest;
import io.metersphere.track.request.testplan.AddTestPlanRequest;
import io.metersphere.track.request.testplancase.QueryTestPlanCaseRequest;
import org.apache.commons.lang3.StringUtils;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.session.ExecutorType;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
@ -698,4 +699,7 @@ public class TestPlanService {
}
return issues;
}
public List<TestPlanDTO> selectTestPlanByRelevancy(QueryTestPlanRequest params){
return extTestPlanMapper.selectTestPlanByRelevancy(params);
}
}

221
frontend/src/business/components/api/automation/ApiAutomation.vue
View File

@ -1,5 +1,5 @@
<template>
<ms-container>
<ms-container v-if="renderComponent">
<ms-aside-container>
<ms-api-scenario-module
@nodeSelectEvent="nodeChange"
@ -17,7 +17,10 @@
<ms-api-scenario-list
:select-node-ids="selectNodeIds"
:trash-enable="trashEnable"
:checkRedirectID="checkRedirectID"
:isRedirectEdit="isRedirectEdit"
@edit="editScenario"
@changeSelectDataRangeAll="changeSelectDataRangeAll"
ref="apiScenarioList"/>
</el-tab-pane>
@ -28,7 +31,8 @@
:name="item.name"
closable>
<div class="ms-api-scenario-div">
<ms-edit-api-scenario @refresh="refresh" :currentScenario="item.currentScenario" :moduleOptions="moduleOptions"/>
<ms-edit-api-scenario @refresh="refresh" :currentScenario="item.currentScenario"
:moduleOptions="moduleOptions"/>
</div>
</el-tab-pane>
@ -44,92 +48,145 @@
<script>
import MsContainer from "@/business/components/common/components/MsContainer";
import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
import MsApiScenarioList from "@/business/components/api/automation/scenario/ApiScenarioList";
import {getUUID} from "@/common/js/utils";
import MsApiScenarioModule from "@/business/components/api/automation/scenario/ApiScenarioModule";
import MsEditApiScenario from "./scenario/EditApiScenario";
import {getCurrentProjectID} from "../../../../common/js/utils";
import MsContainer from "@/business/components/common/components/MsContainer";
import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
import MsApiScenarioList from "@/business/components/api/automation/scenario/ApiScenarioList";
import {getUUID} from "@/common/js/utils";
import MsApiScenarioModule from "@/business/components/api/automation/scenario/ApiScenarioModule";
import MsEditApiScenario from "./scenario/EditApiScenario";
import {getCurrentProjectID} from "../../../../common/js/utils";
export default {
name: "ApiAutomation",
components: {MsApiScenarioModule, MsApiScenarioList, MsMainContainer, MsAsideContainer, MsContainer, MsEditApiScenario},
comments: {},
data() {
return {
isHide: true,
activeName: 'default',
currentModule: null,
moduleOptions: {},
tabs: [],
trashEnable: false,
selectNodeIds: [],
export default {
name: "ApiAutomation",
components: {
MsApiScenarioModule,
MsApiScenarioList,
MsMainContainer,
MsAsideContainer,
MsContainer,
MsEditApiScenario
},
comments: {},
computed: {
checkRedirectID: function () {
let redirectIDParam = this.$route.params.redirectID;
this.changeRedirectParam(redirectIDParam);
return redirectIDParam;
},
isRedirectEdit: function () {
let redirectParam = this.$route.params.dataSelectRange;
this.checkRedirectEditPage(redirectParam);
return redirectParam;
}
},
data() {
return {
redirectID: '',
renderComponent: true,
isHide: true,
activeName: 'default',
currentModule: null,
moduleOptions: {},
tabs: [],
trashEnable: false,
selectNodeIds: [],
}
},
watch: {
redirectID() {
this.renderComponent = false;
this.$nextTick(() => {
// 在 DOM 中添加 my-component 组件
this.renderComponent = true;
});
}
},
methods: {
checkRedirectEditPage(redirectParam) {
if(redirectParam!=null){
let selectParamArr = redirectParam.split("edit:");
if (selectParamArr.length == 2) {
let scenarioId = selectParamArr[1];
let projectId = getCurrentProjectID();
//查找单条数据，跳转修改页面
let url = "/api/automation/list/" + 1 + "/" + 1;
this.$post(url, {id:scenarioId,projectId:projectId}, response => {
let data = response.data;
if(data!=null){
let row = data.listObject[0];
this.editScenario(row);
}
});
}
}
},
watch: {},
methods: {
addTab(tab) {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
if (tab.name === 'add') {
let label = this.$t('api_test.automation.add_scenario');
let name = getUUID().substring(0, 8);
this.activeName = name;
this.tabs.push({label: label, name: name, currentScenario: {apiScenarioModuleId: "", id: getUUID()}});
}
if (tab.name === 'edit') {
let label = this.$t('api_test.automation.add_scenario');
let name = getUUID().substring(0, 8);
this.activeName = name;
label = tab.currentScenario.name;
this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
}
},
removeTab(targetName) {
this.tabs = this.tabs.filter(tab => tab.name !== targetName);
if (this.tabs.length > 0) {
this.activeName = this.tabs[this.tabs.length - 1].name;
} else {
this.activeName = "default"
}
},
setTabLabel(data) {
for (const tab of this.tabs) {
if (tab.name === this.activeName) {
tab.label = data.name;
break;
}
}
},
selectModule(data) {
this.currentModule = data;
},
saveScenario(data) {
this.setTabLabel(data);
this.$refs.apiScenarioList.search(data);
},
refresh(data) {
this.$refs.apiScenarioList.search(data);
},
editScenario(row) {
this.addTab({name: 'edit', currentScenario: row});
},
nodeChange(node, nodeIds, pNodes) {
this.selectNodeIds = nodeIds;
},
setModuleOptions(data) {
this.moduleOptions = data;
},
enableTrash(data) {
this.trashEnable = data;
changeRedirectParam(redirectIDParam) {
this.redirectID = redirectIDParam;
},
addTab(tab) {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
if (tab.name === 'add') {
let label = this.$t('api_test.automation.add_scenario');
let name = getUUID().substring(0, 8);
this.activeName = name;
this.tabs.push({label: label, name: name, currentScenario: {apiScenarioModuleId: "", id: getUUID()}});
}
if (tab.name === 'edit') {
let label = this.$t('api_test.automation.add_scenario');
let name = getUUID().substring(0, 8);
this.activeName = name;
label = tab.currentScenario.name;
this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
}
},
removeTab(targetName) {
this.tabs = this.tabs.filter(tab => tab.name !== targetName);
if (this.tabs.length > 0) {
this.activeName = this.tabs[this.tabs.length - 1].name;
} else {
this.activeName = "default"
}
},
setTabLabel(data) {
for (const tab of this.tabs) {
if (tab.name === this.activeName) {
tab.label = data.name;
break;
}
}
},
selectModule(data) {
this.currentModule = data;
},
saveScenario(data) {
this.setTabLabel(data);
this.$refs.apiScenarioList.search(data);
},
refresh(data) {
this.$refs.apiScenarioList.search(data);
},
editScenario(row) {
this.addTab({name: 'edit', currentScenario: row});
},
nodeChange(node, nodeIds, pNodes) {
this.selectNodeIds = nodeIds;
},
setModuleOptions(data) {
this.moduleOptions = data;
},
changeSelectDataRangeAll(tableType) {
this.$route.params.dataSelectRange = 'all';
},
enableTrash(data) {
this.trashEnable = data;
}
}
}
</script>
<style scoped>

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

@ -2,7 +2,7 @@
<div>
<el-card class="table-card" v-loading="loading">
<template v-slot:header>
<ms-table-header :condition.sync="condition" @search="search" title=""
<ms-table-header :condition.sync="condition" @search="selectByParam" title=""
:show-create="false"/>
</template>
@ -16,10 +16,10 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="isSelectDataAll(true)">
{{$t('api_test.batch_menus.select_all_data',[total])}}
{{ $t('api_test.batch_menus.select_all_data', [total]) }}
</el-dropdown-item>
<el-dropdown-item @click.native.stop="isSelectDataAll(false)">
{{$t('api_test.batch_menus.select_show_data',[tableData.length])}}
{{ $t('api_test.batch_menus.select_show_data', [tableData.length]) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -143,6 +143,7 @@ export default {
schedule: {},
selection: [],
tableData: [],
selectDataRange: 'all',
currentPage: 1,
pageSize: 10,
total: 0,
@ -193,8 +194,11 @@ export default {
}
},
methods: {
selectByParam() {
this.changeSelectDataRangeAll();
this.search();
},
search() {
this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
@ -205,6 +209,25 @@ export default {
if (this.projectId != null) {
this.condition.projectId = this.projectId;
}
//检查是否只查询本周数据
this.condition.selectThisWeedData = false;
this.condition.executeStatus = null;
this.isSelectThissWeekData();
switch (this.selectDataRange){
case 'thisWeek':
this.condition.selectThisWeedData = true;
break;
case 'unExecute':
this.condition.executeStatus = 'unExecute';
break;
case 'executeFailed':
this.condition.executeStatus = 'executeFailed';
break;
case 'executePass':
this.condition.executeStatus = 'executePass';
break;
}
this.selection = [];
this.selectAll = false;
@ -366,6 +389,14 @@ export default {
this.selectDataCounts = this.selection.length;
}
},
//判断是否只显示本周的数据。 从首页跳转过来的请求会带有相关参数
isSelectThissWeekData() {
let dataRange = this.$route.params.dataSelectRange;
this.selectDataRange = dataRange;
},
changeSelectDataRangeAll() {
this.$emit("changeSelectDataRangeAll");
},
remove(row) {
if (this.trashEnable) {
this.$get('/api/automation/delete/' + row.id, () => {

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

@ -1,5 +1,5 @@
<template>
<ms-container>
<ms-container v-if="renderComponent">
<ms-aside-container>
<ms-api-module
@nodeSelectEvent="nodeChange"
@ -18,11 +18,12 @@
<el-dropdown size="small" split-button type="primary" class="ms-api-buttion"
@click="handleCommand('ADD')"
@command="handleCommand" v-tester>
{{$t('commons.add')}}
{{ $t('commons.add') }}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="debug">{{$t('api_test.definition.request.fast_debug')}}</el-dropdown-item>
<el-dropdown-item command="ADD">{{$t('api_test.definition.request.title')}}</el-dropdown-item>
<el-dropdown-item command="CLOSE_ALL">{{$t('api_test.definition.request.close_all_label')}}</el-dropdown-item>
<el-dropdown-item command="debug">{{ $t('api_test.definition.request.fast_debug') }}</el-dropdown-item>
<el-dropdown-item command="ADD">{{ $t('api_test.definition.request.title') }}</el-dropdown-item>
<el-dropdown-item command="CLOSE_ALL">{{ $t('api_test.definition.request.close_all_label') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -42,6 +43,9 @@
:select-node-ids="selectNodeIds"
:trash-enable="trashEnable"
:is-api-list-enable="isApiListEnable"
:queryDataType="queryDataType"
:selectDataRange="selectDataRange"
@changeSelectDataRangeAll="changeSelectDataRangeAll"
@editApi="editApi"
@handleCase="handleCase"
@showExecResult="showExecResult"
@ -56,6 +60,8 @@
:select-node-ids="selectNodeIds"
:trash-enable="trashEnable"
:is-api-list-enable="isApiListEnable"
:queryDataType="queryDataType"
@changeSelectDataRangeAll="changeSelectDataRangeAll"
@isApiListEnableChange="isApiListEnableChange"
@handleCase="handleCase"
@showExecResult="showExecResult"
@ -70,18 +76,26 @@
</div>
<!-- 快捷调试 -->
<div v-else-if="item.type=== 'debug'" class="ms-api-div">
<ms-debug-http-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi" v-if="currentProtocol==='HTTP'"/>
<ms-debug-jdbc-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi" v-if="currentProtocol==='SQL'"/>
<ms-debug-tcp-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi" v-if="currentProtocol==='TCP'"/>
<ms-debug-dubbo-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi" v-if="currentProtocol==='DUBBO'"/>
<ms-debug-http-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi"
v-if="currentProtocol==='HTTP'"/>
<ms-debug-jdbc-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi"
v-if="currentProtocol==='SQL'"/>
<ms-debug-tcp-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi"
v-if="currentProtocol==='TCP'"/>
<ms-debug-dubbo-page :currentProtocol="currentProtocol" :testCase="item.api" @saveAs="editApi"
v-if="currentProtocol==='DUBBO'"/>
</div>
<!-- 测试-->
<div v-else-if="item.type=== 'TEST'" class="ms-api-div">
<ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi" @refresh="refresh" v-if="currentProtocol==='HTTP'"/>
<ms-run-test-tcp-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi" @refresh="refresh" v-if="currentProtocol==='TCP'"/>
<ms-run-test-sql-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi" @refresh="refresh" v-if="currentProtocol==='SQL'"/>
<ms-run-test-dubbo-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi" @refresh="refresh" v-if="currentProtocol==='DUBBO'"/>
<ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi"
@refresh="refresh" v-if="currentProtocol==='HTTP'"/>
<ms-run-test-tcp-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi"
@refresh="refresh" v-if="currentProtocol==='TCP'"/>
<ms-run-test-sql-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi"
@refresh="refresh" v-if="currentProtocol==='SQL'"/>
<ms-run-test-dubbo-page :currentProtocol="currentProtocol" :api-data="item.api" @saveAsApi="editApi"
@refresh="refresh" v-if="currentProtocol==='DUBBO'"/>
</div>
</el-tab-pane>
</el-tabs>
@ -89,276 +103,304 @@
</ms-container>
</template>
<script>
import MsApiList from './components/list/ApiList';
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
import MsAsideContainer from "../../common/components/MsAsideContainer";
import MsApiConfig from "./components/ApiConfig";
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
import MsDebugTcpPage from "./components/debug/DebugTcpPage";
import MsDebugDubboPage from "./components/debug/DebugDubboPage";
import MsApiList from './components/list/ApiList';
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
import MsAsideContainer from "../../common/components/MsAsideContainer";
import MsApiConfig from "./components/ApiConfig";
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
import MsDebugTcpPage from "./components/debug/DebugTcpPage";
import MsDebugDubboPage from "./components/debug/DebugDubboPage";
import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
import MsApiModule from "./components/module/ApiModule";
import ApiCaseSimpleList from "./components/list/ApiCaseSimpleList";
import {PROJECT_NAME} from "../../../../common/js/constants";
import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
import MsApiModule from "./components/module/ApiModule";
import ApiCaseSimpleList from "./components/list/ApiCaseSimpleList";
import {PROJECT_NAME} from "../../../../common/js/constants";
export default {
name: "ApiDefinition",
components: {
ApiCaseSimpleList,
MsApiModule,
MsApiList,
MsMainContainer,
MsContainer,
MsAsideContainer,
MsApiConfig,
MsDebugHttpPage,
MsRunTestHttpPage,
MsDebugJdbcPage,
MsDebugTcpPage,
MsDebugDubboPage,
MsRunTestTcpPage,
MsRunTestSqlPage,
MsRunTestDubboPage
export default {
name: "ApiDefinition",
computed: {
queryDataType: function () {
let routeParam = this.$route.params.dataType;
let redirectIDParam = this.$route.params.redirectID;
this.changeRedirectParam(redirectIDParam);
if (routeParam === 'apiTestCase') {
this.isApiListEnableChange(false);
} else {
this.isApiListEnableChange(true);
}
return routeParam;
},
props: {
visible: {
type: Boolean,
default: false,
},
currentRow: {
type: Object,
},
components: {
ApiCaseSimpleList,
MsApiModule,
MsApiList,
MsMainContainer,
MsContainer,
MsAsideContainer,
MsApiConfig,
MsDebugHttpPage,
MsRunTestHttpPage,
MsDebugJdbcPage,
MsDebugTcpPage,
MsDebugDubboPage,
MsRunTestTcpPage,
MsRunTestSqlPage,
MsRunTestDubboPage
},
props: {
visible: {
type: Boolean,
default: false,
},
currentRow: {
type: Object,
}
},
data() {
return {
redirectID: '',
renderComponent: true,
selectDataRange: 'all',
showCasePage: true,
apiDefaultTab: 'default',
currentProtocol: null,
currentModule: null,
selectNodeIds: [],
currentApi: {},
moduleOptions: {},
trashEnable: false,
apiTabs: [{
title: this.$t('api_test.definition.api_title'),
name: 'default',
type: "list",
closable: false
}],
isApiListEnable: true
}
},
watch: {
currentProtocol() {
this.handleCommand("CLOSE_ALL");
},
redirectID() {
this.renderComponent = false;
this.$nextTick(() => {
// 在 DOM 中添加 my-component 组件
this.renderComponent = true;
});
}
},
methods: {
changeRedirectParam(redirectIDParam) {
this.redirectID = redirectIDParam;
},
isApiListEnableChange(data) {
this.isApiListEnable = data;
},
handleCommand(e) {
switch (e) {
case "ADD":
this.handleTabAdd(e);
break;
case "TEST":
this.handleTabsEdit(this.$t("commons.api"), e);
break;
case "CLOSE_ALL":
this.handleTabClose();
break;
default:
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
break;
}
},
data() {
return {
showCasePage: true,
apiDefaultTab: 'default',
currentProtocol: null,
currentModule: null,
selectNodeIds: [],
currentApi: {},
moduleOptions: {},
trashEnable: false,
apiTabs: [{
title: this.$t('api_test.definition.api_title'),
name: 'default',
type: "list",
closable: false
}],
isApiListEnable: true
handleTabAdd(e) {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
let api = {
status: "Underway", method: "GET", userId: getCurrentUser().id,
url: "", protocol: this.currentProtocol, environmentId: ""
};
this.handleTabsEdit(this.$t('api_test.definition.request.title'), e, api);
},
watch: {
currentProtocol() {
this.handleCommand("CLOSE_ALL");
}
handleTabClose() {
let tabs = this.apiTabs[0];
this.apiTabs = [];
this.apiDefaultTab = tabs.name;
this.apiTabs.push(tabs);
this.refresh();
},
methods: {
isApiListEnableChange(data) {
this.isApiListEnable = data;
},
handleCommand(e) {
switch (e) {
case "ADD":
this.handleTabAdd(e);
break;
case "TEST":
this.handleTabsEdit(this.$t("commons.api"), e);
break;
case "CLOSE_ALL":
this.handleTabClose();
break;
default:
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
break;
}
},
handleTabAdd(e) {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
let api = {
status: "Underway", method: "GET", userId: getCurrentUser().id,
url: "", protocol: this.currentProtocol, environmentId: ""
};
this.handleTabsEdit(this.$t('api_test.definition.request.title'), e, api);
},
handleTabClose() {
let tabs = this.apiTabs[0];
this.apiTabs = [];
this.apiDefaultTab = tabs.name;
this.apiTabs.push(tabs);
this.refresh();
},
handleTabRemove(targetName) {
let tabs = this.apiTabs;
let activeName = this.apiDefaultTab;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
handleTabRemove(targetName) {
let tabs = this.apiTabs;
let activeName = this.apiDefaultTab;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
});
}
this.apiDefaultTab = activeName;
this.apiTabs = tabs.filter(tab => tab.name !== targetName);
this.refresh();
},
//创建左侧树的根目录模块
createRootModel(){
this.$refs.nodeTree.createRootModel();
},
handleTabsEdit(targetName, action, api) {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
if (targetName === undefined || targetName === null) {
targetName = this.$t('api_test.definition.request.title');
}
let newTabName = getUUID();
this.apiTabs.push({
title: targetName,
name: newTabName,
closable: true,
type: action,
api: api,
}
});
this.apiDefaultTab = newTabName;
},
debug(id) {
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug", id);
},
editApi(row) {
let name = this.$t('api_test.definition.request.edit_api');
if (row.name) {
name = this.$t('api_test.definition.request.edit_api') + "-" + row.name;
}
this.handleTabsEdit(name, "ADD", row);
},
handleCase(api) {
this.currentApi = api;
this.showCasePage = false;
},
apiCaseClose() {
this.showCasePage = true;
},
exportAPI() {
if (!this.isApiListEnable) {
this.$warning('用例列表暂不支持导出，请切换成接口列表');
return;
}
let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol}
if (this.$refs.apiList[0].selectRows && this.$refs.apiList[0].selectRows.size > 0) {
let arr = Array.from(this.$refs.apiList[0].selectRows);
obj.data = arr;
}
this.apiDefaultTab = activeName;
this.apiTabs = tabs.filter(tab => tab.name !== targetName);
this.refresh();
},
//创建左侧树的根目录模块
createRootModel() {
this.$refs.nodeTree.createRootModel();
},
handleTabsEdit(targetName, action, api) {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
if (targetName === undefined || targetName === null) {
targetName = this.$t('api_test.definition.request.title');
}
let newTabName = getUUID();
this.apiTabs.push({
title: targetName,
name: newTabName,
closable: true,
type: action,
api: api,
});
this.apiDefaultTab = newTabName;
},
debug(id) {
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug", id);
},
editApi(row) {
let name = this.$t('api_test.definition.request.edit_api');
if (row.name) {
name = this.$t('api_test.definition.request.edit_api') + "-" + row.name;
}
this.handleTabsEdit(name, "ADD", row);
},
handleCase(api) {
this.currentApi = api;
this.showCasePage = false;
},
apiCaseClose() {
this.showCasePage = true;
},
exportAPI() {
if (!this.isApiListEnable) {
this.$warning('用例列表暂不支持导出，请切换成接口列表');
return;
}
let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol}
if (this.$refs.apiList[0].selectRows && this.$refs.apiList[0].selectRows.size > 0) {
let arr = Array.from(this.$refs.apiList[0].selectRows);
obj.data = arr;
this.buildApiPath(obj.data);
downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
} else {
let condition = {};
let url = "/api/definition/list/all";
condition.filters = ["Prepare", "Underway", "Completed"];
condition.projectId = getCurrentProjectID();
this.$post(url, condition, response => {
obj.data = response.data;
this.buildApiPath(obj.data);
downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
} else {
let condition = {};
let url = "/api/definition/list/all";
condition.filters = ["Prepare", "Underway", "Completed"];
condition.projectId = getCurrentProjectID();
this.$post(url, condition, response => {
obj.data = response.data;
this.buildApiPath(obj.data);
downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
});
}
},
buildApiPath(apis) {
apis.forEach((api) => {
this.moduleOptions.forEach(item => {
if (api.moduleId === item.id) {
api.modulePath = item.path;
}
});
});
},
refresh(data) {
this.$refs.apiList[0].initTable(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;
}
}
},
runTest(data) {
this.setTabTitle(data);
this.handleTabsEdit(this.$t("commons.api"), "TEST", data);
},
saveApi(data) {
this.setTabTitle(data);
this.refresh(data);
},
showExecResult(row) {
this.debug(row);
},
nodeChange(node, nodeIds, pNodes) {
this.selectNodeIds = nodeIds;
},
handleProtocolChange(protocol) {
this.currentProtocol = protocol;
},
setModuleOptions(data) {
this.moduleOptions = data;
},
enableTrash(data) {
this.trashEnable = data;
}
},
buildApiPath(apis) {
apis.forEach((api) => {
this.moduleOptions.forEach(item => {
if (api.moduleId === item.id) {
api.modulePath = item.path;
}
});
});
},
refresh(data) {
this.$refs.apiList[0].initTable(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;
}
}
},
runTest(data) {
this.setTabTitle(data);
this.handleTabsEdit(this.$t("commons.api"), "TEST", data);
},
saveApi(data) {
this.setTabTitle(data);
this.refresh(data);
},
showExecResult(row) {
this.debug(row);
},
nodeChange(node, nodeIds, pNodes) {
this.selectNodeIds = nodeIds;
},
handleProtocolChange(protocol) {
this.currentProtocol = protocol;
},
setModuleOptions(data) {
this.moduleOptions = data;
},
changeSelectDataRangeAll(tableType) {
this.$route.params.dataSelectRange = 'all';
},
enableTrash(data) {
this.trashEnable = 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-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)
}
.ms-api-div {
overflow-y: auto;
height: calc(100vh - 155px)
}
/deep/ .el-tabs__header {
margin: 0 0 5px;
width: calc(100% - 90px);
}
/deep/ .el-tabs__header {
margin: 0 0 5px;
width: calc(100% - 90px);
}
/deep/ .el-main {
overflow: hidden;
}
/deep/ .el-main {
overflow: hidden;
}
/deep/ .el-card {
/*border: 1px solid #EBEEF5;*/
/*border-style: none;*/
border-top: none;
}
/deep/ .el-card {
/*border: 1px solid #EBEEF5;*/
/*border-style: none;*/
border-top: none;
}
</style>

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

@ -4,7 +4,8 @@
:is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange">
<el-input placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
<el-input placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small"
v-model="condition.name"/>
<el-table v-loading="result.loading"
ref="caseTable"
@ -22,10 +23,10 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="isSelectDataAll(true)">
{{$t('api_test.batch_menus.select_all_data',[total])}}
{{ $t('api_test.batch_menus.select_all_data', [total]) }}
</el-dropdown-item>
<el-dropdown-item @click.native.stop="isSelectDataAll(false)">
{{$t('api_test.batch_menus.select_show_data',[tableData.length])}}
{{ $t('api_test.batch_menus.select_show_data', [tableData.length]) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -72,8 +73,10 @@
<el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
<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="handleTestCase(scope.row)" v-if="!trashEnable">{{$t('commons.edit')}}</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{$t('commons.delete')}}</el-button>
<el-button type="text" @click="handleTestCase(scope.row)" v-if="!trashEnable">{{ $t('commons.edit') }}
</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{ $t('commons.delete') }}
</el-button>
</template>
</el-table-column>
@ -91,353 +94,382 @@
<script>
import MsTableOperator from "../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
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 "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, CASE_PRIORITY} from "../../model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import ApiListContainer from "./ApiListContainer";
import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
import ApiCaseList from "../case/ApiCaseList";
import {_filter, _sort} from "../../../../../../common/js/utils";
import TestPlanCaseListHeader from "../../../../track/plan/view/comonents/api/TestPlanCaseListHeader";
import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
import MsTableOperator from "../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
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 "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, CASE_PRIORITY} from "../../model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import ApiListContainer from "./ApiListContainer";
import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
import ApiCaseList from "../case/ApiCaseList";
import {_filter, _sort} from "../../../../../../common/js/utils";
import TestPlanCaseListHeader from "../../../../track/plan/view/comonents/api/TestPlanCaseListHeader";
import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
export default {
name: "ApiCaseSimpleList",
components: {
ApiCaseList,
PriorityTableItem,
ApiListContainer,
MsTableOperatorButton,
MsTableOperator,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit
export default {
name: "ApiCaseSimpleList",
components: {
ApiCaseList,
PriorityTableItem,
ApiListContainer,
MsTableOperatorButton,
MsTableOperator,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit
},
data() {
return {
condition: {},
selectCase: {},
result: {},
moduleId: "",
selectDataRange: "all",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')},
],
priorityFilters: [
{text: 'P0', value: 'P0'},
{text: 'P1', value: 'P1'},
{text: 'P2', value: 'P2'},
{text: 'P3', value: 'P3'}
],
valueArr: {
priority: CASE_PRIORITY,
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
environmentId: undefined,
selectAll: false,
unSelection: [],
selectDataCounts: 0,
}
},
props: {
currentProtocol: String,
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
},
data() {
return {
condition: {},
selectCase: {},
result: {},
moduleId: "",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')},
],
priorityFilters: [
{text: 'P0', value: 'P0'},
{text: 'P1', value: 'P1'},
{text: 'P2', value: 'P2'},
{text: 'P3', value: 'P3'}
],
valueArr: {
priority: CASE_PRIORITY,
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
environmentId: undefined,
selectAll: false,
unSelection:[],
selectDataCounts:0,
trashEnable: {
type: Boolean,
default: false,
},
isApiListEnable: {
type: Boolean,
default: false,
},
isReadOnly: {
type: Boolean,
default: false
},
isCaseRelevance: {
type: Boolean,
default: false,
},
relevanceProjectId: String,
model: {
type: String,
default() {
'api'
}
},
props: {
currentProtocol: String,
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
},
trashEnable: {
type: Boolean,
default: false,
},
isApiListEnable: {
type: Boolean,
default: false,
},
isReadOnly: {
type: Boolean,
default: false
},
isCaseRelevance: {
type: Boolean,
default: false,
},
relevanceProjectId: String,
model: {
type: String,
default() {
'api'
}
},
planId: String
},
created: function () {
planId: String
},
created: function () {
this.initTable();
},
watch: {
selectNodeIds() {
this.initTable();
},
watch: {
selectNodeIds() {
this.initTable();
},
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
}
},
relevanceProjectId() {
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
}
},
computed: {
relevanceProjectId() {
this.initTable();
}
},
computed: {
// 接口定义用例列表
isApiModel() {
return this.model === 'api'
},
// 接口定义用例列表
isApiModel() {
return this.model === 'api'
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
this.condition.status = "Trash";
this.condition.moduleIds = [];
}
this.selectAll = false;
this.unSelection = [];
this.selectDataCounts = 0;
this.condition.projectId = getCurrentProjectID();
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
this.condition.status = "Trash";
this.condition.moduleIds = [];
}
this.selectAll = false;
this.unSelection = [];
this.selectDataCounts = 0;
this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
}
//检查是否只查询本周数据
this.isSelectThissWeekData();
this.condition.selectThisWeedData = false;
this.condition.id = null;
if (this.selectDataRange == 'thisWeekCount') {
this.condition.selectThisWeedData = true;
} else if (this.selectDataRange != null) {
let selectParamArr = this.selectDataRange.split("single:");
if (selectParamArr.length == 2) {
this.condition.id = selectParamArr[1];
}
if (this.condition.projectId) {
this.result = this.$post('/api/testcase/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
this.unSelection = response.data.listObject.map(s=>s.id);
});
}
if (this.condition.projectId) {
this.result = this.$post('/api/testcase/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
this.unSelection = response.data.listObject.map(s => s.id);
});
}
},
// getMaintainerOptions() {
// let workspaceId = localStorage.getItem(WORKSPACE_ID);
// this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
// this.valueArr.userId = response.data;
// });
// },
handleSelect(selection, row) {
_handleSelect(this, selection, row, this.selectRows);
this.selectRowsCount(this.selectRows)
},
showExecResult(row) {
this.visible = false;
this.$emit('showExecResult', row);
},
filter(filters) {
_filter(filters, this.condition);
this.initTable();
},
sort(column) {
// 每次只对一个字段排序
if (this.condition.orders) {
this.condition.orders = [];
}
_sort(column, this.condition);
this.initTable();
},
handleSelectAll(selection) {
_handleSelectAll(this, selection, this.tableData, this.selectRows);
this.selectRowsCount(this.selectRows)
},
search() {
this.changeSelectDataRangeAll();
this.initTable();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
handleTestCase(testCase) {
this.$get('/api/definition/get/' + testCase.apiDefinitionId, (response) => {
let api = response.data;
let selectApi = api;
let request = {};
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
request = api.request;
} else {
request = JSON.parse(api.request);
}
},
// getMaintainerOptions() {
// let workspaceId = localStorage.getItem(WORKSPACE_ID);
// this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
// this.valueArr.userId = response.data;
if (!request.hashTree) {
request.hashTree = [];
}
selectApi.url = request.path;
this.$refs.caseList.open(selectApi, testCase.id);
});
},
reductionApi(row) {
let ids = [row.id];
this.$post('/api/testcase/reduction/', ids, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
// if (this.trashEnable) {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let obj = {};
obj.projectId = getCurrentProjectID();
obj.selectAllDate = this.isSelectAllDate;
obj.unSelectIds = this.unSelection;
obj.ids = Array.from(this.selectRows).map(row => row.id);
obj = Object.assign(obj, this.condition);
this.$post('/api/testcase/deleteBatchByParam/', obj, () => {
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/testcase/removeToGc/', ids, () => {
// this.selectRows.clear();
// this.initTable();
// this.$success(this.$t('commons.delete_success'));
// });
// }
// }
// });
// },
handleSelect(selection, row) {
_handleSelect(this, selection, row, this.selectRows);
this.selectRowsCount(this.selectRows)
},
showExecResult(row) {
this.visible = false;
this.$emit('showExecResult', row);
},
filter(filters) {
_filter(filters, this.condition);
this.initTable();
},
sort(column) {
// 每次只对一个字段排序
if (this.condition.orders) {
this.condition.orders = [];
}
_sort(column, this.condition);
this.initTable();
},
handleSelectAll(selection) {
_handleSelectAll(this, selection, this.tableData, this.selectRows);
this.selectRowsCount(this.selectRows)
},
search() {
this.initTable();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
// }
},
handleEditBatch() {
this.$refs.batchEdit.open();
},
batchEdit(form) {
let arr = Array.from(this.selectRows);
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
handleTestCase(testCase) {
this.$get('/api/definition/get/' + testCase.apiDefinitionId, (response) => {
let api = response.data;
let selectApi = api;
let request = {};
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
request = api.request;
} else {
request = JSON.parse(api.request);
}
if (!request.hashTree) {
request.hashTree = [];
}
selectApi.url = request.path;
this.$refs.caseList.open(selectApi, testCase.id);
});
},
reductionApi(row) {
let ids = [row.id];
this.$post('/api/testcase/reduction/', ids, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
// if (this.trashEnable) {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let obj = {};
obj.projectId = getCurrentProjectID();
obj.selectAllDate = this.isSelectAllDate;
obj.unSelectIds = this.unSelection;
obj.ids = Array.from(this.selectRows).map(row => row.id);
obj = Object.assign(obj, this.condition);
this.$post('/api/testcase/deleteBatchByParam/', obj , () => {
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/testcase/removeToGc/', ids, () => {
// this.selectRows.clear();
// this.initTable();
// this.$success(this.$t('commons.delete_success'));
// });
// }
// }
// });
// }
},
handleEditBatch() {
this.$refs.batchEdit.open();
},
batchEdit(form) {
let arr = Array.from(this.selectRows);
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
param.projectId = getCurrentProjectID();
param.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition);
this.$post('/api/testcase/batch/editByParam', param, () => {
this.$success(this.$t('commons.save_success'));
this.initTable();
});
},
handleDelete(apiCase) {
// if (this.trashEnable) {
this.$get('/api/testcase/delete/' + apiCase.id, () => {
this.$success(this.$t('commons.delete_success'));
this.initTable();
});
return;
// }
// this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + apiCase.name + " ？", '', {
// confirmButtonText: this.$t('commons.confirm'),
// callback: (action) => {
// if (action === 'confirm') {
// let ids = [apiCase.id];
// this.$post('/api/testcase/removeToGc/', ids, () => {
// this.$success(this.$t('commons.delete_success'));
// this.initTable();
// });
// }
// }
// });
},
setEnvironment(data) {
this.environmentId = data.id;
},
selectRowsCount(selection){
let selectedIDs = this.getIds(selection);
let allIDs = this.tableData.map(s=>s.id);
this.unSelection = allIDs.filter(function (val) {
return selectedIDs.indexOf(val) === -1
});
if(this.isSelectAllDate){
this.selectDataCounts =this.total - this.unSelection.length;
}else {
this.selectDataCounts =selection.size;
}
},
isSelectDataAll(dataType) {
this.isSelectAllDate = dataType;
this.selectRowsCount(this.selectRows)
//如果已经全选，不需要再操作了
if (this.selectRows.size != this.tableData.length) {
this.$refs.caseTable.toggleAllSelection(true);
}
},
getIds(rowSets){
let rowArray = Array.from(rowSets)
let ids = rowArray.map(s=>s.id);
return ids;
param.projectId = getCurrentProjectID();
param.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition);
this.$post('/api/testcase/batch/editByParam', param, () => {
this.$success(this.$t('commons.save_success'));
this.initTable();
});
},
handleDelete(apiCase) {
// if (this.trashEnable) {
this.$get('/api/testcase/delete/' + apiCase.id, () => {
this.$success(this.$t('commons.delete_success'));
this.initTable();
});
return;
// }
// this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + apiCase.name + " ？", '', {
// confirmButtonText: this.$t('commons.confirm'),
// callback: (action) => {
// if (action === 'confirm') {
// let ids = [apiCase.id];
// this.$post('/api/testcase/removeToGc/', ids, () => {
// this.$success(this.$t('commons.delete_success'));
// this.initTable();
// });
// }
// }
// });
},
setEnvironment(data) {
this.environmentId = data.id;
},
selectRowsCount(selection) {
let selectedIDs = this.getIds(selection);
let allIDs = this.tableData.map(s => s.id);
this.unSelection = allIDs.filter(function (val) {
return selectedIDs.indexOf(val) === -1
});
if (this.isSelectAllDate) {
this.selectDataCounts = this.total - this.unSelection.length;
} else {
this.selectDataCounts = selection.size;
}
},
}
isSelectDataAll(dataType) {
this.isSelectAllDate = dataType;
this.selectRowsCount(this.selectRows)
//如果已经全选，不需要再操作了
if (this.selectRows.size != this.tableData.length) {
this.$refs.caseTable.toggleAllSelection(true);
}
},
//判断是否只显示本周的数据。 从首页跳转过来的请求会带有相关参数
isSelectThissWeekData() {
this.selectDataRange = "all";
let routeParam = this.$route.params.dataSelectRange;
let dataType = this.$route.params.dataType;
if (dataType === 'apiTestCase') {
this.selectDataRange = routeParam;
}
},
changeSelectDataRangeAll() {
this.$emit("changeSelectDataRangeAll", "testCase");
},
getIds(rowSets) {
let rowArray = Array.from(rowSets)
let ids = rowArray.map(s => s.id);
return ids;
}
},
}
</script>
<style scoped>
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.api-el-tag {
color: white;
}
.api-el-tag {
color: white;
}
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
</style>

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

@ -1,10 +1,11 @@
<template>
<div>
<api-list-container
:is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange">
:is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange">
<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"
@ -21,10 +22,10 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="isSelectDataAll(true)">
{{$t('api_test.batch_menus.select_all_data',[total])}}
{{ $t('api_test.batch_menus.select_all_data', [total]) }}
</el-dropdown-item>
<el-dropdown-item @click.native.stop="isSelectDataAll(false)">
{{$t('api_test.batch_menus.select_show_data',[tableData.length])}}
{{ $t('api_test.batch_menus.select_show_data', [tableData.length]) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -36,38 +37,43 @@
<el-table-column prop="num" label="ID" show-overflow-tooltip/>
<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>
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 == '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>
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), border: getColor(true, scope.row.method)}" class="api-el-tag">
{{ scope.row.method}}
<el-tag size="mini"
:style="{'background-color': getColor(true, scope.row.method), border: 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/>
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/>
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">
@ -76,26 +82,31 @@
</el-table-column>
<el-table-column
prop="caseTotal"
:label="$t('api_test.definition.api_case_number')"
show-overflow-tooltip/>
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/>
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/>
prop="casePassingRate"
:label="$t('api_test.definition.api_case_passing_rate')"
show-overflow-tooltip/>
<el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
<template v-slot:default="scope">
<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable" v-tester>{{$t('commons.reduction')}}</el-button>
<el-button type="text" @click="editApi(scope.row)" v-else v-tester>{{$t('commons.edit')}}</el-button>
<el-button type="text" @click="handleTestCase(scope.row)">{{$t('api_test.definition.request.case')}}</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C" v-tester>{{$t('commons.delete')}}</el-button>
<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable" v-tester>
{{ $t('commons.reduction') }}
</el-button>
<el-button type="text" @click="editApi(scope.row)" v-else v-tester>{{ $t('commons.edit') }}</el-button>
<el-button type="text" @click="handleTestCase(scope.row)">{{ $t('api_test.definition.request.case') }}
</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C" v-tester>
{{ $t('commons.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
@ -111,392 +122,437 @@
<script>
import MsTableHeader from '../../../../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 "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, REQ_METHOD, API_STATUS} from "../../model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import ApiListContainer from "./ApiListContainer";
import MsTableHeader from '../../../../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 "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, REQ_METHOD, API_STATUS} from "../../model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import ApiListContainer from "./ApiListContainer";
export default {
name: "ApiList",
components: {
ApiListContainer,
MsTableButton,
MsTableOperatorButton,
MsTableOperator,
MsTableHeader,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit
export default {
name: "ApiList",
components: {
ApiListContainer,
MsTableButton,
MsTableOperatorButton,
MsTableOperator,
MsTableHeader,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit
},
data() {
return {
condition: {},
selectApi: {},
result: {},
moduleId: "",
selectDataRange: "all",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
typeArr: [
{id: 'status', name: this.$t('api_test.definition.api_status')},
{id: 'method', name: this.$t('api_test.definition.api_type')},
{id: 'userId', name: this.$t('api_test.definition.api_principal')},
],
valueArr: {
status: API_STATUS,
method: REQ_METHOD,
userId: [],
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
environmentId: undefined,
selectAll: false,
unSelection: [],
selectDataCounts: 0,
}
},
props: {
currentProtocol: String,
selectNodeIds: Array,
isSelectThisWeek: String,
visible: {
type: Boolean,
default: false,
},
data() {
return {
condition: {},
selectApi: {},
result: {},
moduleId: "",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
typeArr: [
{id: 'status', name: this.$t('api_test.definition.api_status')},
{id: 'method', name: this.$t('api_test.definition.api_type')},
{id: 'userId', name: this.$t('api_test.definition.api_principal')},
],
valueArr: {
status: API_STATUS,
method: REQ_METHOD,
userId: [],
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
environmentId: undefined,
selectAll: false,
unSelection:[],
selectDataCounts:0,
}
isCaseRelevance: {
type: Boolean,
default: false,
},
props: {
currentProtocol: String,
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
},
isCaseRelevance: {
type: Boolean,
default: false,
},
trashEnable: {
type: Boolean,
default: false,
},
isApiListEnable: Boolean,
isReadOnly: {
type: Boolean,
default: false
},
trashEnable: {
type: Boolean,
default: false,
},
created: function () {
isApiListEnable: Boolean,
isReadOnly: {
type: Boolean,
default: false
},
},
mounted: function () {
this.initTable();
},
created: function () {
this.initTable();
this.getMaintainerOptions();
},
watch: {
selectNodeIds() {
this.initTable();
this.getMaintainerOptions();
},
watch: {
selectNodeIds() {
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
},
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
}
}
}
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
this.selectAll = false;
this.unSelection = [];
this.selectDataCounts = 0;
this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
this.condition.filters = ["Trash"];
this.condition.moduleIds = [];
}
this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
}
//检查是否只查询本周数据
this.getSelectDataRange();
this.condition.selectThisWeedData = false;
this.condition.apiCaseCoverage = null;
switch (this.selectDataRange){
case 'thisWeekCount':
this.condition.selectThisWeedData = true;
break;
case 'Prepare':
this.condition.filters = [this.selectDataRange];
break;
case 'Completed':
this.condition.filters = [this.selectDataRange];
break;
case 'Underway':
this.condition.filters = [this.selectDataRange];
break;
case 'uncoverage':
this.condition.apiCaseCoverage = 'uncoverage';
break;
case 'coverage':
this.condition.apiCaseCoverage = 'coverage';
break;
}
if (this.condition.projectId) {
this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
this.unSelection = response.data.listObject.map(s => s.id);
});
}
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
this.selectAll = false;
this.unSelection = [];
this.selectDataCounts = 0;
this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
this.condition.filters = ["Trash"];
this.condition.moduleIds = [];
}
this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
}
if (this.condition.projectId) {
this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
this.unSelection = response.data.listObject.map(s=>s.id);
});
}
},
getMaintainerOptions() {
let workspaceId = localStorage.getItem(WORKSPACE_ID);
this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
this.valueArr.userId = response.data;
});
},
handleSelect(selection, row) {
row.hashTree = [];
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
} else {
getMaintainerOptions() {
let workspaceId = localStorage.getItem(WORKSPACE_ID);
this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
this.valueArr.userId = response.data;
});
},
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);
// 选中1个以上的用例时显示更多操作
if (this.selectRows.size === 1) {
this.$set(arr[0], "showMore", true);
} else if (this.selectRows.size === 2) {
arr.forEach(row => {
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", true);
} else if (this.selectRows.size === 2) {
arr.forEach(row => {
this.$set(row, "showMore", true);
})
}
this.selectRowsCount(this.selectRows)
},
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);
});
}
})
}
this.selectRowsCount(this.selectRows)
},
handleSelectAll(selection) {
if (selection.length > 0) {
if (selection.length === 1) {
selection.hashTree = [];
this.selectRows.add(selection[0]);
} else {
this.selectRows.clear();
this.tableData.forEach(row => {
this.$set(row, "showMore", false);
})
}
this.selectRowsCount(this.selectRows)
},
search() {
this.initTable();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
editApi(row) {
this.$emit('editApi', row);
},
reductionApi(row) {
row.request = null;
row.response = null;
let rows = [row];
this.$post('/api/definition/reduction/', rows, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
if (this.trashEnable) {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let deleteParam = {};
let ids = Array.from(this.selectRows).map(row => row.id);
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
this.$post('/api/definition/deleteBatchByParams/', deleteParam, () => {
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);
let deleteParam = {};
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
this.$refs.caseList.apiCaseClose();
});
}
}
this.tableData.forEach(item => {
item.hashTree = [];
this.$set(item, "showMore", true);
this.selectRows.add(item);
});
}
},
handleEditBatch() {
this.$refs.batchEdit.open();
},
batchEdit(form) {
let arr = Array.from(this.selectRows);
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
} else {
this.selectRows.clear();
this.tableData.forEach(row => {
this.$set(row, "showMore", false);
})
}
this.selectRowsCount(this.selectRows)
},
search() {
this.changeSelectDataRangeAll();
this.initTable();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
param.projectId = getCurrentProjectID();
param.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition);
this.$post('/api/definition/batch/editByParams', param, () => {
this.$success(this.$t('commons.save_success'));
this.initTable();
});
},
handleTestCase(api) {
this.selectApi = api;
let request = {};
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
request = api.request;
} else {
request = JSON.parse(api.request);
}
if (!request.hashTree) {
request.hashTree = [];
}
this.selectApi.url = request.path;
this.$refs.caseList.open(this.selectApi);
},
handleDelete(api) {
if (this.trashEnable) {
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 + " ？", '', {
editApi(row) {
this.$emit('editApi', row);
},
reductionApi(row) {
row.request = null;
row.response = null;
let rows = [row];
this.$post('/api/definition/reduction/', rows, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
if (this.trashEnable) {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
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'));
let deleteParam = {};
let ids = Array.from(this.selectRows).map(row => row.id);
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
this.$post('/api/definition/deleteBatchByParams/', deleteParam, () => {
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);
let deleteParam = {};
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
this.$refs.caseList.apiCaseClose();
});
}
}
});
},
getColor(enable, method) {
if (enable) {
return this.methodColorMap.get(method);
}
},
showExecResult(row) {
this.$emit('showExecResult', row);
},
selectRowsCount(selection){
let selectedIDs = this.getIds(selection);
let allIDs = this.tableData.map(s=>s.id);
this.unSelection = allIDs.filter(function (val) {
return selectedIDs.indexOf(val) === -1
});
if(this.isSelectAllDate){
this.selectDataCounts =this.total - this.unSelection.length;
}else {
this.selectDataCounts =selection.size;
}
},
isSelectDataAll(dataType) {
this.isSelectAllDate = dataType;
this.selectRowsCount(this.selectRows)
//如果已经全选，不需要再操作了
if (this.selectRows.size != this.tableData.length) {
this.$refs.apiDefinitionTable.toggleAllSelection(true);
}
},
getIds(rowSets){
let rowArray = Array.from(rowSets)
let ids = rowArray.map(s=>s.id);
return ids;
}
},
}
handleEditBatch() {
this.$refs.batchEdit.open();
},
batchEdit(form) {
let arr = Array.from(this.selectRows);
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
param.projectId = getCurrentProjectID();
param.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition);
this.$post('/api/definition/batch/editByParams', param, () => {
this.$success(this.$t('commons.save_success'));
this.initTable();
});
},
handleTestCase(api) {
this.selectApi = api;
let request = {};
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
request = api.request;
} else {
request = JSON.parse(api.request);
}
if (!request.hashTree) {
request.hashTree = [];
}
this.selectApi.url = request.path;
this.$refs.caseList.open(this.selectApi);
},
handleDelete(api) {
if (this.trashEnable) {
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();
this.$refs.caseList.apiCaseClose();
});
}
}
});
},
getColor(enable, method) {
if (enable) {
return this.methodColorMap.get(method);
}
},
showExecResult(row) {
this.$emit('showExecResult', row);
},
selectRowsCount(selection) {
let selectedIDs = this.getIds(selection);
let allIDs = this.tableData.map(s => s.id);
this.unSelection = allIDs.filter(function (val) {
return selectedIDs.indexOf(val) === -1
});
if (this.isSelectAllDate) {
this.selectDataCounts = this.total - this.unSelection.length;
} else {
this.selectDataCounts = selection.size;
}
},
isSelectDataAll(dataType) {
this.isSelectAllDate = dataType;
this.selectRowsCount(this.selectRows)
//如果已经全选，不需要再操作了
if (this.selectRows.size != this.tableData.length) {
this.$refs.apiDefinitionTable.toggleAllSelection(true);
}
},
//判断是否只显示本周的数据。 从首页跳转过来的请求会带有相关参数
getSelectDataRange() {
let dataRange = this.$route.params.dataSelectRange;
let dataType = this.$route.params.dataType;
if (dataType === 'api') {
this.selectDataRange = dataRange;
} else {
this.selectDataRange = 'all';
}
},
changeSelectDataRangeAll() {
this.$emit("changeSelectDataRangeAll", "api");
},
getIds(rowSets) {
let rowArray = Array.from(rowSets)
let ids = rowArray.map(s => s.id);
return ids;
}
},
}
</script>
<style scoped>
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.api-el-tag {
color: white;
}
.api-el-tag {
color: white;
}
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.api-list >>> th:first-child {
/*border: 1px solid #DCDFE6;*/
/*border-right: 0px;*/
/*border-top-left-radius:5px;*/
/*border-bottom-left-radius:5px;*/
/*width: 20px;*/
.api-list >>> th:first-child {
/*border: 1px solid #DCDFE6;*/
/*border-right: 0px;*/
/*border-top-left-radius:5px;*/
/*border-bottom-left-radius:5px;*/
/*width: 20px;*/
}
}
.api-list >>> th:nth-child(2) {
/*border: 1px solid #DCDFE6;*/
/*border-left: 0px;*/
/*border-top-right-radius:5px;*/
/*border-bottom-right-radius:5px;*/
}
.api-list >>> th:nth-child(2) {
/*border: 1px solid #DCDFE6;*/
/*border-left: 0px;*/
/*border-top-right-radius:5px;*/
/*border-bottom-right-radius:5px;*/
}
.api-list >>> th:first-child>.cell {
padding: 5px;
width: 30px;
}
.api-list >>> th:nth-child(2)>.cell {
/*background-color: black;*/
}
.api-list >>> th:first-child > .cell {
padding: 5px;
width: 30px;
}
.api-list >>> .el-dropdown {
float: left;
}
.api-list >>> th:nth-child(2) > .cell {
/*background-color: black;*/
}
.api-list >>> .el-dropdown {
float: left;
}
</style>

28
frontend/src/business/components/api/homepage/ApiTestHomePage.vue
View File

@ -28,13 +28,13 @@
<el-row :gutter="0"></el-row>
<el-row :gutter="10">
<el-col :span="6">
<ms-api-info-card :api-count-data="apiCountData"/>
<ms-api-info-card @redirectPage="redirectPage" :api-count-data="apiCountData"/>
</el-col>
<el-col :span="6">
<ms-test-case-info-card :test-case-count-data="testCaseCountData"/>
<ms-test-case-info-card @redirectPage="redirectPage" :test-case-count-data="testCaseCountData"/>
</el-col>
<el-col :span="6">
<ms-scene-info-card :scene-count-data="sceneCountData"/>
<ms-scene-info-card @redirectPage="redirectPage" :scene-count-data="sceneCountData"/>
</el-col>
<el-col :span="6">
<ms-schedule-task-info-card :schedule-task-count-data="scheduleTaskCountData"/>
@ -43,10 +43,10 @@
<el-row :gutter="10">
<el-col :span="12">
<ms-failure-test-case-list/>
<ms-failure-test-case-list @redirectPage="redirectPage"/>
</el-col>
<el-col :span="12">
<ms-running-task-list/>
<ms-running-task-list @redirectPage="redirectPage"/>
</el-col>
</el-row>
@ -64,7 +64,7 @@ import MsTestCaseInfoCard from "./components/TestCaseInfoCard";
import MsFailureTestCaseList from "./components/FailureTestCaseList";
import MsRunningTaskList from "./components/RunningTaskList"
import {getCurrentProjectID} from "@/common/js/utils";
import {getCurrentProjectID,getUUID} from "@/common/js/utils";
export default {
name: "ApiTestHomePage",
@ -117,6 +117,22 @@ export default {
this.scheduleTaskCountData = response.data;
});
},
redirectPage(page,dataType,selectType){
//api页面跳转
//传入UUID是为了进行页面重新加载判断
let uuid = getUUID();
switch (page){
case "api":
this.$router.push({name:'ApiDefinition',params:{redirectID:uuid,dataType:dataType,dataSelectRange:selectType}});
break;
case "scenario":
this.$router.push({name:'ApiAutomation',params:{redirectID:uuid,dataType:dataType,dataSelectRange:selectType}});
break;
case "testPlanEdit":
this.$router.push('/track/plan/view/'+selectType)
break;
}
}
}
}
</script>

22
frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
View File

@ -54,7 +54,10 @@
<el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
<el-row>
<el-col>
{{$t('api_test.home_page.api_details_card.this_week_add',[apiCountData.thisWeekAddedCount])}}
{{$t('api_test.home_page.api_details_card.this_week_add')}}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{apiCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
</el-row>
</el-header>
@ -80,21 +83,27 @@
<span class="default-property">
{{$t('api_test.home_page.detail_card.running')}}
{{"\xa0\xa0"}}
{{apiCountData.runningCount}}
<el-link type="info" @click="redirectPage('Underway')" target="_blank" style="color: #000000">
{{apiCountData.runningCount}}
</el-link>
</span>
</el-col>
<el-col style="margin-top: 5px;">
<span class="default-property">
{{$t('api_test.home_page.detail_card.not_started')}}
{{"\xa0\xa0"}}
{{apiCountData.notStartedCount}}
<el-link type="info" @click="redirectPage('Prepare')" target="_blank" style="color: #000000">
{{apiCountData.notStartedCount}}
</el-link>
</span>
</el-col>
<el-col style="margin-top: 5px;">
<span class="main-property">
{{$t('api_test.home_page.detail_card.finished')}}
{{"\xa0\xa0"}}
{{apiCountData.finishedCount}}
<el-link type="info" @click="redirectPage('Completed')" target="_blank" style="color: #000000">
{{apiCountData.finishedCount}}
</el-link>
</span>
</el-col>
</el-row>
@ -123,6 +132,11 @@ export default {
props:{
apiCountData:{},
},
methods:{
redirectPage(clickType){
this.$emit("redirectPage","api","api",clickType);
}
}
}
</script>
<style scoped>

31
frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
View File

@ -7,7 +7,13 @@
</template>
<el-table border :data="tableData" class="adjust-table table-content" height="300px">
<el-table-column prop="sortIndex" :label="$t('api_test.home_page.failed_case_list.table_coloum.index')" width="100" show-overflow-tooltip/>
<el-table-column prop="caseName" :label="$t('api_test.home_page.failed_case_list.table_coloum.case_name')" width="150" show-overflow-tooltip/>
<el-table-column prop="caseName" :label="$t('api_test.home_page.failed_case_list.table_coloum.case_name')" width="150">
<template v-slot:default="{row}">
<el-link type="info" @click="redirect(row.caseType,row.caseID)">
{{ row.caseName }}
</el-link>
</template>
</el-table-column>
<el-table-column
prop="caseType"
column-key="caseType"
@ -19,7 +25,15 @@
<ms-tag v-if="scope.row.caseType == 'scenario'" type="warning" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"/>
</template>
</el-table-column>
<el-table-column prop="testPlan" :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')" show-overflow-tooltip/>
<el-table-column prop="testPlan" :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')">
<template v-slot:default="{row}">
<div v-for="testPlan in row.testPlanDTOList" :key="testPlan.id">
<el-link type="info" @click="redirect('testPlanEdit',testPlan.id)">
{{ testPlan.name }};
</el-link>
</div>
</template>
</el-table-column>
<el-table-column prop="failureTimes" :label="$t('api_test.home_page.failed_case_list.table_coloum.failure_times')" width="100" show-overflow-tooltip/>
</el-table>
</el-card>
@ -51,6 +65,19 @@ export default {
this.tableData = response.data;
});
},
redirect(pageType,param){
switch (pageType){
case "testPlanEdit":
this.$emit('redirectPage','testPlanEdit',null, param);
break;
case "apiCase":
this.$emit('redirectPage','api','apiTestCase', 'single:'+param);
break;
case "scenario":
this.$emit('redirectPage','scenario','scenario', 'edit:'+param);
break;
}
}
},

11
frontend/src/business/components/api/homepage/components/RunningTaskList.vue
View File

@ -7,7 +7,13 @@
</template>
<el-table border :data="tableData" class="adjust-table table-content" height="300px">
<el-table-column prop="index" :label="$t('api_test.home_page.running_task_list.table_coloum.index')" width="80" show-overflow-tooltip/>
<el-table-column prop="scenario" :label="$t('api_test.home_page.running_task_list.table_coloum.scenario')" width="200" show-overflow-tooltip/>
<el-table-column prop="scenario" :label="$t('api_test.home_page.running_task_list.table_coloum.scenario')" width="200" >
<template v-slot:default="{row}">
<el-link type="info" @click="redirect(row.scenarioId)">
{{ row.scenario }}
</el-link>
</template>
</el-table-column>
<el-table-column prop="rule" :label="$t('api_test.home_page.running_task_list.table_coloum.run_rule')" width="120" show-overflow-tooltip/>
<el-table-column width="100" :label="$t('api_test.home_page.running_task_list.table_coloum.task_status')">
<template v-slot:default="scope">
@ -80,6 +86,9 @@ export default {
this.result = this.$post('/api/schedule/updateEnableByPrimyKey', taskRow, response => {
this.search();
});
},
redirect(param){
this.$emit('redirectPage','scenario','scenario', 'edit:'+param);
}
},

26
frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
View File

@ -21,7 +21,10 @@
<el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
<el-row :gutter="20" class="hidden-lg-and-down ">
<el-col :span="8">
{{$t('api_test.home_page.test_scene_details_card.this_week_add',[sceneCountData.thisWeekAddedCount])}}
{{$t('api_test.home_page.test_scene_details_card.this_week_add')}}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{sceneCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
<el-col :span="8" >
{{$t('api_test.home_page.test_scene_details_card.this_week_execute',[sceneCountData.thisWeekExecutedCount])}}
@ -32,7 +35,11 @@
</el-row>
<el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8">
<div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.this_week_add_sm',[sceneCountData.thisWeekAddedCount])"></div>
{{$t('api_test.home_page.test_scene_details_card.this_week_add_sm')}}
<br/>
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{sceneCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
<el-col :span="8" >
<div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.this_week_execute_sm',[sceneCountData.thisWeekExecutedCount])"></div>
@ -64,21 +71,27 @@
<span class="defaultProperty">
{{$t('api_test.home_page.detail_card.unexecute')}}
{{"\xa0\xa0"}}
{{sceneCountData.unexecuteCount}}
<el-link type="info" @click="redirectPage('unExecute')" target="_blank" style="color: #000000">
{{sceneCountData.unexecuteCount}}
</el-link>
</span>
</el-col>
<el-col style="margin-top: 5px;">
<span class="defaultProperty">
{{$t('api_test.home_page.detail_card.execution_failed')}}
{{"\xa0\xa0"}}
{{sceneCountData.executionFailedCount}}
<el-link type="info" @click="redirectPage('executeFailed')" target="_blank" style="color: #000000">
{{sceneCountData.executionFailedCount}}
</el-link>
</span>
</el-col>
<el-col style="margin-top: 5px;">
<span class="main-property">
{{$t('api_test.home_page.detail_card.execution_pass')}}
{{"\xa0\xa0"}}
{{sceneCountData.executionPassCount}}
<el-link type="info" @click="redirectPage('executePass')" target="_blank" style="color: #000000">
{{sceneCountData.executionPassCount}}
</el-link>
</span>
</el-col>
</el-row>
@ -110,6 +123,9 @@ export default {
},
methods: {
redirectPage(clickType){
this.$emit("redirectPage","scenario","scenario",clickType);
}
},
}
</script>

29
frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
View File

@ -53,7 +53,10 @@
<el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
<el-row :gutter="20" class="hidden-lg-and-down ">
<el-col :span="8">
{{$t('api_test.home_page.test_case_details_card.this_week_add',[testCaseCountData.thisWeekAddedCount])}}
{{$t('api_test.home_page.test_case_details_card.this_week_add')}}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{testCaseCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
<el-col :span="8" >
{{$t('api_test.home_page.test_case_details_card.this_week_execute',[testCaseCountData.thisWeekExecutedCount])}}
@ -64,7 +67,11 @@
</el-row>
<el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8">
<div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.this_week_add_sm',[testCaseCountData.thisWeekAddedCount])"></div>
{{$t('api_test.home_page.test_case_details_card.this_week_add_sm')}}
<br/>
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{testCaseCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
<el-col :span="8" >
<div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.this_week_execute_sm',[testCaseCountData.thisWeekExecutedCount])"></div>
@ -96,7 +103,9 @@
<span class="default-property">
{{$t('api_test.home_page.detail_card.uncoverage')}}
{{"\xa0\xa0"}}
{{testCaseCountData.uncoverageCount}}
<el-link type="info" @click="redirectPage('uncoverage')" target="_blank" style="color: #000000">
{{testCaseCountData.uncoverageCount}}
</el-link>
</span>
</el-col>
<el-col style=" height: 20px;margin-top: 3px;">
@ -105,7 +114,9 @@
<span class="main-property">
{{$t('api_test.home_page.detail_card.coverage')}}
{{"\xa0\xa0"}}
{{testCaseCountData.coverageCount}}
<el-link type="info" @click="redirectPage('coverage')" target="_blank" style="color: #000000">
{{testCaseCountData.coverageCount}}
</el-link>
</span>
</el-col>
</el-row>
@ -135,6 +146,16 @@ export default {
testCaseCountData:{},
},
methods: {
redirectPage(clickType){
if(clickType === 'thisWeekCount'){
//这里业务逻辑应当跳转接口案例列表
this.$emit("redirectPage","api","apiTestCase",clickType);
}else{
//这里业务逻辑应当跳转接口列表
this.$emit("redirectPage","api","api",clickType);
}
}
},
created() {

12
frontend/src/i18n/en-US.js
View File

@ -808,6 +808,8 @@ export default {
},
home_page: {
unit_of_measurement: "",
unit_of_count: "",
unit_of_times: "times",
api_count_card: {
title: "API count",
},
@ -840,23 +842,23 @@ export default {
},
api_details_card: {
title: "API",
this_week_add: "Added {0} this week",
this_week_add: "This week add:",
},
test_case_details_card: {
title: "Test case",
this_week_add: "Added {0} this week",
this_week_add: "This week add:",
this_week_execute: "Executed {0} this week",
executed: "Executed {0} in history",
this_week_add_sm: "Added {0}<br/> this week",
this_week_add_sm: "This week add:",
this_week_execute_sm: "Executed {0}<br/> this week",
executed_sm: "Executed {0}<br/> in history",
},
test_scene_details_card: {
title: "Scene",
this_week_add: "Added {0} this week",
this_week_add: "This week add:",
this_week_execute: "Executed {0} this week",
executed: "Executed {0} in history",
this_week_add_sm: "Added {0}<br/> this week",
this_week_add_sm: "This week add:",
this_week_execute_sm: "Executed {0}<br/> this week",
executed_sm: "Executed {0}<br/> in history",
},

12
frontend/src/i18n/zh-CN.js
View File

@ -809,6 +809,8 @@ export default {
},
home_page: {
unit_of_measurement: "个",
unit_of_count: "个",
unit_of_times: "次",
api_count_card: {
title: "接口数量统计",
},
@ -841,23 +843,23 @@ export default {
},
api_details_card: {
title: "接口",
this_week_add: "本周新增: {0}个",
this_week_add: "本周新增:",
},
test_case_details_card: {
title: "用例",
this_week_add: "本周新增: {0}个",
this_week_add: "本周新增:",
this_week_execute: "本周执行: {0}次",
executed: "历史总执行: {0}次",
this_week_add_sm: "本周新增:<br/>{0}个",
this_week_add_sm: "本周新增:",
this_week_execute_sm: "本周执行:<br/>{0}次",
executed_sm: "历史总执行:<br/>{0}次",
},
test_scene_details_card: {
title: "场景",
this_week_add: "本周新增: {0}个",
this_week_add: "本周新增:",
this_week_execute: "本周执行: {0}次",
executed: "历史总执行: {0}次",
this_week_add_sm: "本周新增:<br/>{0}个",
this_week_add_sm: "本周新增:",
this_week_execute_sm: "本周执行:<br/>{0}次",
executed_sm: "历史总执行:<br/>{0}次",
},

12
frontend/src/i18n/zh-TW.js
View File

@ -808,6 +808,8 @@ export default {
},
home_page: {
unit_of_measurement: "個",
unit_of_count: "個",
unit_of_times: "次",
api_count_card: {
title: "接口數量統計",
},
@ -840,23 +842,23 @@ export default {
},
api_details_card: {
title: "接口",
this_week_add: "本週新增: {0}个",
this_week_add: "本週新增:",
},
test_case_details_card: {
title: "用例",
this_week_add: "本週新增: {0}个",
this_week_add: "本週新增:",
this_week_execute: "本週執行: {0}次",
executed: "歷史總執行: {0}次",
this_week_add_sm: "本週新增:<br/>{0}个",
this_week_add_sm: "本週新增:",
this_week_execute_sm: "本週執行:<br/>{0}次",
executed_sm: "歷史總執行:<br/>{0}次",
},
test_scene_details_card: {
title: "場景",
this_week_add: "本週新增: {0}个",
this_week_add: "本週新增:",
this_week_execute: "本週執行: {0}次",
executed: "歷史總執行: {0}次",
this_week_add_sm: "本週新增:<br/>{0}个",
this_week_add_sm: "本週新增:",
this_week_execute_sm: "本週執行:<br/>{0}次",
executed_sm: "歷史總執行:<br/>{0}次",
},