门诊号码管理维护界面-》优化

openhis-ui-vue3/src/views/basicmanage/outpatientNoManagement/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- Windows XP风格窗口布局，600px固定宽度 -->
+  <!-- 全屏布局 -->
   <div class="outpatient-no-management-wrapper">
     <div class="outpatient-no-management">
       <!--标题栏（32px高） -->
@@ -33,18 +33,28 @@
     </el-row>
       </div>
 
-      <!-- 表格内容区（自适应剩余高度） -->
+      <!-- 表格内容区（自适应剩余高度，全屏显示） -->
       <div class="table-content">
         <el-table
       v-loading="loading"
       :data="tableData"
       @selection-change="handleSelectionChange"
       :row-class-name="tableRowClassName"
+      style="width: 100%;"
     >
       <el-table-column type="selection" width="50" align="center" />
       <el-table-column label="序号" type="index" width="60" align="center" />
       <el-table-column label="操作员" prop="operatorName" min-width="120" />
-      <el-table-column label="员工工号" prop="staffNo" min-width="120" />
+      <el-table-column label="员工工号" prop="staffNo" min-width="120">
+        <template #default="{ row }">
+          <el-input
+            v-if="row._editing"
+            v-model.trim="row.staffNo"
+            placeholder="请输入员工工号"
+          />
+          <span v-else>{{ row.staffNo }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="领用日期" prop="receiveDate" min-width="140">
         <template #default="{ row }">
           <el-date-picker
@@ -113,7 +123,7 @@
         <el-input v-model="editForm.operatorName" disabled />
       </el-form-item>
       <el-form-item label="员工工号">
-        <el-input v-model="editForm.staffNo" disabled />
+        <el-input v-model.trim="editForm.staffNo" placeholder="请输入员工工号" />
       </el-form-item>
       <el-form-item label="领用日期">
         <el-date-picker v-model="editForm.receiveDate" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
@@ -174,11 +184,12 @@ const data = reactive({
   queryParams: {
     pageNo: 1,
     pageSize: 10,
-    onlySelf: true,
+    onlySelf: true, // 默认只查询当前账号下的记录
   },
 })
 const { queryParams } = toRefs(data)
 
+// 初始化配置并自动获取当前账号下的所有号码段记录
 initConfig()
 getList()
 
@@ -207,11 +218,13 @@ function onAdd() {
   const yyyy = now.getFullYear()
   const mm = String(now.getMonth() + 1).padStart(2, '0')
   const dd = String(now.getDate()).padStart(2, '0')
+  // 员工工号默认为当前用户ID（文本格式）
+  const defaultStaffNo = String(userStore.id || '')
   tableData.value.push({
     id: undefined,
     operatorId: userStore.id,
     operatorName: userStore.name || userStore.nickName,
-    staffNo: userStore.id,
+    staffNo: defaultStaffNo, // 默认取当前员工工号（用户ID）
     receiveDate: `${yyyy}-${mm}-${dd}`,
     startNo: '',
     endNo: '',
@@ -244,7 +257,8 @@ function openEdit(row, index) {
   editForm.endNo = row.endNo
   editForm.usedNo = row.usedNo
   editForm.operatorName = row.operatorName
-  editForm.staffNo = row.staffNo
+  // 员工工号可编辑，如果为空则默认取当前用户ID
+  editForm.staffNo = row.staffNo || String(userStore.id || '')
   dialogVisible.value = true
 }
 
@@ -489,8 +503,10 @@ function onDelete() {
   }
 }
 
+// 打开界面系统自动获取当前账号下维护的所有号码段记录
 function getList() {
   loading.value = true
+  // 默认只查询当前账号下的记录（onlySelf = true）
   queryParams.value.onlySelf = !viewAll.value
   const res = lcList({ ...queryParams.value })
   tableData.value = res.records.map((it) => ({
@@ -498,6 +514,8 @@ function getList() {
     _editing: false,
     _error: false,
     _dirty: false,
+    // 确保员工工号为文本格式
+    staffNo: it.staffNo ? String(it.staffNo) : String(userStore.id || ''),
   }))
   total.value = res.total
   loading.value = false
@@ -576,27 +594,30 @@ function lcDeleteByIds(idList) {
 </script>
 
 <style scoped>
-/*Windows XP风格布局 */
+/* 全屏布局 */
 
-/* 外层容器 - 居中显示 */
+/* 外层容器 - 全屏显示 */
 .outpatient-no-management-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  min-height: calc(100vh - 100px);
-  padding: 20px;
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 84px);
+  padding: 0;
   background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 主容器 - 600px固定宽度 */
+/* 主容器 - 全屏宽度 */
 .outpatient-no-management {
-  width: 600px;
+  width: 100%;
+  height: 100%;
   background-color: #D4D0C8;
   border: 1px solid #000000;
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
   display: flex;
   flex-direction: column;
-  min-height: 500px;
+  flex: 1;
+  min-height: calc(100vh - 84px);
 }
 
 /* 标题栏（32px高，背景色#D4D0C8） */
@@ -697,19 +718,29 @@ function lcDeleteByIds(idList) {
   cursor: not-allowed;
 }
 
-/*表格内容区（自适应剩余高度） */
+/*表格内容区（自适应剩余高度，全屏显示） */
 .table-content {
   flex: 1;
   background-color: #FFFFFF;
   padding: 8px;
-  overflow: auto;
-  min-height: 400px;
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 表格样式（1px实线边框#CCCCCC，表头背景#F0F0F0） */
 .table-content :deep(.el-table) {
   border: 1px solid #CCCCCC;
   font-size: 13px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-content :deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow-y: auto;
 }
 
 .table-content :deep(.el-table th) {
@@ -807,14 +838,9 @@ function lcDeleteByIds(idList) {
 }
 
 /* 响应式调整 */
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   .outpatient-no-management {
-    width: 100%;
-    min-height: 100vh;
-  }
-  
-  .outpatient-no-management-wrapper {
-    padding: 0;
+    min-height: calc(100vh - 84px);
   }
 }
 </style>