SpringBoot3+Vue3实现预约审核业务功能

1.什么叫预约审核业务场景?

  1. 预约实验室,场地,教室: 学生预约实验室,产生一个预约记录,管理员进行审核
  2. 预定酒店,民宿,饭店 : 用于预定酒店,产生一条预约记录,管理员进行审核.
  3. 图书借阅: 学生借阅图书,产生一条借阅记录,管理员确认(审核).
  4. 课程选课: 学生选择课程,产生一条选课记录,教师进行审核(可不要)
  5. 宠物领养: 用户领养宠物,产生一条借阅记录,管理员审核.
  6. 房屋租赁: 用户租赁房屋,产生一条租赁记录,房屋进行合同签订
  7. 评论审核:用户进行评论,产生一条评论记录,管理员对评论内容进行审核
  8. 购物车: 用户把商品加入到购物车,本质上: 用户把商品加入购物车,产生一条购物车记录
  9. 收藏: 用户收藏某个商品(帖子…),产生一条收藏记录.
  10. 点赞: 用户点赞某个帖子,产生一条点赞记录.
  11. 评论: 用户对某个帖子进行评论,产生一条评论记录.

…

场景特征: 首先得有一个模块,某个角色(比如用户)对该模块有一个行为,产生一条该行为对应的记录(新的表),然后另外一个角色(比如管理员)对这条记录进行"审核"(当然也可以不要)

2.以图书借阅为例

1
2
3
4
5
6
7
8
9
CREATE TABLE `book` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `img` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书封面',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书名字',
  `price` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书价格',
  `author` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书作者',
  `num` int DEFAULT NULL COMMENT '剩余数量',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='图书信息表';

快速复用模块,这里就不再演示了.

借阅记录表

1
2
3
4
5
6
7
8
9
CREATE TABLE `record` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `user_id` int DEFAULT NULL COMMENT '用户ID',
  `book_id` int DEFAULT NULL COMMENT '图书ID',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '借阅时间',
  `status` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '审核状态',
  `reason` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '审核说明',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

3.关键代码

Book.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<el-table :data="data.tableData" style="width: 100%" :header-cell-style="{fontWeight: 'bold',color: '#333',backgroundColor: '#c902f6'}">

        <el-table-column prop="img" label="图书封面">
          <template #default="scope">
            <el-image v-if="scope.row.img" :preview-src-list="[scope.row.img]"
                      :src="scope.row.img" :preview-teleported="true"
                      style="width: 40px; height: 40px;border-radius: 5px;display: block;" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="图书名字"/>
        <el-table-column prop="price" label="图书价格" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="num" label="剩余数量" />
        <el-table-column label="操作" width="100">
          <template #default="scope" v-if="data.user.role==='ADMIN'">
            <el-button type="primary" icon="Edit" circle @click="handleEdit(scope.row)"></el-button>
            <el-button type="danger" icon="Delete" circle @click="del(scope.row.id)"></el-button>
          </template>

          <template #default="scope" v-else>
            <el-button type="primary"  @click="borrow(scope.row)">借阅</el-button>
          </template>
        </el-table-column>
      </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const borrow = (row) => {

  request.post('/record/add',{
    userId: data.user.id,
    bookId: row.id
  }).then(res=>{
    if(res.code === '200') {
      ElMessage.success('操作成功,等待管理员审核!')
      load()
    }else{
      ElMessage.error(res.msg)
    }
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public void add(Record record) {
        record.setStatus("待审核");
        record.setTime(DateUtil.now());
        recordMapper.insert(record);
        // 图书数量-1
        Book book = bookMapper.selectById(record.getBookId().toString());
        if(ObjectUtil.isNotEmpty(book)){
            book.setNum(book.getNum()-1);
            bookMapper.updateById(book);
        }

    }

    public void update(Record record) {
        recordMapper.updateById(record);
        Account currentUser = TokenUtils.getCurrentUser();
        if("ADMIN".equals(currentUser.getRole()) && "审核拒绝".equals(record.getStatus())){
            //图书归还
            Book book = bookMapper.selectById(record.getBookId().toString());
            if(ObjectUtil.isNotEmpty(book)){
                book.setNum(book.getNum()+1);
                bookMapper.updateById(book);
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select id="selectAll" resultType="com.yjy.entity.Record">
       SELECT
       r.*,
       b.name AS bookName,
       b.author AS bookAuthor,
       b.img AS bookImg,
       u.name AS userName
       FROM record r
       INNER JOIN book b ON r.book_id = b.id
       INNER JOIN user u ON r.user_id = u.id
       <where>
           <if test="userName != null and userName != ''">
               u.name LIKE CONCAT('%', #{userName}, '%')
           </if>
       </where>
       ORDER BY r.id DESC
   </select>

预约者只能看到自己的数据

1
2
3
4
5
6
7
8
9
10
public PageInfo<Record> selectPage(Integer pageNum, Integer pageSize,Record record) {
        Account currentUser = TokenUtils.getCurrentUser();
        if("USER".equals(currentUser.getRole())){
            record.setUserId(currentUser.getId());
        }
        //开启分页查询
        PageHelper.startPage(pageNum,pageSize);
        List<Record> records = recordMapper.selectAll(record);
        return PageInfo.of(records);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<select id="selectAll" resultType="com.yjy.entity.Record">
       SELECT
       r.*,
       b.name AS bookName,
       b.author AS bookAuthor,
       b.img AS bookImg,
       u.name AS userName
       FROM record r
       INNER JOIN book b ON r.book_id = b.id
       INNER JOIN user u ON r.user_id = u.id
       <where>
           <if test="userName != null and userName != ''">
               u.name LIKE CONCAT('%', #{userName}, '%')
           </if>

           <if test="userId != null">
              r.user_id = #{userId}
           </if>
       </where>
       ORDER BY r.id DESC
   </select>