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

refactor: 用例列表页面优化

This commit is contained in:
chenjianxing 2021-01-20 11:06:03 +08:00
parent ed349c5071
commit 23a92b8e19
3 changed files with 83 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/business/components/api/automation/scenario/MsInputTag.vue
View File

@ -1,5 +1,5 @@
<template>
<input-tag v-model="data" placeholder="输入回车添加" class="ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
<input-tag v-model="data" placeholder="输入回车添加" class="ms-tag-input ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
</template>
<script>

2
frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
View File

@ -2,10 +2,12 @@
<el-card class="api-component">
<div class="header" @click="active(data)">
<slot name="beforeHeaderLeft">
<div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
<div class="el-step__icon-inner">{{data.index}}</div>
</div>
<el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
</slot>
<span @click.stop>
<slot name="headerLeft">

41
frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
View File

@ -1,5 +1,6 @@
<template>
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
<div @click="active(apiCase)">
<el-row>
<el-col :span="4">
@ -14,20 +15,18 @@
<el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
</el-select>
</el-col>
<el-col :span="12">
<i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}"
@click="active(apiCase)"/>
<el-col :span="8">
<span @click.stop>
<i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}" @click="active(apiCase)"/>
<el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
class="ms-api-header-select" style="width: 180px"
@blur="saveTestCase(apiCase)" :placeholder="$t('commons.input_name')"/>
@blur="saveTestCase(apiCase)" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
<span v-else>
{{ apiCase.id ? apiCase.name : '' }}
<i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
</span>
<label class="ms-api-label" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
<ms-input-tag :currentScenario="apiCase" ref="tag" style="float: right;margin-right: 215px;margin-top: -3px;" @keyup.enter.native="saveTestCase(apiCase)"/>
</span>
<div v-if="apiCase.id" style="color: #999999;font-size: 12px">
<span>
{{ apiCase.createTime | timestampFormatDate }}
@ -40,6 +39,11 @@
</div>
</el-col>
<el-col class="tag-item" :span="4">
<span class="ms-api-label tag-label">{{ $t('commons.tag') }}</span>
<ms-input-tag :currentScenario="apiCase" ref="tag" @keyup.enter.native="saveTestCase(apiCase)"/>
</el-col>
<el-col :span="4">
<ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
style="background-color: #409EFF;color: white" size="mini" :disabled="!apiCase.id" circle v-tester/>
@ -65,6 +69,8 @@
</div>
</el-col>
</el-row>
</div>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="apiCase.active">
@ -241,6 +247,9 @@
this.isShowInput = true;
row.active = true;
this.active(row);
this.$nextTick(() => {
this.$refs.nameEdit.focus();
});
},
active(item) {
item.active = !item.active;
@ -304,4 +313,20 @@
.is-selected {
background: #EFF7FF;
}
.ms-tag-input {
/*display: inline-block;*/
/*height: 32px;*/
/*box-sizing: border-box;*/
}
.tag-item {
/*height: 30px;*/
/*line-height: 30px;*/
}
.tag-label {
/*height: 32px;*/
/*line-height: 32px;*/
}
</style>