style(接口测试): 用例编辑页面样式优化
--story=1014456 --user=赵勇 github#28927优化接口case名称的显示长度 https://www.tapd.cn/55049933/s/1463274 Signed-off-by: fit2-zhao <yong.zhao@fit2cloud.com>
This commit is contained in:
parent
746e76ed48
commit
053744c84b
|
@ -1,11 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase, $event)" v-loading="saveLoading">
|
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase, $event)" v-loading="saveLoading">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header style="margin-bottom: 20px; height: 65px">
|
<el-header style="margin-bottom: 20px; height: 70px">
|
||||||
<div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader" class="case-header">
|
<div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader" class="case-header">
|
||||||
<div v-loading="loading && !(apiCase.active || type === 'detail')">
|
<div v-loading="loading && !(apiCase.active || type === 'detail')">
|
||||||
<span @click.stop>
|
<span @click.stop>
|
||||||
<i class="icon el-icon-arrow-right" :class="{ 'is-active': apiCase.active }" @click="active(apiCase)" />
|
|
||||||
<el-input
|
<el-input
|
||||||
v-if="!apiCase.id || isShowInput"
|
v-if="!apiCase.id || isShowInput"
|
||||||
size="small"
|
size="small"
|
||||||
|
@ -13,7 +12,6 @@
|
||||||
:name="index"
|
:name="index"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="ms-api-header-select"
|
class="ms-api-header-select"
|
||||||
style="width: 180px"
|
|
||||||
:readonly="
|
:readonly="
|
||||||
!hasPermissions(
|
!hasPermissions(
|
||||||
'PROJECT_API_DEFINITION:READ+EDIT_CASE',
|
'PROJECT_API_DEFINITION:READ+EDIT_CASE',
|
||||||
|
@ -32,33 +30,31 @@
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<div v-if="apiCase.id" style="color: #999999; font-size: 12px; margin-top: 8px">
|
<div v-if="apiCase.id" style="color: #999999; font-size: 12px; margin-top: 8px">
|
||||||
<span style="margin-left: 10px">
|
<span>
|
||||||
{{ apiCase.updateTime | datetimeFormat }}
|
{{ apiCase.updateTime | datetimeFormat }}
|
||||||
{{ apiCase.updateUser }}
|
{{ apiCase.updateUser }}
|
||||||
{{ $t('api_test.definition.request.update_info') }}
|
{{ $t('api_test.definition.request.update_info') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-item">
|
|
||||||
<el-select
|
|
||||||
size="mini"
|
|
||||||
v-model="apiCase.priority"
|
|
||||||
class="ms-api-select"
|
|
||||||
@change="changePriority(apiCase)"
|
|
||||||
:disabled="readonly">
|
|
||||||
<el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
|
|
||||||
</el-select>
|
|
||||||
<el-select
|
|
||||||
size="mini"
|
|
||||||
v-model="apiCase.caseStatus"
|
|
||||||
style="margin: 0 12px; width: 100px"
|
|
||||||
@change="saveTestCase(apiCase, true)"
|
|
||||||
:disabled="readonly">
|
|
||||||
<el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<div class="flex-item">
|
<div class="flex-item">
|
||||||
<div @click.stop>
|
<div @click.stop>
|
||||||
|
<el-select
|
||||||
|
size="mini"
|
||||||
|
v-model="apiCase.priority"
|
||||||
|
class="ms-api-select"
|
||||||
|
@change="changePriority(apiCase)"
|
||||||
|
:disabled="readonly">
|
||||||
|
<el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
size="mini"
|
||||||
|
v-model="apiCase.caseStatus"
|
||||||
|
style="margin: 0 12px; width: 100px"
|
||||||
|
@change="saveTestCase(apiCase, true)"
|
||||||
|
:disabled="readonly">
|
||||||
|
<el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
:content="$t('commons.follow')"
|
:content="$t('commons.follow')"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
|
@ -150,7 +146,6 @@
|
||||||
<!-- 请求参数-->
|
<!-- 请求参数-->
|
||||||
<el-collapse-transition>
|
<el-collapse-transition>
|
||||||
<div v-if="apiCase.active || type === 'detail'" v-loading="loading">
|
<div v-if="apiCase.active || type === 'detail'" v-loading="loading">
|
||||||
<el-divider></el-divider>
|
|
||||||
<p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
|
<p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
|
||||||
<ms-api-request-form
|
<ms-api-request-form
|
||||||
:isShowEnable="true"
|
:isShowEnable="true"
|
||||||
|
@ -280,8 +275,8 @@ export default {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
if (value.length > 20) {
|
if (value.length > 28) {
|
||||||
return value.slice(0, 20) + '...';
|
return value.slice(0, 28) + '...';
|
||||||
}
|
}
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
|
@ -842,7 +837,7 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
active(item) {
|
active(item) {
|
||||||
item.active = !item.active;
|
item.active = true;
|
||||||
},
|
},
|
||||||
validate(row) {
|
validate(row) {
|
||||||
if (!row.name) {
|
if (!row.name) {
|
||||||
|
@ -1004,8 +999,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-api-header-select {
|
.ms-api-header-select {
|
||||||
margin-left: 20px;
|
min-width: 350px;
|
||||||
min-width: 100px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-selected {
|
.is-selected {
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<el-dialog :visible.sync="isVisible" class="advanced-item-value" width="922px">
|
<el-dialog :visible.sync="isVisible" class="advanced-item-value" width="922px" append-to-body>
|
||||||
<el-tabs tab-position="top" style="width: 100%" v-model="activeName" @tab-click="handleClick">
|
<el-tabs tab-position="top" style="width: 100%" v-model="activeName" @tab-click="handleClick">
|
||||||
<el-tab-pane
|
<el-tab-pane
|
||||||
:label="$t('api_test.home_page.api_details_card.title')+$t('api_test.home_page.test_scene_details_card.title')"
|
:label="
|
||||||
|
$t('api_test.home_page.api_details_card.title') + $t('api_test.home_page.test_scene_details_card.title')
|
||||||
|
"
|
||||||
name="scenario">
|
name="scenario">
|
||||||
<ms-table
|
<ms-table
|
||||||
v-if="!isHasRef"
|
v-if="!isHasRef"
|
||||||
|
@ -15,7 +17,7 @@
|
||||||
:enable-selection="false"
|
:enable-selection="false"
|
||||||
@refresh="search"
|
@refresh="search"
|
||||||
:condition="condition">
|
:condition="condition">
|
||||||
<ms-table-column prop="num" label="ID" sortable width="80"/>
|
<ms-table-column prop="num" label="ID" sortable width="80" />
|
||||||
<ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
|
<ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
|
||||||
<template v-slot:default="{ row }">
|
<template v-slot:default="{ row }">
|
||||||
<el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
|
<el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
|
||||||
|
@ -61,7 +63,7 @@
|
||||||
:enable-selection="false"
|
:enable-selection="false"
|
||||||
@refresh="search"
|
@refresh="search"
|
||||||
:condition="condition">
|
:condition="condition">
|
||||||
<ms-table-column prop="num" label="ID" sortable width="80"/>
|
<ms-table-column prop="num" label="ID" sortable width="80" />
|
||||||
<ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
|
<ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
|
||||||
<template v-slot:default="{ row }">
|
<template v-slot:default="{ row }">
|
||||||
<el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
|
<el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
|
||||||
|
@ -100,7 +102,7 @@
|
||||||
:enable-selection="false"
|
:enable-selection="false"
|
||||||
@refresh="search"
|
@refresh="search"
|
||||||
:condition="condition">
|
:condition="condition">
|
||||||
<ms-table-column prop="num" label="ID" sortable width="80"/>
|
<ms-table-column prop="num" label="ID" sortable width="80" />
|
||||||
<ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
|
<ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
|
||||||
<template v-slot:default="{ row }">
|
<template v-slot:default="{ row }">
|
||||||
<el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
|
<el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
|
||||||
|
@ -130,8 +132,10 @@
|
||||||
</ms-table>
|
</ms-table>
|
||||||
</ms-tab-button>
|
</ms-tab-button>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane v-if="showPlan" :label="$t('api_test.home_page.running_task_list.test_plan_schedule')"
|
<el-tab-pane
|
||||||
name="testPlan">
|
v-if="showPlan"
|
||||||
|
:label="$t('api_test.home_page.running_task_list.test_plan_schedule')"
|
||||||
|
name="testPlan">
|
||||||
<ms-table
|
<ms-table
|
||||||
:data="planData"
|
:data="planData"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
|
@ -167,21 +171,15 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import MsTablePagination from 'metersphere-frontend/src/components/pagination/TablePagination';
|
import MsTablePagination from 'metersphere-frontend/src/components/pagination/TablePagination';
|
||||||
import {
|
import { getOwnerProjectIds, getOwnerProjects, getProject, getUserWorkspace, projectRelated } from '@/api/project';
|
||||||
getOwnerProjectIds,
|
import { getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId } from 'metersphere-frontend/src/utils/token';
|
||||||
getOwnerProjects,
|
import { getUUID } from 'metersphere-frontend/src/utils';
|
||||||
getProject,
|
import { hasLicense } from 'metersphere-frontend/src/utils/permission';
|
||||||
getUserWorkspace,
|
import { getDefinitionReference, getPlanReference } from '@/api/definition';
|
||||||
projectRelated
|
|
||||||
} from '@/api/project';
|
|
||||||
import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from 'metersphere-frontend/src/utils/token';
|
|
||||||
import {getUUID} from 'metersphere-frontend/src/utils';
|
|
||||||
import {hasLicense} from 'metersphere-frontend/src/utils/permission';
|
|
||||||
import {getDefinitionReference, getPlanReference} from '@/api/definition';
|
|
||||||
import MsTable from 'metersphere-frontend/src/components/table/MsTable';
|
import MsTable from 'metersphere-frontend/src/components/table/MsTable';
|
||||||
import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn';
|
import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn';
|
||||||
import MsTabButton from '@/business/commons/MsTabs';
|
import MsTabButton from '@/business/commons/MsTabs';
|
||||||
import {getVersionsByProjectIds} from "@/api/xpack";
|
import { getVersionsByProjectIds } from '@/api/xpack';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ShowReference',
|
name: 'ShowReference',
|
||||||
|
@ -189,8 +187,8 @@ export default {
|
||||||
return {
|
return {
|
||||||
isVisible: false,
|
isVisible: false,
|
||||||
isCopy: true,
|
isCopy: true,
|
||||||
showTextColor: "showTextColor",
|
showTextColor: 'showTextColor',
|
||||||
unShowTextColor: "unShowTextColor",
|
unShowTextColor: 'unShowTextColor',
|
||||||
scenarioData: [],
|
scenarioData: [],
|
||||||
planData: [],
|
planData: [],
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
|
@ -208,7 +206,7 @@ export default {
|
||||||
type: '',
|
type: '',
|
||||||
projectPlanFilters: [],
|
projectPlanFilters: [],
|
||||||
activeDom: 'left',
|
activeDom: 'left',
|
||||||
result: false
|
result: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
@ -226,7 +224,7 @@ export default {
|
||||||
MsTablePagination,
|
MsTablePagination,
|
||||||
MsTable,
|
MsTable,
|
||||||
MsTableColumn,
|
MsTableColumn,
|
||||||
MsTabButton
|
MsTabButton,
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
activeDom() {
|
activeDom() {
|
||||||
|
@ -263,17 +261,19 @@ export default {
|
||||||
if (this.projectFilters.length === 0 || !this.projectFilters.length) {
|
if (this.projectFilters.length === 0 || !this.projectFilters.length) {
|
||||||
this.versionFilters = [];
|
this.versionFilters = [];
|
||||||
} else {
|
} else {
|
||||||
this.versionFilters = response.data.filter((version) => {
|
this.versionFilters = response.data
|
||||||
return data.listObject.find((i) => i.versionId === version.id);
|
.filter((version) => {
|
||||||
}).map((u) => {
|
return data.listObject.find((i) => i.versionId === version.id);
|
||||||
return {text: u.name + "-" + this.getProjectName(u.projectId), value: u.id};
|
})
|
||||||
});
|
.map((u) => {
|
||||||
|
return { text: u.name + '-' + this.getProjectName(u.projectId), value: u.id };
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getProjectName(id) {
|
getProjectName(id) {
|
||||||
let name
|
let name;
|
||||||
for (let item of this.projectFilters) {
|
for (let item of this.projectFilters) {
|
||||||
if (item.value === id) {
|
if (item.value === id) {
|
||||||
name = item.text;
|
name = item.text;
|
||||||
|
@ -318,7 +318,7 @@ export default {
|
||||||
return data.listObject.find((i) => i.workspaceId === workspace.id);
|
return data.listObject.find((i) => i.workspaceId === workspace.id);
|
||||||
})
|
})
|
||||||
.map((e) => {
|
.map((e) => {
|
||||||
return {text: e.name, value: e.id};
|
return { text: e.name, value: e.id };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
let workspaceIds = [];
|
let workspaceIds = [];
|
||||||
|
@ -337,13 +337,13 @@ export default {
|
||||||
}
|
}
|
||||||
getOwnerProjects().then((res) => {
|
getOwnerProjects().then((res) => {
|
||||||
this.projectFilters = res.data
|
this.projectFilters = res.data
|
||||||
.filter((project) => {
|
.filter((project) => {
|
||||||
return data.listObject.find((i) => i.projectId === project.id);
|
return data.listObject.find((i) => i.projectId === project.id);
|
||||||
})
|
})
|
||||||
.map((e) => {
|
.map((e) => {
|
||||||
return {text: e.name, value: e.id};
|
return { text: e.name, value: e.id };
|
||||||
});
|
});
|
||||||
let map = res.data.map(item => item.id);
|
let map = res.data.map((item) => item.id);
|
||||||
this.getVersionOptions(map, data);
|
this.getVersionOptions(map, data);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -362,11 +362,11 @@ export default {
|
||||||
if (this.activeName === 'scenario') {
|
if (this.activeName === 'scenario') {
|
||||||
if (!this.condition.refType) {
|
if (!this.condition.refType) {
|
||||||
if (!this.isHasRef) {
|
if (!this.isHasRef) {
|
||||||
this.condition.refType = "Copy"
|
this.condition.refType = 'Copy';
|
||||||
this.activeDom = 'left'
|
this.activeDom = 'left';
|
||||||
} else {
|
} else {
|
||||||
this.condition.refType = "REF"
|
this.condition.refType = 'REF';
|
||||||
this.activeDom = 'right'
|
this.activeDom = 'right';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.getReferenceData(this.condition);
|
this.getReferenceData(this.condition);
|
||||||
|
@ -379,7 +379,7 @@ export default {
|
||||||
return data.listObject.find((i) => i.projectId === project.id);
|
return data.listObject.find((i) => i.projectId === project.id);
|
||||||
})
|
})
|
||||||
.map((e) => {
|
.map((e) => {
|
||||||
return {text: e.name, value: e.id};
|
return { text: e.name, value: e.id };
|
||||||
});
|
});
|
||||||
this.planData = data.listObject || [];
|
this.planData = data.listObject || [];
|
||||||
});
|
});
|
||||||
|
@ -448,10 +448,10 @@ export default {
|
||||||
},
|
},
|
||||||
getScenarioData() {
|
getScenarioData() {
|
||||||
if (this.activeDom === 'left') {
|
if (this.activeDom === 'left') {
|
||||||
this.condition.refType = 'Copy'
|
this.condition.refType = 'Copy';
|
||||||
this.getReferenceData(this.condition);
|
this.getReferenceData(this.condition);
|
||||||
} else {
|
} else {
|
||||||
this.condition.refType = 'REF'
|
this.condition.refType = 'REF';
|
||||||
this.getReferenceData(this.condition);
|
this.getReferenceData(this.condition);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue