vue交互axios下啦列表，提交数据，交互成功

<template>

  <div>

    <h1 style="text-align: center">新建党组织</h1>

    <el-col>

      <el-form

        label-position="top"

        :model="ruleForm"

        :rules="rules"

        ref="ruleForm"

        label-width="100px"

        class="demo-ruleForm"

      >

        <el-form-item label="上级党组织名称" prop="organizationSuperior">

          <el-input v-model="ruleForm.organizationSuperior"></el-input>

        </el-form-item>

        <el-form-item label="党组织名称" prop="organizationName">

          <el-input v-model="ruleForm.organizationName"></el-input>

        </el-form-item>

        <!-- <el-form-item label="所在院系" prop="departmentCode">

          <el-input v-model="ruleForm.departmentCode"></el-input>

        </el-form-item> -->

        <el-form-item label="请选择所在院系" prop="departmentCode">

   <el-select v-model="ruleForm.departmentCode" placeholder="所在院系" >

      <el-option v-for="d in showDepartment" :value="d.departmentName">{{d.departmentName}}</el-option>

    </el-select>

    </el-form-item>

     

        <el-form-item style="text-align: center">

          <el-button type="primary" @click="submitForm('ruleForm')"

            >立即创建</el-button

          >

          <el-button @click="resetForm('ruleForm')">重置</el-button>

        </el-form-item>

      </el-form>

    </el-col>

  </div>

</template>

<script>

import axios from 'axios'

export default {

  name: "index",

  data() {

    return {

      ruleForm: {

        organizationName: "",

        organizationSuperior: "",

        departmentCode: "",

      },

      showDepartment:{},

      rules: {

        organizationName: [

          { required: true, message: "请输入党组织名称", trigger: "blur" },

        ],

         organizationSuperior: [

          { required: true, message: "请输入上级党组织名称", trigger: "blur" },

        ],

        departmentCode: [

          { required: true, message: "请输入所在院系", trigger: "blur" },

        ],

      },

    };

  

  },

   mounted() {

      // 展示院系

         this.faculty();

  },

  methods: {

    // 展示院系

    faculty(){

    var  token = localStorage.getItem('token')

    axios.get('http://hrdj.vipgz6.91tunnel.com/system/departmentList',

     { headers: { "content-type": "application/json" },token },

    ).then((res) => {

      console.log(res.data.data);

      this.showDepartment  = res.data.data;

    }).catch(err=>{

      console.log("展示失败",err);

    })

    },

  // 提交

    submitForm(formName) {

      this.$refs[formName].validate((valid) => {

        if (valid) {

         var data = JSON.stringify(this.ruleForm);

         console.log("this.ruleForm)等于",data)

    var  token = localStorage.getItem('token')

    axios.post('http://hrdj.vipgz6.91tunnel.com/organizationManagement/addOrganization',data,

     { headers: { "content-type": "application/json" },token },

    ).then((res) => {

      console.log(res.data);

      //  console.log("这个搜索",this.tableData);

    }).catch(err=>{

      console.log("提交失败",err);

    })

        } else {

          console.log("错误！！！");

          return false;

        }

      });

    },

    resetForm(formName) {

      this.$refs[formName].resetFields();

    },

  },

};

</script>

<style scoped>

div {

  background-color: #fff;

}

/* /deep/.el-input__inner {

  width: 50%;

} */

</style>