new

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

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

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

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

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

@@ -7,7 +7,7 @@
     <el-row :gutter="20">
       <el-col :span="20">
         <!-- 首页医院 -->
-        <Level></Level>
+        <Level @getLevel="getLevel"></Level>
         <!-- 首页地区 -->
         <Region></Region>
         <!-- 展示医院的信息 -->
@@ -45,6 +45,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 +54,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 +69,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 +92,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/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