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

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>

View File

@ -2,10 +2,12 @@
<el-card class="api-component">
<div class="header" @click="active(data)">
<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 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">

View File

@ -1,70 +1,76 @@
<template>
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
<el-row>
<el-col :span="4">
<div @click="active(apiCase)">
<el-row>
<el-col :span="4">
<el-checkbox v-model="apiCase.selected"/>
<el-checkbox v-model="apiCase.selected"/>
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{ index + 1 }}</div>
</div>
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{ index + 1 }}</div>
</div>
<label class="ms-api-label">{{ $t('test_track.case.priority') }}</label>
<el-select size="small" v-model="apiCase.priority" class="ms-api-select" @change="changePriority(apiCase)">
<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-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')"/>
<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">{{ $t('test_track.case.priority') }}</label>
<el-select size="small" v-model="apiCase.priority" class="ms-api-select" @change="changePriority(apiCase)">
<el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
</el-select>
</el-col>
<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)"/>
<div v-if="apiCase.id" style="color: #999999;font-size: 12px">
<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')" ref="nameEdit"/>
<span v-else>
{{ apiCase.id ? apiCase.name : '' }}
<i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
</span>
</span>
<div v-if="apiCase.id" style="color: #999999;font-size: 12px">
<span>
{{ apiCase.createTime | timestampFormatDate }}
{{ apiCase.createUser }} {{ $t('api_test.definition.request.create_info') }}
</span>
<span>
<span>
{{ apiCase.updateTime | timestampFormatDate }}
{{ apiCase.updateUser }} {{ $t('api_test.definition.request.update_info') }}
</span>
</div>
</el-col>
</div>
</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/>
<ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
<ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
<ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" v-tester/>
</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="3">
<el-link type="danger" v-if="apiCase.execResult && apiCase.execResult==='error'" @click="showExecResult(apiCase)">
{{ getResult(apiCase.execResult) }}
</el-link>
<el-link v-else-if="apiCase.execResult && apiCase.execResult==='success'" @click="showExecResult(apiCase)">
{{ getResult(apiCase.execResult) }}
</el-link>
<div v-else> {{ getResult(apiCase.execResult) }}</div>
<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/>
<ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
<ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
<ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" v-tester/>
</el-col>
<el-col :span="3">
<el-link type="danger" v-if="apiCase.execResult && apiCase.execResult==='error'" @click="showExecResult(apiCase)">
{{ getResult(apiCase.execResult) }}
</el-link>
<el-link v-else-if="apiCase.execResult && apiCase.execResult==='success'" @click="showExecResult(apiCase)">
{{ getResult(apiCase.execResult) }}
</el-link>
<div v-else> {{ getResult(apiCase.execResult) }}</div>
<div v-if="apiCase.id" style="color: #999999;font-size: 12px">
<span> {{ apiCase.execTime | timestampFormatDate }}</span>
{{ apiCase.updateUser }}
</div>
</el-col>
</el-row>
</div>
<div v-if="apiCase.id" style="color: #999999;font-size: 12px">
<span> {{ apiCase.execTime | timestampFormatDate }}</span>
{{ apiCase.updateUser }}
</div>
</el-col>
</el-row>
<!-- 请求参数-->
<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>