VUE实现分布式医疗挂号系统预约挂号首页步骤详情

 更新时间:2022年04月25日 17:29:43   作者:Hudie.  
这篇文章主要为大家介绍了VUE实现分布式医疗挂号系统预约挂号首页步骤详情,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

首页初步效果

(1)定义布局

将准备好的静态资源下面的css、images文件夹添加到assets目录:

添加静态资源

1.修改默认布局

参考静态资源文件首页,我们可以把页头和页尾提取出来,形成布局页。在layouts目录下修改默认布局文件default.vue,将主内容区域的内容替换成<nuxt />。

并且在默认布局中引入下面的头、尾文件:

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共头 -->
      <myheader />
      <div class="main-container">
        <el-scrollbar class="page-component__scroll">
          <!-- 内容区域 -->
          <nuxt />
        </el-scrollbar>
      </div>
      <!-- 公共底 -->
      <myfooter />
    </div>
  </div>
</template>
<script>
import "~/assets/css/app.css";
import "~/assets/css/chunk.css";
import "~/assets/css/iconfont.css";
import "~/assets/css/main.css";
import myheader from "./myheader";
import myfooter from "./myfooter";
export default {
  components: {
    myheader,
    myfooter,
  },
};
</script>

2.提取头文件

创建layouts/myheader.vue文件:

<template>
  <div class="header-container">
    <div class="wrapper">
      <!-- logo -->
      <div class="left-wrapper v-link selected">
        <img
          style="width: 50px"
          width="50"
          height="50"
          src="~assets/images/logo.png"
        />
        <span class="text">牧医通 预约挂号统一平台</span>
      </div>
      <!-- 搜索框 -->
      <div class="search-wrapper">
        <div class="hospital-search animation-show">
          <el-autocomplete
            class="search-input small"
            prefix-icon="el-icon-search"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="点击输入医院名称"
            @select="handleSelect"
          >
            <span
              slot="suffix"
              class="search-btn v-link highlight clickable selected"
              >搜索
            </span>
          </el-autocomplete>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-wrapper">
        <span class="v-link clickable">帮助中心</span>
        <!--        <el-dropdown >-->
        <!--              <span class="el-dropdown-link">-->
        <!--                晴天<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--              </span>-->
        <!--            <el-dropdown-menu class="user-name-wrapper" slot="dropdown">-->
        <!--                <el-dropdown-item>挂号订单</el-dropdown-item>-->
        <!--                <el-dropdown-item>就诊人管理</el-dropdown-item>-->
        <!--                <el-dropdown-item divided>退出登录</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--        </el-dropdown>-->
        <span class="v-link clickable" @click="dialogUserFormVisible = true"
          >登录/注册</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: "",
    };
  },
  created() {
  },
  methods: {
    //在输入框输入值,弹出下拉框,显示相关内容
    querySearchAsync(queryString, cb) {
      this.searchObj = [];
      if (queryString == "") return;
      hospApi.getByHosName(queryString).then((response) => {
        for (let i = 0, len = response.data.length; i < len; i++) {
          response.data[i].value = response.data[i].hosname;
        }
        cb(response.data);
      });
    },
    //在下拉框选择某一个内容,执行下面方法,跳转到详情页面中
    handleSelect(item) {
      window.location.href = "/hospital/" + item.hoscode;
    },
    //点击某个医院名称,跳转到详情页面中  
    show(hoscode) {
      window.location.href = "/hospital/" + hoscode;
    },
  },
};
</script>

3.提取尾文件

创建layouts/myfooter.vue文件:

<template>
    <div class="footer-container">
        <div class="wrapper">
            <div><span class="record">京ICP备13018369号</span><span
            class="phone">电话挂号010-56253825</span></div>
            <div class="right"><span
            class="v-link clickable"> 联系我们 </span><span
            class="v-link clickable"> 合作伙伴 </span><span
            class="v-link clickable"> 用户协议 </span><span
            class="v-link clickable"> 隐私协议 </span></div>
        </div>
    </div>
</template>
<script>
export default {
}
</script>

(2)首页引入

修改pages/inde.vue文件,引入写好的前端页面,内容过多,这里不再给出具体代码。使用npm run dev启动项目,通过http://localhost:3000访问,得到如下静态页面:

当前效果

(3)首页数据API接口

在首页主要完成下面几个功能:

  • 获取医院等级(根据数据字典编码获取)
  • 获取地区(根据数据字典编码获取)
  • 医院分页列表。
  • 根据医院名称关键字搜索医院列表。

下面展示的是静态页面,接下来根据这些功能,完成首页数据的API接口。

需要完成的接口

需要完成的接口

1.获取医院等级/地区接口

由于查询医院等级、地区两个功能可以只提供同一个接口,所以将两个功能都合并在findByDictCode方法中:

Controller:

    @ApiOperation(value = "根据dictCode获取下级节点")
    @GetMapping("findByDictCode/{dictCode}")
    public Result findByDictCode(@PathVariable String dictCode) {
        List<Dict> list = dictService.findByDictCode(dictCode);
        return Result.ok(list);
    }

Service接口:

// 根据dictCode获取下级结点
List<Dict> findByDictCode(String dictCode);
// 根据id查询子数据列表
List<Dict> findChildData(Long id);

Service实现类:

	// 根据dictCode获取下级结点
    @Override
    public List<Dict> findByDictCode(String dictCode) {
        //根据dictCode获取对应id
        Long id = this.getDictByDictCode(dictCode).getId();
        // 根据id获取子结点
        List<Dict> childData = this.findChildData(id);
        return childData;
    }
    // 根据dict_code查询数据字典
    private Dict getDictByDictCode(String dictCode) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("dict_code", dictCode);
        Dict codeDict = baseMapper.selectOne(wrapper);
        return codeDict;
    }
    // 根据id查询子数据列表
	@Override
    @Cacheable(value = "dict", keyGenerator = "keyGenerator")
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", id);
        List<Dict> dictList = baseMapper.selectList(queryWrapper);
        for (Dict dict : dictList) {
            // 得到每一条记录的id值
            Long dictId = dict.getId();
            // 调用hasChildren方法判断是否包含子节点
            boolean flag = this.hasChildren(dictId);
            // 为每条记录设置hasChildren属性
            dict.setHasChildren(flag);
        }
        return dictList;
    }

2.医院列表接口

Controller:

    @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);
        List<Hospital> content = hospitals.getContent();
        int totalPages = hospitals.getTotalPages();
        return Result.ok(hospitals);
    }

Service接口:

	// 医院列表(条件查询带分页)
    Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);

Service:

// 医院列表(条件查询带分页)
    @Override
    public Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo) {
        // 1.创建pageable对象
        Pageable pageable = PageRequest.of(page - 1, limit);
        // 2.创建条件匹配器
        ExampleMatcher matcher = ExampleMatcher.matching()
                .withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING)
                .withIgnoreCase(true);
        // 3.hospitalQueryVo转换为Hospital对象
        Hospital hospital = new Hospital();
        BeanUtils.copyProperties(hospitalQueryVo, hospital);
        // 4.创建对象
        Example<Hospital> example = Example.of(hospital, matcher);
        // 5.调用方法实现查询
        Page<Hospital> pages = hospitalRepository.findAll(example, pageable);
        // 6.得到所有医院信息的集合
        pages.getContent().stream().forEach(item -> {
            this.setHospitalHosType(item);
        });
        return pages;
    }
    // 获取查询list集合,遍历进行医院等级封装
    private Hospital setHospitalHosType(Hospital hospital) {
        // 封装医院等级
        String hostypeString = dictFeignClient.getName("Hostype", hospital.getHostype());
        hospital.getParam().put("hostypeString", hostypeString);
        // 封装医院省市区
        String provinceString = dictFeignClient.getName(hospital.getProvinceCode());
        String cityString = dictFeignClient.getName(hospital.getCityCode());
        String districtString = dictFeignClient.getName(hospital.getDistrictCode());
        hospital.getParam().put("fullAddress", provinceString + cityString + districtString);
        return hospital;
    }

3.模糊查询医院列表

Controller:

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

Service接口:

    // 根据医院名称查询
    List<Hospital> findByHosname(String hosname);

Service实现类:

// 根据医院名称做模糊查询 @Override public List<Hospital> findByHosname(String hosname) {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> return hospitalRepository.findHospitalByHosnameLike(hosname); }    // 根据医院名称做模糊查询
    @Override
    public List<Hospital> findByHosname(String hosname) {
        return hospitalRepository.findHospitalByHosnameLike(hosname);
    }

Repository:

    /**
     * 根据医院名称做模糊查询
     * @param hosname
     * @return
     */
    List<Hospital> findHospitalByHosnameLike(String hosname);

(4)首页前端实现

1.封装Api请求

/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'
        })
    },
    // 根据医院名称模糊查询
    getByHosName(hosname) {
        return request({
            url: `${api_name}/findByHosName/${hosname}`,
            method: 'get'
        })
    },
    // 根据医院编号查询医院详情
    show(hoscode) {
        return request({
            url: `${api_name}/findHospDetail/${hoscode}`,
            method: 'get'
        })
    },
    // 根据医院编号查询科室信息
    findDepartment(hoscode) {
        return request({
            url: `${api_name}/department/${hoscode}`,
            method: 'get'
        })
    }
}

/api/dict.js:

import request from '@/utils/request'
const api_name = '/admin/cmn/dict'
export default {
    // 根据dictCode获取下级结点
    findByDictCode(dictCode) {
        return request({
            url: `${api_name}/findByDictCode/${dictCode}`,
            method: 'get'
        })
    },
    // 根据id获取下级结点
    findByParentId(parentId) {
        return request({
            url: `${api_name}/findChildData/${parentId}`,
            method: 'get'
        })
    }
}

2.预约挂号前端页面

使用nuxt进行动态路由,依次创建下面三个vue文件,分别导入下面的文件:

使用nuxt进行动态路由

预约挂号前端页面:github预约挂号前端vue页面

预约挂号前端页面

医院详情页面:github医院详情前端vue页面

医院详情前端页面

预约须知页面:github预约须知前端vue页面

预约须知前端页面

以上就是VUE实现分布式医疗挂号系统预约挂号首页步骤详情的详细内容,更多关于VUE实现分布式医疗挂号系统预约挂号首页的资料请关注脚本之家其它相关文章!

相关文章

  • vue改变循环遍历后的数据实例

    vue改变循环遍历后的数据实例

    今天小编就为大家分享一篇vue改变循环遍历后的数据实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue+Element UI实现下拉菜单的封装

    Vue+Element UI实现下拉菜单的封装

    这篇文章主要为大家详细介绍了Vue+Element UI实现下拉菜单的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue中如何将日期转换为指定的格式

    vue中如何将日期转换为指定的格式

    这篇文章主要介绍了vue中如何将日期转换为指定的格式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3中defineComponent 的作用详解

    vue3中defineComponent 的作用详解

    这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue中使用Echarts map图实现下钻至县级的思路详解

    vue中使用Echarts map图实现下钻至县级的思路详解

    这篇文章主要介绍了vue中使用Echarts map图实现下钻至县级,需要注意的是,因为我是直接从 vue-cli2 直接跳到 vue-cli4 ,还奇怪怎么读取不到JSON,查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别,感兴趣的朋友跟随小编一起看看吧
    2022-01-01
  • vue3 中使用 reactive 的问题小结

    vue3 中使用 reactive 的问题小结

    在 Vue 3 中,如果你使用 reactive 来定义一个响应式对象,那么这个对象的属性是不能被重新赋值的,因为 reactive 会将对象的属性转换为 getter/setter,这样 Vue 才能追踪到属性的变化,这篇文章主要介绍了vue3 中使用 reactive 的问题,需要的朋友可以参考下
    2024-03-03
  • vue3使用别名报错问题的解决办法(vetur插件报错问题)

    vue3使用别名报错问题的解决办法(vetur插件报错问题)

    最近在写一个购物网站使用vue,使用中遇到了问题,下面这篇文章主要给大家介绍了关于vue3使用别名报错问题的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue实现上传图片添加水印(升级版)

    vue实现上传图片添加水印(升级版)

    这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 浅谈VUE uni-app 模板语法

    浅谈VUE uni-app 模板语法

    这篇文章主要介绍了uni-app 的模板语法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue自定义指令详解

    Vue自定义指令详解

    这篇文章主要介绍了Vue自定义指令详解,需要的朋友可以参考下
    2022-12-12

最新评论