彤医通项目之用户系统医院等级和地区级联显示和实现点击效果

前提：先编写api包下的dict.js接口方法，②在methods处编写公共方法，定义属性，③根据不同需求，调用公共方法。此三步同如下，但略。

呈现出医院等级和地区后，在注册点击事件，呈现新的详情内容，如下。

1. 编写api包下的hosp.js接口方法

import request from '@/utils/request'

// 封装接口固定路径
const api_name = `/api/hosp/hospital`
export default {
  // 查询医院列表
  getPageList(page,limit,searchObj){
    return request({
      url:`${api_name}/findHospList/${page}/${limit}`,
      method:'get',
      params:searchObj
    })
  },

2. 在index.vue的methods处声明方法

	// 公共方法
      getList(){
        hospApi.getPageList(this.page,this.limit,this.searchObj)
          .then(response=>{
            for(let i in response.data.content){
              this.list.push(response.data.content[i])
            }
            this.page = response.data.totalPages
          })
      },

3. 定义相应属性

	return {
        searchObj: {}, // 条件+分页
        page: 1,
        limit: 10,

        hosname: '', //医院名称
        hostypeList: [], //医院等级集合
        districtList: [], //地区集合

        hostypeActiveIndex: 0, // 实时选中
        provinceActiveIndex: 0

      }

4. 根据不同需求，调用公共方法

	// 根据医院等级查询
      hostypeSelect(hostype,index){
        this.list = []
        this.page = 1
        this.hostypeActiveIndex = index
        this.searchObj.hostype = hostype
        // 调用查询医院列表的方法
        this.getList()
      },
      // 根据地区查询医院
      districtSelect(districtCode,index){
        this.list = []
        this.page =1
        this.provinceActiveIndex = index
        this.searchObj.districtCode = districtCode
        this.getList()
      },

5. 在template中写h5代码，注意定义点击事件，调用vue的methods方法

	<div class="left">
        <div class="home-filter-wrapper">
          <div class="title"> 医院</div>
          <div>
            <div class="filter-wrapper">
              <span class="label">等级：</span>
              <span v-for="(item,index) in hostypeList" :key="index"
                    class="item v-link clickable" @click="hostypeSelect(item.value,index)">{{item.name}}
              </span>
            </div>
            <div class="filter-wrapper">
              <span class="label">地区：</span>
              <span v-for="(item,index) in districtList" :key="index"
                class="item v-link clickable" @click="districtSelect(item.value,index)">{{item.name}}
              </span>
            </div>
          </div>
        </div>
      </div>

后端提供接口：

/**
 * @Author Weton Li
 * @Date 2021/5/1 14:32
 */
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospApiController {

    @Autowired
    private HospitalService hospitalService;

    /**
     * nuxt前端用户展示界面 分页查询医院小块
     * @param page
     * @param limit
     * @param hospitalQueryVo
     * @return
     */
    @ApiOperation(value = "查询医院列表")
    @GetMapping("findHospList/{page}/{limit}")
    public Result findHospList(@PathVariable Integer page,
                               @PathVariable Integer limit,
                               HospitalQueryVo hospitalQueryVo){
        Page<Hospital> hospitals = hospitalService.selectHospPage(page, limit, hospitalQueryVo);
        return Result.ok(hospitals);
    }

    @ApiOperation(value = "根据医院名称模糊查询")
    @GetMapping("findByHosName/{hosname}")
    public Result findByHosName(@PathVariable String hosname){
        List<Hospital> list = hospitalService.findByHosname(hosname);
        return Result.ok(list);
    }
}

service层

	/**
     * 在mongo中根据医院名称模糊查询出结果集
     * @param hosname
     * @return
     */
    @Override
    public List<Hospital> findByHosname(String hosname) {

        return hospitalRepository.findHospitalByHosnameLike(hosname);
    }

Repository层

/**
 * 接口继承接口
 * @Author Weton Li
 * @Date 2021/4/21 15:55
 */
@Repository
public interface HospitalRepository extends MongoRepository<Hospital,String> {

    /**
     * 1.用于判断是否存在医院
     * 2.用于通过医院编号查询一条医院信息
     * @param hoscode
     * @return
     */
    Hospital getHospitalByHoscode(String hoscode); // 固定规范方法格式

// 用户的前端

    /**
     * 在mongo中根据用户输入的医院名称模糊查询出一些符合模糊查询条件的医院结果集
      * @param hosname
     * @return
     */
    List<Hospital> findHospitalByHosnameLike(String hosname); // 固定规范格式 根据医院名称 模糊查询
}