departments/index.vue

<template>
  <!--
  查：
    1：定义api
    2:导入api
    3:进入页面就调用api获取数据并存储
    4：渲染数据
  增：
    1：创建一个弹框组件
    2：导入注册使用
    3：点击新增打开弹框
    4：完成弹框组件布局
    5：完成表单验证
    6：定义与导入新增api
    7:在表单验证成功后调用新增api
    8:调用成功
        关闭弹框
        清空表单数据与验证
        刷新父级列表数据
        提示新增成功

  删除
    1：点击删除按钮弹出确定框
    2：定义删除api
    3:导入删除api
    4:确定框点击确定后调用删除api
    5:调用成功
        提示
        刷新列表
        如果有分页：判断当前页码>1 && 当前页数据长度===1
                        页码--
                        刷新列表

   改：
     1：点击修改打开弹框
     2：在add组件内定义了一个mode
     3:新增与编辑打开弹框时都对应的修改mode的值
     4：根据mode的值修改标题
     5：编辑时数据回显（数据深拷贝）
     6：调整表单验证
     7：定义编辑api
     8:导入编辑api
     9:点击确定分场景调用编辑api
     10:调用完成
         提示
         关闭弹框（清空验证与数据）
         刷新父级列表数据
 -->

  <div class="departments">
    <!-- 下拉菜单
                  el-dropdown
                       默认插槽：默认显示内容
                       具名插槽(dropdown):下拉的菜单
                          el-dropdown-menu
                             el-dropdown-item
           -->
    <el-card>
      <div class="main">
        <div class="top">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <el-dropdown>
            <div>
              <span>操作</span>
              <i class="el-icon-arrow-down" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click.native="addEvent('')"
                >添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-tree
          default-expand-all
          class="tree"
          :data="list"
          :props="{ label: 'name', children: 'children' }"
        >
          <template v-slot="{ data }">
            <div class="top" style="width: 100%">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown>
                <div>
                  <span>操作</span>
                  <i class="el-icon-arrow-down" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      @click.native="addEvent(data.id)"
                    >添加子部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="editEvent(data)"
                    >编辑部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="delEvent(data.id)"
                    >删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/add'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: [],
      initList: [] // 原始的列表数据
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companyDepartment()
      // 存储列表
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
      console.log(res)
    },
    // 树形数据转换
    changeData(arr, pid) {
      /*
      1：找出第一层
      2:将pid使用形参
      3:给找出来的每一项加children=[]
      4:使用递归找出它们的子集  注意 对应子集的pid是自己的id
      */
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击事件
    addEvent(pid) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 告诉弹框组件点击项的id值（点击项的id又是子集的pid）
      this.$refs.add.form.pid = pid
      // 修改add组件内的场景值
      this.$refs.add.mode = 'add'
    },
    // 删除点击事件
    delEvent(id) {
      this.$confirm('您确定删除该项吗?', '温馨提示')
        .then(async() => {
          // 调用删除api
          await companyDepartmentDelete(id)
          // 提示
          this.$message.success('删除成功')
          // 刷新列表数据
          this.getData()
        })
        .catch(() => {})
    },
    // 修改点击事件
    editEvent(data) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 修改add组件内的场景值
      this.$refs.add.mode = 'edit'
      // 数据回显
      // 复杂数据类型不产生关联的赋值：深拷贝
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 40px auto;
    .top {
      display: flex;
      align-items: center;
      .name {
        flex: 1;
      }
      .manager {
        width: 120px;
      }
    }
    .tree {
      margin-top: 10px;
    }
  }
}
</style>