vue-admin-template添加子部门

子部门负责人下拉列表
<el-form-item prop="managerId" label="部门负责人">
<el-select v-model="formData.managerId" placeholder="请选择负责人" style="width: 80%" size="mini">
<!-- 下拉选项 循环 负责人数据 label表示显示的字段 value 存储字段 -->
<el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />
</el-select>
</el-form-item>

views/department/index.vue

1.记录部门数据

通过current-node-id这个参数向弹窗传值

<add-dept :current-node-id="currentNodeId" :show-dialog.sync="showDialog" />

方法
operateDept(type,id) {
    if (type == 'add') {
        this.showDialog = true
        console.log(id)
        this.currentNodeId = id
    }
}

2.index.vue页面添加调用operateDept方法

<!-- $event 实参 表示类型 -->
<el-dropdown @command="operateDept($event, data.id)">
<!-- 显示区域内容 -->
<span class="el-dropdown-link">
        操作<i class="el-icon-arrow-down el-icon--right" />
</span>
<!-- 下拉菜单选项 -->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="add">添加子部门</el-dropdown-item>
<el-dropdown-item command="edit">编辑部门</el-dropdown-item>
<el-dropdown-item command="del">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

3.弹窗声明属性，接收父组件的传值

  props: {
          showDialog: {
              type: Boolean,
               default: false
        },
        currentNodeId: {
            type: Number,
            default: null
        }
        },

4.确认和取消

页面按钮

<el-form-item>
<!-- 按钮 -->
<el-row type="flex" justify="center">
<el-col :span="12">
<el-button size="mini" type="primary" @click="btnOK">确定</el-button>
<el-button size="mini" @click="close">取消</el-button>
</el-col>
</el-row>
</el-form-item>

添加方法

methods: {
        close() {
              // 修改父组件的值 子传父
             this.$refs.addDept.resetFields() // 重置表单
             this.$emit('update:showDialog', false)
            },
           async getManagerList() {
             this.managerList = await getUserList()
             console.log('managerList')
             console.log(this.managerList)
           },
           // 点击确定时调用
          btnOK() {
            this.$refs.addDept.validate(async isOK => {
              if (isOK) {
                 await addDepartment({ ...this.formData, pid: this.currentNodeId })
                 // 通知父组件更新
                this.$emit('updateDepartment')
                 // 提示消息
                 this.$message.success('新增部门成功')
                  this.close()
               }
             })
          }
  
        }

后端添加部门代码

@PostMapping
public Result<String> save(@RequestBody Department department){
    departmentService.save(department);
    return Result.success("新增部门成功");
}

父组件向子组件传递一个方法属性@updateDepartment，可以监听子部门，令子部门可以调用该监听方法，那么父组件就调用了该方法。

@updateDepartment="getDepartment"

<!-- 表示会接受子组件的事件  update:showDialog, 值 => 属性 -->
<add-dept :current-node-id="currentNodeId" :show-dialog.sync="showDialog" @updateDepartment="getDepartment" />

因此下图中才可通知父组件更新

await addDepartment({ ...this.formData, pid: this.currentNodeId })

其中addDepartment中的参数...this.formData，表示拷贝了一份formData的数据当做了参数。