testing-scheduler/ui/src/components/env_component/service_api.vue

   1 <template>\r
   2     <div class="panel panel-success">\r
   3             <div class="panel-heading">\r
   4                 <button type="button" class="btn btn-xs btn-danger pull-right" v-on:click="deleteApi(name)">Delete</button>\r
   5                 <h5 class="panel-title">\r
   6                     <a data-toggle="collapse" data-parent="panelParent" v-bind:href="'#' + name + '-collapse'" style="display:block;">{{ name }}</a>\r
   7                 </h5>\r
   8             </div>\r
   9             <div  v-bind:id="name + '-collapse'" class="panel-collapse collapse fade">\r
  10                 <div class="panel-body">\r
  11                     <base-input name="name" v-model="name"></base-input>\r
  12                     <base-input name="method" v-model="method"></base-input>\r
  13                     <base-input name="baseuri" v-model="baseuri"></base-input>\r
  14                     <api-param v-bind:params="params"></api-param>\r
  15                     <div class="form-group" v-bind:class="{  'has-error': jsonSyntaxError}">\r
  16                         <label class="col-lg-3 control-label" id="templateLabel">\r
  17                             Template <i class="fa fa-question-circle"></i>\r
  18                         </label>\r
  19                         <div class="col-lg-7">\r
  20                             <!-- help text -->\r
  21                             <span id="tempHelp">Json格式文本，用于定义发送http请求的报文内容。示例如下：<br>( 其中 ((&lt;variable&gt;)) 为占位符，用于替换实际值 )<br>GET方式：<br>{<br> &nbsp;"uri" : "((baseuri))?name=((name))"<br>}<br>POST方式:<br>{<br> &nbsp;"uri" : "((baseuri))",<br> &nbsp;"body" : {<br>&nbsp;&nbsp;&nbsp;"name" : "((name))",<br>&nbsp;&nbsp;&nbsp;"account" : {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id" : "((user_name))",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"addr" : "SH"<br>&nbsp;&nbsp;&nbsp;}<br>&nbsp;}<br>}</span>\r
  22                             <textarea class="form-control" style="min-height: 200px;" v-model="templateStr"></textarea>\r
  23                             <span class="help-block" v-show="jsonSyntaxError">Json语法错误，请检查！</span>\r
  24                         </div>\r
  25                     </div>\r
  26                 </div>\r
  27             </div>\r
  28         </div>\r
  29 </template>\r
  30 <script>\r
  31 import base_input from "./base_input.vue"\r
  32 import api_param from "./api_param.vue"\r
  33 import Vue from "vue"\r
  34 export default {\r
  35     props: ['panelParent', 'name', 'method', 'baseuri', 'params', 'template'],\r
  36     watch: {\r
  37         name: function(val) {\r
  38             this.$emit("name", val);\r
  39         },\r
  40         method: function(val) {\r
  41             this.$emit("method", val);\r
  42         },\r
  43         baseuri: function(val) {\r
  44             this.$emit("baseuri", val);\r
  45         },\r
  46         params: function(val) {\r
  47             this.$emit("params", val);\r
  48         },\r
  49         templateStr: function(val) {\r
  50             try {\r
  51                 console.log(JSON.parse(val));\r
  52                 this.jsonSyntaxError = false;\r
  53                 this.$emit("template", JSON.parse(val));\r
  54             } catch(err) {\r
  55                 console.log("catch the exception templateStr");\r
  56                 this.jsonSyntaxError = true;\r
  57             }\r
  58         }\r
  59     },\r
  60     components: {\r
  61         'base-input': base_input,\r
  62         'api-param': api_param\r
  63     },\r
  64     data: function() {\r
  65         return {\r
  66             jsonSyntaxError: false,\r
  67             templateStr: JSON.stringify(this.template, null, 2)\r
  68         };\r
  69     },\r
  70     methods: {\r
  71         deleteApi: function(apiName) {\r
  72             this.$emit("delete", apiName);\r
  73         }\r
  74     }\r
  75 }\r
  76 </script>\r
  77 <style scoped>\r
  78 #templateLabel:hover+div #tempHelp{\r
  79     display: block;\r
  80 }\r
  81 #tempHelp {\r
  82     display: none;\r
  83     position: absolute;\r
  84     width: 90%;\r
  85     min-height: 150px;\r
  86     background-color: #ab2d2d;\r
  87     color: white;\r
  88     transition: display 1s;\r
  89     text-align: left;\r
  90     padding: 10px 16px;\r
  91     z-index: 2;\r
  92     font-size: 10px;\r
  93     opacity: 0.9;\r
  94 }\r
  95 #tempHelp::after {\r
  96     content: '';\r
  97     position: absolute;\r
  98     bottom: 92%;\r
  99     right: 100%;\r
 100     margin-left: -5px;\r
 101     border-width: 5px;\r
 102     border-style: solid;\r
 103     border-color: transparent #ab2d2d transparent transparent;\r
 104 }\r
 105 @media(max-width:1200px) {\r
 106     #tempHelp::after {\r
 107         bottom: 100%;\r
 108         left: 5%;\r
 109         border-color: transparent transparent #ab2d2d transparent;\r
 110     }\r
 111 }\r
 112 </style>