调整历史页面样式及弹框样式

src/pages/Index/History.vue

@@ -46,72 +46,19 @@
   <HistoryMessage :isVisible="isVisible" @update:isVisible="isVisible = $event">
     <div class="detail-container">
       <div class="detail-section">
-        <div class="detail-item">
-          <span class="label">日期:</span>
-          <span class="value">{{ rowData && formatDate(rowData.creatDate) }}</span>
-        </div>
-        <div class="divider"></div>
-
-        <div class="detail-item">
-          <span class="label">样本id:</span>
-          <span class="value">{{ rowData && rowData.id }}</span>
-        </div>
-        <div class="divider"></div>
-
-        <div class="detail-item">
-          <span class="label">项目名称:</span>
-          <span class="value">{{ rowData && rowData.id }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">Result:</span>
-          <span class="value">{{ rowData && JSON.stringify(rowData.results) }}</span>
-        </div>
-      </div>
-
-      <div class="detail-section">
-        <div class="detail-item">
-          <span class="label">样本种类:</span>
-          <span class="value">{{ rowData && rowData.sampleBloodType }}</span>
-
-        </div>
-
-        <div class="detail-item">
-          <span class="label">操次:</span>
-          <span class="value">{{ rowData && rowData.lotId }}</span>
-
-        </div>
-
-        <div class="detail-item">
-          <span class="label">Rec:</span>
-          <span class="value">Record 1</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">有效期:</span>
-          <span class="value">2024-12-31</span>
-        </div>
-        <div class="divider"></div>
-
-        <div class="detail-item">
-          <span class="label">操作人:</span>
-          <span class="value">John Doe</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">序列号:</span>
-          <span class="value">SN12345</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">App Ver:</span>
-          <span class="value">1.0.0</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">F/W Ver:</span>
-          <span class="value">2.0.0</span>
-        </div>
+        <p class="date">日期：{{ rowData && formatDate(rowData.creatDate) }}</p>
+        <p class="userid">{{ rowData && (rowData.sampleUserid || rowData.sampleId) }}</p>
+        <p class="projName">{{ rowData && rowData.projName }}</p>
+
+        <ul>
+          <li>样本种类：{{ rowData && settingTubeStore.bloodTypeKeyMap[rowData.sampleBloodType].name }}</li>
+          <li>批次：{{ rowData && rowData.lotId }}</li>
+          <li>有效期：{{ rowData && formatDate(rowData.expiryDate) }}</li>
+          <li>操作人：{{ rowData && rowData.operator }}</li>
+          <li>序列号：{{ rowData && rowData.sn }}</li>
+          <li>App Ver: {{ rowData && rowData.appVersion }}</li>
+          <li>F/W ver: {{ rowData && rowData.mcuVersion }}</li>
+        </ul>
       </div>
 
       <div class="detail-footer">
@@ -125,7 +72,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import dayjs from 'dayjs'
+
 import { HistoryTable, HistoryWarn } from './components/index'
 import {
   getHistoryInfo,
@@ -138,6 +85,11 @@ import WarnSvg from '@/assets/Index/History/warn.svg'
 import PrintSvg from '@/assets/Index/History/print.svg'
 import ErrorSvg from '@/assets/Warn.svg'
 import { eMessage } from './utils'
+import dayjs from 'dayjs'
+import { useSettingTestTubeStore } from '@/store'
+
+const settingTubeStore = useSettingTestTubeStore()
+
 // 添加表格引用
 const historyTableRef = ref()
 
@@ -147,8 +99,6 @@ const isVisible = ref<boolean>(false)
 const handleClose = () => {
   isVisible.value = false
 }
-// 绑定输入框的值
-// const inputValue = ref<string>('')
 
 // 选中的项目
 const selectedItems = ref<TableItem[]>([])
@@ -224,7 +174,7 @@ const handleSelectRow = (item: TableItem) => {
   rowData.value = item
 }
 const formatDate = (date: string | number | Date) => {
-  return dayjs(date).format('YYYY-MM-DD')
+  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
 }
 
 // 根据操作类型显示不同的确认弹框或通知
@@ -451,6 +401,9 @@ onMounted(() => {
 }
 
 #history-container {
+  > * {
+    box-sizing: border-box;
+  }
   width: 100%;
   height: 90vh;
   display: flex;
@@ -587,6 +540,7 @@ onMounted(() => {
   }
 
   .history-function {
+    padding: 0 20px;
     width: 100%;
     height: 84px;
     margin-top: 20px;
@@ -632,31 +586,10 @@ onMounted(() => {
 .detail-container {
   .detail-section {
     margin-bottom: 24px;
-  }
-
-  .detail-item {
-    display: flex;
-    align-items: center;
-    padding: 16px 0;
-    font-size: 28px;
-
-    .label {
-      color: #606266;
-      min-width: 200px;
-      font-weight: 500;
+    font-size: 22px;
+    .projName {
+      font-weight: 600;
     }
-
-    .value {
-      color: #303133;
-      flex: 1;
-      word-break: break-all;
-    }
-  }
-
-  .divider {
-    height: 1px;
-    background-color: #ebeef5;
-    margin: 16px 0;
   }
 
   .detail-footer {

src/pages/Index/Index.vue

@@ -307,9 +307,6 @@ import {
   getProjectInfo,
   getBloodTypes,
   confirmPromptInfo,
-  reportTable,
-  reportForm,
-  reportText,
 } from '../../services/index'
 import { User } from '../../types/Index'
 import {

src/pages/Index/components/History/HistoryMessage.vue

@@ -47,8 +47,8 @@ const close = () => {
   .modal-content {
     background-color: white;
     border-radius: 16px;
-    width: 90%;
-    max-width: 800px;
+    width: 65%;
+    max-width: 750px;
     max-height: 90vh;
     display: flex;
     flex-direction: column;

src/pages/Index/components/History/HistoryTable.vue

@@ -30,7 +30,7 @@
           <td>{{ item.id }}</td>
           <td class="ellipsis" :title="item.sampleUserid" @click="selectRow(item)">{{ item.sampleUserid }}</td>
           <td class="ellipsis" :title="item.projName" @click="selectRow(item)">{{ item.projName }}</td>
-          <td class="ellipsis" :title="item.sampleBloodType" @click="selectRow(item)">{{ item.sampleBloodType }}</td>
+          <td class="ellipsis" :title="item.sampleBloodType" @click="selectRow(item)">{{ settingTubeStore.bloodTypeKeyMap[item.sampleBloodType].name  }}</td>
           <td class="ellipsis" @click="selectRow(item)">{{ "无结果" }}</td>
           <td @click="selectRow(item)">{{ formatDate(item.creatDate) }}</td>
           <td class="ellipsis" :title="item.lotId" @click="selectRow(item)">{{ item.lotId }}</td>
@@ -47,6 +47,8 @@
 import { ref, watch, computed } from 'vue'
 import { formatDate } from '../../../../utils/formDate'
 import type { TableItem } from '../../../../types/Index';
+import { useSettingTestTubeStore } from '@/store';
+const settingTubeStore = useSettingTestTubeStore()
 
 const props = defineProps<{
   tableData: TableItem[]
@@ -152,11 +154,11 @@ defineExpose({
     th,
     td {
       padding: 16px 8px;
-      font-size: 24px;
+      font-size: 20px;
       transition: background-color 0.3s;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
     }
 
     .ellipsis {

src/types/Index/History.ts

@@ -33,13 +33,18 @@ export interface HistoryInfo {
 export interface TableItem {
   id: number
   sampleUserid: string
+  sampleId: string
+  projId: string  
   projName: string
+  lotId: string
   sampleBloodType: string
   results: Array<{
     status: string
   }>;
   creatDate: string | number | Date
-  lotId: string
-  projId: string  
-  // 其他字段...
+  expiryDate: number
+  operator: string
+  sn: string
+  appVersion: string
+  mcuVersion: string
 }