From 6d84346af9a2853f12c2205565d0e64d5348e4f3 Mon Sep 17 00:00:00 2001
From: ChenQiuYu <chenqiuyu@jizhiweb.cn>
Date: Mon, 26 May 2025 09:30:19 +0800
Subject: [PATCH] dev

---
 src/assets/config/apiConfig.ts             |  4 ++
 src/components/common/Calendar.vue         | 56 ++++++++++++----------
 src/components/outpatient/MedicalQueue.vue |  4 +-
 src/views/registration/index.vue           | 43 ++++++++++-------
 4 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/assets/config/apiConfig.ts b/src/assets/config/apiConfig.ts
index f1120ed..b963a44 100644
--- a/src/assets/config/apiConfig.ts
+++ b/src/assets/config/apiConfig.ts
@@ -6,6 +6,10 @@ export enum apiConfig{
     "signIn"="sign/in",//签到
     "signOut"="sign/out",//签退
     "managerUserVerify"="manager/user/verify",//获取用户信息
+    /**
+     * 挂号操作
+     */
+    "registrationList"="registration/list",//挂号列表
     /**
      * 接诊操作
      */
diff --git a/src/components/common/Calendar.vue b/src/components/common/Calendar.vue
index 24c5614..19db830 100644
--- a/src/components/common/Calendar.vue
+++ b/src/components/common/Calendar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
+import {ref, computed} from 'vue';
+import {ArrowLeft, ArrowRight} from '@element-plus/icons-vue'
+
 const currentMonth = ref(new Date().getMonth());
 const currentYear = ref(new Date().getFullYear());
 const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
@@ -51,17 +52,17 @@ const generateCalendarData = (
       // 当前月日期
       if ((isFirstWeek && day >= firstDayIndex) || (!isFirstWeek && dayCounter <= daysInMonth)) {
         const isToday = dayCounter === currentDay && month === currentMonthValue && year === currentYearValue;
-        weekDays.push({ day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday });
+        weekDays.push({day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday});
         dayCounter++;
       }
       // 前月日期
       else if (isFirstWeek) {
         const prevDay = daysInPrevMonth - firstDayIndex + day + 1;
-        weekDays.push({ day: prevDay, isCurrentMonth: false, isCurrentDay: false });
+        weekDays.push({day: prevDay, isCurrentMonth: false, isCurrentDay: false});
       }
       // 下月日期
       else {
-        weekDays.push({ day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false });
+        weekDays.push({day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false});
         nextMonthDayCounter++;
       }
     }
@@ -95,19 +96,19 @@ const nextMonth = () => {
   }
   selectedDate.value = null;
 };
-const emit=defineEmits(['dateClick']);
+const emit = defineEmits(['dateClick']);
 const handleDateClick = (day: number) => {
-    selectedDate.value = { day, isCurrentMonth:true };
-   emit('dateClick',`${currentYear.value}-${currentMonth.value + 1}-${day}` )
+  selectedDate.value = {day, isCurrentMonth: true};
+  emit('dateClick', `${currentYear.value}-${currentMonth.value + 1}-${day}`)
 };
 </script>
 
 <template>
   <div class="calendar-wrapper">
-    <div class="header">
-      <span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
+    <div class="calendar-wrapper-header">
+      <span class="btn" @click="prevMonth"><el-icon><ArrowLeft/></el-icon></span>
       <span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
-      <span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
+      <span class="btn" @click="nextMonth"><el-icon><ArrowRight/></el-icon></span>
     </div>
     <div class="row">
       <div class="item">
@@ -148,25 +149,24 @@ const handleDateClick = (day: number) => {
 
 <style scoped lang="scss">
 .calendar-wrapper {
-  .header {
+  &-header {
+    margin-bottom: 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
-    .current{
+
+    .current {
       font-weight: 500;
       font-size: 18px;
       color: #333333;
       font-style: normal;
-      margin-bottom: 8px;
     }
 
     .btn {
-      padding: 5px 10px;
       font-size: 14px;
       color: #1677FE;
       background-color: #FFF;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
 
       &:hover {
@@ -175,10 +175,11 @@ const handleDateClick = (day: number) => {
       }
     }
   }
+
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding:0 20px 20px;
+  padding: 0 20px 20px;
   background-color: #FFF;
   border-radius: 0 0 8px 8px;
   display: flex;
@@ -187,41 +188,46 @@ const handleDateClick = (day: number) => {
   .row {
     flex: 1;
     width: 100%;
-    background: #F9FAFC ;
+    background: #F9FAFC;
     padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: 500;
-    font-size: 14px;
+    font-size: 12px;
     color: #999999;
     font-style: normal;
+
     .item {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
+
       span {
         margin: auto;
-        height: 34px;
-        width: 34px;
+        height: 25px;
+        width: 25px;
         display: flex;
         justify-content: center;
         align-items: center;
         font-weight: bold;
-        font-size: 16px;
+        font-size: 14px;
         color: #666666;
         font-style: normal;
-        border-radius:17px;
+        border-radius: 25px;
       }
+
       .currentDay {
         background: #1677FE;
         color: #fff;
       }
-      .otherMonth{
+
+      .otherMonth {
         color: #999;
       }
+
       .selectedDay {
         background: #FFA500;
         color: #fff;
diff --git a/src/components/outpatient/MedicalQueue.vue b/src/components/outpatient/MedicalQueue.vue
index 1e6dae3..ac96c24 100644
--- a/src/components/outpatient/MedicalQueue.vue
+++ b/src/components/outpatient/MedicalQueue.vue
@@ -35,7 +35,7 @@
                        alt="头像"/>
                   <img v-if="item.gender==2" class="avatar" src="/static/images/outpatient/women.png"
                        alt="头像"/>
-                   <span v-if="item.isAppointment" class="iconfont icon-yuyue yuyueIcon" ></span>
+                   <span v-if="item.isAppointment" class="iconfont icon-yuyue yuYueIcon" ></span>
                 </span>
               <span class="item-name">{{ item.name }}</span>
               <span class="item-time">
@@ -404,7 +404,7 @@ watch(() => selectedDate.value, (newValue, oldValue) => {
   right: 0;
   top: 50px;
 }
-.yuyueIcon{
+.yuYueIcon{
   width: 13px;
   height: 13px;
   position: absolute;
diff --git a/src/views/registration/index.vue b/src/views/registration/index.vue
index 2f1c020..87583e5 100644
--- a/src/views/registration/index.vue
+++ b/src/views/registration/index.vue
@@ -67,7 +67,7 @@
                 />
               </div>
             </div>
-            <div class="middle">
+            <div class="middle" v-loading="listLoading">
               <List :patientList="patientList" @rowClick="rowClick"></List>
             </div>
             <div class="bottom">
@@ -101,6 +101,7 @@ import Calendar from "@/components/common/Calendar.vue";
 import Panel from "@/components/common/Panel.vue";
 import {apiConfig} from "@/assets/config/apiConfig.ts";
 import {Search} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
 
 const dateName = ref<any>('挂号')
 const selectDate = (date: any) => {
@@ -155,18 +156,26 @@ const handleDateChange = (date: any[]) => {
   }
   getPatientList()
 }
-const getPatientList = () => {
+const listLoading = ref(false)
+const getPatientList = async () => {
+  listLoading.value = true
   id.value = null
-  post('registration/list', {
-    page: page.value,
-    size: size.value,
-    startDate: selectedDate.value[0],
-    endDate: selectedDate.value[1],
-    doctorId: doctorId.value,
-  }).then((res: any) => {
-    patientList.value = res.list
-    total.value = res.total_count
-  })
+  try {
+    const data: any = await post(apiConfig.registrationList, {
+      page: page.value,
+      size: size.value,
+      startDate: selectedDate.value[0],
+      endDate: selectedDate.value[1],
+      doctorId: doctorId.value,
+    }, {catch_error:true})
+    patientList.value = data.list
+    total.value = data.total_count
+  }
+  catch (e:any) {
+  }
+  finally {
+    listLoading.value = false
+  }
 }
 const total = ref(0)
 const size = ref(20)
@@ -208,9 +217,9 @@ const reset = () => {
 const doctorId = ref(null)
 const changeRole = (item: any, index: any) => {
   isShowNum.value = index
-  if(index==-1){
+  if (index == -1) {
     allList()
-  }else{
+  } else {
     doctorId.value = item.id
     getPatientList()
   }
@@ -235,12 +244,12 @@ const allList = () => {
 
   .left {
     height: 100%;
-    width: 382px;
+    width: 320px;
     display: flex;
     flex-direction: column;
 
     .left-top {
-      height: 399px;
+      height: 299px;
       background: #FFFFFF;
       border-radius: 8px;
     }
@@ -288,6 +297,7 @@ const allList = () => {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                margin-right: 5px;
               }
 
               .section_name {
@@ -297,6 +307,7 @@ const allList = () => {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                margin-right: 5px;
               }
 
               .btn {