v3-admin/src/api/home/index.ts

@@ -1,10 +1,19 @@
 import request from '@/utils/request'
-import type { HospitalResponseData} from './type'
+import type { HospitalResponseData, HospitalLevelAndRegionResponseData, HospitalInfo } from './type'
 
 //通过枚举管理首页模块的接口地址
 enum API {
   //获取已有的医院的数据接口地址
   HOSPITAL_URL = '/hosp/hospital/',
+  //获取医院的等级与地区的接口
+  HOSPITALLEVELANDREGION_URL = '/cmn/dict/findByDictCode/',
+  //根据关键字医院的名字获取数据
+  HOSPITALINFO_URL = '/hosp/hospital/findByHosname/'
+
 }
 //获取医院的数据
-export const reqHospital = (page: number, limit: number) => request.get<any, HospitalResponseData>(API.HOSPITAL_URL + `${page}/${limit}`)
+export const reqHospital = (page: number, limit: number, hostype = '') => request.get<any, HospitalResponseData>(API.HOSPITAL_URL + `${page}/${limit}?hostype=${hostype}`)
+//获取医院的等级或者获取医院的地区的数据
+export const reqHospitalLevelAndRegion = (dictCode: string) => request.get<any, HospitalLevelAndRegionResponseData>(API.HOSPITALLEVELANDREGION_URL + dictCode);
+//根据关键字医院的名字获取数据
+export const reqHospitalInfo = (hosname: string) => request.get<any, HospitalInfo>(API.HOSPITALINFO_URL + hosname)

v3-admin/src/api/home/type.ts

@@ -3,4 +3,92 @@ export interface ResponseData {
   code: number,
   message: string,
   ok: boolean
-}
+}
+//代表已有的医院数据的ts类型
+export interface Hospital {
+  "id": string,
+  "createTime": string,
+  "updateTime": string,
+  "isDeleted": number,
+  "param": {
+    "hostypeString": string,
+    "fullAddress": string
+  },
+  "hoscode": string,
+  "hosname": string,
+  "hostype": string,
+  "provinceCode": string,
+  "cityCode": string,
+  "districtCode": string,
+  "address": string
+  "logoData": string,
+  "intro": null,
+  "route": string,
+  "status": number,
+  "bookingRule": {
+    "cycle": number,
+    "releaseTime": string,
+    "stopTime": string,
+    "quitDay": number,
+    "quitTime": string,
+    "rule": string[]
+  }
+}
+//存储全部已有医院的数据
+export type Content = Hospital[]
+
+//获取已有医院接口返回的数据类型
+export interface HospitalResponseData extends ResponseData {
+  data: {
+    "content": Content,
+    "pageable": {
+      "sort": {
+        "sorted": boolean,
+        "unsorted": boolean,
+        "empty": boolean
+      },
+      "pageNumber": number,
+      "pageSize": number,
+      "offset": number,
+      "paged": boolean,
+      "unpaged": boolean
+    },
+    "totalPages": number,
+    "totalElements": number,
+    "last": boolean,
+    "first": boolean,
+    "sort": {
+      "sorted": boolean,
+      "unsorted": boolean,
+      "empty": boolean
+    },
+    "numberOfElements": number,
+    "size": number,
+    "number": number,
+    "empty": boolean
+  }
+}
+
+//代表医院等级或者地区数据ts类型
+export interface HospitalLevelAndRegion {
+  "id": number,
+  "createTime": string,
+  "updateTime": string,
+  "isDeleted": number,
+  "param": {},
+  "parentId": number,
+  "name": string,
+  "value": string,
+  "dictCode": string,
+  "hasChildren": boolean
+}
+//遍历医院的数组
+export type HospitalLevelAndRegionArr = HospitalLevelAndRegion[]
+//获取等级或者医院地址接口返回的类型
+export interface HospitalLevelAndRegionResponseData extends ResponseData{
+  data: HospitalLevelAndRegion
+}
+
+export interface HospitalInfo extends ResponseData {
+  data: Content
+}

v3-admin/src/components/hospital_top/index.vue

@@ -2,7 +2,7 @@
   <div class="top">
     <div class="content">
       <!-- 左侧 -->
-      <div class="left">
+      <div class="left" @click="goHome">
         <img src="../../assets/images/logo.png" alt="" />
         <p>尚医通 预约挂号统一平台</p>
       </div>
@@ -16,6 +16,14 @@
 </template>
 
 <script setup lang="ts">
+import {useRouter} from "vue-router"
+let $route = useRouter()
+//回到首页
+const goHome = ()=>{
+  $route.push({
+    path: '/home'
+  })
+}
 </script>
 
 <style scoped lang="scss">

v3-admin/src/pages/home/card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card" shadow="hover">
+  <el-card class="box-card" shadow="hover" @click="goDetail">
     <div class="content">
       <div class="left">
         <div class="hospital_name">{{ hospitalInfo.hosname }}</div>
@@ -51,7 +51,7 @@
                 p-id="6508"
               ></path>
             </svg>
-            <span>每天{{hospitalInfo.bookingRule?.releaseTime}}放号</span>
+            <span>每天{{ hospitalInfo.bookingRule?.releaseTime }}放号</span>
           </div>
         </div>
       </div>
@@ -63,8 +63,21 @@
 </template>
 
 <script setup lang="ts">
+import { useRouter } from "vue-router";
+let $router = useRouter();
+
+//点击跳转
+const goDetail = () => {
+  console.log(props);
+  $router.push({
+    path: "/hospital/register",
+    query: {
+      hoscode: props.hospitalInfo.hoscode
+    }
+  });
+};
 //接受父组件传递过来的props -> 已有的医院数据
-defineProps(["hospitalInfo"]);
+let props = defineProps(["hospitalInfo"]);
 </script>
 
 <style scoped lang="scss">

v3-admin/src/pages/home/index.vue

@@ -7,11 +7,11 @@
     <el-row :gutter="20">
       <el-col :span="20">
         <!-- 首页医院 -->
-        <Level></Level>
+        <Level @getLevel="getLevel"></Level>
         <!-- 首页地区 -->
         <Region></Region>
         <!-- 展示医院的信息 -->
-        <div class="hospital">
+        <div class="hospital" v-if="hasHospitalArr.length > 0">
           <Card
             class="item"
             v-for="item in hasHospitalArr"
@@ -19,6 +19,7 @@
             :key="item"
           ></Card>
         </div>
+        <el-empty v-else description="暂无数据" />
         <!-- 展示分页器 -->
 
         <el-pagination
@@ -32,7 +33,7 @@
           @current-change="currentChange"
         />
       </el-col>
-      <el-col :span="4"></el-col>
+      <el-col :span="4">123</el-col>
     </el-row>
   </div>
 </template>
@@ -45,6 +46,7 @@ import Region from "./region/index.vue";
 import Card from "./card/index.vue";
 import { onMounted, ref } from "vue";
 import { reqHospital } from "@/api/home/index";
+import type { Content, HospitalResponseData } from "@/api/home/type";
 
 //分页器页码
 let pageNo = ref<number>(1);
@@ -53,11 +55,14 @@ let pageNo = ref<number>(1);
 let pageSize = ref<number>(10);
 
 //存储已有的医院数据
-let hasHospitalArr = ref([]);
+let hasHospitalArr = ref<Content>([]);
 
 //存储医院总个数
 let total = ref<number>(0);
 
+//存储医院的等级相应的数据
+let hostype = ref<string>("");
+
 onMounted(() => {
   getHospitalInfo();
 });
@@ -65,14 +70,18 @@ onMounted(() => {
 //获取医院已有的数据
 const getHospitalInfo = async () => {
   //获取医院数据  默认获取第一页  一页是个医院的数据
-  let result: any = await reqHospital(pageNo.value, pageSize.value);
+  let result: HospitalResponseData = await reqHospital(
+    pageNo.value,
+    pageSize.value,
+    hostype.value
+  );
   console.log(result);
-  if (result.data.code == 200) {
+  if (result.code == 200) {
     //存储数据
-    hasHospitalArr.value = result.data.data.content;
+    hasHospitalArr.value = result.data.content;
     // console.log(result)
     //存储医院总个数
-    total.value = result.data.data.totalElements;
+    total.value = result.data.totalElements;
   }
 };
 
@@ -84,9 +93,17 @@ const currentChange = () => {
 //分页器下拉菜单发生变化的时候 会触发
 const sizeChange = () => {
   //当前页码回归第一页
-  pageNo.value = 1
+  pageNo.value = 1;
+  //在发送一次请求
+  getHospitalInfo();
+};
+
+//子组件定义事件-等级
+const getLevel = (level: string) => {
+  //收集参数：等级
+  hostype.value = level;
   //在发送一次请求
-  getHospitalInfo()
+  getHospitalInfo();
 };
 </script>
 

v3-admin/src/pages/home/level/index.vue

@@ -4,18 +4,59 @@
     <div class="content">
       <div class="left">等级:</div>
       <ul class="hospital">
-        <li class="active">全部</li>
-        <li>三级甲等</li>
-        <li>三级甲等</li>
-        <li>三级甲等</li>
-        <li>三级甲等</li>
-        <li>三级甲等</li>
+        <li :class="{ active: activeFlag == '' }" @click="changeLevel('')">
+          全部
+        </li>
+        <li
+          :class="{ active: activeFlag == level.value }"
+          v-for="level in levelArr"
+          :key="level.value"
+          @click="changeLevel(level.value)"
+        >
+          {{ level.name }}
+        </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { reqHospitalLevelAndRegion } from "@/api/home";
+import { onMounted, ref } from "vue";
+import type {
+  HospitalLevelAndRegionResponseData,
+  HospitalLevelAndRegionArr,
+} from "@/api/home/type";
+
+//定义一个数组存储医院等级里面的数据
+let levelArr = ref<HospitalLevelAndRegionArr>([]);
+//控制医院高亮显示的状态
+let activeFlag = ref<string>("");
+
+//组件挂载完毕
+onMounted(() => {
+  getLevel();
+});
+//获取医院等级的数据
+const getLevel = async () => {
+  let result: HospitalLevelAndRegionResponseData =
+    await reqHospitalLevelAndRegion("Hostype");
+  // console.log(result)
+
+  //存储医院等级的数据
+  if (result.code == 200) {
+    levelArr.value = result.data;
+  }
+};
+//点击等级的按钮
+//点击的时候 存储这个value值
+const changeLevel = (level: string) => {
+  activeFlag.value = level;
+  //触发自定义事件：将等级的数据传送给父组件
+  $emit("getLevel", level);
+};
+
+let $emit = defineEmits(["getLevel"]);
 </script>
 
 <style scoped lang="scss">
@@ -35,12 +76,12 @@
       display: flex;
       li {
         margin-right: 10px;
-        &.active{
-          color:#55a6fe
+        &.active {
+          color: #55a6fe;
         }
       }
-      li:hover{
-        color:#55a6fe;
+      li:hover {
+        color: #55a6fe;
         //把指针变为手指状
         cursor: pointer;
       }

v3-admin/src/pages/home/search/index.vue

@@ -4,17 +4,59 @@
       clearable
       :trigger-on-focus="false"
       placeholder="请输入医院名称"
+      v-model="hosname"
+      :fetch-suggestions="fetchData"
+      @select="goDetail"
     />
     <el-button type="primary" :icon="Search">搜索</el-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import {  Search } from '@element-plus/icons-vue'
+import { Search } from "@element-plus/icons-vue";
+
+import { ref } from "vue";
+import { reqHospitalInfo } from "@/api/home/index";
+import type { HospitalInfo } from "@/api/home/type";
+
+import {useRouter} from 'vue-router'
+//创建一个路由对象
+const $router = useRouter()
+
+
+//收集关键字(医院的名字)
+let hosname = ref<string>("");
+
+// console.log(hosname);
+//顶部组件的回调
+const fetchData = async (queryString: string, cb: any) => {
+  //当用户输入关键字 函数会执行一次 发请求获取数据
+  let result: HospitalInfo = await reqHospitalInfo(queryString)
+  console.log(result.data)
+
+  //整理数据  变成组件需要的数据
+  let showData = result.data.map((item)=>{
+    return{
+      value: item.hosname, //展示的医院的名字
+      hoscode: item.hoscode //展示医院的代码
+    }
+  })
+  cb(showData)
+};
+//点击某一个事件
+const goDetail = (item: any)=>{
+  console.log(item)
+  $router.push({
+    path: '/hospital/register',
+    query: {
+      hoscode: item.hoscode
+    }
+  })
+}
 </script>
 
 <style scoped lang="scss">
-.search{
+.search {
   width: 100%;
   height: 50px;
   display: flex;
@@ -22,10 +64,9 @@ import {  Search } from '@element-plus/icons-vue'
   align-items: center;
   margin: 10px 0;
   //使用深度选择器 针对于第三方库
-  ::v-deep(.el-input__wrapper){
+  ::v-deep(.el-input__wrapper) {
     width: 600px;
     margin-right: 10px;
   }
-
 }
 </style>

v3-admin/src/pages/home/tip/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    静态科室
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

v3-admin/src/pages/hospital/close/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    停诊信息
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

v3-admin/src/pages/hospital/detail/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    医院详情
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

v3-admin/src/pages/hospital/index.vue

@@ -1,13 +1,93 @@
 <template>
-  <div>
-
+  <div class="hospital">
+    <!-- 左侧导航栏区域 -->
+    <div class="menu">
+      <div class="top">
+        <el-icon><HomeFilled /></el-icon>
+        <span> / 医院信息</span>
+      </div>
+      <el-menu :default-active="$route.path" class="el-menu-vertical-demo">
+        <el-menu-item
+          index="/hospital/register"
+          @click="changeActive('/hospital/register')"
+        >
+          <el-icon><icon-menu /></el-icon>
+          <span>预约挂号</span>
+        </el-menu-item>
+        <el-menu-item
+          index="/hospital/detail"
+          @click="changeActive('/hospital/detail')"
+        >
+          <el-icon><document /></el-icon>
+          <span>医院详情</span>
+        </el-menu-item>
+        <el-menu-item
+          index="/hospital/notice"
+          @click="changeActive('/hospital/notice')"
+        >
+          <el-icon><setting /></el-icon>
+          <span>预约通知</span>
+        </el-menu-item>
+        <el-menu-item
+          index="/hospital/close"
+          @click="changeActive('/hospital/close')"
+        >
+          <el-icon><InfoFilled /></el-icon>
+          <span>停诊信息</span>
+        </el-menu-item>
+        <el-menu-item
+          index="/hospital/search"
+          @click="changeActive('/hospital/search')"
+        >
+          <el-icon><Search /></el-icon>
+          <span>查询/取消</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <!-- 右侧内容展示区域 -->
+    <div class="content">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import {
+  Document,
+  Menu as IconMenu,
+  Setting,
+  InfoFilled,
+  Search,
+  HomeFilled,
+} from "@element-plus/icons-vue";
+import { useRouter, useRoute } from "vue-router";
+let $router = useRouter();
+//获取当前路由信息
+let $route = useRoute();
+console.log($route.path);
 
+//左侧菜单点击事件
+const changeActive = (path: string) => {
+  $router.push({
+    path,
+  });
+};
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.hospital {
+  display: flex;
+  .menu {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .top {
+      color: #7f7f7f;
+    }
+  }
+  .content {
+    flex: 8;
+  }
+}
 </style>

v3-admin/src/pages/hospital/notice/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    预约通知
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

v3-admin/src/pages/hospital/register/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    预约挂号
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

v3-admin/src/pages/hospital/search/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    查询取消
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

v3-admin/src/router/index.ts

@@ -4,14 +4,45 @@ import { createRouter, createWebHistory } from 'vue-router'
 export default createRouter({
   //路由的模式设计
   history: createWebHistory(),
-  routes:[
-    {
-      path:'/home',
-      component: ()=>import ('@/pages/home/index.vue')
-    },{
-      path:'/hospital',
-      component: ()=>import("@/pages/hospital/index.vue")
-    },{
+  routes: [
+    { 
+      path: '/home',
+      component: () => import('@/pages/home/index.vue')
+    }, {
+      path: '/hospital',
+      component: () => import("@/pages/hospital/index.vue"),
+      children: [{
+        path: 'register',
+        component: () => import("@/pages/hospital/register/index.vue"),
+        meta: {
+          title: '预约挂号'
+        }
+      }, {
+        path: 'detail',
+        component: () => import("@/pages/hospital/detail/index.vue"),
+        meta: {
+          title: '医院详情'
+        }
+      }, {
+        path: 'notice',
+        component: () => import("@/pages/hospital/notice/index.vue"),
+        meta: {
+          title: '预约通知'
+        }
+      }, {
+        path: 'close',
+        component: () => import("@/pages/hospital/close/index.vue"),
+        meta: {
+          title: '停诊信息'
+        }
+      }, {
+        path: 'search',
+        component: () => import("@/pages/hospital/search/index.vue"),
+        meta: {
+          title: '查询取消'
+        }
+      }]
+    }, {
       path: '/',
       redirect: '/home'
     }

v3-admin/src/utils/request.ts

@@ -17,7 +17,7 @@ request.interceptors.request.use((config) => {
 //响应拦截器
 request.interceptors.response.use((response) => {
   //处理http错误
-  return response
+  return response.data
 }, (error) => {
   //处理http网络错误
   let status = error.response.status