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

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

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

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

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

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

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

@ -16,15 +16,12 @@
operator-width="170px" operator-width="170px"
@refresh="initTable" @refresh="initTable"
ref="apitable"> ref="apitable">
<template v-for="(item, index) in tableLabel">
<ms-table-column <ms-table-column
v-if="item.id == 'num'"
prop="num" prop="num"
label="ID" label="ID"
show-overflow-tooltip
min-width="80px" min-width="80px"
sortable=true sortable>
:key="index">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 判断为只读用户的话不可点击ID进行编辑操作 --> <!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span> <span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
@ -34,39 +31,18 @@
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-if="item.id == 'name'"
prop="name" prop="name"
:label="$t('api_test.definition.api_name')" :label="$t('api_test.definition.api_name')"
show-overflow-tooltip sortable
sortable="custom" width="120px"/>
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 <ms-table-column
v-if="item.id == 'method'"
prop="method" prop="method"
sortable="custom" sortable="custom"
column-key="method" column-key="method"
:filters="methodFilters" :filters="methodFilters"
:label="$t('api_test.definition.api_type')" :label="$t('api_test.definition.api_type')"
show-overflow-tooltip width="120px">
width="120px"
:key="index">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-tag size="mini" <el-tag size="mini"
:style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
@ -77,30 +53,22 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-if="item.id == 'userName'"
prop="userName" prop="userName"
sortable="custom" sortable="custom"
:filters="userFilters" :filters="userFilters"
column-key="user_id" column-key="user_id"
:label="$t('api_test.definition.api_principal')" :label="$t('api_test.definition.api_principal')"
show-overflow-tooltip width="100px"/>
width="100px"
:key="index"/>
<ms-table-column <ms-table-column
v-if="item.id == 'path'"
prop="path" prop="path"
width="120px" width="120px"
:label="$t('api_test.definition.api_path')" :label="$t('api_test.definition.api_path')"/>
show-overflow-tooltip
:key="index"/>
<ms-table-column <ms-table-column
v-if="item.id == 'tags'"
prop="tags" prop="tags"
:label="$t('commons.tag')" :label="$t('commons.tag')"
width="120px" width="120px">
:key="index">
<template v-slot:default="scope"> <template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain" <ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:show-tooltip="true" :content="itemName" :show-tooltip="true" :content="itemName"
@ -109,41 +77,20 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-if="item.id == 'updateTime'"
width="160" width="160"
:label="$t('api_test.definition.api_last_time')" :label="$t('api_test.definition.api_last_time')"
sortable="custom" sortable="custom"
prop="updateTime" prop="updateTime">
:key="index">
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span> <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-if="item.id == 'caseTotal'"
prop="caseTotal" prop="caseTotal"
width="80px" width="80px"
:label="$t('api_test.definition.api_case_number')" :label="$t('api_test.definition.api_case_number')"/>
show-overflow-tooltip
:key="index"/>
<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
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>
<ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize" <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/> :total="total"/>
@ -169,8 +116,8 @@
import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem"; import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect"; import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
import TableSelectCountBar from "./TableSelectCountBar"; import TableSelectCountBar from "./TableSelectCountBar";
import {_filter, _handleSelect, _handleSelectAll, _sort, buildBatchParam, getLabel,} from "@/common/js/tableUtils"; import {_filter, _sort, buildBatchParam, getLabel,} from "@/common/js/tableUtils";
import {API_LIST, WORKSPACE_ID} from "@/common/js/constants"; import {WORKSPACE_ID} from "@/common/js/constants";
import {getCurrentProjectID} from "@/common/js/utils"; import {getCurrentProjectID} from "@/common/js/utils";
export default { export default {
@ -194,7 +141,6 @@
return { return {
condition: {}, condition: {},
selectCase: {}, selectCase: {},
tableLabel: [],
result: {}, result: {},
moduleId: "", moduleId: "",
deletePath: "/test/case/delete", deletePath: "/test/case/delete",
@ -328,8 +274,6 @@
} }
}); });
}); });
//添加自定义列的查询
getLabel(this, API_LIST);
}, },
showExecResult(row) { 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 MsTableButton from "@/business/components/common/components/MsTableButton";
import MsTabButton from "@/business/components/common/components/MsTabButton"; import MsTabButton from "@/business/components/common/components/MsTabButton";
import {getLabel} from "@/common/js/tableUtils"; 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"; import MockConfig from "@/business/components/api/definition/components/mock/MockConfig";
@ -253,12 +252,6 @@ export default {
if (dataRange && dataRange.length > 0) { if (dataRange && dataRange.length > 0) {
this.activeDom = 'middle'; this.activeDom = 'middle';
} }
if (this.activeDom === 'left') {
getLabel(this, API_LIST);
} else if (this.activeDom === 'right') {
getLabel(this, API_CASE_LIST);
}
}, },
watch: { watch: {
currentProtocol() { currentProtocol() {

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

@ -9,68 +9,70 @@
v-model="condition.name"/> v-model="condition.name"/>
<ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize" <ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
:total="total" enableSelection :total="total"
:batch-operators="buttons" :screenHeight="screenHeight" :operators="operators"
:batch-operators="buttons"
:screenHeight="screenHeight"
:fields.sync="fields"
field-key="API_CASE"
operator-width="170px" operator-width="170px"
@refresh="initTable" @refresh="initTable"
ref="caseTable" ref="caseTable"
> >
<template v-for="(item, index) in tableLabel"> <span v-for="(item) in fields" :key="item.key">
<ms-table-column <ms-table-column
v-if="item.id == 'num'"
prop="num" prop="num"
label="ID" label="ID"
show-overflow-tooltip :field="item"
width="80px" :fields-width="fieldsWidth"
sortable=true min-width="80px"
:key="index"> sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 判断为只读用户的话不可点击ID进行编辑操作 --> <!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span> <span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
<el-tooltip v-else content="编辑"> <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> </el-tooltip>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column v-if="item.id == 'name'" prop="name" width="160px" :label="$t('test_track.case.name')" <ms-table-column
show-overflow-tooltip :key="index"/> :field="item"
:fields-width="fieldsWidth"
prop="name"
min-width="160px"
:label="$t('test_track.case.name')"/>
<ms-table-column <ms-table-column
v-if="item.id == 'priority'"
prop="priority" prop="priority"
:filters="priorityFilters" :filters="priorityFilters"
column-key="priority" :field="item"
width="120px" :fields-width="fieldsWidth"
:label="$t('test_track.case.priority')" min-width="120px"
show-overflow-tooltip :label="$t('test_track.case.priority')">
:key="index">
<template v-slot:default="scope"> <template v-slot:default="scope">
<priority-table-item :value="scope.row.priority"/> <priority-table-item :value="scope.row.priority"/>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-if="item.id == 'path'"
sortable="custom" sortable="custom"
prop="path" prop="path"
width="180px" min-width="180px"
:label="'API'+ $t('api_test.definition.api_path')" :field="item"
show-overflow-tooltip :fields-width="fieldsWidth"
:key="index"/> :label="'API'+ $t('api_test.definition.api_path')"/>
<ms-table-column <ms-table-column
v-if="item.id == 'casePath'"
sortable="custom" sortable="custom"
prop="casePath" prop="casePath"
width="180px" min-width="180px"
:label="$t('api_test.definition.request.case')+ $t('api_test.definition.api_path')" :field="item"
show-overflow-tooltip :fields-width="fieldsWidth"
:key="index"/> :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')" <ms-table-column v-if="item.id=='tags'" prop="tags" width="120px" :label="$t('commons.tag')">
:key="index">
<template v-slot:default="scope"> <template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain" <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"/> :content="itemName" style="margin-left: 0px; margin-right: 2px"/>
@ -78,54 +80,32 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-if="item.id=='createUser'"
prop="createUser" prop="createUser"
:label="'创建人'" :field="item"
show-overflow-tooltip :fields-width="fieldsWidth"
:key="index"/> :label="'创建人'"/>
<ms-table-column <ms-table-column
v-if="item.id=='updateTime'"
sortable="updateTime" sortable="updateTime"
width="160px" min-width="160px"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.definition.api_last_time')" :label="$t('api_test.definition.api_last_time')"
prop="updateTime" prop="updateTime">
:key="index">
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span> <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template> </template>
</ms-table-column> </ms-table-column>
</template> </span>
<el-table-column fixed="right" v-if="!isReadOnly" :label="$t('commons.operating')" min-width="160"
align="center"> <template v-slot:opt-behind="scope">
<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" <ms-api-case-table-extend-btns @showCaseRef="showCaseRef"
@showEnvironment="showEnvironment" @showEnvironment="showEnvironment"
@createPerformance="createPerformance" :row="scope.row"/> @createPerformance="createPerformance" :row="scope.row"/>
</div>
</template> </template>
</el-table-column>
</ms-table> </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" <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/> :total="total"/>
</div> </div>
@ -171,17 +151,19 @@ import {parseEnvironment} from "@/business/components/api/test/model/Environment
import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover"; import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar"; import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
import {API_CASE_CONFIGS} from "@/business/components/common/components/search/search-components"; 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 "@/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"; import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
export default { export default {
name: "ApiCaseSimpleList", name: "ApiCaseSimpleList",
components: { components: {
HeaderLabelOperate, HeaderLabelOperate,
HeaderCustom,
MsTableHeaderSelectPopover, MsTableHeaderSelectPopover,
MsSetEnvironment, MsSetEnvironment,
ApiCaseList, ApiCaseList,
@ -204,8 +186,8 @@ export default {
data() { data() {
return { return {
type: API_CASE_LIST, type: API_CASE_LIST,
headerItems: Api_Case_List, fields: getCustomTableHeader('API_CASE'),
tableLabel: [], fieldsWidth: getCustomTableWidth('API_CASE'),
condition: { condition: {
components: API_CASE_CONFIGS 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_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch} {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: [ typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')}, {id: 'priority', name: this.$t('test_track.case.priority')},
{id: 'method', name: this.$t('api_test.definition.api_type')}, {id: 'method', name: this.$t('api_test.definition.api_type')},
@ -321,8 +324,7 @@ export default {
}, },
methods: { methods: {
customHeader() { customHeader() {
const list = deepClone(this.tableLabel); this.$refs.caseTable.openCustomHeader();
this.$refs.headerCustom.open(list);
}, },
initTable() { initTable() {
if (this.$refs.caseTable) { if (this.$refs.caseTable) {
@ -381,8 +383,6 @@ export default {
}) })
}); });
} }
getLabel(this, API_CASE_LIST);
}, },
open() { open() {

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<div> <div v-if="tableActive">
<el-table <el-table
border border
:data="data" :data="data"
@ -23,7 +23,8 @@
@selectPageAll="isSelectDataAll(false)" @selectPageAll="isSelectDataAll(false)"
@selectAll="isSelectDataAll(true)"/> @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"> :resizable="false" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<!-- 选中记录后浮现的按钮，提供对记录的批量操作 --> <!-- 选中记录后浮现的按钮，提供对记录的批量操作 -->
@ -39,15 +40,24 @@
fixed="right" fixed="right"
:label="$t('commons.operating')"> :label="$t('commons.operating')">
<template slot="header"> <template slot="header">
<header-label-operate @exec="openCustomHeader"/> <header-label-operate v-if="fieldKey" @exec="openCustomHeader"/>
</template> </template>
<template v-slot:default="scope"> <template v-slot:default="scope">
<div> <div>
<slot name="opt-before" :row="scope.row"></slot>
<ms-table-operators :buttons="operators" :row="scope.row" :index="scope.$index"/> <ms-table-operators :buttons="operators" :row="scope.row" :index="scope.$index"/>
<slot name="opt-behind" :row="scope.row"></slot>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<ms-custom-table-header
v-if="fieldKey"
@reload="reloadTable"
:type="fieldKey"
ref="customTableHeader"/>
</div> </div>
</template> </template>
@ -59,7 +69,7 @@ import {
getSelectDataCounts, getSelectDataCounts,
setUnSelectIds, setUnSelectIds,
toggleAllSelection, toggleAllSelection,
checkTableRowIsSelect, checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth,
} from "@/common/js/tableUtils"; } from "@/common/js/tableUtils";
import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover"; import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
import {TEST_CASE_LIST} from "@/common/js/constants"; 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 MsTableOperators from "@/business/components/common/components/MsTableOperators";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate"; import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
import HeaderCustom from "@/business/components/common/head/HeaderCustom"; 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 { export default {
name: "MsTable", name: "MsTable",
components: { components: {
MsCustomTableHeader,
HeaderLabelOperate, HeaderLabelOperate,
MsTableOperators, MsTableColumn, ShowMoreBtn, MsTablePagination, MsTableHeaderSelectPopover, HeaderCustom MsTableOperators, MsTableColumn, ShowMoreBtn, MsTablePagination, MsTableHeaderSelectPopover, HeaderCustom
}, },
@ -80,7 +104,8 @@ export default {
return { return {
selectDataCounts: 0, selectDataCounts: 0,
selectRows: new Set(), selectRows: new Set(),
selectIds: [] selectIds: [],
tableActive: true
}; };
}, },
props: { props: {
@ -157,7 +182,9 @@ export default {
default() { default() {
return false; return false;
} }
} },
fields: Array,
fieldKey: String,
}, },
mounted() { mounted() {
getLabel(this, TEST_CASE_LIST); getLabel(this, TEST_CASE_LIST);
@ -170,11 +197,8 @@ export default {
}, },
}, },
methods: { methods: {
openCustomHeader() {
this.$emit("openCustomHeader");
},
handleSelectAll(selection) { 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); setUnSelectIds(this.data, this.condition, this.selectRows);
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows); this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
this.selectIds = Array.from(this.selectRows).map(o => o.id); 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); this.selectIds = Array.from(this.selectRows).map(o => o.id);
}, },
headerDragend(newWidth, oldWidth, column, event) { headerDragend(newWidth, oldWidth, column, event) {
// let finalWidth = newWidth; // 保存列宽
// if (column.minWidth > finalWidth) { saveCustomTableWidth(this.fieldKey, column.columnKey, newWidth);
// finalWidth = column.minWidth;
// }
// column.width = finalWidth;
// column.realWidth = finalWidth;
}, },
showPopover(row, column, cell) { showPopover(row, column, cell) {
if (column.property === 'name') { if (column.property === 'name') {
@ -257,11 +277,23 @@ export default {
clearSelectRows() { clearSelectRows() {
this.selectRows.clear(); this.selectRows.clear();
this.selectIds = []; this.selectIds = [];
this.condition.selectAll = false;
this.condition.unSelectIds = [];
this.selectDataCounts = 0; this.selectDataCounts = 0;
if (this.$refs.table) { if (this.$refs.table) {
this.$refs.table.clearSelection(); 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> </script>

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

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

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

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

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

@ -212,7 +212,7 @@ textarea {
overflow: visible; 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; position: absolute;
display: inline-block; display: inline-block;
top: -9px; 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 TEST_CASE_LIST = 'test_case_list';
export const CUSTOM_FIELD_LIST = new Set([ export const CUSTOM_FIELD_LIST = new Set([
@ -25,3 +27,57 @@ export const ISSUE_TEMPLATE_LIST = new Set([
'createTime', 'createTime',
'updateTime' '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 {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) { export function _handleSelectAll(component, selection, tableData, selectRows, condition) {
if (selection.length > 0) { if (selection.length > 0) {
@ -19,6 +20,9 @@ export function _handleSelectAll(component, selection, tableData, selectRows, co
tableData.forEach(item => { tableData.forEach(item => {
component.$set(item, "showMore", false); component.$set(item, "showMore", false);
}); });
if (condition) {
condition.selectAll = false;
}
} }
if (selectRows.size < 1 && condition) { if (selectRows.size < 1 && condition) {
condition.selectAll = false; condition.selectAll = false;
@ -217,3 +221,71 @@ export function getPageDate(response, page) {
page.total = data.itemCount; page.total = data.itemCount;
page.data = data.listObject; 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));
}