-<template>\r
- <div class="panel panel-success">\r
- <div class="panel-heading">\r
- <button type="button" class="btn btn-xs btn-danger pull-right" v-on:click="deleteApi(name)">Delete</button>\r
- <h5 class="panel-title">\r
- <a data-toggle="collapse" data-parent="panelParent" v-bind:href="'#' + name + '-collapse'" style="display:block;">{{ name }}</a>\r
- </h5>\r
- </div>\r
- <div v-bind:id="name + '-collapse'" class="panel-collapse collapse fade">\r
- <div class="panel-body">\r
- <base-input name="name" v-model="name"></base-input>\r
- <base-input name="method" v-model="method"></base-input>\r
- <base-input name="baseuri" v-model="baseuri"></base-input>\r
- <api-param v-bind:params="params"></api-param>\r
- <div class="form-group" v-bind:class="{ 'has-error': jsonSyntaxError}">\r
- <label class="col-lg-3 control-label" id="templateLabel">\r
- Template <i class="fa fa-question-circle"></i>\r
- </label>\r
- <div class="col-lg-7">\r
- <!-- help text -->\r
- <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>\r
- <textarea class="form-control" style="min-height: 200px;" v-model="templateStr"></textarea>\r
- <span class="help-block" v-show="jsonSyntaxError">Json语法错误，请检查！</span>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
-</template>\r
-<script>\r
-import base_input from "./base_input.vue"\r
-import api_param from "./api_param.vue"\r
-import Vue from "vue"\r
-export default {\r
- props: ['panelParent', 'name', 'method', 'baseuri', 'params', 'template'],\r
- watch: {\r
- name: function(val) {\r
- this.$emit("name", val);\r
- },\r
- method: function(val) {\r
- this.$emit("method", val);\r
- },\r
- baseuri: function(val) {\r
- this.$emit("baseuri", val);\r
- },\r
- params: function(val) {\r
- this.$emit("params", val);\r
- },\r
- templateStr: function(val) {\r
- try {\r
- console.log(JSON.parse(val));\r
- this.jsonSyntaxError = false;\r
- this.$emit("template", JSON.parse(val));\r
- } catch(err) {\r
- console.log("catch the exception templateStr");\r
- this.jsonSyntaxError = true;\r
- }\r
- }\r
- },\r
- components: {\r
- 'base-input': base_input,\r
- 'api-param': api_param\r
- },\r
- data: function() {\r
- return {\r
- jsonSyntaxError: false,\r
- templateStr: JSON.stringify(this.template, null, 2)\r
- };\r
- },\r
- methods: {\r
- deleteApi: function(apiName) {\r
- this.$emit("delete", apiName);\r
- }\r
- }\r
-}\r
-</script>\r
-<style scoped>\r
-#templateLabel:hover+div #tempHelp{\r
- display: block;\r
-}\r
-#tempHelp {\r
- display: none;\r
- position: absolute;\r
- width: 90%;\r
- min-height: 150px;\r
- background-color: #ab2d2d;\r
- color: white;\r
- transition: display 1s;\r
- text-align: left;\r
- padding: 10px 16px;\r
- z-index: 2;\r
- font-size: 10px;\r
- opacity: 0.9;\r
-}\r
-#tempHelp::after {\r
- content: '';\r
- position: absolute;\r
- bottom: 92%;\r
- right: 100%;\r
- margin-left: -5px;\r
- border-width: 5px;\r
- border-style: solid;\r
- border-color: transparent #ab2d2d transparent transparent;\r
-}\r
-@media(max-width:1200px) {\r
- #tempHelp::after {\r
- bottom: 100%;\r
- left: 5%;\r
- border-color: transparent transparent #ab2d2d transparent;\r
- }\r
-}\r
-</style>
\ No newline at end of file
+<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>
Code Review / bottlenecks.git / blobdiff