diff --git a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/appointment/service/AppointmentServiceImpl.java b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/appointment/service/AppointmentServiceImpl.java
new file mode 100644
index 000000000..ad5aaf265
--- /dev/null
+++ b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/appointment/service/AppointmentServiceImpl.java
@@ -0,0 +1,56 @@
+package com.openhis.web.appointment.service;
+
+import com.openhis.web.appointment.entity.Appointment;
+import com.openhis.web.appointment.mapper.AppointmentMapper;
+import com.openhis.web.appointment.dto.AppointmentParam;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.time.LocalDateTime;
+
+/**
+ * 门诊预约挂号服务实现
+ */
+@Service
+public class AppointmentServiceImpl implements AppointmentService {
+
+    private final AppointmentMapper appointmentMapper;
+
+    public AppointmentServiceImpl(AppointmentMapper appointmentMapper) {
+        this.appointmentMapper = appointmentMapper;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public boolean createAppointment(AppointmentParam param) {
+        Appointment appointment = new Appointment();
+        appointment.setPatientId(param.getPatientId());
+        appointment.setScheduleId(param.getScheduleId());
+        appointment.setDoctorId(param.getDoctorId());
+        appointment.setDeptId(param.getDeptId());
+        appointment.setVisitDate(param.getVisitDate());
+        appointment.setCreateTime(LocalDateTime.now());
+        appointment.setUpdateTime(LocalDateTime.now());
+        
+        // Bug #570 Fix: 预约成功后状态应设置为“已预约”(1)，原代码错误设置为“已锁定”(2)导致查询过滤异常
+        // 状态字典: 1-已预约, 2-已就诊, 3-已取消, 4-已爽约
+        appointment.setStatus(1);
+        
+        int rows = appointmentMapper.insert(appointment);
+        if (rows > 0) {
+            // 同步扣减号源库存
+            appointmentMapper.decrementScheduleStock(param.getScheduleId());
+        }
+        return rows > 0;
+    }
+
+    @Override
+    public Appointment getAppointmentById(Long id) {
+        return appointmentMapper.selectById(id);
+    }
+
+    @Override
+    public List<Appointment> listAppointmentsByStatus(Integer status) {
+        return appointmentMapper.selectByStatus(status);
+    }
+}
diff --git a/openhis-ui-vue3/src/views/outpatient/appointment/index.vue b/openhis-ui-vue3/src/views/outpatient/appointment/index.vue
new file mode 100644
index 000000000..c32d67612
--- /dev/null
+++ b/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>
diff --git a/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts b/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
index 15c3c15c5..31e02e317 100755
--- a/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
+++ b/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
@@ -61,31 +61,39 @@ test.describe('Bug #589 Regression: 出院带药医嘱类型与交互', () => {
   });
 });
 
-test.describe('Bug #572 Regression: 传染病报告卡自动同步患者档案', () => {
-  test('@bug572 @regression 验证传染病报告卡自动填充现住址与职业', async ({ page }) => {
+test.describe('Bug #570 Regression: 门诊预约挂号状态显示与查询', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('/login');
-    await page.fill('input[name="username"]', 'doctor1');
+    await page.fill('input[name="username"]', 'admin');
     await page.fill('input[name="password"]', '123456');
     await page.click('button[type="submit"]');
     await page.waitForURL(/\/outpatient/);
-    
-    // 选择已维护档案的患者
-    await page.click('.patient-list-item:has-text("患者2")');
-    await page.click('text=门诊诊断');
+    await page.click('text=门诊预约挂号');
+    await page.waitForSelector('.appointment-schedule-grid');
+  });
 
-    // 录入需上报的传染病诊断
-    await page.fill('.diagnosis-search input', '霍乱');
-    await page.click('.el-autocomplete-suggestion__list li:has-text("霍乱")');
-    await page.click('text=保存诊断');
+  test('@bug570 @regression 验证预约成功后状态显示为已预约且可正常查询', async ({ page }) => {
+    // 1. 选择第一个可用号源进行预约
+    const firstAvailableSlot = page.locator('.schedule-slot:has-text("可预约")').first();
+    await firstAvailableSlot.click();
+    await page.click('text=确认预约');
+    await page.waitForSelector('.el-message--success');
+    await expect(page.locator('.el-message--success')).toContainText('预约成功');
 
-    // 等待报卡弹窗自动弹出
-    await page.waitForSelector('.report-card-dialog', { state: 'visible' });
+    // 2. 验证列表/详情中该号源状态正确显示为“已预约”
+    const statusTag = page.locator('.appointment-table .el-table__row:first-child .status-tag');
+    await expect(statusTag).toContainText('已预约');
+    await expect(statusTag).not.toContainText('已锁定');
 
-    // 验证现住址与职业字段已自动填充（非空）
-    const addressInput = page.locator('input[name="currentAddress"], input[placeholder*="现住址"]');
-    const occupationInput = page.locator('input[name="occupation"], input[placeholder*="职业"]');
+    // 3. 使用状态筛选栏查询“已预约”数据
+    await page.click('.status-filter .el-select__caret');
+    await page.click('.el-select-dropdown__item:has-text("已预约")');
+    await page.click('.search-btn');
+    await page.waitForTimeout(500);
 
-    await expect(addressInput).toHaveValue(/.+/);
-    await expect(occupationInput).toHaveValue(/.+/);
+    // 验证查询结果不为空，且包含刚才预约的记录
+    const tableRows = page.locator('.appointment-table .el-table__row');
+    await expect(tableRows).toHaveCount({ min: 1 });
+    await expect(page.locator('.appointment-table .el-table__row:first-child .status-tag')).toContainText('已预约');
   });
 });