编辑表单回显

父组件：这里用到了父亲调子组件的方法和同步异步先后方法的处理

//methods里

else if (type === 'edit') {
        this.showDialog = true// 显示弹层
        this.currentNodeId = id// 记录id，要用它获取数据
        // 在子组件中获取数据
        // 父组件调用子组件的方法来获取数据
        // 这里因为同步异步的问题，需要使用$nextTick
        this.$nextTick(() => {
          this.$refs.addDept.getDepartmentDatail()// this.$refs.addDept等同于子组件的this
        })
      }
    }

子组件 

 // 获取组织的详情
    async  getDepartmentDatail() {
      this.formData = await getDepartmentDetail(this.currentNodeId)
    }

利用d区分·是编辑还是增加（注意let）

 let result = await getDepartment()
            if (this.formData.id) {
              result = result.filter(item => item.id !== this.formData.id)
            }
            if (result.some(item => item.name === value)) {
              callback(new Error('已经有了'))
            } else {
              callback()
            }

编辑表单的确认和取消

1.业务逻辑

2.先封装接口， 在用id区分编辑和新增，在调用接口

 // 点击确定时调用
    btnOk() {
      this.$refs.addDept.validate(async(isOk) => {
        if (isOk) {
          // formData里的前四个都有值，最后一个没有，所以把currentNodeId 的值赋给pid
          // 调用接口一定要记得加await和async
          if (this.formData.id) {
            // 调用编辑接口,传入数据
            await updateDepartment(this.formData)
          } else {
            // 调用新增接口
            await addDepartment({ ...this.formData, pid: this.currentNodeId })
          }

3.通知父组件（这里编辑与新增是相同的）

    // 完成await之后，通知父组件更新
          this.$emit('updateDepartment')

4.重置表单，关闭弹层

5.更改提示信息

设置变量  let msg = '新增'

 if (isOk) {
          let msg = '新增'
          // formData里的前四个都有值，最后一个没有，所以把currentNodeId 的值赋给pid
          // 调用接口一定要记得加await和async
          if (this.formData.id) {
            msg = '更新'
            // 调用编辑接口,传入数据
            await updateDepartment(this.formData)
          } else {
            // 调用新增接口
            await addDepartment({ ...this.formData, pid: this.currentNodeId })
          }

          // 完成await之后，通知父组件更新
          this.$emit('updateDepartment')
          // 提示消息
          this.$message.success(`${msg}+部门成功`)
          // 提示消息
          // 调用close方法，重置和关闭表单
          this.close()

6.弹框标题更改

定义了computed

 computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }
  },

给标题绑定

<el-dialog :title="show-title" :visible="showDialog" @close="close">

同时置空表单

 close() {
      // 修改父组件的值 子传父
      this.formData = {
        code: '', // 部门编码
        introduce: '',
        managerId: '',
        name: '',
        pid: ''
      }
      // 重置表单
      // resetFields只能重置在模板中绑定的数据
      this.$refs.addDept.resetFields()
      // 修改父组件的值，子传父
      this.$emit('update:showDialog', false)
    },

删除功能

 封装api

// 删除·部门·接口·
export function delDepartment(id) {
  return request({
    method: 'delete',
    url: `/company/department/${id}`
  })
}

调用接口，提示信息，回显，注意使用this

 this.$confirm('您确定要删除吗').then(async() => {
          await delDepartment(id)
          // 删除成功，弹出提示框
          this.$message.success('删除部门成功')
          // 调用方法重新显示数据
          this.getDepartment()