ant design of vue 表单弹窗组件封装

<template>
  <a-modal
    :title="editId ? '修改' : '添加'"
    v-model="show"
    :centered="true"
    :maskClosable="false"
    :width="800"
    @cancel="handleCancel"
    @ok="handleConfirm"
  >
  	<a-form :form="form">
      <a-form-item label="章名称" v-bind="formItemLayout">
        <a-input
          placeholder="章名称"
          v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]"
        />
      a-form-item>
      <a-form-item label="简介" v-bind="formItemLayout">
        <a-textarea
          placeholder="简介"
          :autosize="{ minRows: 6, maxRows: 10 }"
          v-decorator="['introduction', { rules: [{ required: false, max: 1000, message: '最大1000字符' }] }]"
        />
      a-form-item>
  a-form>
  a-modal>
template>
<script>    

// import { addCourseSection, updateCourseSection } from '@/api/learning/courseSection'
export default {
  props: ['visible', 'editId'],
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        }
      }
    }
  },
  computed: {
    show: {
      get: function() {
        return this.visible
      },
      set: function() {}
    }
  },
  methods: {
    // 设置表单数据
    setFormValues(data) {
      console.log('设置数据', data)
      Object.keys(data).forEach(key => {
        this.form.getFieldDecorator(key)
        const obj = {}
        obj[key] = data[key]
        this.form.setFieldsValue(obj)
      })
    },
    // 取消
    handleCancel() {
      this.form.resetFields()
      this.$emit('close')
    },
    // 保存
    handleConfirm() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('handleConfirm', values)
          // if (this.editId) {
          //   // 修改
          //   values.id = this.editId
          //   updateCourseSection(values).then(res => {
          //     if (res.code == 0) {
          //       this.$message.success('保存成功')
          //       this.handleCancel()
          //       this.$emit('confirm')
          //     } else {
          //       this.$message.error('保存失败，请稍后再试')
          //     }
          //   })
          // } else {
          //   // 添加
          //   addCourseSection(values).then(res => {
          //     if (res.code == 0) {
          //       this.$message.success('保存成功')
          //       this.handleCancel()
          //       this.$emit('confirm')
          //     } else {
          //       this.$message.error('保存失败，请稍后再试')
          //     }
          //   })
          // }
        }
      })
    }
  }
}
</script>

使用

<form-modal ref="FormModal"
                :editId="editId"
                :visible="modalVisible"
                @close="modalVisible = false"
                @confirm="loadData">form-modal>

data中设置数据
editId: null,
modalVisible: false

// 添加
 openAddModal () {
   this.editId = null
   this.modalVisible = true
 },
 // 修改
 openEditModal (record) {
   // console.log('修改', record)
   this.editId = record.id
   this.modalVisible = true
   this.$refs['FormModal'].setFormValues(record)
 }