style(接口定义): 统一TAG 样式
This commit is contained in:
fit2-zhao
parent
bf0bff3b0a
commit
73f98975cc
|
|
@ -72,7 +72,7 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="Tag" prop="tags">
|
||||
<el-form-item :label="$t('api_test.automation.tag')" prop="tags">
|
||||
<ms-input-tag :currentScenario="currentScenario" ref="tag"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,165 @@
|
|||
<template>
|
||||
<input-tag v-model="data" placeholder="输入回车添加标签" class="ms-tag-input ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
|
||||
<div
|
||||
class="el-input-tag input-tag-wrapper"
|
||||
:class="[size ? 'el-input-tag--' + size : '']"
|
||||
style="height: auto"
|
||||
@click="foucusTagInput">
|
||||
<el-tag
|
||||
v-for="(tag, idx) in innerTags"
|
||||
v-bind="$attrs"
|
||||
type="info"
|
||||
:key="tag"
|
||||
:size="size"
|
||||
:closable="!readOnly"
|
||||
:disable-transitions="false"
|
||||
@close="remove(idx)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<input
|
||||
v-if="!readOnly"
|
||||
class="tag-input el-input"
|
||||
v-model="newTag"
|
||||
placeholder="输入回车添加"
|
||||
@keydown.delete.stop="removeLastTag"
|
||||
@keydown="addNew"
|
||||
@blur="addNew"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InputTag from 'vue-input-tag'
|
||||
|
||||
export default {
|
||||
name: "MsInputTag",
|
||||
components: {InputTag},
|
||||
props: {currentScenario: {}},
|
||||
created() {
|
||||
if (!this.currentScenario.tags) {
|
||||
this.currentScenario.tags = [];
|
||||
}
|
||||
this.data = this.currentScenario.tags;
|
||||
name: 'MsInputTag',
|
||||
props: {
|
||||
currentScenario: {},
|
||||
addTagOnKeys: {
|
||||
type: Array,
|
||||
default: () => [13, 188, 9]
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {type: String, default: "small"}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
newTag: '',
|
||||
innerTags: [...this.currentScenario.tags]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
this.currentScenario.tags = this.data;
|
||||
innerTags() {
|
||||
this.currentScenario.tags = this.innerTags;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
foucusTagInput() {
|
||||
if (this.readOnly || !this.$el.querySelector('.tag-input')) {
|
||||
console.log()
|
||||
} else {
|
||||
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 addSuucess = false
|
||||
if (this.newTag.includes(',')) {
|
||||
this.newTag.split(',').forEach(item => {
|
||||
if (this.addTag(item.trim())) {
|
||||
addSuucess = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (this.addTag(this.newTag.trim())) {
|
||||
addSuucess = true
|
||||
}
|
||||
}
|
||||
if (addSuucess) {
|
||||
this.tagChange()
|
||||
this.newTag = ''
|
||||
}
|
||||
},
|
||||
addTag(tag) {
|
||||
tag = tag.trim()
|
||||
if (tag && !this.innerTags.includes(tag)) {
|
||||
this.innerTags.push(tag)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
remove(index) {
|
||||
this.innerTags.splice(index, 1)
|
||||
this.tagChange()
|
||||
},
|
||||
removeLastTag() {
|
||||
if (this.newTag) {
|
||||
return
|
||||
}
|
||||
this.innerTags.pop()
|
||||
this.tagChange()
|
||||
},
|
||||
tagChange() {
|
||||
this.$emit('input', this.innerTags)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ms-input-tag-wrapper >>> .vue-input-tag-wrapper {
|
||||
border-radius: 2px;
|
||||
border: 1px solid #a5d24a;
|
||||
color: #909399;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ms-input-remove >>> .remove {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.ms-input-div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ms-input >>> .input-tag {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
min-width: auto;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
.input-tag-wrapper {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
border-color: #909399;
|
||||
color: #909399;
|
||||
width: auto;
|
||||
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 .2s cubic-bezier(.645, .045, .355, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
height: 23px;
|
||||
padding: 0 5px;
|
||||
line-height: 19px;
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -53,12 +53,12 @@
|
|||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('commons.tag')" prop="tag">
|
||||
<ms-input-tag :currentScenario="basicForm" ref="tag"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('commons.description')" prop="description">
|
||||
<el-input class="ms-http-textarea"
|
||||
v-model="basicForm.description"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="card-container">
|
||||
<el-card class="card-content" v-loading="httpForm.loading">
|
||||
|
||||
<el-form :model="httpForm" :rules="rule" ref="httpForm" :inline="true" label-position="right">
|
||||
<el-form :model="httpForm" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
|
||||
<!-- 操作按钮 -->
|
||||
<div style="float: right;margin-right: 20px">
|
||||
<el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
|
||||
|
|
@ -34,6 +34,20 @@
|
|||
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
|
||||
<el-select v-model="httpForm.userId"
|
||||
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
|
||||
class="ms-http-select">
|
||||
<el-option
|
||||
v-for="item in maintainerOptions"
|
||||
:key="item.id"
|
||||
:label="item.id + ' (' + item.name + ')'"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item :label="$t('test_track.module.module')" prop="moduleId">
|
||||
<el-select class="ms-http-select" size="small" v-model="httpForm.moduleId">
|
||||
<div v-if="moduleOptions.length>0">
|
||||
|
|
@ -51,21 +65,8 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
|
||||
<el-select v-model="httpForm.userId"
|
||||
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
|
||||
class="ms-http-select">
|
||||
<el-option
|
||||
v-for="item in maintainerOptions"
|
||||
:key="item.id"
|
||||
:label="item.id + ' (' + item.name + ')'"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
|
||||
<el-col :span="7">
|
||||
<el-form-item :label="$t('commons.status')" prop="status">
|
||||
<el-select class="ms-http-select" size="small" v-model="httpForm.status">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
|
||||
|
|
@ -73,7 +74,6 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('commons.tag')" prop="tag">
|
||||
|
|
@ -109,167 +109,167 @@
|
|||
|
||||
<script>
|
||||
|
||||
import MsApiRequestForm from "../request/http/ApiHttpRequestForm";
|
||||
import MsResponseText from "../response/ResponseText";
|
||||
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
|
||||
import {API_STATUS, REQ_METHOD} from "../../model/JsonData";
|
||||
import {KeyValue} from "../../model/ApiTestModel";
|
||||
import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
|
||||
import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
|
||||
import MsApiRequestForm from "../request/http/ApiHttpRequestForm";
|
||||
import MsResponseText from "../response/ResponseText";
|
||||
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
|
||||
import {API_STATUS, REQ_METHOD} from "../../model/JsonData";
|
||||
import {KeyValue} from "../../model/ApiTestModel";
|
||||
import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
|
||||
import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
|
||||
|
||||
export default {
|
||||
name: "MsAddCompleteHttpApi",
|
||||
components: {MsJsr233Processor, MsResponseText, MsApiRequestForm, MsInputTag},
|
||||
data() {
|
||||
let validateURL = (rule, value, callback) => {
|
||||
if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
|
||||
callback(this.$t('api_test.definition.request.path_valid_info'));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
return {
|
||||
rule: {
|
||||
name: [
|
||||
{required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
|
||||
{max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
|
||||
],
|
||||
path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}, {
|
||||
validator: validateURL,
|
||||
trigger: 'blur'
|
||||
}],
|
||||
userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
|
||||
moduleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
|
||||
status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
|
||||
},
|
||||
httpForm: {environmentId: "", tags: []},
|
||||
isShowEnable: false,
|
||||
maintainerOptions: [],
|
||||
currentModule: {},
|
||||
reqOptions: REQ_METHOD,
|
||||
options: API_STATUS,
|
||||
}
|
||||
},
|
||||
props: {moduleOptions: {}, request: {}, response: {}, basisData: {}},
|
||||
methods: {
|
||||
runTest() {
|
||||
this.$refs['httpForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.setParameter();
|
||||
this.$emit('runTest', this.httpForm);
|
||||
} else {
|
||||
return false;
|
||||
export default {
|
||||
name: "MsAddCompleteHttpApi",
|
||||
components: {MsJsr233Processor, MsResponseText, MsApiRequestForm, MsInputTag},
|
||||
data() {
|
||||
let validateURL = (rule, value, callback) => {
|
||||
if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
|
||||
callback(this.$t('api_test.definition.request.path_valid_info'));
|
||||
}
|
||||
})
|
||||
},
|
||||
getMaintainerOptions() {
|
||||
let workspaceId = localStorage.getItem(WORKSPACE_ID);
|
||||
this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
|
||||
this.maintainerOptions = response.data;
|
||||
});
|
||||
},
|
||||
setParameter() {
|
||||
this.httpForm.modulePath = this.getPath(this.httpForm.moduleId);
|
||||
this.request.path = this.httpForm.path;
|
||||
this.request.method = this.httpForm.method;
|
||||
this.httpForm.request.useEnvironment = undefined;
|
||||
if (this.httpForm.tags instanceof Array) {
|
||||
this.httpForm.tags = JSON.stringify(this.httpForm.tags);
|
||||
callback();
|
||||
};
|
||||
return {
|
||||
rule: {
|
||||
name: [
|
||||
{required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
|
||||
{max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
|
||||
],
|
||||
path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}, {
|
||||
validator: validateURL,
|
||||
trigger: 'blur'
|
||||
}],
|
||||
userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
|
||||
moduleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
|
||||
status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
|
||||
},
|
||||
httpForm: {environmentId: "", tags: []},
|
||||
isShowEnable: false,
|
||||
maintainerOptions: [],
|
||||
currentModule: {},
|
||||
reqOptions: REQ_METHOD,
|
||||
options: API_STATUS,
|
||||
}
|
||||
},
|
||||
saveApi() {
|
||||
this.$refs['httpForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.setParameter();
|
||||
this.$emit('saveApi', this.httpForm);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
createModules() {
|
||||
this.$emit("createRootModelInTree");
|
||||
},
|
||||
getPath(id) {
|
||||
if (id === null) {
|
||||
return null;
|
||||
}
|
||||
let path = this.moduleOptions.filter(function (item) {
|
||||
return item.id === id ? item.path : "";
|
||||
});
|
||||
return path[0].path;
|
||||
},
|
||||
urlChange() {
|
||||
if (!this.httpForm.path || this.httpForm.path.indexOf('?') === -1) return;
|
||||
let url = this.getURL(this.addProtocol(this.httpForm.path));
|
||||
if (url) {
|
||||
this.httpForm.path = decodeURIComponent(this.httpForm.path.substr(0,this.httpForm.path.indexOf("?")));
|
||||
}
|
||||
},
|
||||
addProtocol(url) {
|
||||
if (url) {
|
||||
if (!url.toLowerCase().startsWith("https") && !url.toLowerCase().startsWith("http")) {
|
||||
return "https://" + url;
|
||||
}
|
||||
}
|
||||
return url;
|
||||
},
|
||||
getURL(urlStr) {
|
||||
try {
|
||||
let url = new URL(urlStr);
|
||||
url.searchParams.forEach((value, key) => {
|
||||
if (key && value) {
|
||||
this.request.arguments.splice(0, 0, new KeyValue({name: key, required: false, value: value}));
|
||||
props: {moduleOptions: {}, request: {}, response: {}, basisData: {}},
|
||||
methods: {
|
||||
runTest() {
|
||||
this.$refs['httpForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.setParameter();
|
||||
this.$emit('runTest', this.httpForm);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
getMaintainerOptions() {
|
||||
let workspaceId = localStorage.getItem(WORKSPACE_ID);
|
||||
this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
|
||||
this.maintainerOptions = response.data;
|
||||
});
|
||||
},
|
||||
setParameter() {
|
||||
this.httpForm.modulePath = this.getPath(this.httpForm.moduleId);
|
||||
this.request.path = this.httpForm.path;
|
||||
this.request.method = this.httpForm.method;
|
||||
this.httpForm.request.useEnvironment = undefined;
|
||||
if (this.httpForm.tags instanceof Array) {
|
||||
this.httpForm.tags = JSON.stringify(this.httpForm.tags);
|
||||
}
|
||||
},
|
||||
saveApi() {
|
||||
this.$refs['httpForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.setParameter();
|
||||
this.$emit('saveApi', this.httpForm);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
createModules() {
|
||||
this.$emit("createRootModelInTree");
|
||||
},
|
||||
getPath(id) {
|
||||
if (id === null) {
|
||||
return null;
|
||||
}
|
||||
let path = this.moduleOptions.filter(function (item) {
|
||||
return item.id === id ? item.path : "";
|
||||
});
|
||||
return path[0].path;
|
||||
},
|
||||
urlChange() {
|
||||
if (!this.httpForm.path || this.httpForm.path.indexOf('?') === -1) return;
|
||||
let url = this.getURL(this.addProtocol(this.httpForm.path));
|
||||
if (url) {
|
||||
this.httpForm.path = decodeURIComponent(this.httpForm.path.substr(0, this.httpForm.path.indexOf("?")));
|
||||
}
|
||||
},
|
||||
addProtocol(url) {
|
||||
if (url) {
|
||||
if (!url.toLowerCase().startsWith("https") && !url.toLowerCase().startsWith("http")) {
|
||||
return "https://" + url;
|
||||
}
|
||||
}
|
||||
return url;
|
||||
} catch (e) {
|
||||
this.$error(this.$t('api_test.request.url_invalid'), 2000);
|
||||
}
|
||||
},
|
||||
getURL(urlStr) {
|
||||
try {
|
||||
let url = new URL(urlStr);
|
||||
url.searchParams.forEach((value, key) => {
|
||||
if (key && value) {
|
||||
this.request.arguments.splice(0, 0, new KeyValue({name: key, required: false, value: value}));
|
||||
}
|
||||
});
|
||||
return url;
|
||||
} catch (e) {
|
||||
this.$error(this.$t('api_test.request.url_invalid'), 2000);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getMaintainerOptions();
|
||||
if (!this.basisData.environmentId) {
|
||||
this.basisData.environmentId = "";
|
||||
created() {
|
||||
this.getMaintainerOptions();
|
||||
if (!this.basisData.environmentId) {
|
||||
this.basisData.environmentId = "";
|
||||
}
|
||||
|
||||
this.httpForm = JSON.parse(JSON.stringify(this.basisData));
|
||||
}
|
||||
|
||||
this.httpForm = JSON.parse(JSON.stringify(this.basisData));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.base-info .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
.base-info .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.base-info .el-form-item >>> .el-form-item__content {
|
||||
width: 80%;
|
||||
}
|
||||
.base-info .el-form-item >>> .el-form-item__content {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.base-info .ms-http-select {
|
||||
width: 100%;
|
||||
}
|
||||
.base-info .ms-http-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 3px 5px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #783887;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.tip {
|
||||
padding: 3px 5px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #783887;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.ms-http-textarea {
|
||||
width: 400px;
|
||||
}
|
||||
.ms-http-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ms-left-cell {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.ms-left-cell {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.ms-left-buttion {
|
||||
margin: 6px 0px 8px 30px;
|
||||
}
|
||||
.ms-left-buttion {
|
||||
margin: 6px 0px 8px 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue