新建党组织选择框完成

<template>

  <div>

      <!-- label-width="100px" -->

    <h2>选择框交互成功</h2>

    <el-col id="main">

      <el-form

        label-position="right"

        :model="ruleForm"

        ref="ruleForm"

        class="demo-ruleForm"

        style="margin-top:20px"

      >

        <el-form-item label="上级党组织名称" :required="true">

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

        </el-form-item>

        <el-form-item label="党组织名称" :required="true">

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

        </el-form-item>

     

        <el-form-item label="请选择所在院系" :required="true">

   <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;margin:100px 0px;">

          <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:{},

    };

  },

   mounted() {

      // 展示院系

         this.faculty();

  },

  methods: {

       open4() {

        this.$message.error('错了哦，这是一条错误消息');

      },

    // 展示院系

    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) {

      // 输入框为空给用户提示

      if( this.ruleForm.organizationSuperior === "") {

          this.$message.error('请输入上级党组织名称');

      }else if(this.ruleForm.organizationName ==="") {

          this.$message.error('请输入党组织名称');

      }else if( this.ruleForm.departmentCode === ""){

          this.$message.error('请选择所在院系');

      } else {

        this.$message({

          message: '创建成功',

          type: 'success'

        });

      }

      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);

       this.ruleForm.organizationName ="";

         this.ruleForm.organizationSuperior = "" ;

          this.ruleForm.departmentCode = "";

    }).catch(err=>{

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

    })

        } else {

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

          return false;

        }

      });

    },

    resetForm(formName) {

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

    },

  },

};

</script>

<style scoped>

/* h3 a {

  margin-left: 10px;

  color: #000;

  text-decoration: none;

  border-top-right-radius: 20px;

} */

h2 {

  background-color: #fff;

  margin-bottom: 20px;

  border-left: 5px solid #de2910;

  padding-left: 10px;

}

div{

  width: 100%;

}

#main {

  width: 100%;

  background-color: #fff;

  margin: auto;

  

  padding:10px 50% 1px 5%;

}

/deep/[class*=el-col-] {

  float: none;

}

</style>