ApiDebug.vue
3.49 KB
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
<style>
.ivu-form-item{
margin-bottom: 10px;
}
</style>
<template>
<Card>
<p slot="title">
接口调试
</p>
<p slot="extra">
<Button type="info" icon="navicon-round">调试历史</Button>
</p>
<Alert show-icon >
消息提示文案
<template slot="desc">
系统分配AppKey只能调用基础API，增值API需要填入自己申请的AppKey
</template>
</Alert>
<Row :gutter="32">
<Col span="12">
<Form :model="formItem" :label-width="80">
<Form-item label="返回格式">
<Radio-group v-model="formItem.radio">
<Radio label="JSON">JSON</Radio>
<Radio label="XML">XML</Radio>
</Radio-group>
</Form-item>
<Form-item label="API模块">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">商品模块</Option>
<Option value="shanghai">用户模块</Option>
</Select>
</Form-item>
<Form-item label="API名称">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">获取用户信息</Option>
<Option value="shanghai">获取用户名</Option>
</Select>
</Form-item>
<Form-item label="提交方式">
<Radio-group v-model="formItem.radio">
<Radio label="POST">POST</Radio>
<Radio label="GET">GET</Radio>
</Radio-group>
</Form-item>
<Form-item label="AppKey">
<Input v-model="formItem.input" placeholder="请输入"></Input>
</Form-item>
<Form-item label="AppSecret">
<Input v-model="formItem.input" placeholder="请输入"></Input>
</Form-item>
<Form-item label="参数1">
<Input v-model="formItem.input" placeholder="请输入"></Input>
</Form-item>
<Form-item label="参数2">
<Input v-model="formItem.input" placeholder="请输入"></Input>
</Form-item>
<Form-item label="参数3">
<Input v-model="formItem.input" placeholder="请输入"></Input>
</Form-item>
<Form-item>
<Row :gutter="64">
<Col span="12">
<Button type="primary" long>提交</Button>
</Col>
<Col span="12">
<Button type="ghost" long>保存</Button>
</Col>
</Row>
</Form-item>
</Form>
</Col>
<Col span="12">
<Form label-position="top">
<Form-item label="API请求参数">
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 5}" ></Input>
</Form-item>
<Form-item label="API返回参数">
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 5}" ></Input>
</Form-item>
</Form>
</Col>
</Row>
</Card>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
date: '',
time: '',
slider: [20, 50],
textarea: ''
}
}
}
}
</script>