表单组件里面放其他组件的方法

<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>

 

posted @ 2020-12-15 13:05  凯宾斯基  阅读(243)  评论(0编辑  收藏  举报