Fix Bug #570: AI修复

openhis-ui-vue3/src/views/outpatient/appointment/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="appointment-container">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>门诊预约挂号</span>
+        </div>
+      </template>
+
+      <!-- 查询条件 -->
+      <el-form :inline="true" :model="queryParams" class="search-form">
+        <el-form-item label="状态筛选">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleSearch">
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 数据表格 -->
+      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="patientName" label="患者姓名" width="120" />
+        <el-table-column prop="doctorName" label="医生" width="120" />
+        <el-table-column prop="visitDate" label="就诊日期" width="120" />
+        <el-table-column prop="timeSlot" label="时段" width="100" />
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">
+              {{ getStatusLabel(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="handleCancel(row)" v-if="row.status === 1">取消预约</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        @current-change="fetchData"
+        class="pagination"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getAppointmentListApi, cancelAppointmentApi } from '@/api/outpatient/appointment'
+
+const loading = ref(false)
+const tableData = ref([])
+const total = ref(0)
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  status: undefined
+})
+
+// Bug #570 Fix: 移除错误的“已锁定”状态，统一使用标准预约状态字典
+const statusOptions = [
+  { label: '已预约', value: 1 },
+  { label: '已就诊', value: 2 },
+  { label: '已取消', value: 3 },
+  { label: '已爽约', value: 4 }
+]
+
+const getStatusLabel = (status) => {
+  const found = statusOptions.find(opt => opt.value === status)
+  return found ? found.label : '未知'
+}
+
+const getStatusType = (status) => {
+  const map = { 1: 'success', 2: 'info', 3: 'warning', 4: 'danger' }
+  return map[status] || 'info'
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getAppointmentListApi(queryParams)
+    tableData.value = res.data.list || []
+    total.value = res.data.total || 0
+  } catch (error) {
+    ElMessage.error('获取预约列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => {
+  queryParams.pageNum = 1
+  fetchData()
+}
+
+const resetQuery = () => {
+  queryParams.status = undefined
+  handleSearch()
+}
+
+const handleCancel = async (row) => {
+  try {
+    await ElMessageBox.confirm('确定取消该预约吗？', '提示', { type: 'warning' })
+    await cancelAppointmentApi(row.id)
+    ElMessage.success('取消成功')
+    fetchData()
+  } catch (e) {
+    // 用户取消操作
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.appointment-container { padding: 20px; }
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.search-form { margin-bottom: 20px; }
+.pagination { margin-top: 20px; justify-content: flex-end; }
+</style>