前后端-医院详情显示

1、后端

1.1、控制层接口

@ApiOperation("医院详情信息")
@GetMapping("showHospital/{id}")
public Result showHospital(String id){
    Map<String,Object> map = hospitalService.getHospitalById(id);
    return Result.ok(map);
}

1.2、业务层

接口：

//医院详情信息
Map<String, Object> getHospitalById(String id);

实现类：

//医院详情信息
@Override
public Map<String, Object> getHospitalById(String id) {
    Map<String,Object> result = new HashMap<>();
    Hospital hospital = this.getHospitalHosType(hospitalRepository.findById(id).get());
    //医院基本信息，包含医院等级
    result.put("hospital",hospital);
    //预约信息单独处理页，更直观
    result.put("bookingRule",hospital.getBookingRule());
    hospital.setBookingRule(null);
    return result;
}

//远程调用服务，获取医院等级
private Hospital getHospitalHosType(Hospital hospital){
    String hosTypeString = dictFeignClient.getName("Hostype", hospital.getHostype());
    //查询 省 市 区信息
    String provinceString = dictFeignClient.getName(hospital.getProvinceCode());
    String cityString = dictFeignClient.getName(hospital.getCityCode());
    String districtString = dictFeignClient.getName(hospital.getDistrictCode());

    //将查询出来的细腻些存放到hospital中
    hospital.getParam().put("fullAddress",provinceString+cityString+districtString);
    hospital.getParam().put("hosTypeString",hosTypeString);
    return hospital;
}

2、前端页面

2.1、首先在src/hospital/list.vue中添加查看详情的按钮

<router-link :to="'/hospSet/hospital/show/'+scope.row.id">
    <el-button type="primary" size="mini">查看</el-button>
</router-link>

2.2、在src/api/list.js中编写方法调用后端接口

//医院详情信息
showHospital(id){
    return request({
        url:`/admin/hosp/hospital/showHospital/${id}`,
        method:'get'
    })
}

2.3、创建医院信息详情展示的页面，在此使用隐藏路由

{
  path: 'hospital/show/:id',
   name: '查看',
   component: () => import('@/views/hospital/show'),
   meta: { title: '查看', icon: 'table' },
   hidden:true
 }

2.4、创建show.vue，编写医院详情展示页面代码

<template>
<div class="app-container">
    <h4>基本信息</h4>
    <table class="table table-striped table-condenseda table-bordered" width="100%">
        <tbody>
            <tr>
                <th width="15%">医院名称</th>
                <td width="35%"><b style="font-size: 14px">{{ hospital.hosname }}</b> | {{ hospital.param.hostypeString }}</td>
                <th width="15%">医院logo</th>
                <td width="35%">
                    <img :src="'data:image/jpeg;base64,'+hospital.logoData" width="80">
                </td>
            </tr>
            <tr>
                <th>医院编码</th>
                <td>{{ hospital.hoscode }}</td>
                <th>地址</th>
                <td>{{ hospital.param.fullAddress }}</td>
            </tr>
            <tr>
                <th>坐车路线</th>
                <td colspan="3">{{ hospital.route }}</td>
            </tr>
            <tr>
                <th>医院简介</th>
                <td colspan="3">{{ hospital.intro }}</td>
            </tr>
        </tbody>
        </table>

        <h4>预约规则信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
        <tbody>
            <tr>
                <th width="15%">预约周期</th>
                <td width="35%">{{ bookingRule.cycle }}天</td>
                <th width="15%">放号时间</th>
                <td width="35%">{{ bookingRule.releaseTime }}</td>
            </tr>
            <tr>
                <th>停挂时间</th>
                <td>{{ bookingRule.stopTime }}</td>
                <th>退号时间</th>
                <td>{{ bookingRule.quitDay == -1 ? '就诊前一工作日' : '就诊当日' }}{{ bookingRule.quitTime }} 前取消</td>
            </tr>
            <tr>
                <th>预约规则</th>
                <td colspan="3">
                <ol>
                <li v-for="item in bookingRule.rule" :key="item">{{ item }}</li>
                </ol>
                </td>
            </tr>
        <br>
            <el-row>
            <el-button @click="back">返回</el-button>
            </el-row>
        </tbody>
    </table>
</div>
</template>
<script>
import hospital from '@/api/hospital'
export default {
    data(){
        return {
            hospital: null,//医院信息
            bookingRule:null//预约信息
        }
    },
    created(){
        //获取路径中的路由id
        const id = this.$route.params.id
        //调用方法，根据id查询医院详情
        this.fetchHospDetail(id)
    },
    methods: {
        //根据id查询医院详情信息
        fetchHospDetail(id){
            hospital.showHospital(id)
                .then(response=>{
                    this.hospital = response.data.hospital
                    this.bookingRule = response.data.bookingRule
                })
        },
        //返回列表
        back(){
            //路由跳转
            this.$router.push({path:'hospSet/hosp/list'})
        }
        
    }
}
</script>

2.5、获取路径中的路由的中的id

2.6、通过路由跳转返回原来的页面

3、详情页面样式美化

改样式文件是控制详情展示的css布局文件
1，将/show.css文件引入yygh-admin/src/styles目录

2，在src/main.js文件添加引用

4、测试