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

refactor: mstable 代码优化

This commit is contained in:
chenjianxing 2021-09-23 18:33:12 +08:00 committed by jianxing
parent c2bcffa1e9
commit 7d05653ace
15 changed files with 91 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,8 @@
operator-width="200"
:enable-order-drag="enableOrderDrag"
row-key="id"
:row-order-group-id="condition.projectId"
:row-order-func="editApiScenarioCaseOrder"
@refresh="search(projectId)"
@callBackSelectAll="callBackSelectAll"
@callBackSelect="callBackSelect"
@ -244,7 +246,7 @@ import {downloadFile, getCurrentProjectID, getUUID, strMapToObj} from "@/common/
import {API_SCENARIO_CONFIGS} from "@/business/components/common/components/search/search-components";
import {API_SCENARIO_LIST} from "../../../../../common/js/constants";
import {getCustomTableHeader, getCustomTableWidth, getLastTableSortField, handleRowDrop} from "@/common/js/tableUtils";
import {getCustomTableHeader, getCustomTableWidth, getLastTableSortField} from "@/common/js/tableUtils";
import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
import {scenario} from "@/business/components/track/plan/event-bus";
import MsTable from "@/business/components/common/components/table/MsTable";
@ -552,6 +554,9 @@ export default {
isNotRunning() {
return "Running" !== this.report.status;
},
editApiScenarioCaseOrder() {
return editApiScenarioCaseOrder;
}
},
methods: {
getProjectName() {
@ -618,20 +623,6 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
this.$nextTick(() => {
handleRowDrop(this.tableData, (param) => {
param.groupId = this.condition.projectId;
editApiScenarioCaseOrder(param);
});
if (this.$refs.scenarioTable) {
this.$refs.scenarioTable.clear();
this.$refs.scenarioTable.doLayout();
}
});
this.$emit('getTrashCase');
});
}

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

@ -283,13 +283,6 @@
}
});
this.genProtocalFilter(this.condition.protocol);
this.$nextTick(function () {
if (this.$refs.apitable) {
this.$refs.apitable.doLayout();
this.$refs.apitable.checkTableRowIsSelect();
this.$refs.apitable.clear();
}
});
});
},

7
frontend/src/business/components/api/automation/scenario/api/RelevanceCaseList.vue
View File

@ -221,13 +221,6 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
this.$nextTick(function () {
if (this.$refs.table) {
this.$refs.table.doLayout();
this.$refs.table.checkTableRowIsSelect();
this.$refs.table.clear();
}
});
});
},
clear() {

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

@ -23,6 +23,8 @@
:fields.sync="fields"
:field-key="tableHeaderKey"
:remember-order="true"
:row-order-group-id="condition.projectId"
:row-order-func="editApiTestCaseOrder"
:enable-order-drag="enableOrderDrag"
row-key="id"
operator-width="190px"
@ -225,7 +227,6 @@ import {
getCustomTableHeader,
getCustomTableWidth,
getLastTableSortField,
handleRowDrop
} from "@/common/js/tableUtils";
import {API_CASE_LIST} from "@/common/js/constants";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@ -453,6 +454,9 @@ export default {
},
selectRows() {
return this.$refs.caseTable.getSelectRows();
},
editApiTestCaseOrder() {
return editApiTestCaseOrder;
}
},
methods: {
@ -586,17 +590,6 @@ export default {
isNext = true;
}
});
this.$nextTick(() => {
if (this.$refs.caseTable) {
this.$refs.caseTable.clear();
}
handleRowDrop(this.tableData, (param) => {
param.groupId = this.condition.projectId;
editApiTestCaseOrder(param);
});
})
});
}
},

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

@ -15,6 +15,8 @@
:remember-order="true"
@refresh="initTable"
:fields.sync="fields"
:row-order-func="editApiDefinitionOrder"
:row-order-group-id="condition.projectId"
:table-is-loading="this.result.loading"
:field-key="tableHeaderKey"
:enable-order-drag="enableOrderDrag"
@ -208,12 +210,10 @@ import MsTipButton from "@/business/components/common/components/MsTipButton";
import CaseBatchMove from "@/business/components/api/definition/components/basis/BatchMove";
import {
initCondition,
getCustomTableHeader, getCustomTableWidth, buildBatchParam, checkTableRowIsSelected,
saveLastTableSortField, getLastTableSortField, handleRowDrop
getCustomTableHeader, getCustomTableWidth, buildBatchParam, getLastTableSortField
} 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";
import {editApiDefinitionOrder} from "@/network/api";
@ -420,6 +420,9 @@ export default {
} else {
return this.$t('api_test.definition.api_type');
}
},
editApiDefinitionOrder() {
return editApiDefinitionOrder;
}
},
created: function () {
@ -474,7 +477,7 @@ export default {
initCondition(this.condition, false);
this.closeCaseModel();
this.initTable();
}
},
},
methods: {
getProjectName() {
@ -548,18 +551,6 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
checkTableRowIsSelected(this, this.$refs.table);
this.$nextTick(() => {
if (this.$refs.table) {
this.$refs.table.clear();
}
handleRowDrop(this.tableData, (param) => {
param.groupId = this.condition.projectId;
editApiDefinitionOrder(param);
});
})
});
}
if (this.needRefreshModule()) {

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

@ -94,7 +94,7 @@ import {
getSelectDataCounts,
setUnSelectIds,
toggleAllSelection,
checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth, saveLastTableSortField,
checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth, saveLastTableSortField, handleRowDrop,
} from "@/common/js/tableUtils";
import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
import MsTablePagination from "@/business/components/common/pagination/TablePagination";
@ -105,6 +105,7 @@ import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOpe
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import MsCustomTableHeader from "@/business/components/common/components/table/MsCustomTableHeader";
import {lineToHump} from "@/common/js/utils";
import {editTestCaseOrder} from "@/network/testCase";
/**
* 参考 ApiList
@ -219,6 +220,9 @@ export default {
rememberOrder: Boolean,
enableOrderDrag: Boolean,
rowKey: [String, Function],
// 自定义排序，需要传资源所属的项目id或者测试计划id，并且传排序的方法
rowOrderGroupId: String,
rowOrderFunc: Function
},
mounted() {
this.setDefaultOrders();
@ -226,6 +230,18 @@ export default {
watch: {
selectNodeIds() {
this.selectDataCounts = 0;
},
// 刷新列表后做统一处理
data(newVar, oldVar) {
// 不知为何，勾选选择框也会进到这里，但是这种情况 newVar === oldVar
if (newVar !== oldVar) {
this.$nextTick(() => {
this.clear();
this.doLayout();
this.checkTableRowIsSelect();
this.listenRowDrop();
});
}
}
},
methods: {
@ -255,6 +271,16 @@ export default {
}
}
},
listenRowDrop() {
if (this.rowOrderGroupId) {
handleRowDrop(this.data, (param) => {
param.groupId = this.rowOrderGroupId;
if (this.rowOrderFunc) {
this.rowOrderFunc(param);
}
});
}
},
isScrollShow(column, tableTop){ //判断元素是否因为超过表头
let columnTop = column.getBoundingClientRect().top;
return columnTop - tableTop > 30;

21
frontend/src/business/components/performance/test/PerformanceTestList.vue
View File

@ -19,6 +19,8 @@
:remember-order="true"
:enable-order-drag="enableOrderDrag"
row-key="id"
:row-order-group-id="projectId"
:row-order-func="editLoadTestCaseOrder"
operator-width="190px"
:screen-height="screenHeight"
:enable-selection="false"
@ -104,7 +106,7 @@ import MsTableOperators from "../../common/components/MsTableOperators";
import {getCurrentProjectID, getCurrentWorkspaceId} from "@/common/js/utils";
import MsTableHeader from "../../common/components/MsTableHeader";
import {TEST_CONFIGS} from "../../common/components/search/search-components";
import {getLastTableSortField, handleRowDrop} from "@/common/js/tableUtils";
import {getLastTableSortField} from "@/common/js/tableUtils";
import MsTable from "@/business/components/common/components/table/MsTable";
import {editLoadTestCaseOrder} from "@/network/load-test";
@ -172,8 +174,13 @@ export default {
this.initTableData();
}
},
computed: {
editLoadTestCaseOrder() {
return editLoadTestCaseOrder;
}
},
created: function () {
this.projectId = this.$route.params.projectId;
this.projectId = getCurrentProjectID();
this.initTableData();
this.getMaintainerOptions();
},
@ -203,16 +210,6 @@ export default {
this.$set(test, 'reportCount', response.data);
});
});
this.$nextTick(() => {
handleRowDrop(this.tableData, (param) => {
param.groupId = getCurrentProjectID();
editLoadTestCaseOrder(param);
});
if (this.$refs.table) {
this.$refs.table.clear();
}
});
});
},
search(combine) {

26
frontend/src/business/components/track/case/components/TestCaseList.vue
View File

@ -17,6 +17,8 @@
:remember-order="true"
:enable-order-drag="enableOrderDrag"
row-key="id"
:row-order-group-id="projectId"
:row-order-func="editTestCaseOrder"
@handlePageChange="initTableData"
@handleRowClick="handleEdit"
:fields.sync="fields"
@ -202,13 +204,12 @@ import ReviewStatus from "@/business/components/track/case/components/ReviewStat
import MsTag from "@/business/components/common/components/MsTag";
import {
buildBatchParam,
checkTableRowIsSelected,
deepClone,
getCustomFieldBatchEditOption,
getCustomFieldValue,
getCustomTableWidth, getLastTableSortField,
getPageInfo,
getTableHeaderWithCustomFields, handleRowDrop,
getTableHeaderWithCustomFields,
initCondition,
} from "@/common/js/tableUtils";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@ -384,6 +385,9 @@ export default {
},
systemFiledMap() {
return SYSTEM_FIELD_NAME_MAP;
},
editTestCaseOrder() {
return editTestCaseOrder;
}
},
created: function () {
@ -579,12 +583,6 @@ export default {
let data = response.data;
this.page.total = data.itemCount;
this.page.data = data.listObject;
if (this.$refs.table) {
this.$refs.table.clear();
this.$nextTick(() => {
this.$refs.table.doLayout();
});
}
this.page.data.forEach(item => {
if (item.customFields) {
item.customFields = JSON.parse(item.customFields);
@ -598,21 +596,9 @@ export default {
}
});
checkTableRowIsSelected(this, this.$refs.table);
this.handleRowDrop();
});
}
},
handleRowDrop() {
this.$nextTick(() => {
handleRowDrop(this.page.data, (param) => {
param.groupId = this.projectId;
editTestCaseOrder(param);
});
});
},
search() {
this.initTableData();
},

1
frontend/src/business/components/track/case/components/TestCaseLoadRelate.vue
View File

@ -48,7 +48,6 @@ export default {
open() {
this.init();
this.$refs.baseRelevance.open();
this.$refs.apiCaseList.clear();
},
init() {
if (this.$refs.apiCaseList) {

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

@ -25,6 +25,8 @@
:fields.sync="fields"
:field-key="tableHeaderKey"
@refresh="initTable"
:row-order-group-id="planId"
:row-order-func="editTestPlanApiCaseOrder"
:enable-order-drag="enableOrderDrag"
row-key="id"
ref="table">
@ -174,7 +176,7 @@ import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
import {TEST_PLAN_API_CASE} from "@/common/js/constants";
import {
buildBatchParam,
checkTableRowIsSelect, deepClone, getCustomTableHeader, getCustomTableWidth, handleRowDrop,
checkTableRowIsSelect, deepClone, getCustomTableHeader, getCustomTableWidth,
} from "@/common/js/tableUtils";
import HeaderCustom from "@/business/components/common/head/HeaderCustom";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@ -341,6 +343,9 @@ export default {
isApiModel() {
return this.model === 'api';
},
editTestPlanApiCaseOrder() {
return editTestPlanApiCaseOrder;
}
},
methods: {
customHeader() {
@ -386,14 +391,6 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
if (this.$refs.table) {
this.$refs.table.clear();
setTimeout(this.$refs.table.doLayout, 200);
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
}
});
}
if (this.planId) {
@ -406,25 +403,9 @@ export default {
item.tags = JSON.parse(item.tags);
}
});
if (this.$refs.table) {
this.$refs.table.clear();
setTimeout(this.$refs.table.doLayout, 200);
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
}
this.handleRowDrop();
});
}
},
handleRowDrop() {
this.$nextTick(() => {
handleRowDrop(this.tableData, (param) => {
param.groupId = this.planId;
editTestPlanApiCaseOrder(param);
});
});
},
search() {
this.initTable();
},

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

@ -21,6 +21,8 @@
:field-key="tableHeaderKey"
:enable-order-drag="enableOrderDrag"
row-key="id"
:row-order-func="editTestPlanScenarioCaseOrder"
:row-order-group-id="planId"
@refresh="search"
ref="table">
<span v-for="(item) in fields" :key="item.key">
@ -180,8 +182,7 @@ import MsTestPlanList from "../../../../../api/automation/scenario/testplan/Test
import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
import {
initCondition,
buildBatchParam,
checkTableRowIsSelect, getCustomTableHeader, getCustomTableWidth, handleRowDrop
buildBatchParam, getCustomTableHeader, getCustomTableWidth
} from "../../../../../../../common/js/tableUtils";
import {TEST_PLAN_SCENARIO_CASE} from "@/common/js/constants";
import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@ -290,6 +291,9 @@ export default {
projectId() {
return getCurrentProjectID();
},
editTestPlanScenarioCaseOrder() {
return editTestPlanScenarioCaseOrder;
}
},
created() {
this.search();
@ -344,20 +348,6 @@ export default {
}
})
this.loading = false;
handleRowDrop(this.tableData, (param) => {
param.groupId = this.planId;
editTestPlanScenarioCaseOrder(param);
});
if (this.$refs.table) {
this.$refs.table.selectRows.clear();
setTimeout(this.$refs.table.doLayout, 200);
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
}
});
}
if (this.reviewId) {
@ -373,12 +363,6 @@ export default {
}
});
this.loading = false;
if (this.$refs.table) {
setTimeout(this.$refs.table.doLayout, 200);
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
}
});
}
},

22
frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
View File

@ -34,6 +34,8 @@
:fields.sync="fields"
:remember-order="true"
@refresh="initTableData"
:row-order-group-id="planId"
:row-order-func="editTestPlanTestCaseOrder"
:enable-order-drag="enableOrderDrag"
row-key="id"
ref="table">
@ -269,9 +271,9 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import {hub} from "@/business/components/track/plan/event-bus";
import MsTag from "@/business/components/common/components/MsTag";
import {
buildBatchParam, checkTableRowIsSelected,
buildBatchParam,
getCustomFieldValue, getCustomTableWidth, getLastTableSortField,
getTableHeaderWithCustomFields, handleRowDrop,
getTableHeaderWithCustomFields,
initCondition,
} from "@/common/js/tableUtils";
import MsTable from "@/business/components/common/components/table/MsTable";
@ -394,6 +396,11 @@ export default {
type: Array
},
},
computed: {
editTestPlanTestCaseOrder() {
return editTestPlanTestCaseOrder;
}
},
watch: {
planId() {
this.refreshTableAndPlan();
@ -486,17 +493,6 @@ export default {
this.$set(this.tableData[i], "issuesContent", JSON.parse(this.tableData[i].issues));
}
}
this.$nextTick(() => {
handleRowDrop(this.tableData, (param) => {
param.groupId = this.planId;
editTestPlanTestCaseOrder(param);
});
});
if (this.$refs.table) {
this.$refs.table.clear();
}
checkTableRowIsSelected(this, this.$refs.table);
});
}
},

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

@ -23,6 +23,8 @@
:field-key="tableHeaderKey"
:enable-order-drag="enableOrderDrag"
row-key="id"
:row-order-group-id="planId"
:row-order-func="editTestPlanLoadCaseOrder"
@refresh="initTable"
ref="table">
<span v-for="(item) in fields" :key="item.key">
@ -124,8 +126,7 @@ import MsTablePagination from "@/business/components/common/pagination/TablePagi
import MsPerformanceTestStatus from "@/business/components/performance/test/PerformanceTestStatus";
import LoadCaseReport from "@/business/components/track/plan/view/comonents/load/LoadCaseReport";
import {
buildBatchParam,
checkTableRowIsSelect, getCustomTableHeader, getCustomTableWidth, handleRowDrop
buildBatchParam, getCustomTableHeader, getCustomTableWidth
} from "@/common/js/tableUtils";
import {TEST_PLAN_LOAD_CASE} from "@/common/js/constants";
import {getCurrentProjectID, getCurrentUser, getCurrentUserId} from "@/common/js/utils";
@ -223,6 +224,11 @@ export default {
reviewId: String,
clickType: String,
},
computed: {
editTestPlanLoadCaseOrder() {
return editTestPlanLoadCaseOrder;
}
},
created() {
this.initTable();
this.refreshStatus();
@ -316,19 +322,6 @@ export default {
let {itemCount, listObject} = data;
this.total = itemCount;
this.tableData = listObject;
this.$nextTick(() => {
handleRowDrop(this.tableData, (param) => {
param.groupId = this.planId;
editTestPlanLoadCaseOrder(param);
});
});
if (this.$refs.table) {
setTimeout(this.$refs.table.doLayout, 200);
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
}
})
}
if (this.reviewId) {
@ -338,12 +331,6 @@ export default {
let {itemCount, listObject} = data;
this.total = itemCount;
this.tableData = listObject;
if (this.$refs.table) {
setTimeout(this.$refs.table.doLayout, 200);
this.$nextTick(() => {
checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
});
}
})
}
},

8
frontend/src/business/components/track/report/components/TestPlanReportList.vue
View File

@ -86,7 +86,7 @@ import {
_filter,
_handleSelect,
_handleSelectAll,
_sort, checkTableRowIsSelect,
_sort,
getSelectDataCounts,
initCondition,
setUnSelectIds, toggleAllSelection,saveLastTableSortField,getLastTableSortField
@ -173,12 +173,6 @@ export default {
let data = response.data;
this.total = data.itemCount;
this.tableData = data.listObject;
if (this.$refs.testPlanReportTable) {
// setTimeout(this.$refs.testPlanReportTable,200);
}
this.$nextTick(() => {
checkTableRowIsSelect(this,this.condition,this.tableData,this.$refs.testPlanReportTable,this.selectRows);
});
});
},
buildPagePath(path) {

3
frontend/src/business/components/track/review/view/components/TestReviewTestCaseList.vue
View File

@ -170,7 +170,7 @@ import TestReviewTestCaseEdit from "./TestReviewTestCaseEdit";
import ReviewStatus from "@/business/components/track/case/components/ReviewStatus";
import {
_handleSelectAll,
buildBatchParam, checkTableRowIsSelected, deepClone, getCustomTableWidth, getLastTableSortField,
buildBatchParam, deepClone, getCustomTableWidth, getLastTableSortField,
getSelectDataCounts, getTableHeaderWithCustomFields,
initCondition,
toggleAllSelection
@ -328,7 +328,6 @@ export default {
this.total = data.itemCount;
this.tableData = data.listObject;
this.tableClear();
checkTableRowIsSelected(this, this.$refs.table);
});
}