<template>
    <a-button type="primary" @click="openModal"></a-button>
    <a-modal v-model="modalAss" @ok="commitForm">
        <a-form :form="addOrEditForm" >
            <a-form-item label="年龄">
                <a-input placeholder="请输入年龄" v-decorator="['age', validationRule.age]" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script type="text/javascript">
    export default {
        data() {
            return {
                modalAss: false,
                validationRule: {
                    age: { rule: [{required: true, message: "年龄不能为空！"},{validator: this.isNum}]}
                },
                addOrEditForm: this.$form.createForm(this),
            }
        },
        methods: {
            isNum(rule, value, callback) {
                const num = /^[0-9]*$/
                if (!num.test(value)) {
                    callback(new Error("只能输入整数"))
                } else {
                    callback()
                }
            },

            openModal() {
                this.modalAss = true
            },

            edit() {
                // 编辑时对输入框赋值
                this.addOrEditForm.setFieldsValue({
                    age: 11
                })
            },

            commitForm() {
                this.addOrEditForm.validateFields((err, values) => {
                    if (!err) {
                        let age = values.age
                        console.log("提交内容", age)
                        this.modalAss = false
                        return
                    }
                    console.log("提交失败")
                })
            },

        }
    }
</script>