<template>
  <div>
    <el-form ref="jjjj" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="单行文本" prop="field101">
        <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="多行文本" prop="field102">
        <el-input v-model="formData.field102" type="textarea" placeholder="请输入多行文本"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="计数器" prop="field103">
        <el-input-number v-model="formData.field103" placeholder="计数器"></el-input-number>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
        },
      }

    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {},
    methods: {
      submitForm() {
        this.$refs['jjjj'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
          updataForm(JSON.stringify(this.form)).then(response => {
            if (response.code === 200) {
              this.msgSuccess("提交成功");
              this.getList();
            }
          });
        })
      },
      resetForm() {
        this.$refs['jjjj'].resetFields()
      },
    }
  }

</script>
<style>
</style>
