标签：王荣荣 res crud 校验 trigger user blur message email

user 模块界面操作

 

查询上次就搞定了，这一些完成，添加，修改，删除的逻辑

1， 添加

界面结构是： 

我给大家做个动图：

 

 

1， el-dialog 的使用，

2， 表单数据的搜集，校验

3， 全局校验，

4， 清空表单数据选项！

开始：

       <!--  dialog 对话框-->
<el-dialog
  title="添加用户"
  :visible.sync="addUserdialogVisible"
  width="50%"
  @close="addUserClose">
  <el-form :model="addForm" :rules="addFormRules" ref="addRef" label-width="70px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="addForm.username"></el-input>
  </el-form-item>
    <el-form-item label="密码" prop="password">
    <el-input v-model="addForm.password"></el-input>
  </el-form-item>
    <el-form-item label="手机号" prop="mobile">
    <el-input v-model="addForm.mobile"></el-input>
  </el-form-item>

    <el-form-item label="邮箱" prop="email">
    <el-input v-model="addForm.email"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addUserdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
</el-dialog>

上面是添加的dialog

控制 dialog 显示和隐藏

 添加按钮关闭时，执行的方法

我们重点看模型还有校验规则

  addForm:{
              username:'',
              password:'',
              email:'',
              mobile:''
          },
          addFormRules:{
              username:[
                   { required: true, message: '请输入用户名', trigger: 'blur' }
              ],
              password:[
                  {
                       required: true, message: '请输入密码', trigger: 'blur'
                  }
              ],
              mobile:[{
                    required: true, message: '请输入手机号', trigger: 'blur'
              },{
                 validator: this.checkMobile, trigger: 'blur'   
              }],
              email:[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
             { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ]
            
          }

模型很简单，重点是用到 了校验器：

自定义的校验器：我去，我的校验器又让删掉了，我补下：

   methods:{
         checkMobile (rule,value,cb){
             let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]/
             if (reg.test(value)) {
                 cb()
                }else {
                  cb(new Error('手机号码格式不正确'))
              }
         },

以上就完成了，数据的搜集，数据的校验，当我们点确定的时候，还得全局校验一次：

  addUser(){
               // 2 ,校验数据，提交数据
            this.$refs.addRef.validate(async val=>{
               if(!val) return;
              let {data:res} =await this.$http.post("users",this.addForm);
              if(res.meta.status!==201) return this.$message.error("add fail")
              this.$message.success("添加用户成功");
               this.addUserdialogVisible=false;
               this.getUserList();
            })
       },

添加功能就讲到这里，无非校验器这块，有的用自定义校验，有的用async-validator 校验 规则，

————————————————————————

删除简单，要有个提示框

这个是MessageBox

使用就行了：

       async del(user){
        //    console.log(".....")
          const res =  await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).catch(err=>err);
            if(res!=='confirm') return this.$message.info("您取消了删除操作")
            // next real delete 
            const {data:res2} = await this.$http.delete("users/"+user.id);
            if(res2.meta.status!=200) return this.$message.error("删除失败")
            this.$message.error("删除成功，重新获取数据")
            this.getUserList()

        },

这里要强调的是：

成功返回 'confirm' 失败则返回'cancel'

_____________

 

修改逻辑，和添加逻辑差不多，不过有个表单回显的功能，稍微复杂些

1， 根据ID查找对应的数据 ，放data 里，以便 el-form 进行表单回显

 

2，修改后，搜集数据，校验，然后去 更新数据就行了

就这俩步骤！

又是 el-dialog 嵌入 el-form

<!-- 修改的对话框操作 -->
<el-form :model="editForm" :rules="editrules" 
    ref="editFormRef" label-width="70px" 
    >

<el-form-item label="用户名" prop="id">
    <el-input v-model="editForm.username" disabled></el-input>
  </el-form-item>
  
    <el-form-item label="手机号" prop="mobile">
    <el-input v-model="editForm.mobile"></el-input>
  </el-form-item>

    <el-form-item label="邮箱" prop="email">
    <el-input v-model="editForm.email"></el-input>
  </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateUser">确 定</el-button>
  </span>
</el-dialog>

  editForm:{
              id:0,
              email:'',
              mobile:'',
              role_id:0,
              username:""
       },
       editrules:{
              mobile:[{
                    required: true, message: '请输入手机号', trigger: 'blur'
              },{
                 validator: this.checkMobile, trigger: 'blur'   
              }],
              email:[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
             { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ]  
       },
            editdialogVisible:false,

 

好，模型和校验规则写好了，

methods:

 handleClose(){
            this.$refs.editFormRef.resetFields()
        },
        // update user
        updateUser(){
              // 2 ,校验数据，提交数据
            this.$refs.editFormRef.validate(async val=>{
               if(!val) return;
               // check success
                // console.log("edit ...")      
             const {data:res} = await this.$http.put('users/'+this.editForm.id,{
                    email:this.editForm.email,
                    mobile:this.editForm.mobile
                })

              if(res.meta.status!==200) return this.$message.error("update fail")  
                this.$message.success("更新成功")
                // 2, 刷新数据
                this.getUserList()
                //3, 提交成功后，关闭对话框，刷新页面 
             this.editdialogVisible = false;  
            })
            
        },
        async editUser(user){
            // 1 获取数据用于表单的回显：
           const {data:res} = await  this.$http.get('users/'+user.id);
            if(res.meta.status!==200) return ;
            this.editForm = res.data;
            // 2 ,校验数据，提交数据

            //3, 提交成功后，关闭对话框，刷新页面

            this.editdialogVisible = true;
        },

editUser 用来获取数据，进行表单的回显

updateUser 真正去更新数据！

————————————————————————————

el-input 有个可清空的操作，同时还提供可监听清空时的回调，以便于我们查找操作：

 

标签：王荣荣,res,crud,校验,trigger,user,blur,message,email
来源： https://blog.csdn.net/qq_15009739/article/details/114365108

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。