refactor(接口测试): 标签重构
This commit is contained in:
RubyLiu
fit2-zhao
parent
0d935c0bfe
commit
baac86b26c
|
|
@ -17,7 +17,13 @@
|
|||
:key="index"
|
||||
class="ms-api-header-select"
|
||||
style="width: 180px"
|
||||
:readonly="!hasPermissions('PROJECT_API_DEFINITION:READ+EDIT_CASE', 'PROJECT_API_DEFINITION:READ+CREATE_CASE', 'PROJECT_API_DEFINITION:READ+COPY_CASE')"
|
||||
:readonly="
|
||||
!hasPermissions(
|
||||
'PROJECT_API_DEFINITION:READ+EDIT_CASE',
|
||||
'PROJECT_API_DEFINITION:READ+CREATE_CASE',
|
||||
'PROJECT_API_DEFINITION:READ+COPY_CASE'
|
||||
)
|
||||
"
|
||||
:placeholder="$t('commons.input_name')"
|
||||
ref="nameEdit" />
|
||||
<span v-else>
|
||||
|
|
@ -272,7 +278,7 @@ import {
|
|||
_getBodyUploadFiles,
|
||||
hisDataProcessing,
|
||||
mergeRequestDocumentData,
|
||||
stepCompute
|
||||
stepCompute,
|
||||
} from '@/business/definition/api-definition';
|
||||
import { API_METHOD_COLOUR, API_STATUS, PRIORITY } from '../../model/JsonData';
|
||||
import MsTag from 'metersphere-frontend/src/components/MsTag';
|
||||
|
|
@ -284,7 +290,7 @@ import MsSqlBasisParameters from '../request/database/BasisParameters';
|
|||
import TcpFormatParameters from '@/business/definition/components/request/tcp/TcpFormatParameters';
|
||||
import MsDubboBasisParameters from '../request/dubbo/BasisParameters';
|
||||
import MsApiExtendBtns from '../reference/ApiExtendBtns';
|
||||
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
|
||||
import MsInputTag from './MsInputEllipsisTag.vue';
|
||||
import MsRequestResultTail from '../response/RequestResultTail';
|
||||
import ApiResponseComponent from '../../../automation/scenario/component/ApiResponseComponent';
|
||||
import ShowMoreBtn from '@/business/commons/ShowMoreBtn';
|
||||
|
|
@ -293,7 +299,7 @@ import { TYPE_TO_C } from '@/business/automation/scenario/Setting';
|
|||
import ApiCaseHeader from './ApiCaseHeader';
|
||||
import { deepClone } from 'metersphere-frontend/src/utils/tableUtils';
|
||||
import { useApiStore } from '@/store';
|
||||
import {Body, KeyValue} from "@/business/definition/model/ApiTestModel";
|
||||
import { Body, KeyValue } from '@/business/definition/model/ApiTestModel';
|
||||
|
||||
const store = useApiStore();
|
||||
export default {
|
||||
|
|
@ -411,11 +417,15 @@ export default {
|
|||
this.apiCase.request.hashTree[index].document.nodeType = 'Case';
|
||||
this.apiCase.request.hashTree[index].document.apiDefinitionId = this.apiCase.apiDefinitionId;
|
||||
}
|
||||
this.apiCase.request.hashTree.forEach(item =>{
|
||||
this.apiCase.request.hashTree.forEach((item) => {
|
||||
item.projectId = this.apiCase.projectId;
|
||||
})
|
||||
});
|
||||
}
|
||||
this.readonly = !hasPermissions('PROJECT_API_DEFINITION:READ+EDIT_CASE', 'PROJECT_API_DEFINITION:READ+CREATE_CASE', 'PROJECT_API_DEFINITION:READ+COPY_CASE');
|
||||
this.readonly = !hasPermissions(
|
||||
'PROJECT_API_DEFINITION:READ+EDIT_CASE',
|
||||
'PROJECT_API_DEFINITION:READ+CREATE_CASE',
|
||||
'PROJECT_API_DEFINITION:READ+COPY_CASE'
|
||||
);
|
||||
if (this.apiCase && this.apiCase.id) {
|
||||
this.showFollow = false;
|
||||
getApiCaseFollow(this.apiCase.id).then((response) => {
|
||||
|
|
@ -466,7 +476,7 @@ export default {
|
|||
if (v1) {
|
||||
this.saveStatus();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
'apiCase.request': {
|
||||
handler(v) {
|
||||
|
|
@ -475,7 +485,7 @@ export default {
|
|||
this.saveStatus();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
deep: true,
|
||||
},
|
||||
'caseSyncRuleRelation.showUpdateRule': {
|
||||
handler(v) {
|
||||
|
|
@ -1026,7 +1036,7 @@ export default {
|
|||
|
||||
.tag-item {
|
||||
margin-right: 20px;
|
||||
width: 900px;
|
||||
width: 800px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div
|
||||
class="el-input-tag input-tag-wrapper"
|
||||
:class="[size ? 'el-input-tag--' + size : '']"
|
||||
style="height: auto"
|
||||
@click="focusTagInput">
|
||||
<el-tag
|
||||
v-for="(tag, idx) in tagList"
|
||||
v-bind="$attrs"
|
||||
type="info"
|
||||
:key="tag"
|
||||
:size="size"
|
||||
:closable="!readOnly"
|
||||
:disable-transitions="false"
|
||||
@close="remove(idx)">
|
||||
<span v-if="tag && tag.length > 10">
|
||||
<el-tooltip class="item" effect="light" :content="tag" placement="top" :enterable="false">
|
||||
<span>{{ tag && tag.length > 10 ? tag.substring(0, 10) + '...' : tag }}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</el-tag>
|
||||
<el-tooltip :content="tooltipContent" placement="top">
|
||||
<el-tag v-show="showEllipsisTag" type="info" :size="size" :closable="false" :disable-transitions="false">
|
||||
{{ `+${ellipsisCount}` }}
|
||||
</el-tag>
|
||||
</el-tooltip>
|
||||
<input
|
||||
:disabled="readOnly"
|
||||
class="tag-input el-input"
|
||||
v-model="newTag"
|
||||
:placeholder="defaultPlaceHolder"
|
||||
@keydown.delete.stop="removeLastTag"
|
||||
@keydown="addNew"
|
||||
@blur="addNew" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MsInputTag',
|
||||
props: {
|
||||
currentScenario: {},
|
||||
placeholder: {
|
||||
type: String,
|
||||
},
|
||||
errorInfo: String,
|
||||
addTagOnKeys: {
|
||||
type: Array,
|
||||
default: () => [13, 188, 9],
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: { type: String, default: 'small' },
|
||||
prop: {
|
||||
type: String,
|
||||
default: 'tags',
|
||||
},
|
||||
maxShowTagLength: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (!this.currentScenario[this.prop]) {
|
||||
this.currentScenario[this.prop] = [];
|
||||
}
|
||||
if (this.placeholder) {
|
||||
this.defaultPlaceHolder = this.placeholder;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultPlaceHolder: this.$t('commons.tag_tip'),
|
||||
newTag: '',
|
||||
innerTags: this.currentScenario[this.prop] ? [...this.currentScenario[this.prop]] : [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
innerTags() {
|
||||
this.currentScenario[this.prop] = this.innerTags;
|
||||
this.tagChange();
|
||||
},
|
||||
'currentScenario.tags'() {
|
||||
if (this.prop === 'tags') {
|
||||
if (
|
||||
!this.currentScenario[this.prop] ||
|
||||
this.currentScenario[this.prop] === '' ||
|
||||
this.currentScenario[this.prop].length === 0
|
||||
) {
|
||||
if (this.innerTags.length !== 0) {
|
||||
this.innerTags = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tooltipContent() {
|
||||
return this.innerTags.map((item) => item).join(',');
|
||||
},
|
||||
tagList() {
|
||||
return this.innerTags
|
||||
.map((item) => item)
|
||||
.splice(0, this.maxShowTagLength > this.innerTags.length ? this.innerTags.length : this.maxShowTagLength);
|
||||
},
|
||||
showEllipsisTag() {
|
||||
return this.innerTags.length > this.maxShowTagLength;
|
||||
},
|
||||
ellipsisCount() {
|
||||
return this.innerTags.length - this.maxShowTagLength;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focusTagInput() {
|
||||
if (!this.readOnly && this.$el.querySelector('.tag-input')) {
|
||||
this.$el.querySelector('.tag-input').focus();
|
||||
}
|
||||
},
|
||||
addNew(e) {
|
||||
if (e && !this.addTagOnKeys.includes(e.keyCode) && e.type !== 'blur') {
|
||||
return;
|
||||
}
|
||||
if (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
let addSuccess = false;
|
||||
if (this.newTag.includes(',')) {
|
||||
this.newTag.split(',').forEach((item) => {
|
||||
if (this.addTag(item.trim())) {
|
||||
addSuccess = true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this.addTag(this.newTag.trim())) {
|
||||
addSuccess = true;
|
||||
}
|
||||
}
|
||||
if (addSuccess) {
|
||||
this.tagChange();
|
||||
this.newTag = '';
|
||||
}
|
||||
this.$emit('onblur');
|
||||
},
|
||||
addTag(tag) {
|
||||
tag = tag.trim();
|
||||
if (tag && !this.innerTags.includes(tag)) {
|
||||
if (tag.length > 15) {
|
||||
this.$error(this.$t('commons.tag_length_tip'));
|
||||
return false;
|
||||
}
|
||||
this.innerTags.push(tag);
|
||||
return true;
|
||||
} else {
|
||||
if (tag !== '' && this.errorInfo) {
|
||||
this.$error(this.errorInfo);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
remove(index) {
|
||||
this.innerTags.splice(index, 1);
|
||||
this.tagChange();
|
||||
this.$nextTick(() => {
|
||||
//删除tag元素操作是在输入框中去掉元素，也应当触发onblur操作
|
||||
this.$emit('onblur');
|
||||
});
|
||||
},
|
||||
removeLastTag() {
|
||||
if (this.newTag) {
|
||||
return;
|
||||
}
|
||||
this.innerTags.pop();
|
||||
this.tagChange();
|
||||
},
|
||||
tagChange() {
|
||||
this.$emit('input', this.innerTags);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-tag-wrapper {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
padding: 0 10px 0 5px;
|
||||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.tag-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #303133;
|
||||
font-size: 12px;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
|
||||
outline: none;
|
||||
padding-left: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.el-input-tag {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.el-input-tag--mini {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-input-tag--small {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.el-input-tag--medium {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue