W250511/10-vuecli/vueapp/vueadmin/src/views/message/MessageAdd.vue

<template>
  <div class="message-add">
    <div class="form-content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名称">
          <el-input v-model="form.jrname"></el-input>
        </el-form-item>
        <el-form-item label="用户电话">
          <el-input v-model="form.jrtel"></el-input>
        </el-form-item>
        <el-form-item label="用户等级">
          <el-select v-model="form.jrlevel" placeholder="请选择活动区域">
            <el-option
              v-for="item in levelList"
              :label="item.levelname"
              :value="item.jrid"
              :key="item.jrid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户地址">
          <el-select v-model="form.jraddressesid" placeholder="请选择活动区域">
            <el-option
              v-for="item in addressList"
              :label="item.addressname"
              :value="item.addressid"
              :key="item.addressid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// 引入axios
import axios from "axios";
export default {
  name: "MessageAdd",
  data() {
    return {
      levelList: [],
      addressList: [],
      form: {
        jrname: "",
        jrtel: "",
        jrlevel: "",
        jraddressesid: "",
      },
    };
  },
  created() {
    this.getLevelList();
    this.getAddressList();
  },
  methods: {
    // 获取等级列表
    getLevelList() {
      axios({
        method: "get",
        url: "http://39.105.160.25:18080/levelController/getLevel",
      })
        .then((res) => {
          this.levelList = res.data.data.records;
        })
        .catch(() => {});
    },
    // 获取地址列表
    getAddressList() {
      axios({
        method: "get",
        url: "http://39.105.160.25:18080/addressController/getAddress",
      })
        .then((res) => {
          this.addressList = res.data.data.records;
        })
        .catch(() => {});
    },
    // 存储信息
    onSubmit() {
      axios({
        method: "post",
        url: "http://39.105.160.25:18080/messageController/saveOrUpdateMessage",
        data: {
          jrname: this.form.jrname,
          jrtel: this.form.jrtel,
          jrlevel: this.form.jrlevel,
          jraddressesid: this.form.jraddressesid,
        },
      }).then(()=>{
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.$router.push("/message/list");
      });
      console.log(this.form);
    },
  },
};
</script>
<style scoped>
.form-content {
  margin: 100px auto;
  width: 400px;
}
</style>