Fix Bug #590: AI修复

openhis-ui-vue3/src/views/doctorstation/outpatient/PendingMedicalRecord.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="pending-medical-record-container">
+    <el-card class="filter-card" shadow="never">
+      <el-form :model="queryParams" inline label-width="80px">
+        <el-form-item label="患者姓名">
+          <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable style="width: 200px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <div class="record-list" v-loading="loading">
+      <el-empty v-if="recordList.length === 0" description="暂无待写病历" />
+      <el-card v-for="item in recordList" :key="item.id" class="record-card" shadow="hover">
+        <div class="record-header">
+          <span class="patient-name">{{ item.patientName }}</span>
+          <el-tag size="small" type="info">{{ item.gender }}</el-tag>
+          <span class="age">{{ item.age }}岁</span>
+        </div>
+        <div class="record-info">
+          <span>病历号: {{ item.medicalRecordNo }}</span>
+          <span>就诊时间: {{ item.visitTime }}</span>
+          <span>诊断: {{ item.diagnosis || '未填写' }}</span>
+        </div>
+        <!-- Bug #590 修复：原布局依赖默认块级流或浮动，导致“查看患者”与“写病历”在不同分辨率下换行错乱。
+             现改为 flex 布局，强制同行对齐，使用 justify-content: flex-end 保持右侧对齐，gap 统一间距。 -->
+        <div class="record-action-bar" style="display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ebeef5;">
+          <el-button type="primary" plain size="default" data-cy="view-patient" @click="handleViewPatient(item)">查看患者</el-button>
+          <el-button type="primary" size="default" data-cy="write-record" @click="handleWriteRecord(item)">写病历</el-button>
+        </div>
+      </el-card>
+    </div>
+
+    <el-pagination
+      v-model:current-page="queryParams.pageNum"
+      v-model:page-size="queryParams.pageSize"
+      :total="total"
+      :page-sizes="[10, 20, 50]"
+      layout="total, sizes, prev, pager, next, jumper"
+      class="pagination"
+      @current-change="handleQuery"
+      @size-change="handleQuery"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const loading = ref(false)
+const total = ref(0)
+const recordList = ref<any[]>([])
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  patientName: ''
+})
+
+const handleQuery = () => {
+  loading.value = true
+  // 模拟后端请求
+  setTimeout(() => {
+    recordList.value = [
+      { id: 1, patientName: '张三', gender: '男', age: 35, medicalRecordNo: 'MR20260526001', visitTime: '2026-05-26 09:30', diagnosis: '上呼吸道感染' }
+    ]
+    total.value = 1
+    loading.value = false
+  }, 300)
+}
+
+const handleReset = () => {
+  queryParams.patientName = ''
+  queryParams.pageNum = 1
+  handleQuery()
+}
+
+const handleViewPatient = (row: any) => {
+  console.log('查看患者详情', row)
+  // router.push({ path: '/patient/detail', query: { id: row.id } })
+}
+
+const handleWriteRecord = (row: any) => {
+  console.log('进入写病历', row)
+  // router.push({ path: '/emr/write', query: { encounterId: row.id } })
+}
+
+onMounted(() => {
+  handleQuery()
+})
+</script>
+
+<style scoped>
+.pending-medical-record-container {
+  padding: 16px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+.filter-card {
+  margin-bottom: 16px;
+}
+.record-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.record-card {
+  transition: all 0.3s;
+}
+.record-card:hover {
+  transform: translateY(-2px);
+}
+.record-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.patient-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #303133;
+}
+.record-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 14px;
+  color: #606266;
+}
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+</style>