VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁(yè)步驟詳情

更新時(shí)間：2022年04月25日 17:29:43 作者：Hudie.

這篇文章主要為大家介紹了VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁(yè)步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

（1）定義布局

將準(zhǔn)備好的靜態(tài)資源下面的css、images文件夾添加到assets目錄：

添加靜態(tài)資源

1.修改默認(rèn)布局

參考靜態(tài)資源文件首頁(yè)，我們可以把頁(yè)頭和頁(yè)尾提取出來(lái)，形成布局頁(yè)。在layouts目錄下修改默認(rèn)布局文件default.vue，將主內(nèi)容區(qū)域的內(nèi)容替換成<nuxt />。

并且在默認(rèn)布局中引入下面的頭、尾文件：

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共頭 -->
      <myheader />
      <div class="main-container">
        <el-scrollbar class="page-component__scroll">
          <!-- 內(nèi)容區(qū)域 -->
          <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.提取頭文件

創(chuàng)建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">牧醫(yī)通 預(yù)約掛號(hào)統(tǒng)一平臺(tái)</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="點(diǎn)擊輸入醫(yī)院名稱"
            @select="handleSelect"
          >
            <span
              slot="suffix"
              class="search-btn v-link highlight clickable selected"
              >搜索
            </span>
          </el-autocomplete>
        </div>
      </div>
      <!-- 右側(cè) -->
      <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>掛號(hào)訂單</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"
          >登錄/注冊(cè)</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: "",
    };
  },
  created() {
  },
  methods: {
    //在輸入框輸入值，彈出下拉框，顯示相關(guān)內(nèi)容
    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);
      });
    },
    //在下拉框選擇某一個(gè)內(nèi)容，執(zhí)行下面方法，跳轉(zhuǎn)到詳情頁(yè)面中
    handleSelect(item) {
      window.location.href = "/hospital/" + item.hoscode;
    },
    //點(diǎn)擊某個(gè)醫(yī)院名稱，跳轉(zhuǎn)到詳情頁(yè)面中  
    show(hoscode) {
      window.location.href = "/hospital/" + hoscode;
    },
  },
};
</script>

3.提取尾文件

創(chuàng)建layouts/myfooter.vue文件：

<template>
    <div class="footer-container">
        <div class="wrapper">
            <div><span class="record">京ICP備13018369號(hào)</span><span
            class="phone">電話掛號(hào)010-56253825</span></div>
            <div class="right"><span
            class="v-link clickable"> 聯(lián)系我們 </span><span
            class="v-link clickable"> 合作伙伴 </span><span
            class="v-link clickable"> 用戶協(xié)議 </span><span
            class="v-link clickable"> 隱私協(xié)議 </span></div>
        </div>
    </div>
</template>
<script>
export default {
}
</script>

（2）首頁(yè)引入

修改pages/inde.vue文件，引入寫好的前端頁(yè)面，內(nèi)容過(guò)多，這里不再給出具體代碼。使用npm run dev啟動(dòng)項(xiàng)目，通過(guò)http://localhost:3000訪問(wèn)，得到如下靜態(tài)頁(yè)面：

當(dāng)前效果

（3）首頁(yè)數(shù)據(jù)API接口

在首頁(yè)主要完成下面幾個(gè)功能：

獲取醫(yī)院等級(jí)（根據(jù)數(shù)據(jù)字典編碼獲?。?/li>
獲取地區(qū)（根據(jù)數(shù)據(jù)字典編碼獲取）
醫(yī)院分頁(yè)列表。
根據(jù)醫(yī)院名稱關(guān)鍵字搜索醫(yī)院列表。

下面展示的是靜態(tài)頁(yè)面，接下來(lái)根據(jù)這些功能，完成首頁(yè)數(shù)據(jù)的API接口。

需要完成的接口

1.獲取醫(yī)院等級(jí)/地區(qū)接口

由于查詢醫(yī)院等級(jí)、地區(qū)兩個(gè)功能可以只提供同一個(gè)接口，所以將兩個(gè)功能都合并在findByDictCode方法中：

Controller：

    @ApiOperation(value = "根據(jù)dictCode獲取下級(jí)節(jié)點(diǎn)")
    @GetMapping("findByDictCode/{dictCode}")
    public Result findByDictCode(@PathVariable String dictCode) {
        List<Dict> list = dictService.findByDictCode(dictCode);
        return Result.ok(list);
    }

Service接口：

// 根據(jù)dictCode獲取下級(jí)結(jié)點(diǎn)
List<Dict> findByDictCode(String dictCode);
// 根據(jù)id查詢子數(shù)據(jù)列表
List<Dict> findChildData(Long id);

Service實(shí)現(xiàn)類：

	// 根據(jù)dictCode獲取下級(jí)結(jié)點(diǎn)
    @Override
    public List<Dict> findByDictCode(String dictCode) {
        //根據(jù)dictCode獲取對(duì)應(yīng)id
        Long id = this.getDictByDictCode(dictCode).getId();
        // 根據(jù)id獲取子結(jié)點(diǎn)
        List<Dict> childData = this.findChildData(id);
        return childData;
    }
    // 根據(jù)dict_code查詢數(shù)據(jù)字典
    private Dict getDictByDictCode(String dictCode) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("dict_code", dictCode);
        Dict codeDict = baseMapper.selectOne(wrapper);
        return codeDict;
    }
    // 根據(jù)id查詢子數(shù)據(jù)列表
	@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();
            // 調(diào)用hasChildren方法判斷是否包含子節(jié)點(diǎn)
            boolean flag = this.hasChildren(dictId);
            // 為每條記錄設(shè)置hasChildren屬性
            dict.setHasChildren(flag);
        }
        return dictList;
    }

2.醫(yī)院列表接口

Controller：

    @ApiOperation(value = "查詢醫(yī)院列表")
    @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接口：

	// 醫(yī)院列表(條件查詢帶分頁(yè))
    Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);

Service：

// 醫(yī)院列表(條件查詢帶分頁(yè))
    @Override
    public Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo) {
        // 1.創(chuàng)建pageable對(duì)象
        Pageable pageable = PageRequest.of(page - 1, limit);
        // 2.創(chuàng)建條件匹配器
        ExampleMatcher matcher = ExampleMatcher.matching()
                .withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING)
                .withIgnoreCase(true);
        // 3.hospitalQueryVo轉(zhuǎn)換為Hospital對(duì)象
        Hospital hospital = new Hospital();
        BeanUtils.copyProperties(hospitalQueryVo, hospital);
        // 4.創(chuàng)建對(duì)象
        Example<Hospital> example = Example.of(hospital, matcher);
        // 5.調(diào)用方法實(shí)現(xiàn)查詢
        Page<Hospital> pages = hospitalRepository.findAll(example, pageable);
        // 6.得到所有醫(yī)院信息的集合
        pages.getContent().stream().forEach(item -> {
            this.setHospitalHosType(item);
        });
        return pages;
    }
    // 獲取查詢list集合,遍歷進(jìn)行醫(yī)院等級(jí)封裝
    private Hospital setHospitalHosType(Hospital hospital) {
        // 封裝醫(yī)院等級(jí)
        String hostypeString = dictFeignClient.getName("Hostype", hospital.getHostype());
        hospital.getParam().put("hostypeString", hostypeString);
        // 封裝醫(yī)院省市區(qū)
        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.模糊查詢醫(yī)院列表

Controller：

    @ApiOperation(value = "根據(jù)醫(yī)院名稱查詢")
    @GetMapping("findByHosName/{hosname}")
    public Result findByHosName(@PathVariable String hosname) {
        List<Hospital> list = hospitalService.findByHosname(hosname);
        return Result.ok(list);
    }

Service接口：

    // 根據(jù)醫(yī)院名稱查詢
    List<Hospital> findByHosname(String hosname);

Service實(shí)現(xiàn)類：

// 根據(jù)醫(yī)院名稱做模糊查詢 @Override public List<Hospital> findByHosname(String hosname) {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> return hospitalRepository.findHospitalByHosnameLike(hosname); }    // 根據(jù)醫(yī)院名稱做模糊查詢
    @Override
    public List<Hospital> findByHosname(String hosname) {
        return hospitalRepository.findHospitalByHosnameLike(hosname);
    }

Repository：

    /**
     * 根據(jù)醫(yī)院名稱做模糊查詢
     * @param hosname
     * @return
     */
    List<Hospital> findHospitalByHosnameLike(String hosname);

（4）首頁(yè)前端實(shí)現(xiàn)

1.封裝Api請(qǐng)求

/api/hosp.js：

import request from '@/utils/request'
const api_name = `/api/hosp/hospital`
export default {
    // 查詢醫(yī)院列表
    getPageList(page, limit, searchObj) {
        return request({
            url: `${api_name}/findHospList/${page}/${limit}`,
            method: 'get'
        })
    },
    // 根據(jù)醫(yī)院名稱模糊查詢
    getByHosName(hosname) {
        return request({
            url: `${api_name}/findByHosName/${hosname}`,
            method: 'get'
        })
    },
    // 根據(jù)醫(yī)院編號(hào)查詢醫(yī)院詳情
    show(hoscode) {
        return request({
            url: `${api_name}/findHospDetail/${hoscode}`,
            method: 'get'
        })
    },
    // 根據(jù)醫(yī)院編號(hào)查詢科室信息
    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 {
    // 根據(jù)dictCode獲取下級(jí)結(jié)點(diǎn)
    findByDictCode(dictCode) {
        return request({
            url: `${api_name}/findByDictCode/${dictCode}`,
            method: 'get'
        })
    },
    // 根據(jù)id獲取下級(jí)結(jié)點(diǎn)
    findByParentId(parentId) {
        return request({
            url: `${api_name}/findChildData/${parentId}`,
            method: 'get'
        })
    }
}

2.預(yù)約掛號(hào)前端頁(yè)面

使用nuxt進(jìn)行動(dòng)態(tài)路由，依次創(chuàng)建下面三個(gè)vue文件，分別導(dǎo)入下面的文件：

使用nuxt進(jìn)行動(dòng)態(tài)路由

預(yù)約掛號(hào)前端頁(yè)面：github預(yù)約掛號(hào)前端vue頁(yè)面

預(yù)約掛號(hào)前端頁(yè)面

醫(yī)院詳情頁(yè)面：github醫(yī)院詳情前端vue頁(yè)面

醫(yī)院詳情前端頁(yè)面

預(yù)約須知頁(yè)面：github預(yù)約須知前端vue頁(yè)面

預(yù)約須知前端頁(yè)面

以上就是VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁(yè)步驟詳情的詳細(xì)內(nèi)容，更多關(guān)于VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁(yè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: