1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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>
|
