添加用户

添加用户html代码：

  <!-- 添加用户对话框 -->
  <el-dialog title="添加用户" :visible.sync="isAddUser">
    <el-form :model="addUserDiaData" :rules="addUserDiaRules" ref="addUserDia">
      <el-form-item label="用户名" label-width="120px" prop="username">
        <el-input v-model="addUserDiaData.username"  autocomplete="off"></el-input>
      </el-form-item>
      

      <el-form-item label="密码" label-width="120px" prop="password">
        <el-input v-model="addUserDiaData.password"  autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" label-width="120px" prop="email">
        <el-input v-model="addUserDiaData.email"  autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="手机" label-width="120px" prop="mobile">
        <el-input v-model="addUserDiaData.mobile"  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isAddUser = false">取 消</el-button>
      <el-button type="primary" @click="addUserConfirm"
        >确 定</el-button
      >
    </div>
  </el-dialog>

JS代码：
data() {
return {
//添加用户对话框要绑定的数据
addUserDiaData:{
username:’’,
password:’’,
email:’’,
mobile:’’
},
//添加用户对话表单验证规则
addUserDiaRules:{
username:[
{required:true,message:‘请填写用户名’,trigger:‘blur’},
{min:6,max:16,message:‘请输入长度在6到16之间的字符个数’,trigger:‘blur’}
],
password:[
{required:true,message:‘请填写密码’,trigger:‘blur’},
{min:6,max:16,message:‘请输入长度在6到16之间的字符个数’,trigger:‘blur’}
],
email:[
{required:true,message:‘请填写邮箱’,trigger:‘blur’},
{validator:checkEmail,trigger:‘blur’}
],
mobile:[
{required:true,message:‘请填写手机号’,trigger:‘blur’},
{validator:checkMobile,trigger:‘blur’}
]
}
}
},
methods:{
//确定要添加的用户
addUserConfirm() {
//整体表单的验证
this.$refs.addUserDia.validate(async valid=>{
if(!valid) return;

    //调后台接口，将新用户添加到向后台
    const res=await addUserAPI(this.addUserDiaData)
    console.log('添加的新用户：',res)

    //关闭对话框
    this.isAddUser=false
    //重新拉取用户列表
    this.getUserList()

  })
},
//显示添加用户对话框
showUserDialog() {
  //清空对话框数据
 this.addUserDiaData={
    username:'',
    password:'',
    email:'',
    mobile:''
  }
  //显示对话框
  this.isAddUser=true;
}

}