A8000/src/pages/Index/History.vue

<template>
  <!-- 历史页面-->
  <div id="history-container">
    <div class="table-box">
      <el-table
        style="height: 100%"
        v-loading="loading"
        v-el-table-infinite-scroll="load"
        :infinite-scroll-disabled="disabled"
        :data="tableData"
        show-overflow-tooltip
        @row-click="rowClickHandle"
        @selection-change="handleSelection"
        header-cell-class-name="table-header"
        row-class-name="table-row">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="creatDate" label="日期" width="170">
          <template #default="scope">
            {{ formatDate(scope.row.creatDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="sampleId" label="患者ID" ></el-table-column>
        <el-table-column prop="sampleBloodType" label="样本类型">
          <template #default="scope">
            {{
              settingTubeStore.bloodTypeKeyMap[scope.row.sampleBloodType].name
            }}
          </template>
        </el-table-column>
        <el-table-column prop="lotId" label="批次" ></el-table-column>
        <el-table-column prop="results" label="结果">
          <template #default="scope">
            <div v-for="(r, idx) in scope.row.results" :key="idx">
              {{ showResult(r) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="history-table-footer">
      <el-button type="danger" size="large" :disabled="!selectedItems.length" @click="showActionConfirm('delete')">删除</el-button>
      <el-button type="primary" size="large" :disabled="!selectedItems.length" @click="showActionConfirm('print')">打印</el-button>
      <el-button type="primary" size="large" :disabled="!selectedItems.length" @click="showActionConfirm('export')">导出LIS</el-button>
    </div>

    <!-- 确认操作弹框 -->
    <HistoryWarn
      v-if="showModal"
      :icon="currentAction.icon"
      :message="currentAction.message"
      :confirmText="currentAction.confirmText"
      :cancelText="currentAction.cancelText"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />

    <!-- 通知提示框 -->
    <HistoryWarn
      v-if="showWarn"
      :message="warnMessage"
      :icon="warnIcon"
      @close="showWarn = false"
    />
    <!-- 通用通知组件 -->
    <HistoryWarn
      v-if="showWarn"
      :message="warnMessage"
      :icon="warnIcon"
      :confirmText="'关闭'"
      :showButtons="false"
      @confirm="handleWarnClose"
    />

    <HistoryMessage
      :isVisible="isVisible"
      @update:isVisible="isVisible = $event"
    >
      <div class="detail-container">
        <div class="detail-section">
          <p>序号：{{ rowData && rowData.id }}</p>
          <p class="date">
            日期：{{ rowData && formatDate(rowData.creatDate) }}
          </p>
          <p class="userid">患者ID：{{ rowData && 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>App版本: {{ rowData && rowData.appVersion }}</li>
            <li>MCU版本: {{ rowData && rowData.mcuVersion }}</li>
            <li>SN：{{ rowData && rowData.sn }}</li>
          </ul>

          <div v-if="rowData" class="result-group">
            <p style="font-weight: 600">结果：</p>
            <div
              class="result-sub"
              v-for="(r, idx) in rowData.results"
              :key="idx"
            >
              <div>{{ r.subProjName + ':' }}</div>
              <div class="result-success" v-if="r.status === 'SUCCESS'">
                <span>结果：</span>
                <span
                  class="res-unit"
                  v-for="res in r.resultConverters"
                  :key="res.uint"
                >
                  {{ (r.result * res.A + res.B).toFixed(2) }}
                  {{ res.uintstr + '; ' }}
                </span>
              </div>
              <div class="result-error" v-else>
                <div>结果：错误</div>
                <div>错误信息：{{ r.errorInfo }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="detail-footer">
          <button class="confirm-btn" @click="handleClose">确认</button>
        </div>
      </div>
    </HistoryMessage>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { HistoryWarn } from './components/index'
import {
  getHistoryInfo,
  deleteHistoryInfo,
  printHistoryInfo,
  exportRecordsToLIS,
} from '@/services'
import HistoryMessage from './components/History/HistoryMessage.vue'
import type { ResultItem, TableItem } from '@/types/Index'
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'

defineOptions({
  name: 'HistoryPage',
})
const settingTubeStore = useSettingTestTubeStore()

const showResult = (t: ResultItem) => {
  if (t.status !== 'SUCCESS') {
    return '错误'
  }
  const unit1 = t.resultConverters[0]
  return (
    t.subProjName + '    ' + (t.result * unit1.A + unit1.B).toFixed(2) + '  ' + unit1.uintstr
  )
}


//选中弹出框
const isVisible = ref<boolean>(false)

const handleClose = () => {
  isVisible.value = false
}

// 选中的项目
const selectedItems = ref<TableItem[]>([])

// 控制弹框和通知的显示
const showModal = ref<boolean>(false)
const showWarn = ref<boolean>(false)

// 当前操作的图标和提示信息
const currentAction = ref<{
  type: string
  icon: string
  message: string
  confirmText: string
  cancelText: string
}>({
  type: '',
  icon: '',
  message: '',
  confirmText: '',
  cancelText: '',
})

// 通知消息
const warnMessage = ref<string>('')
// 未选择项目通知的图标

// 定义不同操作的图标和提示信息
const actions: Record<
  string,
  {
    type: string
    icon: string
    message: string
    confirmText: string
    cancelText: string
  }
> = {
  delete: {
    type: 'delete',
    icon: WarnSvg,
    message: '请确认是否删除所选项目',
    confirmText: '确认删除',
    cancelText: '取消',
  },
  print: {
    type: 'print',
    icon: PrintSvg,
    message: '请确认是否打印所选项目',
    confirmText: '确认打印',
    cancelText: '取消',
  },
  export: {
    type: 'export',
    icon: WarnSvg,
    message: '请确认是否导出所选项目',
    confirmText: '确认导出',
    cancelText: '取消',
  },
}
const selectedIds = ref<number[]>([])
// 处理表格选中的项目
const handleSelection = (items: TableItem[]) => {
  selectedItems.value = items
}

const rowData = ref<TableItem>()
const rowClickHandle = (item: TableItem) => {
  isVisible.value = true
  rowData.value = item
}
const formatDate = (date: string | number | Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

// 根据操作类型显示不同的确认弹框或通知
const showActionConfirm = (actionType: string) => {

  // 如果是删除操作，确认删除的数量
  if (actionType === 'delete') {
    currentAction.value = {
      ...actions[actionType],
      message: `是否删除选中的 ${selectedItems.value.length} 条记录？`,
    }
  } else {
    currentAction.value = actions[actionType]
  }

  showModal.value = true
}
//控制骨架屏
const loading = ref(false)
// 获取表格数据
const tableData = ref<TableItem[]>([])
const currentPage = ref(1)
const pageSize = ref(25)
const total = ref(0)
const totalPage = ref(0)
const hasMore = ref(true)
const loadingText = ref('加载中...')

const disabled = ref(false)
const load  = () => {
  if (disabled.value) return;
  loading.value = true

  getHistoryInfo({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  }).then(async (res) => {
    currentPage.value++;
    total.value = res.data.total
    totalPage.value = res.data.totalPage
    tableData.value = tableData.value.concat(res.data.list)
    if (currentPage.value > totalPage.value) {
      disabled.value = true
    }
  }).catch(() => {
    eMessage.error("获取数据失败")
  }).finally(() => {
    loading.value = false
  })

}

const getTableData = async (isReset: boolean = false) => {
  if (isReset) {
    // 重置数据和页码
    tableData.value = []
    currentPage.value = 1
    hasMore.value = true
  }

  if (loading.value || !hasMore.value) return
  loading.value = true

  try {
    const res = await getHistoryInfoApi()
    if (currentPage.value > totalPage.value) {
      hasMore.value = false
      loadingText.value = '没有更多数据了'
    } else {
      tableData.value = [...tableData.value, ...res.data.list]
      currentPage.value++
      loadingText.value = '加载中...'
    }
  } catch (error) {
    console.error('获取数据失败', error)
    loadingText.value = '加载失败，请重试'
  } finally {
    setTimeout(() => {
      loading.value = false
    }, 1000)
  }
}
const getHistoryInfoApi = async () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  }
  try {
    const res = await getHistoryInfo(params)
    total.value = res.data.total
    totalPage.value = res.data.totalPage
    return res
  } catch (error) {
    console.log('获取数据失败', error)
  }
}



// 确认操作时的回调函数
const handleConfirm = async () => {
  showModal.value = false
  showWarn.value = false
  const actionType = currentAction.value.type
  if (actionType === 'delete') {
    await handleConfirmDelete()
  } else if (actionType === 'print') {
    // 执行打印操作
    await handlePrint()
  } else if (actionType === 'export') {
    // 执行导出操作
    await handleExport()
  }
}
const handleWarnClose = () => {
  showWarn.value = false
}

// 取消操作时的回调函数
const handleCancel = () => {
  showModal.value = false
  showWarn.value = false
}

// 处理删除确认
const handleConfirmDelete = async () => {
    const deleteIds = selectedItems.value.map((item) => item.id)

       deleteHistoryInfo(deleteIds.join(',')).then((res) => {
         if (res.success && res.ecode === 'SUC') {
           eMessage.success('删除成功')
           tableData.value = tableData.value.filter(
             (item) => !deleteIds.includes(item.id),
           )
         }else {
           eMessage.error('删除失败')
         }
       })
}
let warnIcon: any
// 打印功能
const handlePrint = async () => {
  try {
    const idsToPrint = selectedItems.value.map((item) => item.id)
    const res = await printHistoryInfo(idsToPrint)
    if (res.success && res.ecode === 'SUC') {
      warnMessage.value = '打印成功'
      warnIcon = new URL('@/assets/Index/History/success.svg', import.meta.url)
        .href
      showWarn.value = true
    } else {
      eMessage.error(res.message || '打印失败')
    }
  } catch (error) {
    console.error('打印失败', error)
    warnMessage.value = '打印失败，请重试'
    warnIcon = ErrorSvg
    showWarn.value = true
  }
}
// 导出功能
const handleExport = async () => {
  try {
    const idsToPrint = selectedItems.value.map((item) => item.id)
    const res = await exportRecordsToLIS(idsToPrint)
    if (res.success && res.ecode === 'SUC') {
      warnMessage.value = '导出成功'
      warnIcon = new URL('@/assets/Index/History/success.svg', import.meta.url)
        .href
      showWarn.value = true
    } else {
      eMessage.error(res.message || '导出失败')
    }
  } catch (error) {
    console.error('导出失败', error)
    warnMessage.value = '导出失败，请重试'
    warnIcon = ErrorSvg
    showWarn.value = true
  }
}
</script>

<style scoped lang="less">
:global(.custom-message) {
  min-width: 380px !important;
  padding: 16px 24px !important;

  .el-message__content {
    font-size: 24px !important;
    line-height: 1.5 !important;
  }

  .el-message__icon {
    font-size: 24px !important;
    margin-right: 12px !important;
  }
}

#history-container {
  > * {
    box-sizing: border-box;
  }
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  .table-box {
    height: calc(100% - 80px);
    .el-table {
      font-size: 18px;
    }
  }
  .history-table-footer {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .el-button {
      width: 100px;
      font-size: 18px;
    }
  }
}

.detail-container {
  .detail-section {
    margin-bottom: 24px;
    font-size: 22px;
    .projName {
      font-weight: 600;
    }
    .result-group {
      .result-sub {
        margin-bottom: 12px;
      }
      .result-success,
      .result-error {
        margin-left: 20px;
      }
      .result-success {
        display: flex;
        gap: 12px;
      }
      .result-error {
        color: red;
      }
    }
  }

  .detail-footer {
    margin-top: 40px;
    text-align: center;

    .confirm-btn {
      width: 90%;
      height: 88px;
      background-color: #409eff;
      border: none;
      border-radius: 44px;
      color: white;
      font-size: 32px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}
:deep(.table-header) {
  height: 60px;
}
:deep(.table-row) {
  height: 60px;
}
</style>