ApiDebug.vue 3.49 KB
<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>