new

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

@@ -1,10 +1,15 @@
 import request from '@/utils/request'
-import { HospitalDetail } from "./type"
+import { HospitalDetail, DepartmentResponseData } from "./type"
 
 //通过枚举管理预约模块的接口地址
 enum API {
-  HOSPITALDETAIL_URL = '/hosp/hospital/'
+  HOSPITALDETAIL_URL = '/hosp/hospital/',
+  //获取某一个医院的科室的数据
+  HOSPITALDEPARTMENT_URL = '/hosp/hospital/department/'
 }
 
 //获取医院的数据
-export const reqHospitalDetail = (hoscode: string) => request.get<any, HospitalDetail>(API.HOSPITALDETAIL_URL + hoscode)
+export const reqHospitalDetail = (hoscode: string) => request.get<any, HospitalDetail>(API.HOSPITALDETAIL_URL + hoscode)
+
+//获取医院的数据
+export const reqHospitalDepartment = (hoscode: string) => request.get<any, DepartmentResponseData>(API.HOSPITALDEPARTMENT_URL + hoscode)

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

@@ -41,4 +41,20 @@ export interface HospDeatil {
 //医院详情返回数据的ts
 export interface HospitalDetail extends ResponseData {
   data: HospDeatil
+}
+
+
+//代表医院科室的数据
+export interface Department {
+  "depcode": string,
+  "depname": string,
+  "children"?: Department[]
+}
+
+//代表存储科室数组类型
+export type DepartmentArr = Department[]
+
+//获取科室接口返回的数据类型
+export interface DepartmentResponseData extends ResponseData {
+  data: DepartmentArr
 }

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

@@ -48,6 +48,7 @@
     <div class="content">
       <router-view></router-view>
     </div>
+
   </div>
 </template>
 
@@ -80,6 +81,8 @@ const changeActive = (path: string) => {
 onMounted(() => {
   //获取医院详情数据
   detailStore.getHospital($route.query.hoscode as string);
+  //获取医院科室数据
+  detailStore.getDepartment($route.query.hoscode as string)
 });
 </script>
 

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

@@ -49,13 +49,58 @@
       </div>
       <div class="right">456</div>
     </div>
+    <!-- 放置每一个医院的科室的数据 -->
+    <div class="department">
+      <div class="leftNav">
+        <ul>
+          <li
+            @click="changeIndex(index)"
+            v-for="(department, index) in hospitalStore.departMentArr"
+            :key="department.depcode"
+            :class="{ active: index == currentIndex }"
+          >
+            {{ department.depname }}
+          </li>
+        </ul>
+      </div>
+      <div class="departmentInfo">
+        <div
+          class="showDepartment"
+          v-for="department in hospitalStore.departMentArr"
+        >
+          <h1 class="cur">{{ department.depname }}</h1>
+          <ul>
+            <li v-for="item in department.children">
+              {{ item.depname }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import useDetaileStore from "@/store/modules/hospitalDetail";
+import { ref } from "vue";
 
 let hospitalStore = useDetaileStore();
+
+//高亮处理的响应式数据
+let currentIndex = ref<number>(0);
+
+//点击事件
+const changeIndex = (index: number) => {
+  currentIndex.value = index;
+  //获取右侧h1标题
+  let allH1 = document.querySelectorAll(".cur");
+
+  //滚动到对应科室的位置
+  allH1[currentIndex.value].scrollIntoView({
+    behavior: "smooth",
+    block: "center",
+  });
+};
 </script>
 
 <style scoped lang="scss">
@@ -91,5 +136,58 @@ let hospitalStore = useDetaileStore();
       flex: 1;
     }
   }
+  .department {
+    width: 100%;
+    height: 500px;
+    display: flex;
+    .leftNav {
+      width: 80px;
+      height: 100%;
+      ul {
+        width: 100%;
+        height: 100%;
+        background: rgb(248, 248, 248);
+        display: flex;
+        flex-direction: column;
+        li {
+          flex: 1;
+          text-align: center;
+          color: #7f7f7f;
+          font-size: 14px;
+          line-height: 40px;
+          &.active {
+            color: red;
+            background: white;
+            border-left: 1px solid red;
+          }
+        }
+      }
+    }
+    .departmentInfo {
+      flex: 1;
+      height: 100%;
+      overflow: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .showDepartment {
+        h1 {
+          background: rgb(248, 248, 248);
+          color: #7f7f7f;
+          height: 30px;
+          line-height: 30px;
+        }
+        ul {
+          display: flex;
+          flex-wrap: wrap;
+          li {
+            color: #7f7f7f;
+            width: 33%;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

v3-admin/src/store/modules/hospitalDetail.ts

@@ -1,13 +1,15 @@
 import { defineStore } from "pinia"
-import { reqHospitalDetail } from "@/api/hospital/index"
-import type { HospitalDetail } from "@/api/hospital/type"
+import { reqHospitalDetail ,reqHospitalDepartment} from "@/api/hospital/index"
+import type { HospitalDetail,DepartmentResponseData } from "@/api/hospital/type"
 import type { DetailState } from "./interface/index"
 
 const useDetaileStore = defineStore('Detail', {
   state: (): DetailState => {
     return {
       //医院详情的数据
-      hospitalInfo: ({} as HospitalDetail)
+      hospitalInfo: ({} as HospitalDetail),
+      //存储医院科室的数据
+      departMentArr: []
     }
   },
   actions: {
@@ -19,6 +21,13 @@ const useDetaileStore = defineStore('Detail', {
         this.hospitalInfo = result.data
       }
       console.log(this.hospitalInfo)
+    },
+    //获取医院科室接口的方法
+    async getDepartment(hoscode: string) {
+      let result: DepartmentResponseData = await reqHospitalDepartment(hoscode)
+      if(result.code == 200){
+        this.departMentArr = result.data
+      }
     }
   },
   getters: {