refactor(测试跟踪): 用例编辑名称显示优化
This commit is contained in:
chenjianxing
fit2-zhao
parent
ce66e06bd1
commit
3f7ffeb0d8
|
|
@ -5,10 +5,17 @@
|
|||
<!-- 创建 or 编辑用例 -->
|
||||
<div class="edit-header-container">
|
||||
<div class="header-content-row">
|
||||
<div :class="'case-name'">
|
||||
{{ !editable ? form.name : editableState ? $t('test_track.case.edit_case') : $t('test_track.case.create_case') }}
|
||||
</div>
|
||||
<div class="case-edit" v-if="!editable">
|
||||
|
||||
<!-- 用例名称展示与编辑 -->
|
||||
<test-case-edit-name-view
|
||||
:is-add="isAdd"
|
||||
:editable-state="editableState"
|
||||
:is-name-edit.sync="isNameEdit"
|
||||
:form="form"
|
||||
@save="saveCaseWithoutRefresh"
|
||||
/>
|
||||
|
||||
<div class="case-edit" v-show="!isNameEdit && !editable">
|
||||
<div class="case-level" v-if="!isPublicShow">
|
||||
<priority-table-item :value="form.priority" />
|
||||
</div>
|
||||
|
|
@ -389,11 +396,13 @@ import {getProject, versionEnableByProjectId} from "@/api/project";
|
|||
import {openCaseEdit} from "@/business/case/test-case";
|
||||
import ListItemDeleteConfirm from "metersphere-frontend/src/components/ListItemDeleteConfirm";
|
||||
import CaseDiffSideViewer from "./case/diff/CaseDiffSideViewer";
|
||||
import TestCaseEditNameView from "@/business/case/components/head/TestCaseEditNameView";
|
||||
|
||||
const store = useStore();
|
||||
export default {
|
||||
name: "TestCaseEdit",
|
||||
components: {
|
||||
TestCaseEditNameView,
|
||||
PriorityTableItem,
|
||||
CaseEditInfoComponent,
|
||||
CaseBaseInfo,
|
||||
|
|
@ -442,6 +451,7 @@ export default {
|
|||
type: "",
|
||||
form: {
|
||||
name: "",
|
||||
num: '',
|
||||
module: "default-module",
|
||||
nodePath: "/未规划用例",
|
||||
maintainer: getCurrentUser().id,
|
||||
|
|
@ -571,7 +581,8 @@ export default {
|
|||
saveType: 1,
|
||||
projectId: null,
|
||||
createVersionId: null,
|
||||
editableState: false
|
||||
editableState: false,
|
||||
isNameEdit: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -635,6 +646,12 @@ export default {
|
|||
},
|
||||
showAddBtn() {
|
||||
return this.isAdd || this.showPublic;
|
||||
},
|
||||
titleNum() {
|
||||
if (!this.form.num) {
|
||||
return '';
|
||||
}
|
||||
return '【' + (this.isCustomNum ? this.form.customNum : this.form.num) + '】';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -1193,6 +1210,15 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
saveCaseWithoutRefresh() {
|
||||
if (this.validateForm()) {
|
||||
let param = this.buildParam();
|
||||
if (this.validate(param)) {
|
||||
let option = this.getOption(param);
|
||||
this.$request(option);
|
||||
}
|
||||
}
|
||||
},
|
||||
_saveCase(isAddPublic) {
|
||||
let param = this.buildParam();
|
||||
if (this.validate(param)) {
|
||||
|
|
@ -1772,9 +1798,11 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
.header-content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
.back {
|
||||
margin-left: px2rem(24);
|
||||
width: px2rem(20);
|
||||
|
|
@ -1786,33 +1814,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.case-name {
|
||||
height: px2rem(24);
|
||||
font-size: 16px;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: px2rem(24);
|
||||
color: #1f2329;
|
||||
margin-left: px2rem(8);
|
||||
margin-right: px2rem(8);
|
||||
cursor: pointer;
|
||||
max-width: 800px;
|
||||
/* 文本不会换行显示 */
|
||||
white-space: nowrap;
|
||||
/* 超出盒子部分隐藏 */
|
||||
overflow: hidden;
|
||||
/* 文本超出的部分打点显示 */
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.case-name-hover:hover {
|
||||
cursor: pointer;
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.case-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div class="case-name" :class="isNameEdit ? 'name-input' : 'name-text'">
|
||||
<div v-if="isAdd || editableState" :class="'case-name'">
|
||||
{{ editableState ? $t('test_track.case.edit_case') : $t('test_track.case.create_case') }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="isNameEdit">
|
||||
<el-input
|
||||
:class="{ 'input-error' : showInputError}"
|
||||
size="small"
|
||||
:placeholder="$t('case.please_enter_the_case_name')"
|
||||
v-model="form.name"
|
||||
@blur="handleNameEdit"
|
||||
:maxlength="255"
|
||||
show-word-limit
|
||||
/>
|
||||
</span>
|
||||
<span v-else @click="handleNameClick">
|
||||
{{ titleNum }}
|
||||
{{ form.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useStore} from "@/store";
|
||||
|
||||
export default {
|
||||
name: "TestCaseEditNameView",
|
||||
props: {
|
||||
form: Object,
|
||||
isNameEdit: Boolean,
|
||||
editableState: Boolean,
|
||||
isAdd: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showInputError: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
titleNum() {
|
||||
if (!this.form.num) {
|
||||
return '';
|
||||
}
|
||||
return '【' + (this.isCustomNum ? this.form.customNum : this.form.num) + '】';
|
||||
},
|
||||
isCustomNum() {
|
||||
return useStore().currentProjectIsCustomNum;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNameEdit() {
|
||||
if (!this.form.name) {
|
||||
this.$error(this.$t("test_track.case.input_name"));
|
||||
this.showInputError = true;
|
||||
return;
|
||||
}
|
||||
this.showInputError = false;
|
||||
this.$emit('update:isNameEdit', !this.isNameEdit);
|
||||
this.$emit('save');
|
||||
},
|
||||
handleNameClick() {
|
||||
this.$emit('update:isNameEdit', !this.isNameEdit);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/business/style/index.scss";
|
||||
|
||||
.name-input {
|
||||
width: 80%;
|
||||
}
|
||||
.name-text:hover {
|
||||
cursor: pointer;
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.name-text {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
|
||||
.input-error :deep(.el-input__inner) {
|
||||
border-color: #F56C6C;
|
||||
}
|
||||
|
||||
.case-name {
|
||||
height: px2rem(24);
|
||||
font-size: 16px;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: px2rem(24);
|
||||
color: #1f2329;
|
||||
margin-left: px2rem(8);
|
||||
margin-right: px2rem(8);
|
||||
cursor: pointer;
|
||||
/* 文本不会换行显示 */
|
||||
white-space: nowrap;
|
||||
/* 超出盒子部分隐藏 */
|
||||
overflow: hidden;
|
||||
/* 文本超出的部分打点显示 */
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue