style(接口测试): 操作栏宽度调整

Signed-off-by: fit2-zhao <yong.zhao@fit2cloud.com>
This commit is contained in:
fit2-zhao 2024-11-04 15:33:46 +08:00 committed by Craftsman
parent a0f6f1fe10
commit 963c83e18f
3 changed files with 97 additions and 95 deletions

View File

@ -14,7 +14,7 @@
:fields.sync="fields"
:field-key="tableHeaderKey"
:remember-order="true"
operator-width="200"
operator-width="210"
:enable-order-drag="enableOrderDrag"
row-key="id"
:row-order-group-id="condition.projectId"

View File

@ -33,7 +33,7 @@
:row-order-func="editApiTestCaseOrder"
:enable-order-drag="enableOrderDrag"
row-key="id"
operator-width="190px"
operator-width="220"
@refresh="initTable"
ref="caseTable"
class="api-case-simple-list">
@ -319,11 +319,11 @@ import {
testCaseReduction,
updateExecuteInfo,
} from '@/api/api-test-case';
import {getDefinitionById} from '@/api/definition';
import {getApiReportDetail} from '@/api/definition-report';
import {genPerformanceTestXml} from '@/api/home';
import {getMaintainer} from '@/api/project';
import {getProjectVersions, synCaseBatch, versionEnableByProjectId} from '@/api/xpack';
import { getDefinitionById } from '@/api/definition';
import { getApiReportDetail } from '@/api/definition-report';
import { genPerformanceTestXml } from '@/api/home';
import { getMaintainer } from '@/api/project';
import { getProjectVersions, synCaseBatch, versionEnableByProjectId } from '@/api/xpack';
import MsTable from 'metersphere-frontend/src/components/table/MsTable';
import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn';
import MsTableOperator from 'metersphere-frontend/src/components/MsTableOperator';
@ -336,7 +336,7 @@ import MsContainer from 'metersphere-frontend/src/components/MsContainer';
import MsBottomContainer from '../BottomContainer';
import ShowMoreBtn from '@/business/commons/ShowMoreBtn';
import MsBatchEdit from '../basis/BatchEdit';
import {getUUID} from 'metersphere-frontend/src/utils';
import { getUUID } from 'metersphere-frontend/src/utils';
import {
API_METHOD_COLOUR,
CASE_PRIORITY,
@ -345,19 +345,19 @@ import {
SQL_METHOD,
TCP_METHOD,
} from '../../model/JsonData';
import {getCurrentProjectID} from 'metersphere-frontend/src/utils/token';
import {hasLicense} from 'metersphere-frontend/src/utils/permission';
import {getBodyUploadFiles} from '@/business/definition/api-definition';
import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
import { hasLicense } from 'metersphere-frontend/src/utils/permission';
import { getBodyUploadFiles } from '@/business/definition/api-definition';
import PriorityTableItem from '@/business/commons/PriorityTableItem';
import MsApiCaseTableExtendBtns from '../reference/ApiCaseTableExtendBtns';
import MsShowReference from '../reference/ShowReference';
import MsSetEnvironment from '@/business/definition/components/basis/SetEnvironment';
import TestPlan from '@/business/definition/components/jmeter/components/test-plan';
import ThreadGroup from '@/business/definition/components/jmeter/components/thread-group';
import {parseEnvironment} from '@/business/environment/model/EnvironmentModel';
import { parseEnvironment } from '@/business/environment/model/EnvironmentModel';
import MsTableHeaderSelectPopover from 'metersphere-frontend/src/components/table/MsTableHeaderSelectPopover';
import MsTableAdvSearchBar from 'metersphere-frontend/src/components/search/MsTableAdvSearchBar';
import {API_CASE_CONFIGS, API_CASE_CONFIGS_TRASH} from 'metersphere-frontend/src/components/search/search-components';
import { API_CASE_CONFIGS, API_CASE_CONFIGS_TRASH } from 'metersphere-frontend/src/components/search/search-components';
import {
_filter,
_sort,
@ -366,17 +366,17 @@ import {
getLastTableSortField,
handleRowDrop,
} from 'metersphere-frontend/src/utils/tableUtils';
import {API_CASE_LIST} from 'metersphere-frontend/src/utils/constants';
import { API_CASE_LIST } from 'metersphere-frontend/src/utils/constants';
import HeaderLabelOperate from 'metersphere-frontend/src/components/head/HeaderLabelOperate';
import ApiCaseBatchRun from '@/business/definition/components/list/ApiCaseBatchRun';
import MsRequestResultTail from '@/business/definition/components/response/RequestResultTail';
import {TYPE_TO_C} from '@/business/automation/scenario/Setting';
import { TYPE_TO_C } from '@/business/automation/scenario/Setting';
import i18n from 'metersphere-frontend/src/i18n';
import MsSearch from 'metersphere-frontend/src/components/search/MsSearch';
import SyncSetting from '@/business/definition/util/SyncSetting';
import {getEnvironmentByProjectId} from 'metersphere-frontend/src/api/environment';
import {useApiStore, usePerformanceStore} from '@/store';
import {REPORT_STATUS} from '@/business/commons/js/commons';
import { getEnvironmentByProjectId } from 'metersphere-frontend/src/api/environment';
import { useApiStore, usePerformanceStore } from '@/store';
import { REPORT_STATUS } from '@/business/commons/js/commons';
import MsApiRunMode from '@/business/automation/scenario/common/ApiRunMode';
import ApiDeleteConfirm from '@/business/definition/components/list/ApiDeleteConfirm';
@ -664,7 +664,12 @@ export default {
},
storeCurrentApiCaseRefresh() {
if (store.currentApiCase && store.currentApiCase.refresh) {
this.setStatus(store.currentApiCase.id, store.currentApiCase.status, store.currentApiCase.passRate, store.currentApiCase.reportId);
this.setStatus(
store.currentApiCase.id,
store.currentApiCase.status,
store.currentApiCase.passRate,
store.currentApiCase.reportId
);
}
store.currentApiCase = {};
},

View File

@ -19,7 +19,7 @@
:batch-operators="trashEnable ? trashButtons : buttons"
:screen-height="screenHeight"
:operators="tableOperatorButtons"
operator-width="200px"
operator-width="220"
:remember-order="true"
@refresh="initTable"
:fields.sync="fields"
@ -47,7 +47,7 @@
:fields-width="fieldsWidth"
v-if="this.trashEnable"
:label="$t('commons.delete_user')"
min-width="120"/>
min-width="120" />
<span v-for="item in fields" :key="item.key">
<ms-table-column prop="num" label="ID" :field="item" min-width="100px" :fields-width="fieldsWidth" sortable>
<template slot-scope="scope" v-if="!trashEnable">
@ -65,7 +65,7 @@
sortable="custom"
:fields-width="fieldsWidth"
min-width="120"
:field="item"/>
:field="item" />
<ms-table-column
prop="status"
@ -77,7 +77,7 @@
:label="$t('api_test.definition.api_status')">
<template v-slot:default="scope">
<span class="el-dropdown-link">
<api-status :value="scope.row.status"/>
<api-status :value="scope.row.status" />
</span>
</template>
</ms-table-column>
@ -110,13 +110,13 @@
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
:label="$t('api_test.definition.request.responsible')"/>
:label="$t('api_test.definition.request.responsible')" />
<ms-table-column
prop="path"
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
:label="$t('api_test.definition.api_path')"/>
:label="$t('api_test.definition.api_path')" />
<ms-table-column
prop="tags"
@ -136,10 +136,10 @@
effect="plain"
:show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
:content="itemName"
style="margin-left: 0px; margin-right: 2px"/>
style="margin-left: 0px; margin-right: 2px" />
</div>
</el-tooltip>
<span/>
<span />
</template>
</ms-table-column>
@ -183,7 +183,7 @@
:field="item"
:fields-width="fieldsWidth"
min-width="100px"
:label="$t('api_test.definition.api_case_number')"/>
:label="$t('api_test.definition.api_case_number')" />
<ms-table-column
:field="item"
@ -192,7 +192,7 @@
min-width="100px"
:label="$t('api_test.definition.api_case_result')">
<template v-slot:default="{ row }">
<ms-api-report-status :status="row.caseStatus" style="text-align: left;"/>
<ms-api-report-status :status="row.caseStatus" style="text-align: left" />
</template>
</ms-table-column>
@ -201,46 +201,44 @@
:field="item"
min-width="120px"
:fields-width="fieldsWidth"
:label="$t('api_test.definition.api_case_passing_rate')"/>
:label="$t('api_test.definition.api_case_passing_rate')" />
<ms-table-column
prop="description"
:field="item"
min-width="120px"
:fields-width="fieldsWidth"
:label="$t('commons.description')"/>
:label="$t('commons.description')" />
</span>
<template v-if="!trashEnable" v-slot:opt-behind="scope">
<table-extend-btns
:dropdown-items="dropdownItems"
:row="scope.row"/>
<table-extend-btns :dropdown-items="dropdownItems" :row="scope.row" />
</template>
</ms-table>
<ms-table-pagination
:change="initTable"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"/>
:total="total" />
</span>
<ms-api-case-list @refresh="initTable" @showExecResult="showExecResult" :currentApi="selectApi" ref="caseList"/>
<ms-api-case-list @refresh="initTable" @showExecResult="showExecResult" :currentApi="selectApi" ref="caseList" />
<!--批量编辑-->
<ms-batch-edit
ref="batchEdit"
@batchEdit="batchEdit"
:data-count="$refs.table ? $refs.table.selectDataCounts : 0"
:typeArr="typeArr"
:value-arr="valueArr"/>
:value-arr="valueArr" />
<!--从指定版本复制数据-->
<version-selector @handleSave="handleCopyDataFromVersion" ref="versionSelector"/>
<version-selector @handleSave="handleCopyDataFromVersion" ref="versionSelector" />
<!--高级搜索-->
<ms-table-adv-search-bar :condition.sync="condition" :showLink="false" ref="searchBar" @search="search"/>
<ms-table-adv-search-bar :condition.sync="condition" :showLink="false" ref="searchBar" @search="search" />
<!--查看引用-->
<ms-show-reference ref="viewRef" :show-plan="false" :is-has-ref="false" api-type="API"/>
<case-batch-move @refresh="initTable" @moveSave="moveSave" ref="testCaseBatchMove"/>
<ms-show-reference ref="viewRef" :show-plan="false" :is-has-ref="false" api-type="API" />
<case-batch-move @refresh="initTable" @moveSave="moveSave" ref="testCaseBatchMove" />
<relationship-graph-drawer :graph-data="graphData" ref="relationshipGraph"/>
<relationship-graph-drawer :graph-data="graphData" ref="relationshipGraph" />
<!-- 删除接口提示 -->
<list-item-delete-confirm ref="apiDeleteConfirm" @handleDelete="_handleDelete"/>
<list-item-delete-confirm ref="apiDeleteConfirm" @handleDelete="_handleDelete" />
</span>
</template>
@ -261,8 +259,8 @@ import {
removeToGcByIds,
removeToGcByParams,
} from '@/api/definition';
import {getMaintainer, getProject} from '@/api/project';
import {getProjectVersions, versionEnableByProjectId} from '@/api/xpack';
import { getMaintainer, getProject } from '@/api/project';
import { getProjectVersions, versionEnableByProjectId } from '@/api/xpack';
import MsTableHeader from 'metersphere-frontend/src/components/MsTableHeader';
import MsTableOperator from 'metersphere-frontend/src/components/MsTableOperator';
import MsTableOperatorButton from 'metersphere-frontend/src/components/MsTableOperatorButton';
@ -275,19 +273,19 @@ import MsContainer from 'metersphere-frontend/src/components/MsContainer';
import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn';
import MsBottomContainer from '../BottomContainer';
import MsBatchEdit from '../basis/BatchEdit';
import {API_METHOD_COLOUR, API_STATUS, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD} from '../../model/JsonData';
import {downloadFile, operationConfirm} from 'metersphere-frontend/src/utils';
import {getCurrentProjectID} from 'metersphere-frontend/src/utils/token';
import {hasLicense} from 'metersphere-frontend/src/utils/permission';
import {API_LIST} from 'metersphere-frontend/src/utils/constants';
import { API_METHOD_COLOUR, API_STATUS, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD } from '../../model/JsonData';
import { downloadFile, operationConfirm } from 'metersphere-frontend/src/utils';
import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
import { hasLicense } from 'metersphere-frontend/src/utils/permission';
import { API_LIST } from 'metersphere-frontend/src/utils/constants';
import MsTableHeaderSelectPopover from 'metersphere-frontend/src/components/table/MsTableHeaderSelectPopover';
import ApiStatus from '@/business/definition/components/list/ApiStatus';
import MsTableAdvSearchBar from 'metersphere-frontend/src/components/search/MsTableAdvSearchBar';
import {API_DEFINITION_CONFIGS} from 'metersphere-frontend/src/components/search/search-components';
import {API_DEFINITION_CONFIGS_TRASH, getProtocolFilter} from '@/business/definition/api-definition';
import { API_DEFINITION_CONFIGS } from 'metersphere-frontend/src/components/search/search-components';
import { API_DEFINITION_CONFIGS_TRASH, getProtocolFilter } from '@/business/definition/api-definition';
import MsTipButton from 'metersphere-frontend/src/components/MsTipButton';
import CaseBatchMove from '@/business/definition/components/basis/BatchMove';
import {getProjectMember} from "@/api/user";
import { getProjectMember } from '@/api/user';
import {
buildBatchParam,
deepClone,
@ -298,16 +296,16 @@ import {
initCondition,
} from 'metersphere-frontend/src/utils/tableUtils';
import HeaderLabelOperate from 'metersphere-frontend/src/components/head/HeaderLabelOperate';
import {Body} from '@/business/definition/model/ApiTestModel';
import {getGraphByCondition} from '@/api/graph';
import { Body } from '@/business/definition/model/ApiTestModel';
import { getGraphByCondition } from '@/api/graph';
import ListItemDeleteConfirm from 'metersphere-frontend/src/components/ListItemDeleteConfirm';
import MsSearch from 'metersphere-frontend/src/components/search/MsSearch';
import {buildNodePath} from 'metersphere-frontend/src/model/NodeTree';
import { buildNodePath } from 'metersphere-frontend/src/model/NodeTree';
import VersionSelector from '@/business/definition/components/version/VersionSelector';
import TableExtendBtns from "@/business/definition/components/complete/table/TableExtendBtns";
import MsShowReference from "@/business/definition/components/reference/ShowReference";
import {getApiTemplate} from "@/api/api-template";
import {getAdvSearchCustomField} from "metersphere-frontend/src/components/search/custom-component";
import TableExtendBtns from '@/business/definition/components/complete/table/TableExtendBtns';
import MsShowReference from '@/business/definition/components/reference/ShowReference';
import { getApiTemplate } from '@/api/api-template';
import { getAdvSearchCustomField } from 'metersphere-frontend/src/components/search/custom-component';
export default {
name: 'ApiList',
@ -446,22 +444,22 @@ export default {
dropdownItems: [
{
name: this.$t('api_test.automation.view_ref'),
value: "ref",
value: 'ref',
permissions: ['PROJECT_API_DEFINITION:READ'],
exec: this.showCaseRef,
},
{
name: this.$t('commons.view') + "CASE",
value: "case",
name: this.$t('commons.view') + 'CASE',
value: 'case',
permissions: ['PROJECT_API_DEFINITION:READ'],
exec: this.handleTestCase,
}
},
],
typeArr: [
{id: 'status', name: this.$t('api_test.definition.api_status')},
{id: 'method', name: this.$t('api_test.definition.api_type')},
{id: 'userId', name: this.$t('api_test.definition.api_principal')},
{id: 'tags', name: this.$t('commons.tag')},
{ id: 'status', name: this.$t('api_test.definition.api_status') },
{ id: 'method', name: this.$t('api_test.definition.api_type') },
{ id: 'userId', name: this.$t('api_test.definition.api_principal') },
{ id: 'tags', name: this.$t('commons.tag') },
],
statusFilters: [
{
@ -478,15 +476,15 @@ export default {
},
],
statusFiltersTrash: [{text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'}],
statusFiltersTrash: [{ text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash' }],
caseStatusFilters: [
{
text: this.$t('api_test.home_page.detail_card.unexecute'),
value: '未执行',
},
{text: this.$t('test_track.review.pass'), value: '通过'},
{text: this.$t('test_track.review.un_pass'), value: '未通过'},
{ text: this.$t('test_track.review.pass'), value: '通过' },
{ text: this.$t('test_track.review.un_pass'), value: '未通过' },
],
methodFilters: [],
userFilters: [],
@ -564,7 +562,7 @@ export default {
moduleOptionsNew() {
let moduleOptions = [];
this.moduleOptions.forEach((node) => {
buildNodePath(node, {path: ''}, moduleOptions);
buildNodePath(node, { path: '' }, moduleOptions);
});
return moduleOptions;
},
@ -575,10 +573,10 @@ export default {
}
if (this.trashEnable) {
this.tableOperatorButtons = this.tableTrashOperatorButtons;
this.condition.filters = {status: ['Trash']};
this.condition.filters = { status: ['Trash'] };
} else {
this.tableOperatorButtons = this.tableUsualOperatorButtons;
this.condition.filters = {status: ['Prepare', 'Underway', 'Completed']};
this.condition.filters = { status: ['Prepare', 'Underway', 'Completed'] };
}
this.condition.orders = getLastTableSortField(this.tableHeaderKey);
// tab
@ -638,7 +636,7 @@ export default {
trashEnable() {
if (this.trashEnable) {
this.tableOperatorButtons = this.tableTrashOperatorButtons;
this.condition.filters = {status: ['Trash']};
this.condition.filters = { status: ['Trash'] };
this.condition.moduleIds = [];
} else {
this.tableOperatorButtons = this.tableUsualOperatorButtons;
@ -655,8 +653,7 @@ export default {
async getTemplateField() {
this.loading = true;
//
let p1 = getProjectMember()
.then((response) => {
let p1 = getProjectMember().then((response) => {
this.members = response.data;
});
let p2 = getApiTemplate(this.projectId);
@ -665,18 +662,18 @@ export default {
let template = data[1];
this.getCustomFields(template.customFields, this.members);
let comp = getAdvSearchCustomField(this.condition, template.customFields);
this.condition.components.push(...comp)
this.condition.components.push(...comp);
});
},
getCustomFields(customFields, projectMembers = []) {
projectMembers.forEach(member => {
projectMembers.forEach((member) => {
member['text'] = member.name;
// 使
member['label'] = member.name;
member['value'] = member.id;
member['showLabel'] = member.name + "(" + member.id + ")";
})
customFields.forEach(item => {
member['showLabel'] = member.name + '(' + member.id + ')';
});
customFields.forEach((item) => {
if ((item.type === 'member' || item.type === 'multipleMember') && projectMembers && projectMembers.length > 0) {
item.options = projectMembers;
}
@ -685,7 +682,7 @@ export default {
setAdvSearchParam() {
let comp = this.condition.components.find((c) => c.key === 'moduleIds');
if (comp) {
comp.options.params = {protocol: this.currentProtocol};
comp.options.params = { protocol: this.currentProtocol };
}
let method = this.condition.components.find((c) => c.key === 'method');
if (method) {
@ -740,7 +737,7 @@ export default {
this.selectDataCounts = 0;
this.condition.moduleIds = this.selectNodeIds;
this.condition.projectId = this.projectId;
if (currentProtocol && ["HTTP", "DUBBO", "SQL", "TCP"].includes(currentProtocol)) {
if (currentProtocol && ['HTTP', 'DUBBO', 'SQL', 'TCP'].includes(currentProtocol)) {
this.condition.protocol = currentProtocol;
} else if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
@ -905,7 +902,7 @@ export default {
getMaintainer().then((response) => {
this.valueArr.userId = response.data;
this.userFilters = response.data.map((u) => {
return {text: u.name, value: u.id};
return { text: u.name, value: u.id };
});
});
},
@ -916,11 +913,11 @@ export default {
this.versionFilters = response.data
.filter((u) => u.id === currentVersion)
.map((u) => {
return {text: u.name, value: u.id};
return { text: u.name, value: u.id };
});
} else {
this.versionFilters = response.data.map((u) => {
return {text: u.name, value: u.id};
return { text: u.name, value: u.id };
});
}
});
@ -1000,7 +997,7 @@ export default {
},
reductionApi(row) {
let tmp = JSON.parse(JSON.stringify(row));
let rows = {ids: [tmp.id]};
let rows = { ids: [tmp.id] };
rows.projectId = getCurrentProjectID();
rows.protocol = this.currentProtocol;
definitionReduction(rows).then(() => {