refactor: 场景组件点击名称编辑自动获取焦点

This commit is contained in:
chenjianxing 2021-01-18 20:35:34 +08:00
parent 2baa9682e1
commit 8589eeb47b
5 changed files with 32 additions and 33 deletions

@ -1 +1 @@
Subproject commit 36116c1bff736377e6b8a3b828c5fa9bd8b2f2f8
Subproject commit f27d1609d77f7d6c988d37d709466e844d350e17

View File

@ -11,13 +11,14 @@
<slot name="headerLeft">
<i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"
@click="active(data)"/>
<el-input :draggable="draggable" v-if="!data.name || isShowInput" size="small" v-model="data.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
<el-input :draggable="draggable" v-if="isShowInput && isShowNameInput" size="small" v-model="data.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
<span v-else>
{{data.name}}
<i class="el-icon-edit" style="cursor:pointer" @click="isShowInput = true" v-tester/>
<i class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester/>
</span>
</slot>
<slot name="behindHeaderLeft"></slot>
</span>
<div class="header-right" @click.stop>
@ -71,8 +72,19 @@
return true
}
},
isShowNameInput: {
type: Boolean,
default() {
return true
}
},
title: String
},
created() {
if (!this.data.name) {
this.isShowInput = true;
}
},
methods: {
active() {
this.$set(this.data, 'active', !this.data.active);
@ -83,6 +95,12 @@
},
remove() {
this.$emit('remove');
},
editName() {
this.isShowInput = true;
this.$nextTick(() => {
this.$refs.nameEdit.focus();
});
}
}
}

View File

@ -3,28 +3,17 @@
v-loading="loading"
@copy="copyRow"
@remove="remove"
:is-show-name-input="!isDeletedOrRef"
:data="request"
:draggable="true"
:color="displayColor.color"
:background-color="displayColor.backgroundColor"
:title="displayTitle">
<template v-slot:headerLeft>
<slot name="headerLeft">
<i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
@click="active(request)"/>
<el-input draggable v-if="(isShowInput || !request.name) && !isDeletedOrRef" size="small" v-model="request.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
<span v-else>
{{request.name}}
<i v-if="!isDeletedOrRef" class="el-icon-edit" style="cursor:pointer" @click="isShowInput = true" v-tester/>
</span>
</slot>
<template v-slot:behindHeaderLeft>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
<ms-run :debug="false" :reportId="reportId" :run-data="runData"
@runRefresh="runRefresh" ref="runTest"/>

View File

@ -5,20 +5,12 @@
@remove="remove"
:data="scenario"
:show-collapse="false"
:is-show-name-input="!isDeletedOrRef"
color="#606266"
background-color="#F4F4F5"
:title="$t('api_test.automation.scenario_import')">
<template v-slot:headerLeft>
<slot name="headerLeft">
<el-input v-if="(isShowInput || !scenario.name) && !isDeletedOrRef" size="small" v-model="scenario.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
<span v-else>
{{scenario.name}}
<i v-if="!isDeletedOrRef" class="el-icon-edit" style="cursor:pointer" @click="isShowInput = true" v-tester/>
</span>
</slot>
<template v-slot:behindHeaderLeft>
<el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>

@ -1 +1 @@
Subproject commit 3d96d7c61bc50f32f18311d23f447663e02d7d44
Subproject commit 7d43154a7c19732407a8e9ace8a7d1ea13c91f36