76 门诊预约挂号

2026-01-22 15:09:52 +08:00
parent 4450e3cc50
commit 0d57e984a6
13 changed files with 548 additions and 3820 deletions
--- a/openhis-ui-vue3/src/views/appoinmentmanage/index.vue
+++ b/openhis-ui-vue3/src/views/appoinmentmanage/index.vue
--- a/openhis-ui-vue3/src/views/appoinmentmanage/outpatientAppointment/index.vue
+++ b/openhis-ui-vue3/src/views/appoinmentmanage/outpatientAppointment/index.vue
@@ -4,7 +4,7 @@
    <div id="topSearchArea" class="top-search-area">
      <!-- 搜索标签行 -->
      <div class="search-labels">
-        <div class="search-label">导源日期</div>
+        <div class="search-label">号源日期</div>
        <div class="search-label">状态</div>
        <div class="search-label">患者姓名</div>
        <div class="search-label">就诊卡号</div>
@@ -34,8 +34,7 @@
          <select id="status-select" class="search-select" v-model="selectedStatus">
            <option value="all">全部</option>
            <option value="unbooked">未预约</option>
-            <option value="locked">锁定</option>
-            <option value="booked">待缴费</option>
+            <option value="booked">已预约</option>
            <option value="checked">已取号</option>
            <option value="cancelled">已停诊</option>
          </select>
@@ -105,38 +104,34 @@
        <!-- 使用网格布局的号源卡片列表 -->
        <div class="ticket-grid" v-if="filteredTickets.length > 0">
          <div v-for="(item, index) in filteredTickets" :key="item.slot_id" class="ticket-card" @dblclick="handleDoubleClick(item)" @contextmenu.prevent="handleRightClick($event, item)">
-            <div class="ticket-header">
-              <div class="ticket-number">{{ index + 1 }}</div>
-              <div class="ticket-type-badge" :class="item.ticketType === 'general' ? 'type-general' : 'type-expert'">
-                {{ item.ticketType === 'general' ? '普通' : '专家' }}
-              </div>
-            </div>
-            <div class="ticket-time">{{ item.dateTime }}</div>
-            <div class="ticket-doctor">{{ item.doctor }}</div>
+            <!-- 序号放在最右侧 -->
+            <div class="ticket-index">{{ index + 1 }}</div>
+            <!-- 1.时间 -->
+            <div class="ticket-id-time">{{ item.dateTime }}</div>
+            <!-- 2. 状态标签 -->
            <div class="ticket-status" :class="`status-${item.status}`">
              <span class="status-dot"></span>
              {{ item.status }}
            </div>
-            <div class="ticket-fee">挂号费: {{ item.fee }}</div>
-            <!-- 显示患者信息（如果已预约或已取号） -->
+            <!-- 3. 医生姓名（截断显示，悬停展示完整信息） -->
+            <div class="ticket-doctor" :title="item.doctor">{{ item.doctor }}</div>
+            <!-- 4. 挂号费 -->
+            <div class="ticket-fee">挂号费：{{ item.fee }}元</div>
+            <!-- 5. 号源类型 -->
+            <div class="ticket-type">{{ item.ticketType === 'general' ? '普通' : '专家' }}</div>
+            <!-- 6. 已预约患者信息 -->
            <div v-if="(item.status === '已预约' || item.status === '已取号') && item.patientName" class="ticket-patient">
-              <div class="patient-name">{{ item.patientName }}</div>
-              <div class="patient-card">{{ item.patientId }}</div>
-              <div class="patient-gender">性别：{{ item.patientGender || '-' }}</div>
+              {{ item.patientName }}({{ item.patientId }})
+            </div>
+            <!-- 7. 患者电话号码 -->
+            <div v-if="(item.status === '已预约' || item.status === '已取号') && item.phone" class="ticket-phone">
+              电话号码： {{ item.phone }}
            </div>
            <div class="ticket-actions">
              <button class="action-button book-button" @click="openPatientSelectModal(item.slot_id)" :disabled="item.status !== '未预约'" :class="{ 'disabled': item.status !== '未预约' }">
                <i class="el-icon-tickets"></i>
                预约
              </button>
-              <button class="action-button cancel-button" @click="confirmCancelConsultation(item)" :disabled="item.status === '已取消'" :class="{ 'disabled': item.status === '已取消' }">
-                <i class="el-icon-close"></i>
-                停诊
-              </button>
-              <button class="action-button check-in-button" @click="confirmCheckIn(item)" :disabled="item.status !== '已预约'" :class="{ 'disabled': item.status !== '已预约' }">
-                <i class="el-icon-circle-check"></i>
-                取号
-              </button>
            </div>
          </div>
          <div v-if="hasMore" class="loading-more">
@@ -166,7 +161,7 @@
          <input id="phone" class="search-input" placeholder="手机号" v-model="patientSearchParams.phone" @input="onPatientSearchInput">
          <button id="patient-search-btn" class="search-btn" @click="searchPatients">查询</button>
          <div class="patient-table-container">
-            <table id="patient-table" class="patient-table">
+            <table id="patient-table" class="patient-table" v-if="patients.length > 0">
              <thead>
                <tr>
                  <th>序号</th>
@@ -192,6 +187,11 @@
                </tr>
              </tbody>
            </table>
+            
+            <!-- 无搜索结果提示 -->
+            <div v-else-if="hasSearchCriteria && !isLoading" class="no-results">
+              未找到符合条件的患者，请检查搜索条件
+            </div>
          </div>
        </div>
        <div class="modal-footer">
@@ -231,13 +231,14 @@ import { listTicket, bookTicket, cancelTicket, checkInTicket, cancelConsultation
 import { getPatientList } from '@/api/cardRenewal/api';
 import { listDept } from '@/api/appoinmentmanage/dept';
 import { ref } from 'vue'
-import { ElDatePicker } from 'element-plus'
+import { ElDatePicker, ElPagination, ElMessageBox, ElMessage } from 'element-plus'
 import useUserStore from '@/store/modules/user'

 export default {
  name: 'OutpatientAppointment',
  components: {
-    ElDatePicker
+    ElDatePicker,
+    ElPagination
  },
  
  // 添加全局点击事件监听器，用于关闭右键菜单
@@ -324,35 +325,34 @@ export default {
    filteredTickets() {
      let filtered = [...this.tickets];
      
-      // 按日期筛选（如果选择了日期） - 暂时注释掉以排查问题
-      // if (this.selectedDate) {
-      //   filtered = filtered.filter(ticket => {
-      //     // 使用后端返回的dateTime字段进行筛选
-      //     if (ticket.dateTime) {
-      //       return ticket.dateTime.startsWith(this.selectedDate);
-      //     }
-      //     return true;
-      //   });
-      // }
+      //按日期筛选（如果选择了日期） 
+      if (this.selectedDate) {
+        filtered = filtered.filter(ticket => {
+          // 使用后端返回的dateTime字段进行筛选
+          if (ticket.dateTime) {
+            return ticket.dateTime.startsWith(this.selectedDate);
+          }
+          return true;
+        });
+      }
      
-      // 按状态筛选 - 暂时注释掉以排查问题
-      // if (this.selectedStatus !== 'all') {
-      //   // 状态映射表（后端返回中文状态，前端使用英文状态）
-      //   const statusMap = {
-      //     'unbooked': '未预约',
-      //     'locked': '已锁定',
-      //     'booked': '已预约',
-      //     'checked': '已取号',
-      //     'cancelled': '已取消'
-      //   };
-      //   const chineseStatus = statusMap[this.selectedStatus];
-      //   filtered = filtered.filter(ticket => ticket.status === chineseStatus);
-      // }
+      //按状态筛选 
+      if (this.selectedStatus !== 'all') {
+        // 状态映射表（后端返回中文状态，前端使用英文状态）
+        const statusMap = {
+          'unbooked': '未预约',
+          'booked': '已预约',
+          'checked': '已取号',
+          'cancelled': '已停诊'
+        };
+        const chineseStatus = statusMap[this.selectedStatus];
+        filtered = filtered.filter(ticket => ticket.status === chineseStatus);
+      }
      
-      // 按科室筛选 - 暂时注释掉以排查问题
-      // if (this.selectedDepartment !== 'all') {
-      //   filtered = filtered.filter(ticket => ticket.department === this.selectedDepartment);
-      // }
+      // 按科室筛选 
+      if (this.selectedDepartment !== 'all') {
+        filtered = filtered.filter(ticket => ticket.department === this.selectedDepartment);
+      }
      
      // 按号源类型筛选
      filtered = filtered.filter(ticket => {
@@ -365,62 +365,67 @@ export default {
      });
      
      // 按医生筛选 - 暂时注释掉以排查问题
-      // if (this.selectedDoctorId) {
-      //   const selectedDoctor = this.doctors.find(d => d.id === this.selectedDoctorId);
-      //   if (selectedDoctor) {
-      //     filtered = filtered.filter(ticket => ticket.doctor === selectedDoctor.name);
-      //   }
-      // }
-      
-      // 按患者信息筛选（姓名、就诊卡号、手机号） - 暂时注释掉以排查问题
-      // if (this.patientName || this.patientCard || this.patientPhone) {
-      //   filtered = filtered.filter(ticket => {
-      //     const matchesName = !this.patientName || ticket.patientName?.includes(this.patientName);
-      //     const matchesCard = !this.patientCard || ticket.patientId?.includes(this.patientCard);
-      //     const matchesPhone = !this.patientPhone || ticket.phone?.includes(this.patientPhone);
-      //     
-      //     return matchesName && matchesCard && matchesPhone;
-      //   });
-      // }
+      if (this.selectedDoctorId) {
+        const selectedDoctor = this.doctors.find(d => d.id === this.selectedDoctorId);
+        if (selectedDoctor) {
+          filtered = filtered.filter(ticket => ticket.doctor === selectedDoctor.name);
+        }
+      }
      
      return filtered;
    },
+    hasSearchCriteria() {
+      return Object.values(this.patientSearchParams).some(value => value && value.trim() !== '');
+    },
  },
  methods: {
    selectDoctor(doctorId) {
      this.selectedDoctorId = doctorId
-      console.log('Selected doctor:', doctorId)
      // 医生选择后，筛选号源
      this.onSearch();
    },
    onTypeChange() {
-      console.log('Type changed:', this.selectedType)
      // 移除onSearch()调用，让计算属性自动处理类型筛选
    },
    onDepartmentChange() {
-      console.log('Department changed:', this.selectedDepartment)
      this.onSearch()
    },
    onDoctorSearch() {
-      console.log('Searching doctor:', this.searchQuery)
      // 使用计算属性filteredDoctors实现实时搜索，无需调用API
    },
    openPatientSelectModal(ticketId) {
-      console.log('openPatientSelectModal called with ticketId:', ticketId);
      this.currentTicket = this.tickets.find(ticket => ticket.slot_id === ticketId);
-      console.log('Found ticket for modal:', this.currentTicket);
-      // 打开患者选择弹窗时，查询患者列表
-      this.searchPatients();
+      // 重置搜索参数
+      this.patientSearchParams = {
+        patientName: '',
+        medicalCard: '',
+        idCard: '',
+        phone: ''
+      };
+      // 清空患者列表
+      this.patients = [];
      this.showPatientModal = true;
-      console.log('Show patient modal:', this.showPatientModal);
+      // 默认加载所有患者
+      this.searchPatients();
    },
    
    // 患者搜索
-    searchPatients() {
-      console.log('searchPatients called with params:', this.patientSearchParams);
+    searchPatients() {      
+      // 检查是否有搜索条件
+      const hasSearchCriteria = Object.values(this.patientSearchParams).some(value => value && value.trim() !== '');
+      
+      // 设置加载状态
+      this.isLoading = true;
+      
+      // 准备搜索参数，确保支持模糊匹配
+      const searchParams = {
+        patientName: this.patientSearchParams.patientName?.trim() || '',
+        medicalCard: this.patientSearchParams.medicalCard?.trim() || '',
+        idCard: this.patientSearchParams.idCard?.trim() || '',
+        phone: this.patientSearchParams.phone?.trim() || ''
+      };      
      // 调用真实API获取患者列表
      getPatientList(this.patientSearchParams).then(response => {
-        console.log('Patient API response:', response);
        // 尝试不同的数据结构解析
        let records = [];
        if (response.data && response.data.records) {
@@ -431,31 +436,40 @@ export default {
          records = response;
        }
        
-        this.patients = records;
-        console.log('Loaded patients:', this.patients);
-        
+        this.patients = records;        
+        // 在前端进行额外的模糊匹配过滤（以防后端API不支持完整的模糊匹配）
+        if (hasSearchCriteria) {
+          this.patients = this.patients.filter(patient => {
+            const nameMatch = !searchParams.patientName || 
+              (patient.name && patient.name.toLowerCase().includes(searchParams.patientName.toLowerCase()));
+            const cardMatch = !searchParams.medicalCard || 
+              (patient.medicalCard && patient.medicalCard.toLowerCase().includes(searchParams.medicalCard.toLowerCase()));
+            const idMatch = !searchParams.idCard || 
+              (patient.idCard && patient.idCard.toLowerCase().includes(searchParams.idCard.toLowerCase()));
+            const phoneMatch = !searchParams.phone || 
+              (patient.phone && patient.phone.toLowerCase().includes(searchParams.phone.toLowerCase()));
+            
+            return nameMatch && cardMatch && idMatch && phoneMatch;
+          });
+        }        
        // 验证每个患者是否有idCard字段，如果没有，尝试使用其他唯一标识
        this.patients.forEach((patient, index) => {
-          console.log(`Patient ${index}:`, patient);
-          console.log(`Patient ${index} has idCard:`, patient.idCard ? 'Yes' : 'No');
-          console.log(`Patient ${index} has id:`, patient.id ? 'Yes' : 'No');
-          console.log(`Patient ${index} has medicalCard:`, patient.medicalCard ? 'Yes' : 'No');
-          
          // 如果没有idCard，尝试设置一个临时唯一标识
          if (!patient.idCard) {
            patient.idCard = patient.id || patient.medicalCard || `temp_${index}`;
-            console.log(`Set temporary idCard for patient ${index}:`, patient.idCard);
          }
        });
        
        if (this.patients.length === 0) {
-          console.log('No patients found in response');
-          alert('没有找到患者数据，请检查搜索条件或联系管理员');
-        }
+          ElMessage.error('没有找到患者数据，请检查搜索条件或联系管理员');
+        }        
+        // 清除加载状态
+        this.isLoading = false;
      }).catch(error => {
-        console.error('获取患者列表失败:', error);
        this.patients = [];
-        alert('获取患者列表失败：' + (error.message || '未知错误'));
+        ElMessage.error('获取患者列表失败：' + (error.message || '未知错误'));
+        // 清除加载状态
+        this.isLoading = false;
      });
    },
    
@@ -483,18 +497,12 @@ export default {
    
    // 双击未预约卡片触发患者选择流程
    handleDoubleClick(ticket) {
-      console.log('handleDoubleClick called with ticket:', ticket);
      if (ticket.status === '未预约') {
        this.currentTicket = ticket;
-        console.log('Set currentTicket:', this.currentTicket);
        this.selectedPatientId = null;
-        this.selectedPatient = null;
-        console.log('Reset selected patient info:', { selectedPatientId: this.selectedPatientId, selectedPatient: this.selectedPatient });
-        
+        this.selectedPatient = null;  
        // 先打开弹窗，再加载患者数据，避免等待
        this.showPatientModal = true;
-        console.log('Show patient modal after double click:', this.showPatientModal);
-        
        // 调用患者搜索接口，加载患者列表
        this.searchPatients();
      }
@@ -518,88 +526,66 @@ export default {
    // 确认取消预约
    confirmCancelAppointment() {
      if (this.selectedTicketForCancel) {
-        // 二次确认，显示患者姓名
-        if (confirm(`确认取消患者${this.selectedTicketForCancel.patientName || ''}的预约？`)) {
-          // 调用API取消预约
+        // 使用 ElMessageBox.confirm 进行二次确认，显示患者姓名
+        ElMessageBox.confirm(
+          `确认取消患者${this.selectedTicketForCancel.patientName || ''}的预约？`,
+          '系统提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          // 用户点击确定，调用API取消预约
          this.cancelAppointment(this.selectedTicketForCancel);
-        }
-        this.closeContextMenu();
+        }).catch(() => {
+          // 用户取消操作
+          this.closeContextMenu();
+        });
      }
    },
    
-    // 确认停诊
-    confirmCancelConsultation(ticket) {
-      // 二次确认
-      if (confirm(`确认取消${ticket.doctor}在${ticket.dateTime}的看诊吗？`)) {
-        // 调用API处理停诊
-        this.cancelConsultation(ticket);
-      }
-    },
-    
-    // 处理停诊
-    cancelConsultation(ticket) {
-      // 使用真实API调用处理停诊
-      cancelConsultation(ticket.slot_id).then(response => {
-        // API调用成功后，重新获取最新的号源数据
-        this.onSearch();
-        alert('停诊已处理，该号源已被取消');
-      }).catch(error => {
-        console.error('停诊处理失败:', error);
-        alert('停诊处理失败，请稍后重试。');
-      });
-    },
-    
-    // 确认取号
-    confirmCheckIn(ticket) {
-      // 二次确认
-      if (confirm(`确认${ticket.patientName || ''}取号吗？`)) {
-        // 调用API处理取号
-        this.checkIn(ticket);
-      }
-    },
-    
-    // 处理取号
-    checkIn(ticket) {
-      // 使用真实API调用处理取号
-      checkInTicket(ticket.slot_id).then(response => {
-        // API调用成功后，重新获取最新的号源数据
-        this.onSearch();
-        alert('取号成功！');
-      }).catch(error => {
-        console.error('取号失败:', error);
-        alert('取号失败，请稍后重试。');
-      });
-    },
-    
    // 取消预约API调用
    cancelAppointment(ticket) {
      if (!ticket || !ticket.slot_id) {
-        console.error('取消预约失败：缺少号源信息');
-        alert('取消预约失败：缺少号源信息');
+        ElMessage.error('取消预约失败：缺少号源信息');
        this.closeContextMenu();
        return;
      }
      
-      // 使用真实API调用取消预约
-      cancelTicket(ticket.slot_id).then(response => {
-        // API调用成功后，更新当前卡片状态
-        const ticketIndex = this.tickets.findIndex(t => t.slot_id === ticket.slot_id);
-        if (ticketIndex !== -1) {
-          // 清除该号源关联的所有患者信息
-          this.tickets[ticketIndex].status = '未预约';
-          this.tickets[ticketIndex].patientName = null;
-          this.tickets[ticketIndex].patientId = null;
-          this.tickets[ticketIndex].patientGender = null;
-          this.tickets[ticketIndex].medicalCard = null;
-          this.tickets[ticketIndex].phone = null;
+      // 使用真实API调用取消预约，传递slot_id
+      cancelTicket(ticket.slot_id).then(response => {        
+        // 根据后端返回判断是否成功
+        if (response.code === 200 || response.msg === '取消成功' || response.message === '取消成功') {
+          console.log('取消预约成功，更新前端状态');
+          
+          // API调用成功后，更新当前卡片状态
+          const ticketIndex = this.tickets.findIndex(t => t.slot_id === ticket.slot_id);
+          if (ticketIndex !== -1) {
+            // 清除该号源关联的所有患者信息
+            this.tickets[ticketIndex].status = '未预约';
+            this.tickets[ticketIndex].patientName = null;
+            this.tickets[ticketIndex].patientId = null;
+            this.tickets[ticketIndex].patientGender = null;
+            this.tickets[ticketIndex].medicalCard = null;
+            this.tickets[ticketIndex].phone = null;
+            
+            // 更新医生号源列表中的余号数量
+            this.updateDoctorsList();
+          }
+          
+          // 关闭上下文菜单
+          this.closeContextMenu();
+          ElMessage.success('预约已取消，号源已释放');
+        } else {
+          // 取消失败
+          const errorMsg = response.msg || response.message || '取消预约失败';
+          ElMessage.error(`取消预约失败：${errorMsg}`);
+          this.closeContextMenu();
        }
-        
-        // 关闭上下文菜单
-        this.closeContextMenu();
-        alert('预约已取消，号源已释放');
      }).catch(error => {
-        console.error('取消预约失败:', error);
-        alert('取消预约失败，请稍后重试。');
+        const errorMsg = error.message || '取消预约失败，请稍后重试';
+        ElMessage.error(`取消预约失败：${errorMsg}`);
        this.closeContextMenu();
      });
    },
@@ -608,63 +594,58 @@ export default {
      this.selectedPatientId = null
    },
    selectPatient(patientId) {
-      console.log('selectPatient called with patientId:', patientId);
-      console.log('Current patients data:', this.patients);
-      console.log('Patients array length:', this.patients.length);
-      
      // 确保患者数据已加载
      if (this.patients.length === 0) {
-        console.error('No patients data available');
-        alert('患者数据未加载，请先搜索患者');
+        ElMessage.error('患者数据未加载，请先搜索患者');
        return;
      }
      
      this.selectedPatientId = patientId;
-      console.log('Set selectedPatientId:', this.selectedPatientId);
-      
      // 保存选择的患者对象 - 使用idCard作为唯一标识，但增加容错性
      this.selectedPatient = this.patients.find(patient => {
        // 尝试多种匹配方式
        const matchByIdCard = patient.idCard === patientId;
        const matchById = patient.id === patientId;
        const matchByMedicalCard = patient.medicalCard === patientId;
-        const match = matchByIdCard || matchById || matchByMedicalCard;
-        
-        console.log(`Checking patient ${patient.name || 'unknown'}:`);
-        console.log(`  idCard: ${patient.idCard}, matchByIdCard: ${matchByIdCard}`);
-        console.log(`  id: ${patient.id}, matchById: ${matchById}`);
-        console.log(`  medicalCard: ${patient.medicalCard}, matchByMedicalCard: ${matchByMedicalCard}`);
-        console.log(`  Overall match: ${match}`);
-        
+        const match = matchByIdCard || matchById || matchByMedicalCard;        
        return match;
      });
-      
-      console.log('Selected patient:', this.selectedPatient);
-      console.log('Selected patientId:', this.selectedPatientId);
-      
      if (this.selectedPatient) {
-        // 添加视觉反馈，验证患者是否被选中
-        alert('已选择患者: ' + this.selectedPatient.name);
-        
-        // 可以考虑自动滚动到确认按钮，提高用户体验
-        const confirmBtn = document.querySelector('.confirm-btn');
-        if (confirmBtn) {
-          confirmBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }
+        // 使用 ElMessageBox.confirm 进行二次确认
+        ElMessageBox.confirm(
+          `确认选择患者 ${this.selectedPatient.name} 进行预约？`,
+          '患者确认',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'info'
+          }
+        ).then(() => {
+          // 用户点击确定，自动滚动到确认按钮
+          ElMessage.success('已选择患者: ' + this.selectedPatient.name);
+          const confirmBtn = document.querySelector('.confirm-btn');
+          if (confirmBtn) {
+            confirmBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
+        }).catch(() => {
+          // 用户取消选择，清空已选患者
+          this.selectedPatientId = null;
+          this.selectedPatient = null;
+          ElMessage.info('已取消患者选择');
+        });
      } else {
-        console.error('Patient not found with id:', patientId);
-        alert('未找到该患者，请重新选择');
+        ElMessage.error('未找到该患者，请重新选择');
        this.selectedPatientId = null;
      }
    },
    confirmPatientSelection() {
      if (!this.selectedPatientId || !this.selectedPatient) {
-        alert('请选择患者');
+        ElMessage.error('请选择患者');
        return;
      }
      
      if (!this.currentTicket) {
-        alert('预约信息错误，请重新选择号源');
+        ElMessage.error('预约信息错误，请重新选择号源');
        this.closePatientSelectModal();
        return;
      }
@@ -672,6 +653,7 @@ export default {
      try {
        const userStore = useUserStore();
        const appointmentData = {
+          slotId: this.currentTicket.slot_id, // 添加号源ID
          ticketId: Number(this.currentTicket.slot_id),
          patientId: this.selectedPatientId, // 使用身份证号作为患者ID，不需要转换为数字
          patientName: this.selectedPatient.name,
@@ -685,39 +667,41 @@ export default {
        
        // 验证必填字段
        if (!appointmentData.ticketId || isNaN(appointmentData.ticketId)) {
-          alert('号源ID无效');
+          ElMessage.error('号源ID无效');
          return;
        }
        
        if (!appointmentData.patientId) {
-          alert('患者ID无效');
+          ElMessage.error('患者ID无效');
          return;
        }
-        
-        console.log('Sending appointment data to backend:', appointmentData);
-        bookTicket(appointmentData).then(response => {
+        // 调用真实API进行预约
+        bookTicket(appointmentData).then(response => {        
          const ticketIndex = this.tickets.findIndex(t => t.slot_id === this.currentTicket.slot_id);
          if (ticketIndex !== -1) {
            this.tickets[ticketIndex].status = '已预约';
            this.tickets[ticketIndex].patientName = this.selectedPatient.name;
            this.tickets[ticketIndex].patientId = this.selectedPatient.medicalCard;
            this.tickets[ticketIndex].patientGender = this.selectedPatient.gender;
+            
+            // 更新医生号源列表中的余号数量
+            this.updateDoctorsList();
          }
          
          this.closePatientSelectModal();
-          alert('预约成功，号源已锁定。患者到院签到时需缴费取号。');
+          
+          // 重新加载号源数据，确保显示最新状态
+          this.onSearch();
+          
+          ElMessage.success('预约成功，号源已锁定。患者到院签到时需缴费取号。');
        }).catch(error => {
-          console.error('预约失败:', error);
-          alert('预约失败，请稍后重试。');
+          ElMessage.error('预约失败，请稍后重试。');
        });
      } catch (error) {
-        console.error('预约数据处理错误:', error);
-        alert('预约信息格式错误，请重新操作。');
+        ElMessage.error('预约信息格式错误，请重新操作。');
      }
    },
    onDateChange() {
-      // 日期变化时刷新号源列表
-      console.log('Date changed:', this.selectedDate)
      // 重置页码并重新加载数据
      this.currentPage = 1;
      this.onSearch()
@@ -731,16 +715,7 @@ export default {
      this.isMobile = window.innerWidth <= 768;
    },
    onSearch() {
-      this.isLoading = true
-      console.log('Searching with:', {
-        date: this.selectedDate,
-        status: this.selectedStatus,
-        type: this.selectedType,
-        name: this.patientName,
-        card: this.patientCard,
-        phone: this.patientPhone
-      });
-      
+      this.isLoading = true      
      // 调用真实API获取号源数据
      const queryParams = {
        date: this.selectedDate,
@@ -749,7 +724,7 @@ export default {
        name: this.patientName,
        card: this.patientCard,
        phone: this.patientPhone,
-        page: 1,
+        page: this.currentPage,
        limit: this.pageSize
      };
      
@@ -757,10 +732,7 @@ export default {
      Promise.all([
        listAllTickets(), // 使用测试接口获取固定的5条专家号数据
        listDept()
-      ]).then(([ticketResponse, deptResponse]) => {
-        // 打印完整的响应数据以便调试
-        console.log('完整的号源响应数据:', ticketResponse);
-        
+      ]).then(([ticketResponse, deptResponse]) => {       
        // 处理号源数据
        if (ticketResponse) {
          // 检查是否有data.list字段（后端返回的数据结构是{code, data:{list, total}}）
@@ -775,6 +747,10 @@ export default {
          
          // 保存所有原始数据
          this.allTickets = [...this.tickets];
+          
+          // 根据患者信息进行前端筛选
+          this.filterTicketsByPatientInfo();
+          
          // 更新医生列表
          this.updateDoctorsList();
          this.hasMore = this.tickets.length < this.totalTickets;
@@ -786,8 +762,7 @@ export default {
        }
        
        // 处理科室数据
-        this.updateDepartmentsListFromApi(deptResponse);
-        
+        this.updateDepartmentsListFromApi(deptResponse);        
        this.isLoading = false;
      }).catch(error => {
        console.error('获取数据失败:', error);
@@ -798,9 +773,7 @@ export default {
        this.departments = [{ value: 'all', label: '全部科室' }];
        this.isLoading = false;
      });
-    },
-
-    
+    },    
    // 从号源数据中更新科室列表（备用方法）
    updateDepartmentsList() {
      const departmentSet = new Set();
@@ -855,6 +828,25 @@ export default {
      }
    },
    
+    // 根据患者信息过滤号源
+    filterTicketsByPatientInfo() {
+      // 如果没有输入患者信息，就不进行过滤
+      if (!this.patientName && !this.patientCard && !this.patientPhone) {
+        return;
+      }
+      
+      // 根据患者信息进行过滤（使用AND逻辑，全部匹配）
+      this.tickets = this.tickets.filter(ticket => {
+        const matchesName = !this.patientName || ticket.patientName?.includes(this.patientName);
+        const matchesCard = !this.patientCard || ticket.patientId?.includes(this.patientCard);
+        const matchesPhone = !this.patientPhone || ticket.phone?.includes(this.patientPhone);
+        
+        return matchesName && matchesCard && matchesPhone;
+      });
+      
+      console.log('按患者信息过滤后的号源数量:', this.tickets.length);
+    },
+    
    // 获取号源状态文本
    getStatusText(status) {
      switch (status) {
@@ -901,10 +893,7 @@ export default {
      });
      
      // 转换为数组
-      this.doctors = Array.from(doctorMap.values());
-      
-      // 打印医生列表以便调试
-      console.log('生成的医生列表:', this.doctors);
+      this.doctors = Array.from(doctorMap.values());      
    },
    // 加载更多数据
    loadMore() {
@@ -926,10 +915,7 @@ export default {
        limit: this.pageSize
      };
      
-      listTicket(queryParams).then(response => {
-        // 打印完整的响应数据以便调试
-        console.log('加载更多的号源响应数据:', response);
-        
+      listTicket(queryParams).then(response => {        
        // 处理号源数据
        if (response) {
          let newRecords = [];
@@ -1461,6 +1447,15 @@ export default {
  align-items: center;
 }

+.ticket-index {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  color: #1890ff;
+  font-size: 14px;
+  font-weight: bold;
+}
+
 .ticket-time {
  font-size: 14px;
  color: #333;
@@ -1514,6 +1509,13 @@ export default {
  white-space: nowrap;
 }

+.ticket-id-time {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
 .ticket-fee {
  font-size: 14px;
  color: #333;
@@ -1547,50 +1549,6 @@ export default {
      color: #91d5ff;
      cursor: not-allowed;
    }
-    
-    .cancel-button {
-      background-color: #F56C6C;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 4px 12px;
-      cursor: pointer;
-      font-size: 14px;
-      transition: background-color 0.3s;
-      margin-top: 8px;
-      align-self: center;
-    }
-
-    .cancel-button:hover {
-      background-color: #F78989;
-    }
-
-    .cancel-button:disabled {
-      background-color: #C0C4CC;
-      cursor: not-allowed;
-    }
-    
-    .check-in-button {
-      background-color: #67C23A;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 4px 12px;
-      cursor: pointer;
-      font-size: 14px;
-      transition: background-color 0.3s;
-      margin-top: 8px;
-      align-self: center;
-    }
-
-    .check-in-button:hover {
-      background-color: #85ce61;
-    }
-
-    .check-in-button:disabled {
-      background-color: #C0C4CC;
-      cursor: not-allowed;
-    }

 /* 患者信息样式 */
 .ticket-patient {
@@ -1603,6 +1561,18 @@ export default {
  color: #333;
 }

+/* 患者电话号码样式 */
+.ticket-phone {
+  margin-top: 4px;
+  padding: 4px;
+  background-color: rgba(34, 177, 76, 0.05);
+  border-radius: 4px;
+  font-size: 12px;
+  text-align: center;
+  color: #22b14c;
+  font-weight: 500;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .ticket-grid {
@@ -1618,6 +1588,14 @@ export default {
  .ticket-doctor {
    font-size: 13px;
  }
+  
+  .ticket-id-time {
+    font-size: 13px;
+  }
+  
+  .ticket-index {
+    font-size: 13px;
+  }
 }

 /* 弹窗样式 */
@@ -1803,6 +1781,54 @@ export default {
  box-shadow: none;
 }

+/* 搜索提示样式 */
+.search-hint {
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+/* 加载指示器样式 */
+.loading-indicator {
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #1890ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.no-results {
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+  padding: 20px;
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
 /* 右键菜单样式 */
 .context-menu {
  position: fixed;
@@ -1842,4 +1868,60 @@ export default {
  opacity: 0.7;
  cursor: not-allowed;
 }
+
+/* 分页组件样式 */
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 20px 0;
+  background-color: #fafafa;
+  border-radius: 4px;
+}
+
+.pagination-container .el-pagination {
+  font-size: 14px;
+}
+
+.pagination-container .el-pagination .el-pager li {
+  min-width: 36px;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 4px;
+  margin: 0 2px;
+}
+
+.pagination-container .el-pagination .el-pager li:hover {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.pagination-container .el-pagination .el-pager li.active {
+  background-color: #1890ff;
+  color: white;
+}
+
+.pagination-container .el-pagination .btn-prev,
+.pagination-container .el-pagination .btn-next {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  margin: 0 2px;
+}
+
+.pagination-container .el-pagination .el-pagination__sizes {
+  margin-right: 10px;
+}
+
+.pagination-container .el-pagination .el-pagination__sizes .el-input {
+  width: 100px;
+}
+
+.pagination-container .el-pagination .el-pagination__jump {
+  margin-left: 10px;
+}
+
+.pagination-container .el-pagination .el-pagination__jump .el-input {
+  width: 60px;
+}
 </style>
--- a/openhis-ui-vue3/src/views/appoinmentmanage/ticketManage.vue
+++ b/openhis-ui-vue3/src/views/appoinmentmanage/ticketManage.vue