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

refactor: 重构测试计划-接口测试页面

This commit is contained in:
chenjianxing 2021-07-08 10:32:38 +08:00 committed by jianxing
parent 15ceb13977
commit 3c32e61f2a
5 changed files with 128 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/business/components/common/components/table/MsTable.vue
View File

@ -229,6 +229,14 @@ export default {
this.selectIds = Array.from(this.selectRows).map(o => o.id);
},
headerDragend(newWidth, oldWidth, column, event) {
if(column){
if(column.minWidth){
let minWidth = column.minWidth;
if(minWidth > newWidth){
column.width = minWidth;
}
}
}
// 保存列宽
saveCustomTableWidth(this.fieldKey, column.columnKey, newWidth);
},

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

@ -12,119 +12,111 @@
v-if="isPlanModel"/>
</template>
<el-table v-loading="result.loading" ref="table"
border
:data="tableData" row-key="id" class="test-content adjust-table ms-select-all-fixed"
@header-dragend="tableHeaderDragend"
@select-all="handleSelectAll"
@filter-change="filter"
@sort-change="sort"
@select="handleSelect" :height="screenHeight">
<el-table-column width="50" type="selection"/>
<ms-table-header-select-popover v-show="total>0"
:page-size="pageSize > total ? total : pageSize"
:total="total"
:table-data-count-in-page="tableData.length"
@selectPageAll="isSelectDataAll(false)"
@selectAll="isSelectDataAll(true)"/>
<el-table-column width="40" :resizable="false" align="center">
<template v-slot:default="scope">
<show-more-btn :is-show-tool="scope.row.showTool" :is-show="scope.row.showMore && !isReadOnly"
:buttons="buttons" :size="selectDataCounts"/>
</template>
</el-table-column>
<template v-for="(item, index) in tableLabel">
<el-table-column v-if="item.id == 'num'" prop="num" sortable="custom" label="ID" min-width="80"
show-overflow-tooltip
:key="index"/>
<el-table-column v-if="item.id == 'name'" prop="name" sortable="custom" min-width="120"
:label="$t('test_track.case.name')" show-overflow-tooltip :key="index"/>
<ms-table
v-loading="result.loading"
:data="tableData"
:condition="condition"
:total="total"
:page-size.sync="pageSize"
:operators="operators"
:screen-height="screenHeight"
:batch-operators="buttons"
@handlePageChange="initTable"
:fields.sync="fields"
:field-key="tableHeaderKey"
@refresh="initTable"
ref="table">
<span v-for="(item) in fields" :key="item.key">
<el-table-column
v-if="item.id == 'priority'"
<ms-table-column :field="item" prop="num"
:fields-width="fieldsWidth"
sortable label="ID" min-width="80"/>
<ms-table-column :field="item" :fields-width="fieldsWidth" prop="name" sortable min-width="120"
:label="$t('test_track.case.name')"/>
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
prop="priority"
:filters="priorityFilters"
sortable="custom"
column-key="priority"
sortable
:label="$t('test_track.case.priority')"
show-overflow-tooltip
min-width="120px"
:key="index">
min-width="120px">
<template v-slot:default="scope">
<priority-table-item :value="scope.row.priority"/>
</template>
</el-table-column>
</ms-table-column>
<el-table-column
v-if="item.id == 'path'"
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
min-width="100"
prop="path"
:label="$t('api_test.definition.api_path')"
show-overflow-tooltip
:key="index"/>
:label="$t('api_test.definition.api_path')"/>
<el-table-column
v-if="item.id == 'createUser'"
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
prop="createUser"
column-key="user_id"
sortable="custom"
sortable
min-width="100"
:filters="userFilters"
:label="'创建人'"
show-overflow-tooltip
:key="index"/>
<el-table-column
:label="'创建人'"/>
<ms-table-column
v-if="item.id == 'maintainer'"
prop="userId"
:fields-width="fieldsWidth"
:label="$t('custom_field.case_maintainer')"
show-overflow-tooltip
:key="index"
min-width="120"
>
</el-table-column>
min-width="120"/>
<el-table-column
v-if="item.id == 'custom'"
sortable="custom"
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
sortable
min-width="160"
:label="$t('api_test.definition.api_last_time')"
prop="updateTime"
:key="index">
prop="updateTime">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column
v-if="item.id == 'createTime'"
sortable="custom"
</ms-table-column>
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
sortable
min-width="160"
:label="$t('commons.create_time')"
prop="createTime"
:key="index">
prop="createTime">
<template v-slot:default="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template>
</el-table-column>
</ms-table-column>
<el-table-column
v-if="item.id == 'tags'"
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
prop="tags"
min-width="100"
:label="$t('commons.tag')"
:key="index">
:label="$t('commons.tag')">
<template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:content="itemName" style="margin-left: 0px; margin-right: 2px"/>
</template>
</el-table-column>
</ms-table-column>
<el-table-column v-if="item.id == 'execResult'" :label="'执行状态'" min-width="150" align="center" :key="index">
<ms-table-column :field="item"
prop="execResult"
:fields-width="fieldsWidth"
:label="'执行状态'" min-width="150" align="center">
<template v-slot:default="scope">
<div v-loading="rowLoading === scope.row.id">
<el-link type="danger"
v-if="scope.row.execResult && scope.row.execResult === 'error'"
@click="getReportResult(scope.row)" v-text="getResult(scope.row.execResult)"/>
<el-link v-else-if="scope.row.execResult && scope.row.execResult === 'success'"
type="primary"
@click="getReportResult(scope.row)" v-text="getResult(scope.row.execResult)">
</el-link>
@ -136,29 +128,10 @@
</div>
</div>
</template>
</el-table-column>
</template>
<el-table-column fixed="right" min-width="100" v-if="!isReadOnly" :label="$t('commons.operating')">
<template slot="header">
<header-label-operate @exec="customHeader"/>
</template>
<template v-slot:default="scope">
<div>
</ms-table-column>
</span>
</ms-table>
<ms-table-operator-button class="run-button" v-permission="['PROJECT_TRACK_PLAN:READ+RUN']"
:tip="$t('api_test.run')"
icon="el-icon-video-play"
@exec="singleRun(scope.row)"/>
<ms-table-operator-button v-permission="['PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL']"
:tip="$t('test_track.plan_view.cancel_relevance')"
icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)"/>
</div>
</template>
</el-table-column>
</el-table>
<header-custom ref="headerCustom" :initTableData="initTable" :optionalFields=headerItems
:type=type></header-custom>
<ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
@ -170,7 +143,7 @@
<!-- 批量编辑 -->
<batch-edit :dialog-title="$t('test_track.case.batch_edit_case')" :type-arr="typeArr" :value-arr="valueArr"
:select-row="selectRows" ref="batchEdit" @batchEdit="batchEdit"/>
:select-row="$refs.table ? $refs.table.selectRows : new Set()" ref="batchEdit" @batchEdit="batchEdit"/>
<ms-plan-run-mode @handleRunBatch="handleRunBatch" ref="runMode"/>
</el-card>
@ -181,49 +154,39 @@
<script>
import MsTableOperator from "../../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
import MsTablePagination from "../../../../../common/pagination/TablePagination";
import MsTag from "../../../../../common/components/MsTag";
import MsApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import MsContainer from "../../../../../common/components/MsContainer";
import MsBottomContainer from "../../../../../api/definition/components/BottomContainer";
import ShowMoreBtn from "../../../../case/components/ShowMoreBtn";
import BatchEdit from "@/business/components/track/case/components/BatchEdit";
import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData";
import {getCurrentProjectID, strMapToObj} from "@/common/js/utils";
import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer";
import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
import {getBodyUploadFiles, getUUID} from "../../../../../../../common/js/utils";
import {getUUID} from "../../../../../../../common/js/utils";
import TestPlanCaseListHeader from "./TestPlanCaseListHeader";
import MsRun from "../../../../../api/definition/components/Run";
import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan";
import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
import {TEST_PLAN_API_CASE, WORKSPACE_ID} from "@/common/js/constants";
import {TEST_PLAN_API_CASE} from "@/common/js/constants";
import {
_filter,
_handleSelect,
_handleSelectAll,
_sort,
buildBatchParam,
checkTableRowIsSelect, deepClone,
getLabel,
getSelectDataCounts,
setUnSelectIds,
toggleAllSelection
checkTableRowIsSelect, deepClone, getCustomTableHeader, getCustomTableWidth,
} from "@/common/js/tableUtils";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import {Test_Plan_Api_Case} from "@/business/components/common/model/JsonData";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
import MsPlanRunMode from "../../../common/PlanRunMode";
import MsTaskCenter from "../../../../../task/TaskCenter";
import MsTable from "@/business/components/common/components/table/MsTable";
import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
import MsPlanRunMode from "@/business/components/track/plan/common/PlanRunMode";
export default {
name: "TestPlanApiCaseList",
components: {
MsPlanRunMode,
MsTableColumn,
MsTable,
BatchEdit,
HeaderLabelOperate,
HeaderCustom,
@ -233,22 +196,19 @@ export default {
ApiCaseList,
PriorityTableItem,
ApiListContainer,
MsTableOperatorButton,
MsTableOperator,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsTableHeaderSelectPopover,
MsPlanRunMode,
MsTaskCenter
},
data() {
return {
type: TEST_PLAN_API_CASE,
headerItems: Test_Plan_Api_Case,
tableHeaderKey:"TEST_PLAN_API_CASE",
fields: getCustomTableHeader('TEST_PLAN_API_CASE'),
fieldsWidth: getCustomTableWidth('TEST_PLAN_API_CASE'),
tableLabel: [],
condition: {},
selectCase: {},
@ -256,7 +216,20 @@ export default {
moduleId: "",
status: 'default',
deletePath: "/test/case/delete",
selectRows: new Set(),
operators: [
{
tip: this.$t('api_test.run'), icon: "el-icon-video-play",
exec: this.singleRun,
class: 'run-button',
permissions: ['PROJECT_TRACK_PLAN:READ+RUN']
},
{
tip: this.$t('test_track.plan_view.cancel_relevance'), icon: "el-icon-unlock",
exec: this.handleDelete,
type: 'danger',
permissions: ['PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL']
}
],
buttons: [
{name: this.$t('test_track.case.batch_unlink'), handleClick: this.handleDeleteBatch, permissions: ['PROJECT_TRACK_PLAN:READ+CASE_BATCH_DELETE']},
{name: this.$t('api_test.automation.batch_execute'), handleClick: this.handleBatchExecute, permissions: ['PROJECT_TRACK_PLAN:READ+CASE_BATCH_RUN']},
@ -379,7 +352,6 @@ export default {
},
initTable() {
this.autoCheckStatus();
this.selectRows = new Set();
this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds;
if (this.currentProtocol != null) {
@ -403,12 +375,12 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
this.selectRows.clear();
if (this.$refs.table) {
this.$refs.table.clear();
setTimeout(this.$refs.table.doLayout, 200);
}
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.selectRows);
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
});
}
@ -422,41 +394,15 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
this.selectRows.clear();
if (this.$refs.table) {
this.$refs.table.clear();
setTimeout(this.$refs.table.doLayout, 200);
}
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.selectRows);
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
});
}
getLabel(this, TEST_PLAN_API_CASE);
},
handleSelect(selection, row) {
_handleSelect(this, selection, row, this.selectRows);
setUnSelectIds(this.tableData, this.condition, this.selectRows);
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
},
showExecResult(row) {
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);
setUnSelectIds(this.tableData, this.condition, this.selectRows);
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
},
search() {
this.initTable();
@ -477,11 +423,13 @@ export default {
callback: (action) => {
if (action === 'confirm') {
let param = buildBatchParam(this);
param.ids = Array.from(this.selectRows).map(row => row.id);
param.ids = this.$refs.table.selectIds;
if (this.reviewId) {
param.testCaseReviewId = this.reviewId;
this.$post('/test/case/review/api/case/batch/delete', param, () => {
this.selectRows.clear();
if (this.$refs.table) {
this.$refs.table.clear();
}
this.initTable();
this.$emit('refresh');
this.$success(this.$t('test_track.cancel_relevance_success'));
@ -490,8 +438,9 @@ export default {
if (this.planId) {
param.planId = this.planId;
this.$post('/test/plan/api/case/batch/delete', param, () => {
this.selectRows.clear();
this.initTable();
if (this.$refs.table) {
this.$refs.table.clear();
} this.initTable();
this.$emit('refresh');
this.$success(this.$t('test_track.cancel_relevance_success'));
});
@ -527,8 +476,8 @@ export default {
});
},
handleBatchEdit() {
this.$refs.batchEdit.open(this.selectRows.size);
this.$refs.batchEdit.setSelectRows(this.selectRows);
this.$refs.batchEdit.open(this.$refs.table.selectRows.size);
this.$refs.batchEdit.setSelectRows(this.$refs.table.selectRows);
},
getData() {
return new Promise((resolve) => {
@ -537,7 +486,7 @@ export default {
this.testPlanCaseIds = [];
if (this.condition != null && this.condition.selectAll) {
let selectAllRowParams = buildBatchParam(this);
selectAllRowParams.ids = Array.from(this.selectRows).map(row => row.id);
selectAllRowParams.ids = this.$refs.table.selectIds;
this.$post('/test/plan/api/case/selectAllTableRows', selectAllRowParams, response => {
let dataRows = response.data;
// 按照列表顺序排序
@ -560,8 +509,8 @@ export default {
});
} else {
// 按照列表顺序排序
this.orderBySelectRows(this.selectRows);
this.selectRows.forEach(row => {
let dataRows = this.orderBySelectRows(this.$refs.table.selectRows);
dataRows.forEach(row => {
this.$get('/api/testcase/get/' + row.caseId, (response) => {
let apiCase = response.data;
let request = JSON.parse(apiCase.request);
@ -570,7 +519,7 @@ export default {
request.useEnvironment = row.environmentId;
this.runData.unshift(request);
this.testPlanCaseIds.unshift(row.id);
if (this.selectRows.length === index) {
if (dataRows.length === index) {
resolve();
}
index++;
@ -584,7 +533,7 @@ export default {
// 批量修改环境
if (form.type === 'projectEnv') {
let selectAllRowParams = buildBatchParam(this);
selectAllRowParams.ids = Array.from(this.selectRows).map(row => row.id);
selectAllRowParams.ids = this.$refs.table.selectIds;
this.$post('/test/plan/api/case/selectAllTableRows', selectAllRowParams, response => {
let dataRows = response.data;
let map = new Map();
@ -610,7 +559,7 @@ export default {
array.push(this.tableData[i]);
}
}
this.selectRows = array;
return array;
},
handleBatchExecute() {
this.getData().then(() => {
@ -670,27 +619,6 @@ export default {
}
});
},
isSelectDataAll(data) {
this.condition.selectAll = data;
//设置勾选
toggleAllSelection(this.$refs.table, this.tableData, this.selectRows);
//显示隐藏菜单
_handleSelectAll(this, this.tableData, this.tableData, this.selectRows);
//设置未选择ID(更新)
this.condition.unSelectIds = [];
//更新统计信息
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
},
tableHeaderDragend(newWidth, oldWidth, column, event){
if(column){
if(column.minWidth){
let minWidth = column.minWidth;
if(minWidth > newWidth){
column.width = minWidth;
}
}
}
},
},
};
</script>
@ -717,7 +645,4 @@ export default {
margin-right: 20px;
}
/deep/ .el-table__fixed-body-wrapper {
top: 48px !important;
}
</style>

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

@ -540,15 +540,11 @@ export default {
</script>
<style scoped>
/deep/ .el-drawer__header {
margin-bottom: 0px;
}
/*/deep/ .el-drawer__header {*/
/* margin-bottom: 0px;*/
/*}*/
.ms-select-all-fixed >>> th:nth-child(2) .el-icon-arrow-down {
top: -4px;
}
/deep/ .el-table__fixed-body-wrapper {
top: 48px !important;
}
</style>

3
frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
View File

@ -496,7 +496,4 @@ export default {
</script>
<style scoped>
/deep/ .el-table__fixed-body-wrapper {
top: 47px !important;
}
</style>

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

@ -198,7 +198,11 @@ export function getLabel(vueObj, type) {
export function buildBatchParam(vueObj, selectIds) {
let param = {};
param.ids = selectIds ? selectIds: Array.from(vueObj.selectRows).map(row => row.id);
if (vueObj.selectRows) {
param.ids = selectIds ? selectIds: Array.from(vueObj.selectRows).map(row => row.id);
} else {
param.ids = selectIds;
}
param.projectId = getCurrentProjectID();
param.condition = vueObj.condition;
return param;