第一个团队合作项目

收获：

• git
• 团队协作

项目地址

技术栈

1. React
2. Typescript
3. Vite
4. Recoil
5. ANTD
6. Mock
7. module.less
8. pnpm

拆分模块

1. 其余场地申请

   • 申请列表
   • 时间表

2. 科技会堂场地申请 - 申请列表 - 时间表

二者差异不大，主要是在一些弹窗以及内容上的区别

实现思路

• 申请列表：

1. 接受后端传的 data，通过 ANTD 渲染表格。
2. 不同状态的场地的筛选就是对 data 筛选完成为新的 data 通通过 ANTD 渲染。
3. 搜索同理，注意就是搜索要在不同状态的场地筛选完的新 data 再搜索筛选。
4. 详情弹窗就是点击详情将这一条数据传递给弹窗组件。

• 时间表：

1. 时间表稍微有难度一点，首先是表格没有使用 ANTD，使用原生的 table 和 tr td 标签
2. 将每块场地为每一行的行头，将当天的每一段时间作为每一列的列头。
3. 然后是表格内容的数据的处理，以其余场地申请为例子，是通过日期查询当天的场地申请数据，然后进行数据的处理，将某块场地设为 parent，他全部时间段设为一个 children，里面的每一个 child 通过申请的或者待审批的就是被占用的，flag 为 ture，其余的为 flase，条件渲染到表格中。
4. 再对每一个表格格子做一点动画，也以其余场地申请为例子，鼠标移入出现编辑图标，移除图标消失，点击图标出现编辑弹窗，传入选中时间以及场地，以及其他需要编辑的表单。
5. 点击占用的部分，跳出详情弹窗，内容为当前格的数据
6. 科技会堂申请的时间表有些许不同，每一行的行头是日期，列头也是每段时间，时间段也不同，只用对数据处理做一些修改。
7. 鼠标移入移除动画也不同，是点击移动相应的表格颜色变化，松开跳出编辑弹窗。

难点： 一个在于 ts 的运用，数据类型麻烦且多，需要仔细琢磨不然很容易出错 二个就是对原生表格的运用，时间表数据的处理也是一大难点