diff options
Diffstat (limited to 'test-scheduler/ui/src/components/env_component/service_api.vue')
-rw-r--r-- | test-scheduler/ui/src/components/env_component/service_api.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/test-scheduler/ui/src/components/env_component/service_api.vue b/test-scheduler/ui/src/components/env_component/service_api.vue new file mode 100644 index 00000000..f6f58d2c --- /dev/null +++ b/test-scheduler/ui/src/components/env_component/service_api.vue @@ -0,0 +1,112 @@ +<template> + <div class="panel panel-success"> + <div class="panel-heading"> + <button type="button" class="btn btn-xs btn-danger pull-right" v-on:click="deleteApi(name)">Delete</button> + <h5 class="panel-title"> + <a data-toggle="collapse" data-parent="panelParent" v-bind:href="'#' + name + '-collapse'" style="display:block;">{{ name }}</a> + </h5> + </div> + <div v-bind:id="name + '-collapse'" class="panel-collapse collapse fade"> + <div class="panel-body"> + <base-input name="name" v-model="name"></base-input> + <base-input name="method" v-model="method"></base-input> + <base-input name="baseuri" v-model="baseuri"></base-input> + <api-param v-bind:params="params"></api-param> + <div class="form-group" v-bind:class="{ 'has-error': jsonSyntaxError}"> + <label class="col-lg-3 control-label" id="templateLabel"> + Template <i class="fa fa-question-circle"></i> + </label> + <div class="col-lg-7"> + <!-- help text --> + <span id="tempHelp">Json格式文本,用于定义发送http请求的报文内容。示例如下:<br>( 其中 ((<variable>)) 为占位符,用于替换实际值 )<br>GET方式:<br>{<br> "uri" : "((baseuri))?name=((name))"<br>}<br>POST方式:<br>{<br> "uri" : "((baseuri))",<br> "body" : {<br> "name" : "((name))",<br> "account" : {<br> "id" : "((user_name))",<br> "addr" : "SH"<br> }<br> }<br>}</span> + <textarea class="form-control" style="min-height: 200px;" v-model="templateStr"></textarea> + <span class="help-block" v-show="jsonSyntaxError">Json语法错误,请检查!</span> + </div> + </div> + </div> + </div> + </div> +</template> +<script> +import base_input from "./base_input.vue" +import api_param from "./api_param.vue" +import Vue from "vue" +export default { + props: ['panelParent', 'name', 'method', 'baseuri', 'params', 'template'], + watch: { + name: function(val) { + this.$emit("name", val); + }, + method: function(val) { + this.$emit("method", val); + }, + baseuri: function(val) { + this.$emit("baseuri", val); + }, + params: function(val) { + this.$emit("params", val); + }, + templateStr: function(val) { + try { + console.log(JSON.parse(val)); + this.jsonSyntaxError = false; + this.$emit("template", JSON.parse(val)); + } catch(err) { + console.log("catch the exception templateStr"); + this.jsonSyntaxError = true; + } + } + }, + components: { + 'base-input': base_input, + 'api-param': api_param + }, + data: function() { + return { + jsonSyntaxError: false, + templateStr: JSON.stringify(this.template, null, 2) + }; + }, + methods: { + deleteApi: function(apiName) { + this.$emit("delete", apiName); + } + } +} +</script> +<style scoped> +#templateLabel:hover+div #tempHelp{ + display: block; +} +#tempHelp { + display: none; + position: absolute; + width: 90%; + min-height: 150px; + background-color: #ab2d2d; + color: white; + transition: display 1s; + text-align: left; + padding: 10px 16px; + z-index: 2; + font-size: 10px; + opacity: 0.9; +} +#tempHelp::after { + content: ''; + position: absolute; + bottom: 92%; + right: 100%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent #ab2d2d transparent transparent; +} +@media(max-width:1200px) { + #tempHelp::after { + bottom: 100%; + left: 5%; + border-color: transparent transparent #ab2d2d transparent; + } +} +</style> |