Vue Dialog 本页面弹窗新增用户+编辑用户

按钮

 <el-button type="primary" style="height: 40px" @click="addUser()"
        >新建用户</el-button
      >
<el-button @click="updateUser(scope.row)" type="text" size="small"
              >编辑</el-button
            >

 

框架

  <!--弹窗表单-->
    <!-- dialogFormVisible控制弹窗true为弹出 false为消失 -->
    <!-- width="550px" 可控制整个表单随页面变化居中 -->
    <!-- center="true"使表单 头（标题）  尾（取消和确定按钮）居中 -->
    <!-- size="mini"  size="medium" 控制整个el-form-item大小中 -->
    <!-- :title="dialogTitle" 表头设置变量 方便根据不同方法修改表头 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      class="dialog"
      center="true"
      width="550px"
    >
      <el-form ref="form" :model="form" label-width="auto" class="form">
        <el-form-item label="姓名:" label-width="150px" size="medium">
          <el-input v-model="form.userName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" label-width="150px" size="medium">
          <el-input v-model="form.linkNum" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="密码：" label-width="150px" size="medium">
          <el-input v-model="form.password" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item
          label="角色"
          style="width: 300px"
          label-width="150px"
          size="mini"
        >
          <el-select
            v-model="form.roleId"
            placeholder="请选择职位"
            style="width: 200px"
          >
            <el-option
              v-for="item in roleInfo"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureOrUpdate()">确 定</el-button>
      </div>
    </el-dialog>

 

表单元素初始化及弹窗元素设置为不可见

 

 form: {
        userId: null,
        userName: null,
        linkNum: null,
        password: null,
        roleId: null,
      },
      //弹窗
      dialogFormVisible: false,
      roleInfo: [],

 

根据sureOrUpdate方法确定新增还是修改

 <el-button type="primary" @click="sureOrUpdate()">确 定</el-button>
    //判断是增加还是修改
    sureOrUpdate() {
      //判断userId是否存在  存在则为修改
      console.log(this.form.userId);
      if (this.form.userId) {
        this.updateUserById();
      } else {
        this.saveUser();
      }
    },

如果为新增   注意userId必须在新增前清除  不然会影响新增信息的userId

//     先调用按钮修改dialogFormVisible为true
    // 才能打开弹窗
    // 添加用户
    addUser() {
      this.dialogTitle = "新建用户";
      this.dialogFormVisible = true;
      // 清除历史新增
      this.form.userId = null;
      this.form.userName = null;
      this.form.linkNum = null;
      this.form.password = null;
      this.form.roleId = null;
    },
    saveUser() {
      this.$axios({
        url: "/user/insertUser",
        method: "post",
        data: {
          userName: this.form.userName,
          linkNum: this.form.linkNum,
          password: this.form.password,
          roleId: this.form.roleId,
        },
      }).then((res) => {
        if (res.data == "新增成功") {
          this.dialogFormVisible = false;
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.queryByPage(this.currentPage, this.size);
        } else {
          this.$message.error("新增失败");
        }
      });
    },

 

 

updateUser(row) {
      this.dialogTitle = "编辑用户";
      (this.form.userId = row.userId),
        (this.form.userName = row.userName),
        (this.form.linkNum = row.linkNum),
        (this.form.password = row.password),
        (this.form.roleId = row.roleId),
        (this.dialogFormVisible = true);
    },
    updateUserById() {
      this.$axios({
        url: "/user/updateUser",
        method: "put",
        data: {
          userId: this.form.userId,
          userName: this.form.userName,
          linkNum: this.form.linkNum,
          password: this.form.password,
          roleId: this.form.roleId,
        },
      }).then((res) => {
        if (res.data == "修改成功") {
          this.dialogFormVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.queryByPage(this.currentPage, this.size);
        } else {
          this.$message.error("失败");
        }
      });
    },

 

  

posted @ 2022-05-29 23:10  快了星球  阅读(629)  评论(0)    收藏  举报