curd小练习的逻辑

列表逻辑：
    1.在views下面的nav1找到Table.vue组件 复制到 views下面的org文件夹下
    2.在router.js中
        2.1. 导入组件 import Dept from "./views/org/Dept";
        2.2.编写路由  { path: '/page4', component: Dept, name: '部门管理二' },
            2.2.1.path：路由路径 component：组件名称 name：显示名称
        2.3.去前端看一看！！！！！！！！！球球了！！！！你们不要一起写完东西再看！！！写一点看一点！！！！
    3.找到user单词 ctrl+r 将user替换成Department 将那两个AA勾选上！点击replace all
    4.找到用户单词 ctrl+r 将‘用户’替换成‘部门’ 将那两个AA勾选上！点击replace all
    5.回顾列表数据展示 逻辑：
        5.1.在列表初始化的时候 我们需要将数据查询出来 这个时候 我们就需要在 钩子函数中 调用查询分页接口
        5.2.在用户点击页码的时候 我们需要获取到当前的页码 通过@current-change 事件。在这个事件对应的函数中 将当前页码赋值给 currentPage
            再次调用 查询分页接口
        5.3.实现：
            钩子函数里面： this.getDepartments();
            在@current-change 事件对应的函数中
                    this.page = val;
                    this.getDepartments();
            getDepartments()实现：
                1.删除mock代码
                2.写上axios调用接口的方法
                    this.$http.post("/dept",para)
                              .then(result=>{
                              // 关闭忙等
                               this.listLoading = false;
                                // 将后端返回的数据 赋值给我们的data()函数中的 departments 字段
                                this.departments = result.data.rows
                                // 将后端返回的数据 赋值给我们的data()函数中的 total 字段
                                this.total = result.data.totals
                              })
        5.4.这个时候 数据已经出来了 但是列表上的字段不对应 去我们课件里面将字段c过来
        5.5.修改列表的状态显示
            去下面‘操作’按钮那里 c一个
                <template scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            然后将里面的东西删除掉 只保留<template scope="scope"> </template> 这个scope可以获取到我们列表上面当前行的数据 通过 scope.row
            那么我们的状态显示为：
                <template scope="scope">
                  <span style="color: red" v-if="scope.row.state === 0">禁用</span>
                  <span style="color: green" v-else-if="scope.row.state === 1">启用</span>
                  <span style="color: #1415d4" v-else>未知</span>
                </template>
        5.6.负责人和上级部门两个字段：其实我们后端是有返回的 parentId和managerId但是因为我们的页面是给运营人员看的，所以我们页面上要显示
            字符串。而我们的页面字段站过来后 两个字段取值分别为：manager.username和parent.name 这里面的manager和parent其实是个对象
            所以我们后端查询分页列表的接口 需要返回 manager和parent对象 他们的属性分别为 Employee和Department
            5.6.1.在实体类添加两个字段：
                 // 负责人
                    private Employee  manager;
                    // 上级部门
                    private Department parent;
            5.6.2.修改我们的sql为连表查询
                SELECT
                    td.*,
                    te.id teId,
                    te.username teUsername,
                    tde.id parentId,
                    tde.name parentName
                    FROM
                    t_department td
                    LEFT JOIN t_employee te ON td.manager_id = te.id
                    left JOIN t_department tde on td.parent_id = tde.id
    6.分页逻辑：
        6.1.分页需要几个参数：currentPage pageSize total
        6.2.在我们分页插件哪里 我们需要使用bind 这三个属性 分别为 :page-size="pageSize" :current-page="currentPage" :total="total"
            currentPage pageSize total 要在data()函数中定义 因为我们使用 : bind 来控制标签中的属性的值 需要在data()函数中
        6.3.在调用getDepartments()函数时 需要将currentPage及pageSize传入到接口中
        let para = {
                  currentPage:this.currentPage,
                  pageSize:this.pageSize
                        };
    7.高级查询：
        需求：我们希望 通过部门名称和部门编号去模糊查询 但是前端只会传一个字段
        7.1.在我们DepartmentQuery实体中 定义一个  private String keyword;
        7.2.我们的分页查询接口的sql需要改 因为只有一个字段 所以我们需要使用or关键字
             SELECT
                td.*,
                te.id teId,
                te.username teUsername,
                tde.id parentId,
                tde.name parentName
                FROM
                t_department td
                LEFT JOIN t_employee te ON td.manager_id = te.id
                left JOIN t_department tde on td.parent_id = tde.id
                <where>
                    <if test="null != keyword and !''.equals(keyword.trim())">
                        td.name like concat ('%',#{keyword},'%') or td.sn like concat ('%',#{keyword},'%')
                    </if>
                </where>
        7.3.前端：
            在第一个工具条里面 绑定的是filters对象 这个对象里面才是我们需要定义的keyword 同时更改data()函数中的filters对象的字段为keyword
            在调用分页查询的时候
            在调用getDepartments()函数时 需要将keyword传入到接口对象中
                let para = {
                      currentPage:this.currentPage,
                      pageSize:this.pageSize,
                      keyword:this.filters.keyword
                            };
        7.4.高级查询bug ：当我们去别的页面的时候 去搜索少量数据 会存在空白页面的情况
            原因：是因为我们的sql是先根据条件将数据查询出来 然后再分页的，但是我们在其他页面的时候，传入到后端的currentPage比如是个5
                那么sql的limit就是 25,5 而我们只能查询出来 4条数据 不够分页导致
            解决：
                在点击查询的v-on:click="search" 新写一个search函数 函数里面 将currentPage = 1 赋值为1 再次调用getDepartments()
删除逻辑：
    1.在页面上找到删除按钮 (删除按钮是在列表上的！) 它调用了 @click="handleDel(scope.$index, scope.row)"点击事件
    2.我们看handleDel函数中的逻辑 将mock数据和let para = { id: row.id };一起删了 然后自己写axios请求
        this.$http.delete('/dept/'+row.id)
                    .then(res=>{
                      // 关闭忙等
                      this.listLoading = false;
                      if (res.data.success){
                        // 提示成功 
                        this.$message({
                        message: result.data.msg,
                        type: 'success'
                        });
                        //跳转回第一页
                          this.currentPage = 1
                          //重新调用方法刷新列表
                        this.getDepartments();
                      }else {
                        // 提示后端返回信息 
                         this.$message({
                         message: result.data.msg,
                         type: 'error'
                });                      }
                    })

批量删除逻辑：和删除逻辑差不多，只是发送axios请求前，要先定义一个ids集合，再把这个集合传入axios中

var ids = this.sels.map(item => item.id);

新增修改：
    注意：新增修改框二合一 你们不需要掌握！自己能改就改，改不了就去课件
    1.基本字段的新增和编辑 修改editSubmit()函数
        删除mock相关的代码 发送我们自己的axios请求
            this.$http.put('/dept',para)
                    .then(res=>{
                      // 关闭忙等
                      this.editLoading = false;
                      // 关闭模态框
                      this.editFormVisible = false;
                      if (res.data.success){
                        // 提示成功 你们自己c
                        this.getDepartments();
                      }else {
                        // 提示后端返回信息 你们自己c
                      }
                    })

修改：

this.editForm = Object.assign({}, row);  //把当前行的数据传到修改表

负责人：
    负责人不应该是一个输入框，因为人员肯定是我们公司内部的人 所以我们选择使用下拉框 去elementui中寻找 select选择器
        我们选择使用自定义模板的 因为它可以显示两个字段 一个是姓名 一个是电话号码(正常公司内部肯定是用的是工号)
        <el-select v-model="editForm.managerId" multiple placeholder="请选择">
            <el-option
              v-for="item in options" // options 是我们后端返回的员工数据 应该定义在data()函数中 通过axios请求将options赋值
              :label="item.username"     // label 是我们选中后显示的内容
              :value="item.id">    // value 我们需要传给后端的字段
              <span style="float: left">{{ item.username }}</span>  // 左边显示
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span> // 右边显示
            </el-option>
          </el-select>
    这段代码粘贴到 负责人那块
    后端：
        1.添加一个employee的增删改查一条龙 其实只需要保留findAll的sql即可
上级部门：
    上级部门也不应该是一个输入框 我们也应该做选择 但是我们的业务需求是无限级数 所以我们选择使用 Cascader 级联选择器
    选择任意一级选项：
          <el-cascader
            :options="options"   // options 是我们后端返回的部门树数据 应该定义在data()函数中 通过axios请求将options赋值
            :props="{ checkStrictly: true,
                value:'id',        // value 我们需要传给后端的字段
                label:'name',     // label 是我们选中后显示的内容
                children // 默认 我们可以不写
            }"
            clearable></el-cascader>
    后端：
        无限级数逻辑：
            我们的逻辑是 先查询出来所有的数据 在对数据在内存进行组装