YYGH-2-排班管理

小赵呢

已于 2022-04-02 15:43:44 修改

阅读量2.7k

点赞数

分类专栏：预约挂号项目文章标签： spring cloud 微服务 java

于 2022-03-24 16:52:35 首次发布

本文链接：https://blog.csdn.net/weixin_53227758/article/details/123715546

版权

本文详细介绍了排班管理页面的实现，包括科室树形展示、排班日期分页及医生信息显示。首先，通过Controller和Service从MongoDB获取科室数据并转化为树形结构。接着，实现排班日期的聚合统计和分页展示，统计号源并按日期排序。最后，根据排班日期获取详细医生排班信息。前端使用Element-UI组件进行页面布局和数据渲染，实现了选择医院、科室后的动态加载和交互功能。

摘要由CSDN通过智能技术生成

需求分析

1、页面效果

排班管理这是我们想要实现的页面,从mongodb中获取数据显示到页面上

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZQ1qP9iz-1648111872971)(C:\Users\86157\AppData\Local\Temp\1648104233756.png)]$

排班分成三部分显示：

1、科室信息（大科室与小科室树形展示）

2、排班日期，分页显示，根据上传排班数据聚合统计产生

3、排班日期对应的就诊医生信息

2、接口分析

1，科室数据使用Element-ui el-tree组件渲染展示，需要将医院上传的科室数据封装成两层父子级数据；

2，聚合所有排班数据，按日期分页展示，并统计号源数据展示；

3，根据排班日期获取排班详情数据

3、实现分析

虽然是一个页面展示所有内容，但是页面相对复杂，我们分步骤实现

1，先实现左侧科室树形展示；

2，其次排班日期分页展示

3，最后根据排班日期获取排班详情数据

排班管理实现

1.科室列表

根据hoscode查询数据库

Controller

@RestController
@RequestMapping("/admin/hosp/department")
//@CrossOrigin
public class DepartmentController {
   

    @Autowired
    private DepartmentService departmentService;

    //根据医院的编号查询所有科室列表
    @ApiOperation(value = "查询医院所有科室列表")
    @GetMapping("getDeptList/{hoscode}")
    public Result getDeptList(@PathVariable String hoscode){
   
        List<DepartmentVo> departmentVoList =departmentService.getDeptTree(hoscode);
        return Result.ok(departmentVoList);
    }
}

Service

//根据医院编号,查询医院所有科室列表
@Override
public List<DepartmentVo> getDeptTree(String hoscode) {
   
    //创建一个list集合,用于最终数据的封装
    List<DepartmentVo> result = new ArrayList<>();
    //根据医院编号,查询医院所有科室信息
    Department departmentQuery = new Department();
    departmentQuery.setHoscode(hoscode);
    Example example = Example.of(departmentQuery);
    //所有科室列表
    List<Department> all = departmentRepository.findAll(example);

    //根据大科室编号bigcode分组
    Map<String, List<Department>> listMap = all.stream().collect(Collectors.groupingBy(Department::getBigcode));

    for (Map.Entry<String,List<Department>> entry:listMap.entrySet()){
   
        //大科室编号
        String bigcode = entry.getKey();
        //大科室对应的全局数据
        List<Department> departmentList = entry.getValue();

        //封装大科室
        DepartmentVo departmentVo = new DepartmentVo();
        departmentVo.setDepcode(bigcode);
        departmentVo.setDepname(departmentList.get(0).getBigname());

        //封装小科室
        List<DepartmentVo> childrenList = new ArrayList<>();
        for(Department department:departmentList){
   
            DepartmentVo departmentQueryVo1 = new DepartmentVo();
            departmentQueryVo1.setDepname(department.getDepname());
            departmentQueryVo1.setDepcode(department.getDepcode());
            childrenList.add(departmentQueryVo1);
        }
        //把小科室的list放到大科室children里面
        departmentVo.setChildren(childrenList);
        //放到result里面
        result.add(departmentVo);
    }
    return result;
}

前端

src\api\hosp.js

  //查看科室详情
  getschedule(hoscode) {
   
    return request({
   
      //GET /admin/hosp/department/getDeptList/{hoscode}
      url: `/admin/hosp/department/getDeptList/${
     hoscode}`,
      method: 'get'
    })
  },

src\router\index.js

      {
   
        path: 'hospital/schedule/:hoscode',
        name: '排班',
        component: () => import('@/views/hosp/schedule'),
        meta: {
    title: '排班', noCache: true },
        hidden: true
      },

src\views\hosp\schedule.vue

<template>
    <div class="app-container">
        <div style="margin-bottom: 10px;font-size: 10px;">选择：</div>
            <el-container style="height: 100%">
            <el-aside width="200px" style="border: 1px silver solid">
                <!-- 部门 -->
                <el-tree
                :data="data"
                :props="defaultProps"
                :default-expand-all="true"
                @node-click="handleNodeClick">
                </el-tree>
            </el-aside>
            <el-main style="padding: 0 0 0 20px;">
                <el-row style="width: 100%">
                <!-- 排班日期 分页 -->
                </el-row>
                <el-row style="margin-top: 20px;">
                <!-- 排班日期对应的排班医生 -->
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import hospApi from '@/api/hosp'
export default {
     
    data() {
     
        return {
     
            data: [],
            defaultProps: {
     
                children: 'children',
                label: 'depname'
            },
            hoscode: null
        }
    },
    created(){
     
        this.hoscode = this.$route.params.hoscode
        this.fetchData()
    },
    methods:{
     
        fetchData() {
     
            hospApi.getDeptByHoscode(this.hoscode)
                .then(response => {
     
                    this.data = response.data
                })
        }
    }
}
</script>