feat(diagnosis): 优化门诊医生站诊断模块

- 诊断字段显示框改为div样式，支持完整显示诊断名称 - 新增诊断选择器弹窗，带标题栏和关闭按钮 - 诊断选择器支持搜索功能（按诊断名称/ICD代码） - 优化字段对齐，统一列宽和间距 - 修复数据保存问题（longTermFlag字段、日期格式）
2026-03-11 14:27:31 +08:00
parent 8e8b35faa4
commit 725ac4b76a
2 changed files with 229 additions and 42 deletions
--- a/openhis-ui-vue3/src/views/doctorstation/components/diagnosis/diagnosis.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/diagnosis/diagnosis.vue
@@ -103,32 +103,45 @@
                </el-form-item>
              </template>
            </el-table-column>
-            <el-table-column label="诊断" align="center" prop="name" width="180" :show-overflow-tooltip="true">
+            <el-table-column label="诊断" align="center" prop="name" min-width="220">
              <template #default="scope">
                <el-form-item :prop="`diagnosisList.${scope.$index}.name`" :rules="rules.name" style="margin-bottom: 0;">
                  <el-popover
-                    :popper-style="{ padding: '0' }"
+                    :popper-style="{ padding: '0', width: '600px' }"
                    placement="bottom-start"
                    :visible="scope.row.showPopover"
                    trigger="manual"
-                    :width="800"
+                    :show-arrow="false"
                  >
                    <template #default>
+                      <div class="diagnosis-popover-container">
+                        <div class="diagnosis-popover-header">
+                          <span class="diagnosis-popover-title">选择诊断</span>
+                          <el-button 
+                            link 
+                            type="primary" 
+                            :icon="Close" 
+                            @click="closeDiagnosisPopover(scope.row)"
+                            class="diagnosis-popover-close"
+                          >关闭</el-button>
+                        </div>
+                        <div class="diagnosis-popover-body">
                          <diagnosislist
                            :diagnosisSearchkey="diagnosisSearchkey"
-                        @selectDiagnosis="handleSelsectDiagnosis"
+                            @selectDiagnosis="(row) => handleSelectDiagnosis(row, scope.row, scope.$index)"
                          />
+                        </div>
+                      </div>
                    </template>
                    <template #reference>
-                      <el-input 
-                        v-model="scope.row.name" 
-                        placeholder="请选择诊断" 
-                        @input="handleChange"
-                        @focus="handleFocus(scope.row, scope.$index)" 
-                        @blur="handleBlur(scope.row)" 
-                        style="width: 180px"
-                        :title="scope.row.name"
-                      />
+                      <div 
+                        class="diagnosis-text"
+                        @click="handleFocus(scope.row, scope.$index)"
+                        :title="scope.row.name || '点击选择诊断'"
+                      >
+                        <span class="diagnosis-text-content">{{ scope.row.name || '点击选择诊断' }}</span>
+                        <el-icon class="diagnosis-text-icon"><ArrowDown /></el-icon>
+                      </div>
                    </template>
                  </el-popover>
                </el-form-item>
@@ -251,6 +264,7 @@

 <script setup>
 import {getCurrentInstance} from 'vue';
+import { Close, ArrowDown } from '@element-plus/icons-vue';
 import useUserStore from '@/store/modules/user';
 import {
  delEncounterDiagnosis,
@@ -721,12 +735,22 @@ function handleChange(value) {
 /**
 * 选择诊断并赋值到列表
 */
-function handleSelsectDiagnosis(row) {
-  console.log(row);
-  form.value.diagnosisList[rowIndex.value].ybNo = row.ybNo;
-  form.value.diagnosisList[rowIndex.value].name = row.name;
-  form.value.diagnosisList[rowIndex.value].definitionId = row.id;
+function handleSelectDiagnosis(row, rowData, index) {
+  console.log('选择诊断:', row);
+  rowData.name = row.name;
+  rowData.ybNo = row.ybNo;
+  rowData.definitionId = row.id;
+  rowData.showPopover = false;
+  emits('diagnosisSave', false);
 }
+
+/**
+ * 关闭诊断选择弹窗
+ */
+function closeDiagnosisPopover(row) {
+  row.showPopover = false;
+}
+
 /**获取焦点时 打开列表 */
 function handleFocus(row, index) {
  if(row.typeName==='中医诊断'){
@@ -743,16 +767,16 @@ function handleFocus(row, index) {
    });
    openAddDiagnosisDialog.value = true;
  }else{
+    // 关闭其他行的弹窗
+    form.value.diagnosisList.forEach((item, idx) => {
+      if (idx !== index) {
+        item.showPopover = false;
+      }
+    });
    rowIndex.value = index;
    row.showPopover = true;
  }
-  
 }
-/**失去焦点时 关闭列表 */
-function handleBlur(row) {
-  row.showPopover = false;
-}
-
 function handleNodeClick(data) {
  console.log(data.children);
  // 检查节点是否为根节点
@@ -830,4 +854,89 @@ defineExpose({ getList, getDetail, handleSaveDiagnosis });
  display: flex;
  align-items: center;
 }
+
+.diagnosis-text {
+  min-height: 32px;
+  line-height: 1.4;
+  padding: 6px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  text-align: left;
+  word-break: break-all;
+  white-space: pre-wrap;
+  max-width: 200px;
+  transition: border-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.diagnosis-text:hover {
+  border-color: #409eff;
+}
+
+.diagnosis-text-content {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.diagnosis-text-icon {
+  color: #909399;
+  font-size: 12px;
+}
+
+.diagnosis-text:hover .diagnosis-text-icon {
+  color: #409eff;
+}
+
+/* 诊断选择弹窗样式 */
+.diagnosis-popover-container {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.diagnosis-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  background-color: #f5f7fa;
+}
+
+.diagnosis-popover-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.diagnosis-popover-close {
+  font-size: 12px;
+}
+
+.diagnosis-popover-body {
+  padding: 0;
+}
+
+.diagnosis-text:empty::before {
+  content: '点击选择诊断';
+  color: #a8abb2;
+}
+
+.diagnosis-text:hover {
+  border-color: #409eff;
+}
+
+.diagnosis-text:empty::before {
+  content: '请选择诊断';
+  color: #a8abb2;
+}
 </style>
--- a/openhis-ui-vue3/src/views/doctorstation/components/diagnosis/diagnosislist.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/diagnosis/diagnosislist.vue
@@ -1,21 +1,48 @@
 <template>
-  <div>
+  <div class="diagnosis-list-container">
+    <div class="diagnosis-search-box">
+      <el-input
+        v-model="searchText"
+        placeholder="输入诊断名称或ICD代码搜索"
+        clearable
+        @keyup.enter="handleSearch"
+        @clear="handleClear"
+      >
+        <template #append>
+          <el-button :icon="Search" @click="handleSearch" />
+        </template>
+      </el-input>
+    </div>
    <el-table
      ref="diagnosisDefinitionRef"
      :data="diagnosisDefinitionList"
-      row-key="patientId"
+      row-key="id"
      @cell-click="clickRow"
-      max-height="400"
+      max-height="350"
+      highlight-current-row
+      border
    >
-      <el-table-column label="诊断名称" align="center" prop="name" />
-      <el-table-column label="ICD代码" align="center" prop="ybNo" />
-      <el-table-column label="诊断类型" align="center" prop="typeName" width="180"/>
+      <el-table-column label="诊断名称" align="left" prop="name" min-width="200" show-overflow-tooltip />
+      <el-table-column label="ICD代码" align="center" prop="ybNo" width="120" />
+      <el-table-column label="诊断类型" align="center" prop="typeName" width="100" />
    </el-table>
+    <div class="diagnosis-pagination" v-if="total > queryParams.pageSize">
+      <el-pagination
+        small
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="queryParams.pageSize"
+        :current-page="queryParams.pageNo"
+        @current-change="handlePageChange"
+      />
+    </div>
  </div>
 </template>

 <script setup>
-import {getDiagnosisDefinitionList} from '../api';
+import { ref, watch } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+import { getDiagnosisDefinitionList } from '../api';

 const props = defineProps({
  diagnosisSearchkey: {
@@ -23,36 +50,87 @@ const props = defineProps({
    default: '',
  },
 });
+
 const emit = defineEmits(['selectDiagnosis']);
+
+const searchText = ref('');
 const total = ref(0);
 const queryParams = ref({
-  pageSize: 1000,
+  pageSize: 10,
  pageNo: 1,
-  // typeCode: 1,
 });
 const diagnosisDefinitionList = ref([]);

+// 监听外部传入的搜索关键字
 watch(
  () => props.diagnosisSearchkey,
  (newValue) => {
+    searchText.value = newValue;
    queryParams.value.searchKey = newValue;
+    queryParams.value.pageNo = 1;
    getList();
  },
  { immediate: true }
 );

-getList();
+// 获取诊断列表
 function getList() {
  getDiagnosisDefinitionList(queryParams.value).then((res) => {
-    diagnosisDefinitionList.value = res.data.records;
-    total.value = res.data.total;
+    diagnosisDefinitionList.value = res.data.records || [];
+    total.value = res.data.total || 0;
  });
 }

+// 搜索
+function handleSearch() {
+  queryParams.value.searchKey = searchText.value;
+  queryParams.value.pageNo = 1;
+  getList();
+}
+
+// 清空搜索
+function handleClear() {
+  searchText.value = '';
+  queryParams.value.searchKey = '';
+  queryParams.value.pageNo = 1;
+  getList();
+}
+
+// 分页变化
+function handlePageChange(page) {
+  queryParams.value.pageNo = page;
+  getList();
+}
+
+// 点击行选择诊断
 function clickRow(row) {
  emit('selectDiagnosis', row);
 }
 </script>

 <style scoped>
+.diagnosis-list-container {
+  padding: 0;
+}
+
+.diagnosis-search-box {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  background-color: #f5f7fa;
+}
+
+.diagnosis-pagination {
+  padding: 8px 16px;
+  border-top: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:deep(.el-table__row) {
+  cursor: pointer;
+}
+
+:deep(.el-table__row:hover) {
+  background-color: #f5f7fa;
+}
 </style>