Ant Design Vue 表单验证踩坑

最近一个项目用了 Ant Design Vue ，我也不知道为啥用这个。。。FORM表单验证踩地坑简直是让我哭哭哭

以前用elementUI,Iview,很顺手，v-model简直是标配

可是这个Ant Design Vue 在需要验证的时候不能用 `v-model`,用`v-decoration`。

贴代码如下

<style lang="less">
@import 'sourceManage';
</style>
<template>
  <div ref="sourceManage">
    <a-row :gutter="24">
      <a-col :sm="12" :md="8" :xl="8">
        <h3>
          所属类目：
          <span>{{databaseType}}</span>
        </h3>
      </a-col>
      <a-col :sm="12" :md="3" :xl="3"  :offset="11">
        <a-button type="primary" icon="plus" @click="showSourseForm">添加源</a-button>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top:30px;" v-if="databaseInformation.length">
      <a-col  :sm="12" :md="8" :xl="8" :style="{ marginBottom: '24px' }" v-for = "(databaseInfo,key) in databaseInformation" :key="key" >
        <a-card class="datatop">
          <a-icon type="check-circle" style="fontSize:16px;color:red" v-if="false"/>
          <a-icon type="close-circle" style="fontSize:16px;color:blue" />
          <span style="margin-left:100px;font-size:16px"><strong>information {{key+1}}</strong></span>
        </a-card>
        <a-card class="datacontent">
          <a-row>
            <a-col :span="4">  <a-icon type="database" theme="twoTone" style="fontSize:50px;color:blue;margin-top:10px" /></a-col>
            <a-col :span="10"> 
              <p><strong>库名称：</strong>{{databaseInfo.connectionName}}</p>
              <p><strong>IP：</strong>{{databaseInfo.databaseIp}}</p>
              <p><strong>描述: </strong>{{databaseInfo.databaseDescript || '无'}}</p>
            </a-col>
            <a-col :span="9" :offset="1">
             <p> <strong>类型：</strong>{{databaseInfo.databaseType}}</p>
             <p> <strong>端口：</strong>{{databaseInfo.databasePort}}</p>
             <p> <strong>状态：</strong>{{databaseInfo.status == '1'?'启用':(databaseInfo.status == '2'?'停用':'未启用')}}</p>
            </a-col>
          </a-row>
        
        </a-card>
        <a-card class="operationbuttons">
          <a-button-group>
            <a-button
              size="large"
              type="default"
              @click="editsource(databaseInfo)"
              style="border:none;border-right:1px solid #ccc;margin-right:20px;outline: none;"
            >编辑</a-button>
            <a-button
              size="large"
              type="default"
              @click="ifuseOrNot(databaseInfo)"
              style="border:none;border-right:1px solid #ccc;margin-right:20px;outline: none;"
            >{{databaseInfo.status == '1'?'停用':(databaseInfo.status == '2'?'启用':'启用')}}</a-button>
            <a-button
             v-if="!databaseInfo.status"
              size="large"
              type="default"
              @click="deletesource(databaseInfo)"
              style="border:none;border-right:1px solid #ccc;outline: none;"
            >删除</a-button>
          </a-button-group>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      :title="ModalTitle"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      
    >
    <template slot="footer">
        <a-button v-if="ModalType == '0'" key="test" style="float:left" type="primary" @click="handleTest">连接测试</a-button>
        <a-button key="submit" type="primary"  :loading = 'confirmLoading' @click="handleOk"> 保存
        </a-button>
        <a-button key="back" @click="handleCancel">取消</a-button>
        
      </template>
       <a-form :form="form">
        <a-form-item label="数据库类型：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-select
         v-decorator="['databaseType', { rules: [{ required: true, message: 'Please input connect name!' }] }]"
        placeholder="Select a option and change input text above"
      >
        <a-select-option value="oracle">
          oracle
        </a-select-option>
        <a-select-option value="sqlserver">
          sqlserver
        </a-select-option>
        <a-select-option value="mysql">
          mysql
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item 
     label="连接名：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
         >
      <a-input v-decorator="['connectionName', { rules: [{ required: true, message: 'Please input connect name!' }] }]"
      />
    </a-form-item>
    <a-form-item label="主机：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input 
      v-decorator="['databaseIp', { rules: [{ required: true, message: 'Please input connect name!' }] }]"
      
      />
    </a-form-item>
    <a-form-item label="端口号：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input
      v-decorator="['databasePort', { rules: [{ required: true, message: 'Please input connect name!' }] }]"
      />
    </a-form-item>
    <a-form-item label="用户名：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input 
      v-decorator="['databaseUsername', { rules: [{ required: true, message: 'Please input connect name!' }] }]"
      />
    </a-form-item>
    <a-form-item label="密码：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input 
      v-decorator="['datasourcePassword', { rules: [{ required: true, message: 'Please input connect name!' }] }]"
      />
    </a-form-item>
  </a-form>
    </a-modal>
  </div>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col';
import { sortFromBigToSmall } from '@/utils/util';
import pick from 'lodash.pick';
import{querydataSource,adddataSource,deletedataSource,editdataSource} from '@/api/datasource';
export default {
  name: 'sourceManage',
  props: [],
  data() {
    return {
      databaseType: '关系型数据库',
      databaseInformation: [],
      ModalTitle:'',
      ModalType:0,
      loading:false,
      databaseForm: {
          id:'',
          databaseType: '',
          databaseVersion: '',
          databaseDescript: '',
          driverName: '',
          connectionName: '',
          databaseIp: '',
          databasePort: '',
          systemName: '',
          databaseUsername: '',
          datasourcePassword: '',
          status: '',
          remark: ''
        },
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
        formLayout: 'horizontal',
        form: this.$form.createForm(this),
    }
      
  },
  methods: {
    showSourseForm() {
      this.form.resetFields();
      this.confirmLoading = false;
      this.ModalTitle = '新增源';
      this. ModalType = 0;
      this.visible = true;
      },
      handleOk(e) {
        this.form.validateFields((err,values) => {
        if (!err) {
        this.confirmLoading = true;
        let formData = Object.assign(this.databaseForm, values);
        if(this.ModalType == 0){
          adddataSource(formData).then(res=>{
          if(res.code == '0'){
            this.visible = false;
            this.confirmLoading = false;
            this.showdataList();
          }
        })
        }else if(this.ModalType == 1){
           editdataSource(formData).then(res=>{
            if(res.code == '0'){
              this.visible = false;
              this.confirmLoading = false;
              this.showdataList();
            }
        })
        }
        }
      });
    
      },
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      handleTest(){
        console.log('test')
      },
      async showdataList(){
        await querydataSource().then(res=>{
        if(res.code == '0'){
          this.databaseInformation = sortFromBigToSmall(res.data,'createTime');
        }
      })
      },
      //删除不用看
      deletesource(e){
        let params = {id:e.id};
        let that = this;
        this.$confirm({
          title: 'Do you Want to delete this item?',
          // content: h => <div style="color:red;">Some descriptions</div>,
          onOk() {
            console.log('OK');
            deletedataSource(params).then(res=>{
            if(res.code === 0){
              that.showdataList();
            }else{
              console.log('deletefail')
            }
          })
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      },
      editsource(record){
        this.form.resetFields();
        this.databaseForm = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.databaseForm, 'databaseType', 'connectionName', 'databaseIp', 'databasePort', 'databaseUsername', 'datasourcePassword'))
        });
        this.confirmLoading = false;
        this.ModalType = 1;
        this.ModalTitle = '编辑源';
        this.visible = true;
      },
         //这个不用看
      ifuseOrNot(e){
        let that = this;
         this.$confirm({
          title: `是否${(e.status == 2 ||e.status == null)?'启用':'停用'}${e.connectionName}?`,
          onOk() {
            if(e.status == 2 ||e.status == null){
                e.status = 1;
              }else{
                e.status = 2;
              }
              editdataSource(e).then(res=>{
                  that.confirmLoading = true;
                  if(res.code == '0'){
                    that.$message.success('operation successful!')
                    setTimeout(function(){ that.showdataList()},1000)
                  }
        })
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
       
      }
  },
  components: {
    ACol
  },
  mounted() {
   this.showdataList();
  },
}
</script>
<style lang="scss">
.operationbuttons .ant-btn-group {
  display: flex;
  flex-direction: row;
  button {
    flex: 1;
  }
}
.operationbuttons .ant-card-body {
  padding: 10px;
}
.datatop .ant-card-body {
  padding: 10px;
}
.datacontent p{
  margin:0px 0px 5px 0px;
  // display: -webkit-box;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  white-space: nowrap
}
.datacontent .ant-card-body {
    padding: 20px 10px 20px 10px;
}
</style>