<template>
<a-modal
class="mymodal"
v-model="visible"
centered
title="接口信息"
ok-text="确认"
cancel-text="取消"
@ok="handleSubmit"
@cancel="closeadd"
:destroyOnClose="true"
>
<a-form :form="form" @submit="handleSubmit">
联系选择组件
<a-form-item v-bind="formItemLayout" label="复制接口信息">
<a-cascader
:options="options"
:load-data="loadData"
change-on-select
@change="onChange"
v-decorator="['api_id']" //表单必要对应字段
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="接口名称">
<a-input
v-decorator="[
'case_name',
{
rules: [
{ required: true, message: '请输入接口名称', trigger: 'blur' },
{
min: 2,
max: 20,
message: '字符范围在2-20个字',
trigger: 'blur',
},
],
},
]"
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="请求方式">
<div style="margin-bottom: 16px; display: flex">
<a-select
slot="addonBefore"
v-decorator="['methods', { initialValue: 'get' }]"
style="width: 70px"
>
<a-select-option value="get"> get </a-select-option>
<a-select-option value="post"> post </a-select-option>
<a-select-option value="delete"> delete </a-select-option>
<a-select-option value="patch"> patch </a-select-option>
<a-select-option value="put"> put </a-select-option>
</a-select>
<a-select
show-search
v-decorator="[
'st_host',
{
rules: [{ required: true, message: '输入对应的host' }],
},
]"
style="width: 100%"
>
<a-select-option
:value="item.id"
v-for="item in hosts"
:key="item.id"
>
<a-tooltip>
<template slot="title">
{{ item.host }}
</template>
{{
item.host.length > 30
? `${item.host.substr(0, 30)}...`
: item.host
}}
</a-tooltip>
</a-select-option>
</a-select>
</div>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="请求路径">
<a-input
v-decorator="[
're_path',
{
rules: [
{ required: true, message: '请输入请求路径', trigger: 'blur' },
],
},
]"
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="请求头">
<a-input
type="textarea"
:auto-size="{ minRows: 6, maxRows: 6 }"
v-decorator="[
're_head',
{
rules: [
{ required: true, message: '请输入请求头', trigger: 'blur' },
],
},
]"
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="请求体">
<a-input
type="textarea"
:auto-size="{ minRows: 6, maxRows: 10 }"
v-decorator="['re_body']"
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="提取返回值">
<a-input
v-decorator="[
'need_value',
{
rules: [
{
min: 2,
max: 100,
message: '字符范围在2-100',
trigger: 'blur',
},
],
},
]"
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="断言字段">
<a-input
v-decorator="[
'asserts',
{
rules: [{ min: 2, max: 50, message: '字符范围在2-50个字' }],
},
]"
/>
</a-form-item>
<a-form-item v-bind="formItemLayout" label="返回状态码">
<a-input
v-decorator="[
'st_code',
{
rules: [
{ required: true, message: '请输入状态码', trigger: 'blur' },
{
min: 2,
max: 12,
message: '字符范围在2-12个字',
trigger: 'blur',
},
],
},
]"
/>
</a-form-item>
</a-form>
</a-modal>
</template>