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 有个可清空的操作，同时还提供可监听清空时的回调，以便于我们查找操作：