1.删除功能：
需求：就是点击删除会弹出弹框--根据选择---删除相应的内容
实现的思路：1.利用element组件找到对话框或弹出层，然后进行相应的修改即可（注：这里需要传递id）
代码展示：
①布局忽略 只有js部分
//删除是需要调用接口的 并且需要传递相应的id 如：
（具体操作参照接口文档）
// 删除权限
export function delPermission(id) {
return request({
url: `/sys/permission/${id}`,
method: 'delete'
})
}
//给需要删除的按钮绑定点击事件，参数传相应的id
记得引入（此处代码不展示）
注意参数！---看接口返回的数据是什么，就传参数是什么！！！！！！是对象就传入row！！！
<el-button type="text" @click="delPermission(row.id)"> 删除</el-button>
//设置相关的方法--处理相关的业务逻辑
①设置方法调用方法--先提示用户是否需要删除---然后进行调用删除的请求接口api--删除之后在调用页面的渲染接口---在提示删除成功
②此调用的情况可能会失败也会成功所以就得配合try和catch。和用async和await；如果是使用.then就可以不用try和catch了是吗？
methods: {
// 删除操作
async delPermission(id) {
try {
await this.$confirm('确定要删除该数据吗')
await delPermission(id)
this.getPermissionList()
this.$message.success('删除成功')
} catch (error) {
console.log(error)
}
}
}2.添加功能
项目：6:组织架构的新增的功能。7.权限管理的新增角色! 8.新增员工！9.新增分配权限
需求：也就是点击新增的时候 会弹出一个弹出框==》其中有确定和取消和关闭！！！
思路：利用element组件的弹出层 ---进行代码的修改
代码的实现:
1)先发起请求--post请求！（具体的参考接口文档）==》传递参数data
2）新增窗口的页面布局--利用组件
注：这里需要自己定义一个数据在data---来控制弹出层的显示和隐藏！！！
注：也会定义相应的值来接收==》如果都是表单验证的数据就可以不用在定义？？？
3）绑定点击事件---（一般弹出框可以单独封装一个单独的组件）--会涉及组件传值
一般是父传子（父组件来显示和隐藏），子通过props来接收，然后子组件修改数据
子传父（自定义事件）---代码展示：(分配角色：)
<script>
export default {
4.设置相关的数据接收父组件的显示和隐藏+以及当前的用户的id
props: {
showRoleDialog: {
type: Boolean,
default: false
},
// 用户的id 用来查询当前用户的角色信息
userId: {
type: String,
default: null
}
}
}
</script>4） 主要的业务逻辑:就是传递参数，执行相关的业务逻辑
①就是显示弹出层
②然后进行相关的业务逻辑处理！
③涉及表单验证！（四步曲）
④也会涉及计算属性--与编辑弹出层同在时！
技巧：会在弹出层绑定关闭（与取消的点击和方法一样-- @close="btnCancel"）
<el-dialog title="编辑弹层" :visible="showDialog" @close="btnCancel">
<el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="roleForm.name" />
</el-form-item>
<el-form-item label="角色描述">
<el-input v-model="roleForm.description" />
</el-form-item>
</el-form>
<!-- 底部 -->
<el-row slot="footer" type="flex" justify="center">
<el-col :span="6">
<el-button size="small" @click="btnCancel">取消</el-button>
<el-button size="small" type="primary" @click="btnOK">确定</el-button>
</el-col>
</el-row>
</el-dialog>2.1添加功能--下拉菜单
①发起请求
②下拉菜单绑定的是foucs事件（光标聚焦）
③设置方法--调用方法
④渲染数据（数据一般是数组来接收的，所以可以循环遍历获取）==》（可参考组件！）
补充：复选框列表的循环依旧如此
------------------------------------------------------------------------------
2.2.添加功能---之确定功能
需求：当点击新增页面的确定按钮时，我们需要完成对表单的整体校验，如果校验成功，进行提交
1）给确定按钮绑定点击事件
2）在校验表单的时候 是需要获取个表整个表单的，那如何获取个表单呢？通过操作 DOM--$ref
3）给表单设置ref==》获取到表单
4)调用新增接口--重新获取数据--提示成功--关闭弹出层！！
注：这里调用接口点击确定时候一般都会传递参数
4）设置相关的方法==》提供了一个参数？-->这个参数表示的是什么？是什么打印就知道了啊！
返回的是true？===》如果为true表示效验通过
// 点击确定时触发
btnOK() {
this.$refs.deptForm.validate(async isOK => {
if (isOK) {
// 表示可以提交了
await addDepartments({ ...this.formData, pid: this.treeNode.id }) // 调用新增接口 添加父部门的id
//会涉及在渲染数据--然后提示成功--关闭弹出层
}
})
}补充：这里提供了三种方式：
①回调函数：+配合使用async和await--回调传参数！
②通过.then==》这里使用.then就可以直接使用catch获取失败的提示信息
validate效验也可以是.then的方式，用then来接受成功的回调==》（角色权限）
btnOK() {
this.$refs.perForm.validate().then(() => {
if (this.formData.id) {
return updatePermission(this.formData)
}
return addPermission(this.formData)
}).then(() => {
// 提示消息
this.$message.success('新增成功')
this.getPermissionList()
this.showDialog = false
})
},③通过async和await
// 点击确定时 校验整个表单
async btnOK() {
try {
//validate()是组件的内部属性为表单的验证！
await this.$refs.addEmployee.validate()
// 调用新增接口--调用整个表单！
await addEmployee(this.formData) // 新增员工
// 告诉父组件更新数据
// this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
// this.$emit
this.$parent.getEmployeeList()
//然后就关闭弹出层！
this.$parent.showDialog = false
//捕获错误！
} catch (error) {
console.log(error)
}
},5）数据的渲染===》会涉及组件之间的传值！
-------------------------------------传递参数的补充：！！！！
扩展运算符扩展对象的话，会把对象的属性和他的属性值，拆解开来一一赋值给一个新对象
首先因为这个接口要的参数是一个对象，其次你解构对象后，必须要拿新对象接收之前那个为什么那样写，是因为那个isFrontDisplay不是一个表单的项所以我写外面了
4.添加功能---之关闭 / 取消功能（待续。。。。）
具体步骤：
①重新获取之前表单验证的数据--全清空操作
②在重新验证表单--利用组件的原有方法：resetFiedds（）
③关闭弹出层！！！！
btnCancel() {
this.formData = {
name: '', // 名称
code: '', // 标识
description: '', // 描述
type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
pid: '', // 因为做的是树 需要知道添加到哪个节点下了
enVisible: '0' // 开启
}
this.$refs.perForm.resetFields() //组件的属性--表单重置！
this.showDialog = false
},其他补充：
方法一：弹出层的关闭采取.sync或者取消的事件@click=“ btnCancel”
方法二：绑定取消事件（也会涉及组件的传值--一般是子传父--配合.sync）
// 子组件 update:固定写法 (update:props名称, 值)
this.$emit('update:showDialog', false) //触发事件
// 父组件 sync修饰符
<child :showDialog.sync="showDialog" />btnCancel() {
this.$refs.deptForm.resetFields() // 重置校验字段
this.$emit('update:showDialog', false) // 关闭
}----------------------------------------------------------------------------------------------
5..编辑功能（涉及回写）
项目：6.部分信息编辑，7.编辑角色
1..编辑部门功能实际上和新增窗口，采用的是一个组件，只不过我们需要将新增场景变成编辑场景
2.绑定点击事件--可能涉及组件传值（父传子或子传父）
2.显示弹出层以后需要获取接口的数据（其实也就是需要获取表单详情的接口）===》可以调用新增的窗口的数据！！！！？？？
怎么区分有时候需要在data里面要定义数据呢？
3.注：一样的，需要传递相应的数据
补充：如果父组件想拿到子组件的属性和方法===》可以通过ref来获取。
4.新增和编辑的区别在于：
①新增是弹出弹出层--然后调用接口数据--确定即可；
②编辑是先请求数据在弹出弹出层==》目的是为了不出现闪烁的问题！！！！
③而且新增在绑定点击事件的时候是控制显示与隐藏。而编辑是方法名，并且需要传递id。
编辑确定的按钮会传递--新增的表单的数据！！！
async editRole(id) {
this.roleForm = await getRoleDetail(id)
this.showDialog = true // 为了不出现闪烁的问题 先获取数据 再弹出层
},
async btnOK() {
try {
await this.$refs.roleForm.validate()
// 只有校验通过的情况下 才会执行await的下方内容
// roleForm这个对象有id就是编辑 没有id就是新增
if (this.roleForm.id) {
await updateRole(this.roleForm)
} else {
// 新增业务
}
// 重新拉取数据
this.getRoleList()
this.$message.success('操作成功')
this.showDialog = false
} catch (error) {
console.log(error)
}
},----------------------------------------------------------------------------------------------------
7.编辑功能+新增功能一起合写！！！！！
①计算属性：显示标题
computed: {
showTitle() {
return this.formData.id ? '编辑部门' : '新增子部门'
}
},②
async btnOK() {
try {
await this.$refs.roleForm.validate()
// 只有校验通过的情况下 才会执行await的下方内容
// roleForm这个对象有id就是编辑 没有id就是新增
if (this.roleForm.id) {
await updateRole(this.roleForm)
} else {
// 新增业务
await addRole(this.roleForm)
}
// 重新拉取数据
this.getRoleList()
this.$message.success('操作成功')
this.showDialog = false // 关闭弹层 => 触发el-dialog的事件close事件
} catch (error) {
console.log(error)
}
},
btnCancel() {
this.roleForm = {
name: '',
description: ''
}
// 移除校验
this.$refs.roleForm.resetFields()
this.showDialog = false
}8.接口返回的是1.0代表男和女的整理！！！
9.组件传值的总结：
10.树状结构渲染页面的总结
11.权限篇和路由篇的总结
12.路由的页面的总结
13.token的总结：
14.接口的相关总结：
1.接口是根据restful的规则设计的 删除 delete 新增 post 修改put 获取 get
15.触发事件的总结：
1.下拉菜单的触发
①在本组件的下拉选项。==》练习：组织架构
②在表单的下拉选项
2.点击下拉菜单的触发
16.插槽的使用总结：
