【想法】element-table列表排序和上移，下移一项，序号重排等

场景

课程-(章节)视频 模型，课程库下存在多门课程，一门课程包含多个视频；章节也需要显示唯一序号，例如：

2-1 ，2-2 ，2-3

课程页面

主要功能包括 **课程排序上移 **、**下移 **、**序号重排 **、**序号手动编辑 **，章节模块页面同理

获取列表

// 课程list查询参数
queryParams: {
  orderByColumn: "sort",
  isAsc: "asc",
  pageNum: 1,
  pageSize: 10,
  courseName: undefined,
  contentIntroduce:undefined
},

实现

---

数据库

课程表添加排序字段 Sort；章节表也添加排序字段 sort 数据库实际都是小写

接口

课程上移一项

/**
 * 课程列表上移
 */
@PostMapping("/moveUp/{id}")
public AjaxResult moveUp(@PathVariable("id") Long courseId){
    return tCourseService.moveUpCourse(courseId);
}

业务

/**
 * 课程列表上移
 */
@Override
@Transactional
public AjaxResult moveUpCourse(Long courseId) {
    TVideoCourse course = tCourseService.getById(courseId); // 当前课程
    // 1. 找到比 course 小的最接近的一个
    TVideoCourse lessThanCourse = tCourseService.getOne(Wrappers.<TVideoCourse>lambdaQuery()
            .lt(TVideoCourse::getSort, course.getSort())
            .orderByDesc(TVideoCourse::getSort).last("limit 1"));
    if (lessThanCourse == null){
        return AjaxResult.error("已经为第一个");
    }
    // 2. 交换排序
    Integer courseSort = course.getSort(); // 取出 course 的 sort
    course.setSort(lessThanCourse.getSort());
    lessThanCourse.setSort(courseSort); 
	// 3. 更新数据
    tVideoCourseMapper.updateById(course);
    return toAjax(tVideoCourseMapper.updateById(lessThanCourse));
}

课程下移一项

/**
 * 课程列表下移
 */
@PostMapping("/moveDown/{id}")
public AjaxResult moveDown(@PathVariable("id") Long courseId){
    return tCourseService.moveDownCourse(courseId);
}

业务

/**
 * 课程列表下移
 */
@Override
@Transactional
public AjaxResult moveDownCourse(Long courseId) {
    TVideoCourse course = tCourseService.getById(courseId);
    // 找到比 course 大的第一个
    TVideoCourse moreThanCourse = tCourseService.getOne(Wrappers.<TVideoCourse>lambdaQuery()
            .gt(TVideoCourse::getSort, course.getSort())
            .orderByAsc(TVideoCourse::getSort).last("limit 1"));
    if (moreThanCourse == null){
        return AjaxResult.error("已经为最后一个");
    }
    Integer courseSort = course.getSort(); // 取出 course 的 sort
    course.setSort(moreThanCourse.getSort());
    moreThanCourse.setSort(courseSort); // 交换排序

    tVideoCourseMapper.updateById(course);
    return toAjax(tVideoCourseMapper.updateById(moreThanCourse));
}

课程序号重排

/**
 * 课程序号重新排序
 */
@PostMapping("/resort")
public AjaxResult resort(){
    return tCourseService.resort();
}

业务

/**
 * 课程序号重新排序
 */
@Override
public AjaxResult resort() {
    List<TVideoCourse> courseList = tCourseService.list();
    for (int i = 0; i < courseList.size(); i++) {
        TVideoCourse course = courseList.get(i);
        course.setSort(i + 1); // 重排序号
    }
    tCourseService.updateBatchById(courseList);
    return AjaxResult.success();
}

CRUD

---

新增

新增课程 (✔) 时，先获取Sort字段最大值，再设置新的课程序号为 Sort+1 ，章节 (✔) 同理

// 新增课程业务 片段
TVideoCourse maxCourse = tCourseService.getOne(Wrappers.<TVideoCourse>lambdaQuery()
	.orderByDesc(TVideoCourse::getSort).last("limit 1"));
if (maxCourse == null){
    tCourse.setSort(1); // 第一门课
} else {
    tCourse.setSort(maxCourse.getSort() + 1);
}
...

编辑

编辑接口中需要保证序号不重复

删除

删除课程或视频，排序依然可用

章节

列表list接口回显