refactor: 用例列表页面优化
This commit is contained in:
chenjianxing
parent
ed349c5071
commit
23a92b8e19
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,12 @@
|
||||||
<el-card class="api-component">
|
<el-card class="api-component">
|
||||||
<div class="header" @click="active(data)">
|
<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}">
|
<slot name="beforeHeaderLeft">
|
||||||
<div class="el-step__icon-inner">{{data.index}}</div>
|
<div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
|
||||||
</div>
|
<div class="el-step__icon-inner">{{data.index}}</div>
|
||||||
<el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
|
</div>
|
||||||
|
<el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
|
||||||
|
</slot>
|
||||||
|
|
||||||
<span @click.stop>
|
<span @click.stop>
|
||||||
<slot name="headerLeft">
|
<slot name="headerLeft">
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,76 @@
|
||||||
<template>
|
<template>
|
||||||
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
|
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
|
||||||
<el-row>
|
<div @click="active(apiCase)">
|
||||||
<el-col :span="4">
|
<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 is-text ms-api-col">
|
||||||
<div class="el-step__icon-inner">{{ index + 1 }}</div>
|
<div class="el-step__icon-inner">{{ index + 1 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="ms-api-label">{{ $t('test_track.case.priority') }}</label>
|
<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-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-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-col>
|
</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" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
|
<el-col :span="8">
|
||||||
<ms-input-tag :currentScenario="apiCase" ref="tag" style="float: right;margin-right: 215px;margin-top: -3px;" @keyup.enter.native="saveTestCase(apiCase)"/>
|
<span @click.stop>
|
||||||
|
<i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}" @click="active(apiCase)"/>
|
||||||
<div v-if="apiCase.id" style="color: #999999;font-size: 12px">
|
<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>
|
<span>
|
||||||
{{ apiCase.createTime | timestampFormatDate }}
|
{{ apiCase.createTime | timestampFormatDate }}
|
||||||
{{ apiCase.createUser }} {{ $t('api_test.definition.request.create_info') }}
|
{{ apiCase.createUser }} {{ $t('api_test.definition.request.create_info') }}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
{{ apiCase.updateTime | timestampFormatDate }}
|
{{ apiCase.updateTime | timestampFormatDate }}
|
||||||
{{ apiCase.updateUser }} {{ $t('api_test.definition.request.update_info') }}
|
{{ apiCase.updateUser }} {{ $t('api_test.definition.request.update_info') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="4">
|
<el-col class="tag-item" :span="4">
|
||||||
<ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
|
<span class="ms-api-label tag-label">{{ $t('commons.tag') }}</span>
|
||||||
style="background-color: #409EFF;color: white" size="mini" :disabled="!apiCase.id" circle v-tester/>
|
<ms-input-tag :currentScenario="apiCase" ref="tag" @keyup.enter.native="saveTestCase(apiCase)"/>
|
||||||
<ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
|
</el-col>
|
||||||
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-col :span="4">
|
||||||
<el-link type="danger" v-if="apiCase.execResult && apiCase.execResult==='error'" @click="showExecResult(apiCase)">
|
<ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
|
||||||
{{ getResult(apiCase.execResult) }}
|
style="background-color: #409EFF;color: white" size="mini" :disabled="!apiCase.id" circle v-tester/>
|
||||||
</el-link>
|
<ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
|
||||||
<el-link v-else-if="apiCase.execResult && apiCase.execResult==='success'" @click="showExecResult(apiCase)">
|
size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
|
||||||
{{ getResult(apiCase.execResult) }}
|
<ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
|
||||||
</el-link>
|
size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
|
||||||
<div v-else> {{ getResult(apiCase.execResult) }}</div>
|
<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>
|
<el-collapse-transition>
|
||||||
<div v-if="apiCase.active">
|
<div v-if="apiCase.active">
|
||||||
|
|
@ -241,6 +247,9 @@
|
||||||
this.isShowInput = true;
|
this.isShowInput = true;
|
||||||
row.active = true;
|
row.active = true;
|
||||||
this.active(row);
|
this.active(row);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.nameEdit.focus();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
active(item) {
|
active(item) {
|
||||||
item.active = !item.active;
|
item.active = !item.active;
|
||||||
|
|
@ -304,4 +313,20 @@
|
||||||
.is-selected {
|
.is-selected {
|
||||||
background: #EFF7FF;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue