Skip to content

Commit c938d61

Browse files
zhangchunlinzhangchunlin
committed
use menu to display example lists now
1 parent d8e44ab commit c938d61

File tree

1 file changed

+98
-51
lines changed

1 file changed

+98
-51
lines changed

‎demo/apps/apijson_demo/templates/index.html‎

Lines changed: 98 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -23,89 +23,110 @@
2323
<tab-pane label="apijson put" name="tab_put"></tab-pane>
2424
<tab-pane label="apijson delete" name="tab_delete"></tab-pane>
2525
</tabs>
26+
<layout>
27+
<sider hide-trigger :style="{height: '80vh', width:'360px', 'min-width': '360px', 'max-width': '380px', overflow: 'auto', background: '#fff'}">
28+
<i-menu :active-name="0" @on-select="on_select_get" width="360px" ref='menu_get'>
29+
<menu-group title="apijson get examples" v-if="tab_current==='tab_get'">
30+
<menu-item v-for="(item,index) in request_get" :name="index" :key="index">
31+
📋 {item.label}
32+
</menu-item>
33+
</menu-group>
34+
</i-menu>
35+
<i-menu :active-name="0" @on-select="on_select_head" width="360px">
36+
<menu-group title="apijson head examples" v-if="tab_current==='tab_head'">
37+
<menu-item v-for="(item,index) in request_head" :name="index" :key="index">
38+
📋 {item.label}
39+
</menu-item>
40+
</menu-group>
41+
</i-menu>
42+
<i-menu :active-name="0" @on-select="on_select_post" width="360px">
43+
<menu-group title="apijson post examples" v-if="tab_current==='tab_post'">
44+
<menu-item v-for="(item,index) in request_post" :name="index" :key="index">
45+
📋 {item.label}
46+
</menu-item>
47+
</menu-group>
48+
</i-menu>
49+
<i-menu :active-name="0" @on-select="on_select_put" width="360px">
50+
<menu-group title="apijson put examples" v-if="tab_current==='tab_put'">
51+
<menu-item v-for="(item,index) in request_put" :name="index" :key="index">
52+
📋 {item.label}
53+
</menu-item>
54+
</menu-group>
55+
</i-menu>
56+
<i-menu :active-name="0" @on-select="on_select_delete" width="360px">
57+
<menu-group title="apijson delete examples" v-if="tab_current==='tab_delete'">
58+
<menu-item v-for="(item,index) in request_delete" :name="index" :key="index">
59+
📋 {item.label}
60+
</menu-item>
61+
</menu-group>
62+
</i-menu>
63+
</sider>
64+
<i-content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
2665
<Row>
2766
<i-col span="3"><div align="center">login user</div></i-col>
28-
<i-col span="8"><i-input value="{{=user_info}}" readonly/></i-col>
67+
<i-col span="18"><i-input value="{{=user_info}}" readonly/></i-col>
2968
{{if request.user:}}
3069
<i-col span="1"><div align="center"><i-button type="warning" size="large" @click="logout">Logout</i-button></div></i-col>
3170
{{else:}}
3271
<i-col span="1"><div align="center"><i-button type="primary" size="large" @click="login">Login</i-button></div></i-col>
3372
{{pass}}
3473
</Row>
3574
<Row v-if="tab_current==='tab_get'">
36-
<i-col span="3"><div align="center">HTTP POST URL</div></i-col>
37-
<i-col span="8"><i-input value="/apijson/get" readonly/></i-col>
75+
<i-col span="3"><div align="center">HTTP POST URL</div></i-col>
76+
<i-col span="18"><i-input value="/apijson/get" readonly/></i-col>
3877
</Row>
3978
<Row v-if="tab_current==='tab_get'">
40-
<i-col span="3"><div align="center"><strong>apijson get</strong> request <span class="notice">{request_get.length}</span> examples</div></i-col>
41-
<i-col span="8">
42-
<i-select v-model="select_current">
43-
<i-option v-for="(item,index) in request_get" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
44-
</i-select>
45-
</i-col>
79+
<i-col span="3"><div align="center">example name</div></i-col>
80+
<i-col span="18"><strong><i-input :value="request_get[cmenu_get].label" readonly/></strong></i-col>
4681
</Row>
4782

4883
<Row v-if="tab_current==='tab_head'">
4984
<i-col span="3"><div align="center">HTTP HEAD URL</div></i-col>
50-
<i-col span="8"><i-input value="/apijson/head" readonly/></i-col>
85+
<i-col span="18"><i-input value="/apijson/head" readonly/></i-col>
5186
</Row>
5287
<Row v-if="tab_current==='tab_head'">
53-
<i-col span="3"><div align="center"><strong>apijson head</strong> request <span class="notice">{request_head.length}</span> examples</div></i-col>
54-
<i-col span="8">
55-
<i-select v-model="select_current">
56-
<i-option v-for="(item,index) in request_head" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
57-
</i-select>
58-
</i-col>
88+
<i-col span="3"><div align="center">example name</div></i-col>
89+
<i-col span="18"><strong><i-input :value="request_head[cmenu_head].label" readonly/></strong></i-col>
5990
</Row>
6091

6192
<Row v-if="tab_current==='tab_post'">
62-
<i-col span="3"><div align="center">POST URL</div></i-col>
63-
<i-col span="8"><i-input value="/apijson/post" readonly/></i-col>
93+
<i-col span="3"><div align="center">POST URL</div></i-col>
94+
<i-col span="18"><i-input value="/apijson/post" readonly/></i-col>
6495
</Row>
6596
<Row v-if="tab_current==='tab_post'">
66-
<i-col span="3"><div align="center"><strong>apijson post</strong> request <span class="notice">{request_post.length}</span> examples</div></i-col>
67-
<i-col span="8">
68-
<i-select v-model="select_current">
69-
<i-option v-for="(item,index) in request_post" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
70-
</i-select>
71-
</i-col>
97+
<i-col span="3"><div align="center">example name</div></i-col>
98+
<i-col span="18"><strong><i-input :value="request_post[cmenu_post].label" readonly/></strong></i-col>
7299
</Row>
73100

74101
<Row v-if="tab_current==='tab_put'">
75102
<i-col span="3"><div align="center">PUT URL</div></i-col>
76-
<i-col span="8"><i-input value="/apijson/put" readonly/></i-col>
103+
<i-col span="18"><i-input value="/apijson/put" readonly/></i-col>
77104
</Row>
78105
<Row v-if="tab_current==='tab_put'">
79-
<i-col span="3"><div align="center"><strong>apijson put</strong> request <span class="notice">{request_put.length}</span> examples</div></i-col>
80-
<i-col span="8">
81-
<i-select v-model="select_current">
82-
<i-option v-for="(item,index) in request_put" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
83-
</i-select>
84-
</i-col>
106+
<i-col span="3"><div align="center">example name</div></i-col>
107+
<i-col span="18"><strong><i-input :value="request_put[cmenu_put].label" readonly/></strong></i-col>
85108
</Row>
86109

87110
<Row v-if="tab_current==='tab_delete'">
88111
<i-col span="3"><div align="center">DELETE URL</div></i-col>
89-
<i-col span="8"><i-input value="/apijson/delete" readonly/></i-col>
112+
<i-col span="18"><i-input value="/apijson/delete" readonly/></i-col>
90113
</Row>
91114
<Row v-if="tab_current==='tab_delete'">
92-
<i-col span="3"><div align="center"><strong>apijson delete</strong> request <span class="notice">{request_delete.length}</span> examples</div></i-col>
93-
<i-col span="8">
94-
<i-select v-model="select_current">
95-
<i-option v-for="(item,index) in request_delete" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
96-
</i-select>
97-
</i-col>
115+
<i-col span="3"><div align="center">example name</div></i-col>
116+
<i-col span="18"><strong><i-input :value="request_delete[cmenu_delete].label" readonly/></strong></i-col>
98117
</Row>
99118

100119
<Row>
101120
<i-col span="3"><div align="center">request data</div></i-col>
102-
<i-col span="8"><i-input v-model="request_data" type="textarea" :autosize="{minRows: 3,maxRows: 15}" placeholder="request data" /></i-col>
121+
<i-col span="18"><i-input v-model="request_data" type="textarea" :autosize="{minRows: 3,maxRows: 15}" placeholder="request data" /></i-col>
103122
<i-col span="1"><div align="center"><i-button type="primary" size="large" @click="post_request_data" v-bind:disabled="!can_post">Post</i-button></div></i-col>
104123
</Row>
105124
<Row>
106125
<i-col span="3"><div align="center">response data</div></i-col>
107-
<i-col span="8"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>
126+
<i-col span="18"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>
108127
</Row>
128+
</i-content>
129+
</layout>
109130
</div>
110131
</div>
111132
<script>
@@ -119,7 +140,13 @@
119140
request_put : {{<<request_put_json}},
120141
request_delete : {{<<request_delete_json}},
121142
request_data : "",
122-
select_current : "",
143+
144+
cmenu_get : 0,
145+
cmenu_head : 0,
146+
cmenu_post : 0,
147+
cmenu_put : 0,
148+
cmenu_delete : 0,
149+
123150
can_post : true,
124151
response_data : "",
125152
tab_current : "tab_get",
@@ -134,7 +161,36 @@
134161
methods: {
135162
init_default: function(){
136163
vm.request_data = vm.request_get[0].value
137-
vm.select_current = vm.request_data
164+
},
165+
on_select_get: function(name){
166+
vm.cmenu_get = parseInt(name)
167+
vm.request_data = vm.request_get[vm.cmenu_get].value
168+
vm.response_data = ""
169+
vm.can_post = true
170+
},
171+
on_select_head: function(name){
172+
vm.cmenu_head = parseInt(name)
173+
vm.request_data = vm.request_head[vm.cmenu_head].value
174+
vm.response_data = ""
175+
vm.can_post = true
176+
},
177+
on_select_post: function(name){
178+
vm.cmenu_post = parseInt(name)
179+
vm.request_data = vm.request_post[vm.cmenu_post].value
180+
vm.response_data = ""
181+
vm.can_post = true
182+
},
183+
on_select_put: function(name){
184+
vm.cmenu_put = parseInt(name)
185+
vm.request_data = vm.request_put[vm.cmenu_put].value
186+
vm.response_data = ""
187+
vm.can_post = true
188+
},
189+
on_select_delete: function(name){
190+
vm.cmenu_delete = parseInt(name)
191+
vm.request_data = vm.request_delete[vm.cmenu_delete].value
192+
vm.response_data = ""
193+
vm.can_post = true
138194
},
139195
post_request_data: function(){
140196
$.ajax({
@@ -171,16 +227,7 @@
171227
else if (n=="tab_delete") {
172228
vm.request_data = vm.request_delete[0].value
173229
}
174-
vm.select_current = vm.request_data
175230
vm.response_data = ""
176-
},
177-
select_current : function(n,o){
178-
if (n!=null && n!="" && n!==vm.request_data) {
179-
vm.request_data = n
180-
}
181-
else {
182-
vm.select_current = vm.request_data
183-
}
184231
}
185232
}
186233
})

0 commit comments

Comments
 (0)