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:
chenjianxing 2021-06-02 12:02:45 +08:00 committed by jianxing
parent d75a040c52
commit 249d9fcefe
18 changed files with 782 additions and 678 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -527,7 +527,9 @@ public class ApiAutomationService {
objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
JSONObject element = JSON.parseObject(definition);
try {
return objectMapper.readValue(element.getString("hashTree"), new TypeReference<LinkedList<MsTestElement>>() {});
if (element != null) {
return objectMapper.readValue(element.getString("hashTree"), new TypeReference<LinkedList<MsTestElement>>() {});
}
} catch (JsonProcessingException e) {
LogUtil.error(e.getMessage(), e);
}
@ -1703,10 +1705,12 @@ public class ApiAutomationService {
ApiScenarioWithBLOBs scenario = apiScenarioMapper.selectByPrimaryKey(id);
String definition = scenario.getScenarioDefinition();
JSONObject object = JSON.parseObject(definition);
object.put("environmentMap", newEnvMap);
String newDefinition = JSON.toJSONString(object);
scenario.setScenarioDefinition(newDefinition);
apiScenarioMapper.updateByPrimaryKeySelective(scenario);
if (object != null) {
object.put("environmentMap", newEnvMap);
String newDefinition = JSON.toJSONString(object);
scenario.setScenarioDefinition(newDefinition);
apiScenarioMapper.updateByPrimaryKeySelective(scenario);
}
}
});
}

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

@ -174,11 +174,11 @@ export default {
let data = response.data;
if (data != null) {
//如果树未加载
if (JSON.stringify(this.moduleOptions) === '{}') {
if (this.moduleOptions && JSON.stringify(this.moduleOptions) === '{}') {
this.$refs.nodeTree.list();
}
let row = data.listObject[0];
if (row.tags.length > 0) {
if (row.tags && row.tags.length > 0) {
row.tags = JSON.parse(row.tags);
}

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

@ -4,116 +4,130 @@
<ms-table-header :condition.sync="condition" @search="selectByParam" title=""
:show-create="false" :tip="$t('commons.search_by_id_name_tag')"/>
<el-table ref="scenarioTable" border :data="tableData" class="adjust-table ms-select-all-fixed"
@sort-change="sort"
@filter-change="filter"
@select-all="handleSelectAll"
@select="handleSelect"
@header-dragend="headerDragend"
:height="screenHeight">
<ms-table
:data="tableData"
:height="screenHeight"
:condition="condition"
:page-size="pageSize"
:operators="operators"
:batch-operators="buttons"
:total="total"
:fields.sync="fields"
field-key="API_SCENARIO"
operator-width="200"
@refresh="search(projectId)"
ref="scenarioTable">
<el-table-column type="selection" width="50"/>
<span v-for="(item) in fields" :key="item.key">
<ms-table-header-select-popover v-show="total>0"
:page-size="pageSize>total?total:pageSize"
:total="total"
:select-data-counts="selectDataCounts"
@selectPageAll="isSelectDataAll(false)"
@selectAll="isSelectDataAll(true)"/>
<el-table-column v-if="!referenced" width="30" min-width="30" :resizable="false" align="center">
<template v-slot:default="scope">
<show-more-btn :is-show="scope.row.showMore" :buttons="trashEnable ? trashButtons: buttons"
:size="selectDataCounts"/>
</template>
</el-table-column>
<template v-for="(item, index) in tableLabel">
<el-table-column v-if="item.id == 'num' && !customNum" prop="num" label="ID"
sortable="custom"
min-width="120px"
show-overflow-tooltip :key="index">
<ms-table-column v-if="item.id == 'num' && !customNum"
prop="num"
label="ID"
sortable
:fields-width="fieldsWidth"
min-width="120px">
<template slot-scope="scope">
<!--<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>-->
<el-tooltip content="编辑">
<a style="cursor:pointer" @click="edit(scope.row)"> {{ scope.row.num }} </a>
</el-tooltip>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'num' && customNum" prop="customNum" label="ID"
sortable="custom"
min-width="120px"
show-overflow-tooltip :key="index">
</ms-table-column>
<ms-table-column
v-if="item.id == 'num' && customNum" prop="customNum"
label="ID"
sortable
:fields-width="fieldsWidth"
min-width="120px">
<template slot-scope="scope">
<!--<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.customNum }} </span>-->
<el-tooltip content="编辑">
<a style="cursor:pointer" @click="edit(scope.row)"> {{ scope.row.customNum }} </a>
</el-tooltip>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'name'" prop="name"
sortable="custom"
</ms-table-column >
<ms-table-column prop="name"
sortable
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.automation.scenario_name')"
show-overflow-tooltip
min-width="150px"
:key="index"
/>
<el-table-column v-if="item.id == 'level'" prop="level"
sortable="custom"
column-key="level"
:filters="LEVEL_FILTERS"
min-width="130px"
:label="$t('api_test.automation.case_level')"
show-overflow-tooltip :key="index">
min-width="150px"/>
<ms-table-column
prop="level"
sortable
:field="item"
:fields-width="fieldsWidth"
:filters="LEVEL_FILTERS"
min-width="130px"
:label="$t('api_test.automation.case_level')">
<template v-slot:default="scope">
<priority-table-item :value="scope.row.level"/>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'status'" prop="status" :label="$t('test_track.plan.plan_status')"
sortable="custom"
column-key="status"
</ms-table-column>
<ms-table-column prop="status"
:label="$t('test_track.plan.plan_status')"
sortable
:field="item"
:fields-width="fieldsWidth"
:filters="STATUS_FILTERS"
show-overflow-tooltip min-width="120px" :key="index">
min-width="120px">
<template v-slot:default="scope">
<plan-status-table-item :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'tags'" prop="tags" min-width="120px"
:label="$t('api_test.automation.tag')" :key="index">
</ms-table-column>
<ms-table-column prop="tags"
:field="item"
:fields-width="fieldsWidth"
min-width="120px"
:label="$t('api_test.automation.tag')">
<template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:content="itemName" :show-tooltip="true"
tooltip style="margin-left: 0px; margin-right: 2px"/>
<span/>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'principal'" prop="principal" min-width="120px"
:label="$t('api_test.definition.api_principal')"
:filters="userFilters"
column-key="principal"
sortable="custom"
show-overflow-tooltip
:key="index"/>
<el-table-column v-if="item.id == 'userId'" prop="userId" min-width="120px"
</ms-table-column>
<ms-table-column prop="principal"
min-width="120px"
:label="$t('api_test.definition.api_principal')"
:filters="userFilters"
:field="item"
:fields-width="fieldsWidth"
sortable/>
<ms-table-column prop="userId" min-width="120px"
:label="$t('api_test.automation.creator')"
:filters="userFilters"
column-key="userId"
sortable="custom"
show-overflow-tooltip
:key="index"/>
<el-table-column v-if="item.id == 'updateTime'" prop="updateTime"
:label="$t('api_test.automation.update_time')" sortable="custom" min-width="180px"
:key="index">
:field="item"
:fields-width="fieldsWidth"
sortable="custom"/>
<ms-table-column prop="updateTime"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.automation.update_time')"
sortable
min-width="180px">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'stepTotal'" prop="stepTotal" :label="$t('api_test.automation.step')"
min-width="80px"
show-overflow-tooltip :key="index"/>
<el-table-column v-if="item.id == 'lastResult'" prop="lastResult"
</ms-table-column >
<ms-table-column prop="stepTotal"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.automation.step')"
min-width="80px"/>
<ms-table-column prop="lastResult"
:label="$t('api_test.automation.last_result')"
:filters="RESULT_FILTERS"
sortable="custom" column-key="last_result" min-width="130px" :key="index">
:field="item"
:fields-width="fieldsWidth"
sortable
min-width="130px">
<template v-slot:default="{row}">
<el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
{{ $t('api_test.automation.success') }}
@ -122,43 +136,21 @@
{{ $t('api_test.automation.fail') }}
</el-link>
</template>
</el-table-column>
<el-table-column v-if="item.id == 'passRate'" prop="passRate"
</ms-table-column >
<ms-table-column prop="passRate"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.automation.passing_rate')"
min-width="120px"
show-overflow-tooltip :key="index"/>
min-width="120px"/>
</span>
<template v-slot:opt-behind="scope">
<ms-scenario-extend-buttons v-if="!trashEnable" style="display: contents" @openScenario="openScenario" :row="scope.row"/>
</template>
<el-table-column fixed="right" :label="$t('commons.operating')" width="190px" v-if="!referenced && !isReadOnly">
<template slot="header">
<header-label-operate @exec="customHeader"/>
</template>
<template v-slot:default="{row}">
<div v-if="trashEnable">
<ms-table-operator-button :tip="$t('commons.reduction')" icon="el-icon-refresh-left"
@exec="reductionApi(row)"/>
<ms-table-operator-button :tip="$t('api_test.automation.remove')" icon="el-icon-delete"
@exec="remove(row)" type="danger"/>
</div>
<div v-else>
<ms-table-operator-button :tip="$t('api_test.automation.edit')" icon="el-icon-edit" @exec="edit(row)"
v-permission="['PROJECT_API_SCENARIO:READ+EDIT']"/>
<ms-table-operator-button class="run-button"
:tip="$t('api_test.automation.execute')"
icon="el-icon-video-play"
v-permission="['PROJECT_API_SCENARIO:READ+RUN']"
@exec="execute(row)"/>
<ms-table-operator-button :tip="$t('api_test.automation.copy')" icon="el-icon-document-copy" type=""
v-permission="['PROJECT_API_SCENARIO:READ+COPY']"
@exec="copy(row)"/>
<ms-table-operator-button :tip="$t('api_test.automation.remove')"
v-permission="['PROJECT_API_SCENARIO:READ+DELETE']"
icon="el-icon-delete" @exec="remove(row)" type="danger"/>
<ms-scenario-extend-buttons style="display: contents" @openScenario="openScenario" :row="row"/>
</div>
</template>
</el-table-column>
</el-table>
<header-custom ref="headerCustom" :initTableData="search" :optionalFields=headerItems :type=type></header-custom>
</ms-table>
<ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
<div>
@ -205,23 +197,19 @@ import BatchMove from "../../../track/case/components/BatchMove";
import MsRunMode from "./common/RunMode";
import {
_filter,
_handleSelect,
_handleSelectAll,
_sort, deepClone,
getLabel,
getSelectDataCounts,
setUnSelectIds,
toggleAllSelection
getCustomTableHeader, getCustomTableWidth,
} from "@/common/js/tableUtils";
import {Api_Scenario_List} from "@/business/components/common/model/JsonData";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
import MsTableColumn from "@/business/components/common/components/table/Ms-table-column";
import MsTable from "@/business/components/common/components/table/MsTable";
export default {
name: "MsApiScenarioList",
components: {
MsTable,
MsTableColumn,
HeaderLabelOperate,
HeaderCustom,
BatchMove,
@ -282,15 +270,14 @@ export default {
return {
result: {},
type: API_SCENARIO_LIST,
headerItems: Api_Scenario_List,
tableLabel: [],
fields: getCustomTableHeader('API_SCENARIO'),
fieldsWidth: getCustomTableWidth('API_SCENARIO'),
screenHeight: 'calc(100vh - 275px)',//屏幕高度,
condition: {
components: API_SCENARIO_CONFIGS
},
currentScenario: {},
schedule: {},
selection: [],
tableData: [],
selectDataRange: 'all',
currentPage: 1,
@ -307,7 +294,62 @@ export default {
selectDataSize: 0,
selectAll: false,
userFilters: [],
buttons: [
operators: [],
selectRows: new Set(),
trashOperators: [
{
tip: this.$t('commons.reduction'),
icon: "el-icon-refresh-left",
exec: this.reductionApi,
permissions: ['PROJECT_API_SCENARIO:READ+EDIT']
},
{
tip: this.$t('commons.delete'),
exec: this.remove,
icon: "el-icon-delete",
type: "danger",
permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
},
],
unTrashOperators: [
{
tip: this.$t('api_test.automation.execute'),
icon: "el-icon-video-play",
exec: this.execute,
permissions: ['PROJECT_API_SCENARIO:READ+RUN']
},
{
tip: this.$t('commons.edit'),
icon: "el-icon-edit",
exec: this.edit,
permissions: ['PROJECT_API_SCENARIO:READ+EDIT']
},
{
tip: this.$t('api_test.automation.copy'),
icon: "el-icon-document-copy",
exec: this.copy,
permissions: ['PROJECT_API_SCENARIO:READ+EDIT']
},
{
tip: this.$t('commons.delete'),
exec: this.remove,
icon: "el-icon-delete",
type: "danger",
permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
},
],
buttons: [],
trashButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
handleClick: this.handleDeleteBatch,
permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
},
{
name: "批量恢复", handleClick: this.handleBatchRestore
},
],
unTrashButtons: [
{
name: this.$t('api_test.automation.batch_add_plan'),
handleClick: this.handleBatchAddCase,
@ -333,21 +375,7 @@ export default {
handleClick: this.handleDeleteBatch,
permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
},
],
trashButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
handleClick: this.handleDeleteBatch,
permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
},
{
name: "批量恢复", handleClick: this.handleBatchRestore
},
],
isSelectAllDate: false,
selectRows: new Set(),
selectDataCounts: 0,
...API_SCENARIO_FILTERS,
typeArr: [
{id: 'level', name: this.$t('test_track.case.priority')},
@ -379,6 +407,8 @@ export default {
};
},
created() {
this.operators = this.unTrashOperators;
this.buttons = this.unTrashButtons;
this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
this.search();
this.getPrincipalOptions([]);
@ -386,22 +416,21 @@ export default {
watch: {
selectNodeIds() {
this.currentPage = 1;
this.condition.selectAll = false;
this.condition.unSelectIds = [];
this.selectDataCounts = 0;
this.$refs.scenarioTable.clear();
this.selectProjectId ? this.search(this.selectProjectId) : this.search();
},
trashEnable() {
if (this.trashEnable) {
this.condition.filters = {status: ["Trash"]};
this.condition.moduleIds = [];
this.operators = this.trashOperators;
this.buttons = this.trashButtons;
} else {
this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
this.operators = this.unTrashOperators;
this.buttons = this.unTrashButtons;
}
this.condition.selectAll = false;
this.condition.unSelectIds = [];
this.selectDataCounts = 0;
this.$refs.scenarioTable.clear();
this.search();
},
batchReportId() {
@ -418,10 +447,6 @@ export default {
},
},
methods: {
customHeader() {
const list = deepClone(this.tableLabel);
this.$refs.headerCustom.open(list);
},
selectByParam() {
this.changeSelectDataRangeAll();
this.search();
@ -462,18 +487,9 @@ export default {
this.condition.executeStatus = 'executePass';
break;
}
this.selection = [];
if (!this.condition.selectAll) {
this.condition.selectAll = false;
this.condition.unSelectIds = [];
this.selectDataCounts = 0;
}
let url = "/api/automation/list/" + this.currentPage + "/" + this.pageSize;
if (this.condition.projectId) {
this.result.loading = true;
this.$post(url, this.condition, response => {
this.result = this.$post(url, this.condition, response => {
let data = response.data;
this.total = data.itemCount;
this.tableData = data.listObject;
@ -482,41 +498,8 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
if (!this.condition.selectAll) {
this.condition.unSelectIds = response.data.listObject.map(s => s.id);
}
this.$nextTick(function () {
if (this.$refs.scenarioTable) {
setTimeout(this.$refs.scenarioTable.doLayout, 200);
}
this.checkTableRowIsSelect();
});
});
}
getLabel(this, API_SCENARIO_LIST);
},
checkTableRowIsSelect() {
//如果默认全选的话，则选中应该选中的行
if (this.condition.selectAll) {
let unSelectIds = this.condition.unSelectIds;
this.tableData.forEach(row => {
if (unSelectIds.indexOf(row.id) < 0) {
this.$refs.scenarioTable.toggleRowSelection(row, true);
//默认全选，需要把选中对行添加到selectRows中。不然会影响到勾选函数统计
if (!this.selectRows.has(row)) {
this.$set(row, "showMore", true);
this.selectRows.add(row);
}
} else {
//不勾选的行，也要判断是否被加入了selectRow中。加入了的话就去除。
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
}
if (this.$refs.scenarioTable) {
this.$refs.scenarioTable.clear();
}
});
}
@ -534,10 +517,11 @@ export default {
}
},
handleBatchAddCase() {
this.selectRows = this.$refs.scenarioTable.selectRows;
this.planVisible = true;
},
handleBatchEdit() {
this.$refs.batchEdit.setScenarioSelectRows(this.selectRows, "scenario");
this.$refs.batchEdit.setScenarioSelectRows(this.$refs.scenarioTable.selectRows, "scenario");
if (this.condition.selectAll) {
this.condition.ids = [];
let param = {};
@ -546,11 +530,11 @@ export default {
let dataRows = response.data;
this.$refs.batchEdit.open(dataRows.size);
this.$refs.batchEdit.setAllDataRows(dataRows);
this.$refs.batchEdit.open(this.selectDataCounts);
this.$refs.batchEdit.open(this.$refs.scenarioTable.selectDataCounts);
});
} else {
this.$refs.batchEdit.setAllDataRows(new Set());
this.$refs.batchEdit.open(this.selectDataCounts);
this.$refs.batchEdit.open(this.$refs.scenarioTable.selectDataCounts);
}
},
handleBatchMove() {
@ -611,10 +595,10 @@ export default {
this.planVisible = false;
},
addTestPlan(params) {
let obj = {planIds: params[0], scenarioIds: this.selection};
let obj = {planIds: params[0], scenarioIds: this.$refs.scenarioTable.selectIds};
// todo 选取全部数据
if (this.isSelectAllDate) {
if (this.condition.selectAll) {
this.$warning("暂不支持批量添加所有场景到测试计划！");
}
@ -635,7 +619,7 @@ export default {
}
},
buildBatchParam(param) {
param.ids = Array.from(this.selectRows).map(row => row.id);
param.ids = this.$refs.scenarioTable.selectIds;
param.projectId = this.projectId;
param.condition = this.condition;
},
@ -643,8 +627,8 @@ export default {
this.$refs.runMode.open();
},
orderBySelectRows(rows) {
let selectIds = Array.from(rows).map(row => row.id);
orderBySelectRows() {
let selectIds = this.$refs.scenarioTable.selectIds;
let array = [];
for (let i in this.tableData) {
if (selectIds.indexOf(this.tableData[i].id) !== -1) {
@ -660,44 +644,15 @@ export default {
let run = {config: config};
run.id = getUUID();
//按照列表排序
let ids = this.orderBySelectRows(this.selectRows);
let ids = this.orderBySelectRows();
run.ids = ids;
run.projectId = this.projectId;
run.condition = this.condition;
this.$post(url, run, response => {
let data = response.data;
this.$post(url, run, () => {
this.runVisible = false;
this.batchReportId = run.id;
});
},
handleSelectAll(selection) {
_handleSelectAll(this, selection, this.tableData, this.selectRows, this.condition);
setUnSelectIds(this.tableData, this.condition, this.selectRows);
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
this.$emit('selection', selection);
},
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);
this.$emit('selection', selection);
},
isSelectDataAll(data) {
// this.condition.selectAll = data;
// setUnSelectIds(this.tableData, this.condition, this.selectRows);
// this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
// toggleAllSelection(this.$refs.scenarioTable, this.tableData, this.selectRows);
this.condition.selectAll = data;
//设置勾选
toggleAllSelection(this.$refs.scenarioTable, 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);
},
edit(row) {
let data = JSON.parse(JSON.stringify(row));
this.$emit('edit', data);
@ -709,7 +664,7 @@ export default {
});
},
handleBatchRestore() {
let ids = Array.from(this.selectRows).map(row => row.id);
let ids = this.$refs.scenarioTable.selectIds;
this.$post("/api/automation/reduction", ids, response => {
this.$success(this.$t('commons.save_success'));
this.search();
@ -802,26 +757,6 @@ export default {
}
});
},
sort(column) {
// 每次只对一个字段排序
if (this.condition.orders) {
this.condition.orders = [];
}
_sort(column, this.condition);
this.search();
},
filter(filters) {
_filter(filters, this.condition);
this.search();
},
headerDragend(newWidth, oldWidth, column, event) {
let finalWidth = newWidth;
if (column.minWidth > finalWidth) {
finalWidth = column.minWidth;
}
column.width = finalWidth;
column.realWidth = finalWidth;
},
openScenario(item) {
this.$emit('openScenario', item);
},
@ -900,9 +835,9 @@ export default {
height: 100% !important;
}
/deep/ .el-table__fixed {
height: 110px !important;
}
/*/deep/ .el-table__fixed {*/
/* height: 110px !important;*/
/*}*/
/deep/ .el-card__header {
padding: 10px;

194
frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
View File

@ -16,134 +16,81 @@
operator-width="170px"
@refresh="initTable"
ref="apitable">
<template v-for="(item, index) in tableLabel">
<ms-table-column
v-if="item.id == 'num'"
prop="num"
label="ID"
show-overflow-tooltip
min-width="80px"
sortable=true
:key="index">
<template slot-scope="scope">
<!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
<el-tooltip v-else content="编辑">
<a style="cursor:pointer" @click="editApi(scope.row)"> {{ scope.row.num }} </a>
</el-tooltip>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'name'"
prop="name"
:label="$t('api_test.definition.api_name')"
show-overflow-tooltip
sortable="custom"
width="120px"
:key="index"/>
<ms-table-column
v-if="item.id == 'status'"
prop="status"
column-key="status"
sortable="custom"
:filters="statusFilters"
:label="$t('api_test.definition.api_status')"
width="120px"
:key="index">
<template v-slot:default="scope">
<span class="el-dropdown-link">
<api-status :value="scope.row.status"/>
</span>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'method'"
prop="method"
sortable="custom"
column-key="method"
:filters="methodFilters"
:label="$t('api_test.definition.api_type')"
show-overflow-tooltip
width="120px"
:key="index">
<template v-slot:default="scope">
<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>
</ms-table-column>
<ms-table-column
prop="num"
label="ID"
min-width="80px"
sortable>
<template slot-scope="scope">
<!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
<el-tooltip v-else content="编辑">
<a style="cursor:pointer" @click="editApi(scope.row)"> {{ scope.row.num }} </a>
</el-tooltip>
</template>
</ms-table-column>
<ms-table-column
prop="name"
:label="$t('api_test.definition.api_name')"
sortable
width="120px"/>
<ms-table-column
v-if="item.id == 'userName'"
prop="userName"
sortable="custom"
:filters="userFilters"
column-key="user_id"
:label="$t('api_test.definition.api_principal')"
show-overflow-tooltip
width="100px"
:key="index"/>
<ms-table-column
prop="method"
sortable="custom"
column-key="method"
:filters="methodFilters"
:label="$t('api_test.definition.api_type')"
width="120px">
<template v-slot:default="scope">
<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>
</ms-table-column>
<ms-table-column
v-if="item.id == 'path'"
prop="path"
width="120px"
:label="$t('api_test.definition.api_path')"
show-overflow-tooltip
:key="index"/>
<ms-table-column
prop="userName"
sortable="custom"
:filters="userFilters"
column-key="user_id"
:label="$t('api_test.definition.api_principal')"
width="100px"/>
<ms-table-column
v-if="item.id == 'tags'"
prop="tags"
:label="$t('commons.tag')"
width="120px"
:key="index">
<template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:show-tooltip="true" :content="itemName"
style="margin-left: 0px; margin-right: 2px"/>
</template>
</ms-table-column>
<ms-table-column
prop="path"
width="120px"
:label="$t('api_test.definition.api_path')"/>
<ms-table-column
v-if="item.id == 'updateTime'"
width="160"
:label="$t('api_test.definition.api_last_time')"
sortable="custom"
prop="updateTime"
:key="index">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</ms-table-column>
<ms-table-column
prop="tags"
:label="$t('commons.tag')"
width="120px">
<template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:show-tooltip="true" :content="itemName"
style="margin-left: 0px; margin-right: 2px"/>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'caseTotal'"
prop="caseTotal"
width="80px"
:label="$t('api_test.definition.api_case_number')"
show-overflow-tooltip
:key="index"/>
<ms-table-column
width="160"
:label="$t('api_test.definition.api_last_time')"
sortable="custom"
prop="updateTime">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'caseStatus'"
prop="caseStatus"
width="80px"
:label="$t('api_test.definition.api_case_status')"
show-overflow-tooltip
:key="index"/>
<ms-table-column
prop="caseTotal"
width="80px"
:label="$t('api_test.definition.api_case_number')"/>
<ms-table-column
v-if="item.id == 'casePassingRate'"
width="100px"
prop="casePassingRate"
:label="$t('api_test.definition.api_case_passing_rate')"
show-overflow-tooltip
:key="index"/>
</template>
</ms-table>
<ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
@ -169,8 +116,8 @@
import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
import TableSelectCountBar from "./TableSelectCountBar";
import {_filter, _handleSelect, _handleSelectAll, _sort, buildBatchParam, getLabel,} from "@/common/js/tableUtils";
import {API_LIST, WORKSPACE_ID} from "@/common/js/constants";
import {_filter, _sort, buildBatchParam, getLabel,} from "@/common/js/tableUtils";
import {WORKSPACE_ID} from "@/common/js/constants";
import {getCurrentProjectID} from "@/common/js/utils";
export default {
@ -194,7 +141,6 @@
return {
condition: {},
selectCase: {},
tableLabel: [],
result: {},
moduleId: "",
deletePath: "/test/case/delete",
@ -328,8 +274,6 @@
}
});
});
//添加自定义列的查询
getLabel(this, API_LIST);
},
showExecResult(row) {

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

@ -171,7 +171,6 @@ import ApiDocumentsPage from "@/business/components/api/definition/components/li
import MsTableButton from "@/business/components/common/components/MsTableButton";
import MsTabButton from "@/business/components/common/components/MsTabButton";
import {getLabel} from "@/common/js/tableUtils";
import {API_CASE_LIST, API_LIST} from "@/common/js/constants";
import MockConfig from "@/business/components/api/definition/components/mock/MockConfig";
@ -253,12 +252,6 @@ export default {
if (dataRange && dataRange.length > 0) {
this.activeDom = 'middle';
}
if (this.activeDom === 'left') {
getLabel(this, API_LIST);
} else if (this.activeDom === 'right') {
getLabel(this, API_CASE_LIST);
}
},
watch: {
currentProtocol() {

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

@ -9,68 +9,70 @@
v-model="condition.name"/>
<ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
:total="total" enableSelection
:batch-operators="buttons" :screenHeight="screenHeight"
:total="total"
:operators="operators"
:batch-operators="buttons"
:screenHeight="screenHeight"
:fields.sync="fields"
field-key="API_CASE"
operator-width="170px"
@refresh="initTable"
ref="caseTable"
>
<template v-for="(item, index) in tableLabel">
<span v-for="(item) in fields" :key="item.key">
<ms-table-column
v-if="item.id == 'num'"
prop="num"
label="ID"
show-overflow-tooltip
width="80px"
sortable=true
:key="index">
:field="item"
:fields-width="fieldsWidth"
min-width="80px"
sortable>
<template slot-scope="scope">
<!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
<el-tooltip v-else content="编辑">
<a style="cursor:pointer" @click="editApi(scope.row)"> {{ scope.row.num }} </a>
<a style="cursor:pointer" @click="handleTestCase(scope.row)"> {{ scope.row.num }} </a>
</el-tooltip>
</template>
</ms-table-column>
<ms-table-column v-if="item.id == 'name'" prop="name" width="160px" :label="$t('test_track.case.name')"
show-overflow-tooltip :key="index"/>
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
prop="name"
min-width="160px"
:label="$t('test_track.case.name')"/>
<ms-table-column
v-if="item.id == 'priority'"
prop="priority"
:filters="priorityFilters"
column-key="priority"
width="120px"
:label="$t('test_track.case.priority')"
show-overflow-tooltip
:key="index">
:field="item"
:fields-width="fieldsWidth"
min-width="120px"
:label="$t('test_track.case.priority')">
<template v-slot:default="scope">
<priority-table-item :value="scope.row.priority"/>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'path'"
sortable="custom"
prop="path"
width="180px"
:label="'API'+ $t('api_test.definition.api_path')"
show-overflow-tooltip
:key="index"/>
min-width="180px"
:field="item"
:fields-width="fieldsWidth"
:label="'API'+ $t('api_test.definition.api_path')"/>
<ms-table-column
v-if="item.id == 'casePath'"
sortable="custom"
prop="casePath"
width="180px"
:label="$t('api_test.definition.request.case')+ $t('api_test.definition.api_path')"
show-overflow-tooltip
:key="index"/>
min-width="180px"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.definition.request.case')+ $t('api_test.definition.api_path')"/>
<ms-table-column v-if="item.id=='tags'" prop="tags" width="120px" :label="$t('commons.tag')"
:key="index">
<ms-table-column v-if="item.id=='tags'" prop="tags" width="120px" :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"/>
@ -78,54 +80,32 @@
</ms-table-column>
<ms-table-column
v-if="item.id=='createUser'"
prop="createUser"
:label="'创建人'"
show-overflow-tooltip
:key="index"/>
:field="item"
:fields-width="fieldsWidth"
:label="'创建人'"/>
<ms-table-column
v-if="item.id=='updateTime'"
sortable="updateTime"
width="160px"
min-width="160px"
:field="item"
:fields-width="fieldsWidth"
: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>
</ms-table-column>
</span>
<template v-slot:opt-behind="scope">
<ms-api-case-table-extend-btns @showCaseRef="showCaseRef"
@showEnvironment="showEnvironment"
@createPerformance="createPerformance" :row="scope.row"/>
</template>
<el-table-column fixed="right" v-if="!isReadOnly" :label="$t('commons.operating')" min-width="160"
align="center">
<template slot="header">
<header-label-operate @exec="customHeader"/>
</template>
<template v-slot:default="scope">
<div>
<ms-table-operator-button class="run-button"
:tip="$t('api_test.automation.execute')"
icon="el-icon-video-play"
v-permission="['PROJECT_API_DEFINITION:READ+RUN']"
@exec="runTestCase(scope.row)"/>
<ms-table-operator-button :tip="$t('commons.edit')" icon="el-icon-edit" @exec="handleTestCase(scope.row)"
v-permission="['PROJECT_API_DEFINITION:READ+EDIT_CASE']"
/>
<ms-table-operator-button :tip="$t('commons.delete')" icon="el-icon-delete"
@exec="handleDelete(scope.row)"
v-permission="['PROJECT_API_DEFINITION:READ+DELETE_CASE']"
type="danger"/>
<ms-api-case-table-extend-btns @showCaseRef="showCaseRef"
@showEnvironment="showEnvironment"
@createPerformance="createPerformance" :row="scope.row"/>
</div>
</template>
</el-table-column>
</ms-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"/>
</div>
@ -171,17 +151,19 @@ import {parseEnvironment} from "@/business/components/api/test/model/Environment
import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
import {API_CASE_CONFIGS} from "@/business/components/common/components/search/search-components";
import {_filter, _handleSelect, _handleSelectAll, _sort, deepClone, getLabel} from "@/common/js/tableUtils";
import {
_filter,
_sort,
getCustomTableHeader,
getCustomTableWidth,
} from "@/common/js/tableUtils";
import {API_CASE_LIST} from "@/common/js/constants";
import {Api_Case_List} from "@/business/components/common/model/JsonData";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
export default {
name: "ApiCaseSimpleList",
components: {
HeaderLabelOperate,
HeaderCustom,
MsTableHeaderSelectPopover,
MsSetEnvironment,
ApiCaseList,
@ -204,8 +186,8 @@ export default {
data() {
return {
type: API_CASE_LIST,
headerItems: Api_Case_List,
tableLabel: [],
fields: getCustomTableHeader('API_CASE'),
fieldsWidth: getCustomTableWidth('API_CASE'),
condition: {
components: API_CASE_CONFIGS
},
@ -219,6 +201,27 @@ export default {
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
operators: [
{
tip: this.$t('api_test.automation.execute'),
icon: "el-icon-video-play",
exec: this.runTestCase,
permissions: ['PROJECT_API_DEFINITION:READ+RUN']
},
{
tip: this.$t('commons.edit'),
icon: "el-icon-edit",
exec: this.handleTestCase,
permissions: ['PROJECT_API_DEFINITION:READ+EDIT_CASE']
},
{
tip: this.$t('commons.delete'),
exec: this.handleDelete,
icon: "el-icon-delete",
type: "danger",
permissions: ['PROJECT_API_DEFINITION:READ+DELETE_CASE']
},
],
typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')},
{id: 'method', name: this.$t('api_test.definition.api_type')},
@ -321,8 +324,7 @@ export default {
},
methods: {
customHeader() {
const list = deepClone(this.tableLabel);
this.$refs.headerCustom.open(list);
this.$refs.caseTable.openCustomHeader();
},
initTable() {
if (this.$refs.caseTable) {
@ -381,8 +383,6 @@ export default {
})
});
}
getLabel(this, API_CASE_LIST);
},
open() {

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

@ -13,20 +13,20 @@
:batch-operators="trashEnable ? trashButtons : buttons" :screen-height="screenHeight"
:operators="tableOperatorButtons" operator-width="200px"
@refresh="initTable"
@openCustomHeader="customHeader"
:fields.sync="fields"
:table-is-loading="this.result.loading"
ref="apiDefinitionTable"
>
<template v-for="(item, index) in tableLabel">
field-key="API_DEFINITION"
ref="apiDefinitionTable">
<span v-for="(item) in fields" :key="item.key">
<ms-table-column
v-if="item.id == 'num'"
prop="num"
label="ID"
show-overflow-tooltip
min-width="80px"
sortable=true
:key="index"
>
prop="num"
label="ID"
:field="item"
min-width="100px"
:fields-width="fieldsWidth"
sortable>
<template slot-scope="scope">
<!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
<!--<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>-->
@ -38,125 +38,112 @@
</el-tooltip>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'name'"
prop="name"
:label="$t('api_test.definition.api_name')"
show-overflow-tooltip
sortable="custom"
width="120px"
:key="index"/>
<ms-table-column
v-if="item.id == 'status'"
prop="status"
column-key="status"
sortable="custom"
:filters="statusFilters"
:label="$t('api_test.definition.api_status')"
width="120px"
:key="index"
>
<template v-slot:default="scope">
<span class="el-dropdown-link">
<api-status :value="scope.row.status"/>
</span>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'method'"
prop="method"
sortable="custom"
column-key="method"
:filters="methodFilters"
:label="$t('api_test.definition.api_type')"
show-overflow-tooltip
width="120px"
:key="index">
<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>
</template>
</ms-table-column>
<ms-table-column
prop="name"
:label="$t('api_test.definition.api_name')"
sortable="custom"
:fields-width="fieldsWidth"
min-width="120"
:field="item"/>
<ms-table-column
v-if="item.id == 'userName'"
prop="userName"
sortable="custom"
:filters="userFilters"
column-key="user_id"
:label="$t('api_test.definition.api_principal')"
show-overflow-tooltip
width="145px"
:key="index"/>
<ms-table-column
prop="status"
sortable="custom"
:filters="statusFilters"
:field="item"
:fields-width="fieldsWidth"
min-width="120px"
:label="$t('api_test.definition.api_status')">
<ms-table-column
v-if="item.id == 'path'"
prop="path"
width="120px"
:label="$t('api_test.definition.api_path')"
show-overflow-tooltip
:key="index"/>
<template v-slot:default="scope">
<span class="el-dropdown-link">
<api-status :value="scope.row.status"/>
</span>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'tags'"
prop="tags"
:label="$t('commons.tag')"
width="120px"
:key="index">
<template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:show-tooltip="true" :content="itemName"
style="margin-left: 0px; margin-right: 2px"/>
</template>
</ms-table-column>
<ms-table-column
prop="method"
sortable="custom"
:field="item"
:filters="methodFilters"
:fields-width="fieldsWidth"
min-width="120px"
:label="$t('api_test.definition.api_type')">
<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>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'updateTime'"
width="200"
:label="$t('api_test.definition.api_last_time')"
sortable="custom"
prop="updateTime"
:key="index">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</ms-table-column>
<ms-table-column
prop="userName"
sortable="custom"
:filters="userFilters"
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
:label="$t('api_test.definition.api_principal')"/>\
<ms-table-column
prop="path"
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
:label="$t('api_test.definition.api_path')"/>
<ms-table-column
v-if="item.id == 'caseTotal'"
prop="caseTotal"
sortable="custom"
width="140px"
:label="$t('api_test.definition.api_case_number')"
show-overflow-tooltip
:key="index"/>
<ms-table-column
prop="tags"
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
: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"
:show-tooltip="true" :content="itemName"
style="margin-left: 0px; margin-right: 2px"/>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'caseStatus'"
prop="caseStatus"
:filters="caseStatusFilters"
width="130px"
:label="$t('api_test.definition.api_case_status')"
show-overflow-tooltip
:key="index"
/>
<ms-table-column
:label="$t('api_test.definition.api_last_time')"
:field="item"
:fields-width="fieldsWidth"
sortable="custom"
min-width="140px"
prop="updateTime">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</ms-table-column>
<ms-table-column
v-if="item.id == 'casePassingRate'"
width="150px"
prop="casePassingRate"
sortable="custom"
:label="$t('api_test.definition.api_case_passing_rate')"
show-overflow-tooltip
:key="index"/>
</template>
<ms-table-column
prop="caseTotal"
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
sortable
:label="$t('api_test.definition.api_case_number')"/>
<ms-table-column
:field="item"
prop="caseStatus"
:fields-width="fieldsWidth"
min-width="100px"
:label="$t('api_test.definition.api_case_status')"/>
<ms-table-column
prop="casePassingRate"
:field="item"
min-width="120px"
sortable
:fields-width="fieldsWidth"
:label="$t('api_test.definition.api_case_passing_rate')"/>
</span>
</ms-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"/>
</div>
@ -183,7 +170,6 @@ import MsApiCaseList from "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsTableColumn from "@/business/components/common/components/table/Ms-table-column";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, API_STATUS, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD} from "../../model/JsonData";
import {downloadFile, getCurrentProjectID} from "@/common/js/utils";
@ -194,9 +180,10 @@ import MsTableAdvSearchBar from "@/business/components/common/components/search/
import {API_DEFINITION_CONFIGS} from "@/business/components/common/components/search/search-components";
import MsTipButton from "@/business/components/common/components/MsTipButton";
import CaseBatchMove from "@/business/components/api/definition/components/basis/BatchMove";
import {_filter, _sort, buildBatchParam, getLabel, initCondition, deepClone} from "@/common/js/tableUtils";
import {Api_List} from "@/business/components/common/model/JsonData";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import {
initCondition,
getCustomTableHeader, getCustomTableWidth, buildBatchParam
} from "@/common/js/tableUtils";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
import {Body} from "@/business/components/api/definition/model/ApiTestModel";
import {buildNodePath} from "@/business/components/api/definition/model/NodeTree";
@ -206,7 +193,6 @@ export default {
name: "ApiList",
components: {
HeaderLabelOperate,
HeaderCustom,
CaseBatchMove,
ApiStatus,
MsTableHeaderSelectPopover,
@ -219,7 +205,6 @@ export default {
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit,
MsTipButton,
MsTableAdvSearchBar,
@ -229,8 +214,8 @@ export default {
data() {
return {
type: API_LIST,
headerItems: Api_List,
tableLabel: [],
fields: getCustomTableHeader('API_DEFINITION'),
fieldsWidth: getCustomTableWidth('API_DEFINITION'),
condition: {
components: API_DEFINITION_CONFIGS
},
@ -452,10 +437,6 @@ export default {
}
},
methods: {
customHeader() {
const list = deepClone(this.tableLabel);
this.$refs.headerCustom.open(list);
},
handleBatchMove() {
this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
},
@ -515,7 +496,6 @@ export default {
});
});
}
getLabel(this, API_LIST);
if(this.needRefreshModule()){
this.$emit("refreshTree");
}
@ -798,18 +778,6 @@ export default {
console.log(e);
}
},
sort(column) {
// 每次只对一个字段排序
if (this.condition.orders) {
this.condition.orders = [];
}
_sort(column, this.condition);
this.initTable();
},
filter(filters) {
_filter(filters, this.condition);
this.initTable();
},
headerDragend(newWidth, oldWidth, column, event) {
let finalWidth = newWidth;
if (column.minWidth > finalWidth) {

13
frontend/src/business/components/common/components/table/Ms-table-column.vue
View File

@ -1,8 +1,8 @@
<template>
<el-table-column
v-if="fields.has(prop) || fields.size < 1"
v-if="!field || field.id === prop"
:min-width="minWidth"
:width="width"
:width="fieldsWidth ? fieldsWidth[prop] : width"
:fixed="fixed"
:filters="filters"
:prop="prop"
@ -42,12 +42,15 @@ export default {
return false;
}
},
fields: {
type: Set,
// 判断是否显示自定义列
field: {
type: Object,
default() {
return new Set();
return null;
}
},
// 保存自定义列宽
fieldsWidth: Object
}
};
</script>

102
frontend/src/business/components/common/components/table/MsCustomTableHeader.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<el-dialog :title="$t('table.header_display_field')" :visible.sync="visible" :append-to-body="true">
<tree-transfer :title="[$t('table.fields_to_be_selected'), $t('table.selected_fields')]"
:from_data='fromFields'
:draggable="true"
:to_data='selectedFields'
:defaultProps="{label:'label'}"
:allow-drop="allowDrop"
:default-checked-keys="selectedKeys"
:default-transfer="defaultTransfer"
:mode='mode' height='540px' filter openAll/>
<template v-slot:footer>
<ms-dialog-footer @cancel="close" @confirm="saveHeader"/>
</template>
</el-dialog>
</template>
<script>
import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
import treeTransfer from 'el-tree-transfer'
import {saveCustomTableHeader} from "@/common/js/tableUtils";
import {CUSTOM_TABLE_HEADER} from "@/common/js/default-table-header";
export default {
name: "MsCustomTableHeader",
components: {MsDialogFooter, treeTransfer},
data() {
return {
visible: false,
value: [],
fromFields: [],
selectedFields: [],
selectedKeys: [],
defaultTransfer: true,
mode: "transfer", // transfer addressList
}
},
props: {
type: String,
},
methods: {
allowDrop(draggingNode, dropNode, type) {
return type !== 'inner';
},
open(items) {
items = JSON.parse(JSON.stringify(items));
let fields = JSON.parse(JSON.stringify(CUSTOM_TABLE_HEADER[this.type]));
this.selectedKeys = [];
this.fromFields = [];
this.selectedKeys = items.map(item => item.key);
this.selectedFields = items;
fields.forEach(field => {
if (this.selectedKeys.indexOf(field.key) < 0) {
this.fromFields.push(field);
}
});
this.visible = true;
},
saveHeader() {
saveCustomTableHeader(this.type, this.selectedFields);
this.$success(this.$t("commons.save_success"));
this.$emit('reload');
this.close();
},
removeAt(idx) {
this.list.splice(idx, 1);
},
close() {
this.visible = false
},
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
// changeMode() {
// if (this.mode == "transfer") {
// this.mode = "addressList";
// } else {
// this.mode = "transfer";
// }
// },
// // 监听穿梭框组件添加
// add(fromData, toData, obj){
// // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
// console.log("fromData:", fromData);
// console.log("toData:", toData);
// console.log("obj:", obj);
// },
// // 监听穿梭框组件移除
// remove(fromData, toData, obj){
// // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
// console.log("fromData:", fromData);
// console.log("toData:", toData);
// console.log("obj:", obj);
// }
}
}
</script>
<style scoped>
</style>

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

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="tableActive">
<el-table
border
:data="data"
@ -10,7 +10,7 @@
@header-dragend="headerDragend"
@cell-mouse-enter="showPopover"
class="test-content adjust-table ms-table"
:class="{'ms-select-all-fixed':showSelectAll}"
:class="{'ms-select-all-fixed': showSelectAll}"
:height="screenHeight"
v-loading="tableIsLoading"
ref="table" @row-click="handleRowClick">
@ -23,7 +23,8 @@
@selectPageAll="isSelectDataAll(false)"
@selectAll="isSelectDataAll(true)"/>
<el-table-column v-if="enableSelection && batchOperators && batchOperators.length > 0" width="40"
<el-table-column v-if="enableSelection && batchOperators && batchOperators.length > 0" width="30"
fixed="left"
:resizable="false" align="center">
<template v-slot:default="scope">
<!-- 选中记录后浮现的按钮，提供对记录的批量操作 -->
@ -39,15 +40,24 @@
fixed="right"
:label="$t('commons.operating')">
<template slot="header">
<header-label-operate @exec="openCustomHeader"/>
<header-label-operate v-if="fieldKey" @exec="openCustomHeader"/>
</template>
<template v-slot:default="scope">
<div>
<slot name="opt-before" :row="scope.row"></slot>
<ms-table-operators :buttons="operators" :row="scope.row" :index="scope.$index"/>
<slot name="opt-behind" :row="scope.row"></slot>
</div>
</template>
</el-table-column>
</el-table>
<ms-custom-table-header
v-if="fieldKey"
@reload="reloadTable"
:type="fieldKey"
ref="customTableHeader"/>
</div>
</template>
@ -59,7 +69,7 @@ import {
getSelectDataCounts,
setUnSelectIds,
toggleAllSelection,
checkTableRowIsSelect,
checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth,
} from "@/common/js/tableUtils";
import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
import {TEST_CASE_LIST} from "@/common/js/constants";
@ -69,10 +79,24 @@ import MsTableColumn from "@/business/components/common/components/table/Ms-tabl
import MsTableOperators from "@/business/components/common/components/MsTableOperators";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import MsCustomTableHeader from "@/business/components/common/components/table/MsCustomTableHeader";
/**
* 参考 ApiList
*
* 添加自定义表头步骤：
* 设置 fieldKey,
* 设置 fields,
* ms-table-column 外层加循环，并设置 field
* （操作按钮使用 Mstable 里的操作逻辑，要自定义可以使用插画槽 opt-before，opt-behind）
* 记住列宽步骤：
* 设置 fieldKey,
* ms-table-column 设置 fields-width
*/
export default {
name: "MsTable",
components: {
MsCustomTableHeader,
HeaderLabelOperate,
MsTableOperators, MsTableColumn, ShowMoreBtn, MsTablePagination, MsTableHeaderSelectPopover, HeaderCustom
},
@ -80,7 +104,8 @@ export default {
return {
selectDataCounts: 0,
selectRows: new Set(),
selectIds: []
selectIds: [],
tableActive: true
};
},
props: {
@ -157,7 +182,9 @@ export default {
default() {
return false;
}
}
},
fields: Array,
fieldKey: String,
},
mounted() {
getLabel(this, TEST_CASE_LIST);
@ -170,11 +197,8 @@ export default {
},
},
methods: {
openCustomHeader() {
this.$emit("openCustomHeader");
},
handleSelectAll(selection) {
_handleSelectAll(this, selection, this.data, this.selectRows);
_handleSelectAll(this, selection, this.data, this.selectRows, this.condition);
setUnSelectIds(this.data, this.condition, this.selectRows);
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
this.selectIds = Array.from(this.selectRows).map(o => o.id);
@ -198,12 +222,8 @@ export default {
this.selectIds = Array.from(this.selectRows).map(o => o.id);
},
headerDragend(newWidth, oldWidth, column, event) {
// let finalWidth = newWidth;
// if (column.minWidth > finalWidth) {
// finalWidth = column.minWidth;
// }
// column.width = finalWidth;
// column.realWidth = finalWidth;
// 保存列宽
saveCustomTableWidth(this.fieldKey, column.columnKey, newWidth);
},
showPopover(row, column, cell) {
if (column.property === 'name') {
@ -257,11 +277,23 @@ export default {
clearSelectRows() {
this.selectRows.clear();
this.selectIds = [];
this.condition.selectAll = false;
this.condition.unSelectIds = [];
this.selectDataCounts = 0;
if (this.$refs.table) {
this.$refs.table.clearSelection();
}
},
openCustomHeader() {
this.$refs.customTableHeader.open(this.fields);
},
reloadTable() {
this.$emit('update:fields', getCustomTableHeader(this.fieldKey));
this.tableActive = false;
this.$nextTick(() => {
this.tableActive = true;
});
}
}
};
</script>

4
frontend/src/business/components/common/components/table/MsTableHeaderSelectPopover.vue
View File

@ -1,5 +1,5 @@
<template>
<el-table-column v-if="isShow" width="1" :resizable="false" align="center">
<el-table-column v-if="isShow" width="1" :resizable="false" fixed="left" align="center">
<el-popover slot="header" placement="right" trigger="click" style="margin-right: 0px;">
<el-link
:class="{'selected-link': selectDataCounts === total}"
@ -21,7 +21,7 @@
</span>
</el-link>
<i class="el-icon-arrow-down" slot="reference"></i>
<i class="el-icon-arrow-down table-select-icon" slot="reference"></i>
</el-popover>
</el-table-column>
</template>

25
frontend/src/business/components/common/model/JsonData.js
View File

@ -54,33 +54,8 @@ export const Api_List = [
{id: 'casePassingRate', label: i18n.t('api_test.definition.api_case_passing_rate')},
{id: 'status', label: i18n.t('api_test.definition.api_status')}
]
//接口定义-case列表
export const Api_Case_List = [
{id: 'num', label: "ID"},
{id: 'name', label: i18n.t('test_track.case.name')},
{id: 'priority', label: i18n.t('test_track.case.priority')},
{id: 'path', label: 'API'+i18n.t('api_test.definition.api_path')},
{id: 'casePath', label: i18n.t('api_test.definition.request.case')+i18n.t('api_test.definition.api_path')},
{id: 'tags', label: i18n.t('commons.tag')},
{id: 'createUser', label: "创建人"},
{id: 'updateTime', label: i18n.t('api_test.definition.api_last_time')},
]
//接口自动化-场景列表
export const Api_Scenario_List = [
{id: 'num', label: "ID"},
{id: 'name', label: i18n.t('api_report.scenario_name')},
{id: 'level', label: i18n.t('api_test.automation.case_level')},
{id: 'status', label: i18n.t('test_track.plan.plan_status')},
{id: 'tags', label: i18n.t('commons.tag')},
{id: 'userId', label: i18n.t('api_test.automation.creator')},
{id: 'principal', label: i18n.t('api_test.definition.api_principal')},
{id: 'updateTime', label: i18n.t('api_test.definition.api_last_time')},
{id: 'stepTotal', label: i18n.t('api_test.automation.step')},
{id: 'lastResult', label: i18n.t('api_test.automation.last_result')},
{id: 'passRate', label: i18n.t('api_test.automation.passing_rate')},
]
//测试评审-测试用例
export const Test_Case_Review_Case_List = [
{id: 'num', label: i18n.t('commons.id')},

40
frontend/src/business/components/settings/workspace/template/CustomFieldList.vue
View File

@ -13,13 +13,19 @@
:total="total"
:page-size.sync="pageSize"
:operators="operators"
:fields.sync="fields"
:enable-selection="false"
field-key="CUSTOM_FIELD"
:screen-height="tableHeight"
@handlePageChange="getCustomFields"
@refresh="getCustomFields">
<div v-for="(item) in fields" :key="item.key">
<ms-table-column
:field="item"
:fields-width="fieldsWidth"
:label="$t('commons.name')"
:fields="fields"
prop="name">
<template v-slot="scope">
<span v-if="scope.row.system">
@ -33,8 +39,9 @@
<ms-table-column
:label="$t('custom_field.scene')"
:fields="fields"
:field="item"
:filters="sceneFilters"
:fields-width="fieldsWidth"
prop="scene">
<template v-slot="scope">
<span>{{ sceneMap[scope.row.scene] }}</span>
@ -42,9 +49,10 @@
</ms-table-column>
<ms-table-column
:field="item"
:label="$t('custom_field.attribute_type')"
:fields="fields"
:filters="fieldFilters"
:fields-width="fieldsWidth"
prop="type">
<template v-slot="scope">
<span>{{ fieldTypeMap[scope.row.type] }}</span>
@ -53,7 +61,8 @@
<ms-table-column
:label="$t('custom_field.system_field')"
:fields="fields"
:field="item"
:fields-width="fieldsWidth"
prop="system">
<template v-slot="scope">
<span v-if="scope.row.system">
@ -67,14 +76,16 @@
<ms-table-column
:label="$t('commons.remark')"
:fields="fields"
:field="item"
:fields-width="fieldsWidth"
prop="remark">
</ms-table-column>
<ms-table-column
sortable
:label="$t('commons.create_time')"
:fields="fields"
:field="item"
:fields-width="fieldsWidth"
prop="createTime">
<template v-slot="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
@ -84,13 +95,16 @@
<ms-table-column
sortable
:label="$t('commons.update_time')"
:fields="fields"
:field="item"
:fields-width="fieldsWidth"
prop="updateTime">
<template v-slot="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</ms-table-column>
</div>
</ms-table>
<ms-table-pagination :change="getCustomFields" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"/>
@ -107,7 +121,6 @@
import MsTable from "@/business/components/common/components/table/MsTable";
import {getCurrentWorkspaceId, getDefaultTableHeight} from "@/common/js/utils";
import MsTableColumn from "@/business/components/common/components/table/Ms-table-column";
import {CUSTOM_FIELD_LIST} from "@/common/js/default-table-header";
import MsTableOperators from "@/business/components/common/components/MsTableOperators";
import MsTableButton from "@/business/components/common/components/MsTableButton";
import CustomFieldEdit from "@/business/components/settings/workspace/template/CustomFieldEdit";
@ -119,9 +132,15 @@ import {
SCENE_MAP, SYSTEM_FIELD_NAME_MAP
} from "@/common/js/table-constants";
import MsTableHeader from "@/business/components/common/components/MsTableHeader";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import {getCustomTableHeader, getCustomTableWidth} from "@/common/js/tableUtils";
import MsCustomTableHeader from "@/business/components/common/components/table/MsCustomTableHeader";
export default {
name: "CustomFieldList",
components: {
MsCustomTableHeader,
HeaderCustom,
MsTableHeader,
MsTablePagination, CustomFieldEdit, MsTableButton, MsTableOperators, MsTableColumn, MsTable},
data() {
@ -132,6 +151,8 @@ export default {
pageSize: 10,
currentPage: 1,
result: {},
fields: getCustomTableHeader('CUSTOM_FIELD'),
fieldsWidth: getCustomTableWidth('CUSTOM_FIELD'),
operators: [
{
tip: this.$t('commons.edit'), icon: "el-icon-edit",
@ -152,9 +173,6 @@ export default {
this.getCustomFields();
},
computed: {
fields() {
return CUSTOM_FIELD_LIST;
},
fieldFilters() {
return CUSTOM_FIELD_TYPE_OPTION;
},

1
frontend/src/business/components/settings/workspace/template/IssuesTemplateList.vue
View File

@ -15,6 +15,7 @@
:page-size.sync="pageSize"
:operators="operators"
:screen-height="tableHeight"
:enable-selection="false"
@handlePageChange="initTableData"
@refresh="initTableData">

1
frontend/src/business/components/settings/workspace/template/TestCaseTemplateList.vue
View File

@ -14,6 +14,7 @@
:page-size.sync="pageSize"
:operators="operators"
:screen-height="tableHeight"
:enable-selection="false"
@handlePageChange="initTableData"
@refresh="initTableData">

2
frontend/src/common/css/main.css
View File

@ -212,7 +212,7 @@ textarea {
overflow: visible;
}
.ms-select-all-fixed th:nth-child(2) .el-icon-arrow-down {
.ms-select-all-fixed th:nth-child(2) .table-select-icon {
position: absolute;
display: inline-block;
top: -9px;

56
frontend/src/common/js/default-table-header.js
View File

@ -1,3 +1,5 @@
import i18n from "@/i18n/i18n";
export const TEST_CASE_LIST = 'test_case_list';
export const CUSTOM_FIELD_LIST = new Set([
@ -25,3 +27,57 @@ export const ISSUE_TEMPLATE_LIST = new Set([
'createTime',
'updateTime'
]);
export const CUSTOM_TABLE_HEADER = {
CUSTOM_FIELD: [
{id: 'name', key: '1', label: i18n.t('commons.name')},
{id: 'scene', key: '2', label: i18n.t('custom_field.scene')},
{id: 'type', key: '3', label: i18n.t('custom_field.attribute_type')},
{id: 'remark', key: '4', label: i18n.t('commons.remark')},
{id: 'system', key: '5', label: i18n.t('custom_field.system_field')},
{id: 'createTime', key: '6', label: i18n.t('commons.create_time')},
{id: 'updateTime', key: '7', label: i18n.t('commons.update_time')},
],
API_DEFINITION: [
{id: 'num', key: '1', label: "ID"},
{id: 'name', key: '2', label: i18n.t('api_test.definition.api_name')},
{id: 'method', key: '3', label: i18n.t('api_test.definition.api_type')},
{id: 'userName', key: '4', label: i18n.t('api_test.definition.api_principal')},
{id: 'path', key: '5', label: i18n.t('api_test.definition.api_path')},
{id: 'tags', key: '6', label: i18n.t('commons.tag')},
{id: 'updateTime', key: '7', label: i18n.t('api_test.definition.api_last_time')},
{id: 'caseTotal', key: '8', label: i18n.t('api_test.definition.api_case_number')},
{id: 'caseStatus', key: '9', label: i18n.t('api_test.definition.api_case_status')},
{id: 'casePassingRate', key: 'a', label: i18n.t('api_test.definition.api_case_passing_rate')},
{id: 'status', key: 'b', label: i18n.t('api_test.definition.api_status')}
],
API_CASE: [
{id: 'num', key: '1', label: "ID"},
{id: 'name', key: '2', label: i18n.t('test_track.case.name')},
{id: 'priority', key: '3', label: i18n.t('test_track.case.priority')},
{id: 'path', key: '4', label: 'API'+i18n.t('api_test.definition.api_path')},
{id: 'casePath', key: '5', label: i18n.t('api_test.definition.request.case')+i18n.t('api_test.definition.api_path')},
{id: 'tags', key: '6', label: i18n.t('commons.tag')},
{id: 'createUser', key: '7', label: "创建人"},
{id: 'updateTime', key: '8', label: i18n.t('api_test.definition.api_last_time')},
],
API_SCENARIO: [
{id: 'num', key: '1', label: "ID"},
{id: 'name',key: '2', label: i18n.t('api_report.scenario_name')},
{id: 'level', key: '3', label: i18n.t('api_test.automation.case_level')},
{id: 'status', key: '4', label: i18n.t('test_track.plan.plan_status')},
{id: 'tags', key: '5', label: i18n.t('commons.tag')},
{id: 'userId', key: '6', label: i18n.t('api_test.automation.creator')},
{id: 'principal', key: '7', label: i18n.t('api_test.definition.api_principal')},
{id: 'updateTime', key: '8', label: i18n.t('api_test.definition.api_last_time')},
{id: 'stepTotal', key: '9', label: i18n.t('api_test.automation.step')},
{id: 'lastResult', key: 'a', label: i18n.t('api_test.automation.last_result')},
{id: 'passRate', key: 'b', label: i18n.t('api_test.automation.passing_rate')},
]
}

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

@ -1,4 +1,5 @@
import {getCurrentProjectID, getCurrentUser, humpToLine} from "@/common/js/utils";
import {CUSTOM_TABLE_HEADER} from "@/common/js/default-table-header";
export function _handleSelectAll(component, selection, tableData, selectRows, condition) {
if (selection.length > 0) {
@ -19,6 +20,9 @@ export function _handleSelectAll(component, selection, tableData, selectRows, co
tableData.forEach(item => {
component.$set(item, "showMore", false);
});
if (condition) {
condition.selectAll = false;
}
}
if (selectRows.size < 1 && condition) {
condition.selectAll = false;
@ -217,3 +221,71 @@ export function getPageDate(response, page) {
page.total = data.itemCount;
page.data = data.listObject;
}
/**
* 获取自定义表头
* 如果 localStorage 没有，获取默认表头
* @param key
* @returns {[]|*}
*/
export function getCustomTableHeader(key) {
let fieldSetting = CUSTOM_TABLE_HEADER[key];
let fieldStr = localStorage.getItem(key);
if (fieldStr !== null) {
let fields = [];
for (let i = 0; i < fieldStr.length; i++) {
let fieldKey = fieldStr[i];
for (const index in fieldSetting) {
let item = fieldSetting[index];
if (item.key === fieldKey) {
fields.push(item);
break;
}
}
}
return fields;
}
return fieldSetting;
}
/**
* 将自定义表头存在 localStorage
* 格式简化，减小占用
* @param key
* @param fields
*/
export function saveCustomTableHeader(key, fields) {
let result = '';
if (fields) {
fields.forEach(item => {
result += item.key;
});
}
localStorage.setItem(key, result);
}
/**
* 获取对应表格的列宽
* @param key
* @returns {{}|any}
*/
export function getCustomTableWidth(key) {
let fieldStr = localStorage.getItem(key + '_WITH');
if (fieldStr !== null) {
let fields = JSON.parse(fieldStr);
return fields;
}
return {};
}
/**
* 存储表格的列宽
* @param key
* @param fieldKey
* @param colWith
*/
export function saveCustomTableWidth(key, fieldKey, colWith) {
let fields = getCustomTableWidth(key);
fields[fieldKey] = colWith + '';
localStorage.setItem(key + '_WITH', JSON.stringify(fields));
}