Vue_shop学习66：角色列表的添加

第一步：对话框的弹出：

  <el-button type="primary" @click="addRoleVisible=true">添加角色</el-button>

        <!-- 点击按钮弹出添加角色的对话框 -->
          <el-dialog
          title="添加角色"
          :visible.sync="addRoleVisible"
          width="50%">
          <!-- 内容主题区域 -->
          <span>ddd</span>
          <span slot="footer" class="dialog-footer">
              <!-- 底部按钮区域 取消按钮的时候隐藏对话框 -->
              <el-button @click="addRoleVisible= false">取 消</el-button>
              <el-button type="primary" @click="addRoleVisible= false">确 定</el-button>
          </span>
      </el-dialog>

      data() {
            return {
                 //所有角色列表
                 rolesList:[],
                 addRoleVisible:false,//弹出添加角色对话框的显示与印象按钮的
                
            }
        },

---

第二步：对话框内表单的渲染

验证规则 ：双向绑定添加角色的数据 

 addFrom:{//添加角色的表单数据
           
                    roleName:'',//角色名称
                    roleDesc:''//角色描述
                 },
                 addFromRules:{//验证规则
                  
                    roleName:[
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                    ],
                    roleDesc:[
                        { required: true, message: '请输入角色藐视', trigger: 'blur' },
                      
                    ],

                 }

        <!-- 点击按钮弹出添加角色的对话框 -->
        <el-dialog
            title="添加角色"
            :visible.sync="addRoleVisible"
            width="50%">
            <!-- 内容主题区域 -->
            <!-- 表单数据 addFromRules验证规则 addFromRef索引-->
            <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef"
                label-width="80px">
               
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addFrom.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="addFrom.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- 底部按钮区域 取消按钮的时候隐藏对话框 -->
                <el-button @click="addRoleVisible= false">取 消</el-button>
                <el-button type="primary" @click="addRoleVisible= false">确 定</el-button>
            </span>
        </el-dialog>

---

第三步：给其添加表单的重置操作

       <!-- 点击按钮弹出添加角色的对话框 -->
        <el-dialog
            title="添加角色"
            :visible.sync="addRoleVisible"
            width="50%"
            @close="addDialogClose">

 addDialogClose(){//监听对话框关闭事件
                this.$refs.addFromRef.resetFields()
            }

---

添加表单数据到卡片视图中

            addUser(){//添加
                //第一步:预校验
                this.$refs.addFromRef.validate(async valid=>{
                    //console.log(valid)//打印校验规则--测试的
                    if(!valid) return //校验失败
                    //校验成功 发送网络数据请求
                    //发送对象的数据刚好就双向数据绑定在拿上面 -响应promise数据
                    const {data:res} =await this.$http.post('roles',this.addFrom)
                    console.log(this.res)
                    if(res.meta.status !==201){
                        return this.$message.error('添加角色失败')
                    }
                    this.$message.success('添加角色成功')
                    // 隐藏条件用户的对话框
                    this.addRoleVisible= false
                    this.getRolesList()//重新获取用户角色列表
                
                })
            },

---