<el-button type="primary" style="height: 40px" @click="addUser()"
        >新建用户</el-button
      >

 <!--弹窗表单-->
    <!-- dialogFormVisible控制弹窗true为弹出 false为消失 -->
    <!-- width="550px" 可控制整个表单随页面变化居中 -->
    <!-- center="true"使表单 头（标题）  尾（取消和确定按钮）居中 -->
    <!-- size="mini"  size="medium" 控制整个el-form-item大小中 -->
    <el-dialog
      title="新建用户"
      :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="sureInsertUser()">确 定</el-button>
      </div>
    </el-dialog>

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

//     先调用按钮修改dialogFormVisible为true
// 才能打开弹窗
    // 添加用户
    addUser() {
      this.dialogFormVisible = true;
    },
    sureInsertUser() {
      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);
          // 清除历史新增
          this.form.userName = null;
          this.form.linkNum = null;
          this.form.password = null;
          this.form.roleId = null;
        } else {
          this.$message.error("新增失败");
        }
      });
    },