antdv 表单提交

界面代码

      <p>Add White List</p>
      <a-form layout="inline" @submit="handleSubmit">
        <a-form-item label="Country">
            <a-select style="width: 150px;"
                v-model="countryDefault"
                @change="e => handleCountryChange(e)"
            >
                <a-select-option v-for="country in countrys" :key="country">{{ country }}</a-select-option>
            </a-select>
        </a-form-item>

        <a-form-item label="Ip" >
            <a-input v-model="ip" style="width: 180px;" />
        </a-form-item>

        <a-form-item label="Port" >
            <a-input v-model="port" style="width: 150px;" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">Add To WhiteList</a-button>
        </a-form-item>
      </a-form>

JS代码

<script>
import { getEnvironmentList } from "@/api/environment";
import { apiAddWhiteList } from "@/api/whitelist";

const countrys = ["Indonesia", "Philippines", "Vietnam"];
const whiteListCountry = "";
const ip = "";
const port = "";
const data = [];

export default {
  data() {
    return {
      ip,
      port,
      countrys,
      countryDefault: "",
      titles,
      data
    };
  },
  mounted() {},
  methods: {
    jump() {
      window.open(this.log, "_blank");
    },

    handleSubmit(e) {
      e.preventDefault();

      console.info(this.whiteListCountry);
      if(this.whiteListCountry == '' || this.whiteListCountry == undefined){
        alert("Country is null");
        return;
      }
      else if(this.ip == ''){
        alert("ip is null");
        return;
      }
      else if(this.port == ''){
        alert("port is null");
        return;
      }

      apiAddWhiteList(this.whiteListCountry,this.ip,this.port).then((res) => {
          console.log("msg:"+res.data.msg);
          this.success(res.data.msg);
      })
      .catch(error => {
        if (error.response) {
          this.error("Submit failed");
        } else if (error.request) {
          this.error("Submit failed");
        } else {
          this.error("unknow  exception");
        }
      });

    },

    handleCountryChange(value) {
      this.whiteListCountry = value;
    },

    success(msg) {
      this.$message.success(msg);
    },
    error(msg) {
      this.$message.error(msg);
    },
    warning(msg) {
      this.$message.warning(msg);
    }
  }
};
</script>

<style lang="less" scoped>
.marginBottom24 {
  margin-bottom: 24px;
}
</style>