new

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

@@ -1,14 +1,19 @@
 import request from '@/utils/request'
-import type { HospitalResponseData, HospitalLevelAndRegionResponseData } from './type'
+import type { HospitalResponseData, HospitalLevelAndRegionResponseData, HospitalInfo } from './type'
 
 //通过枚举管理首页模块的接口地址
 enum API {
   //获取已有的医院的数据接口地址
   HOSPITAL_URL = '/hosp/hospital/',
   //获取医院的等级与地区的接口
-  HOSPITALLEVELANDREGION_URL = '/cmn/dict/findByDictCode/'
+  HOSPITALLEVELANDREGION_URL = '/cmn/dict/findByDictCode/',
+  //根据关键字医院的名字获取数据
+  HOSPITALINFO_URL = '/hosp/hospital/findByHosname/'
+
 }
 //获取医院的数据
 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 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

@@ -88,3 +88,7 @@ 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

@@ -11,7 +11,7 @@
         <!-- 首页地区 -->
         <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>

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'
     }