A8000
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

690 lines
17 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <!-- 历史页面-->
  3. <div id="history-container">
  4. <!-- 筛选 -->
  5. <!-- <div class="history-filter">
  6. <div class="filter-input">
  7. <el-input v-model="inputValue" placeholder="输入信息">
  8. <template #prefix>
  9. <el-icon class="el-input__icon">
  10. <search />
  11. </el-icon>
  12. </template>
  13. </el-input>
  14. </div>
  15. <div class="filter-button">
  16. <el-button type="primary" class="search-button" @click="handleSearch" disabled>搜索</el-button>
  17. <el-button class="reload-button" @click="handleReset">重置</el-button>
  18. </div>
  19. </div> -->
  20. <!-- 表格 -->
  21. <div class="history-table" @scroll="onScroll" ref="tableContainer">
  22. <HistoryTable ref="historyTableRef" @selectItems="handleSelection" @selectIds="handleSelectIds"
  23. @select-row="handleSelectRow" :tableData="tableData" :loading="loading" :key="tableKey"
  24. :loadingText="loadingText" />
  25. </div>
  26. <!-- 功能 -->
  27. <div class="history-function">
  28. <el-button type="primary" plain @click="showActionConfirm('delete')">删除</el-button>
  29. <el-button type="primary" plain @click="showActionConfirm('print')">打印</el-button>
  30. <el-button type="primary" plain @click="showActionConfirm('export')">导出</el-button>
  31. </div>
  32. <!-- 确认操作弹框 -->
  33. <HistoryWarn v-if="showModal" :icon="currentAction.icon" :message="currentAction.message"
  34. :confirmText="currentAction.confirmText" :cancelText="currentAction.cancelText" @confirm="handleConfirm"
  35. @cancel="handleCancel" />
  36. <!-- 通知提示框 -->
  37. <HistoryWarn v-if="showWarn" :message="warnMessage" :icon="warnIcon" @close="showWarn = false" />
  38. <!-- 通用通知组件 -->
  39. <HistoryWarn v-if="showWarn" :message="warnMessage" :icon="warnIcon" :confirmText="'关闭'" :showButtons="false"
  40. @confirm="handleWarnClose" />
  41. <HistoryMessage :isVisible="isVisible" @update:isVisible="isVisible = $event">
  42. <div class="detail-container">
  43. <div class="detail-section">
  44. <div class="detail-item">
  45. <span class="label">日期:</span>
  46. <span class="value">{{ rowData && formatDate(rowData.creatDate) }}</span>
  47. </div>
  48. <div class="divider"></div>
  49. <div class="detail-item">
  50. <span class="label">样本id:</span>
  51. <span class="value">{{ rowData && rowData.id }}</span>
  52. </div>
  53. <div class="divider"></div>
  54. <div class="detail-item">
  55. <span class="label">项目名称:</span>
  56. <span class="value">{{ rowData && rowData.id }}</span>
  57. </div>
  58. <div class="detail-item">
  59. <span class="label">Result:</span>
  60. <span class="value">{{ rowData && JSON.stringify(rowData.results) }}</span>
  61. </div>
  62. </div>
  63. <div class="detail-section">
  64. <div class="detail-item">
  65. <span class="label">样本种类:</span>
  66. <span class="value">{{ rowData && rowData.sampleBloodType }}</span>
  67. </div>
  68. <div class="detail-item">
  69. <span class="label">操次:</span>
  70. <span class="value">{{ rowData && rowData.lotId }}</span>
  71. </div>
  72. <div class="detail-item">
  73. <span class="label">Rec:</span>
  74. <span class="value">Record 1</span>
  75. </div>
  76. <div class="detail-item">
  77. <span class="label">有效期:</span>
  78. <span class="value">2024-12-31</span>
  79. </div>
  80. <div class="divider"></div>
  81. <div class="detail-item">
  82. <span class="label">操作人:</span>
  83. <span class="value">John Doe</span>
  84. </div>
  85. <div class="detail-item">
  86. <span class="label">序列号:</span>
  87. <span class="value">SN12345</span>
  88. </div>
  89. <div class="detail-item">
  90. <span class="label">App Ver:</span>
  91. <span class="value">1.0.0</span>
  92. </div>
  93. <div class="detail-item">
  94. <span class="label">F/W Ver:</span>
  95. <span class="value">2.0.0</span>
  96. </div>
  97. </div>
  98. <div class="detail-footer">
  99. <button class="confirm-btn" @click="handleClose">确认</button>
  100. </div>
  101. </div>
  102. </HistoryMessage>
  103. </div>
  104. </template>
  105. <script setup lang="ts">
  106. import { onMounted, ref } from 'vue'
  107. import dayjs from 'dayjs'
  108. import { HistoryTable, HistoryWarn } from './components/index'
  109. import {
  110. getHistoryInfo,
  111. deleteHistoryInfo,
  112. printHistoryInfo,
  113. } from '../../services/Index/index'
  114. import HistoryMessage from './components/History/HistoryMessage.vue'
  115. import type { TableItem } from '../../types/Index'
  116. import WarnSvg from '@/assets/Index/History/warn.svg'
  117. import PrintSvg from '@/assets/Index/History/print.svg'
  118. import ErrorSvg from '@/assets/Warn.svg'
  119. import { eMessage } from './utils'
  120. // 添加表格引用
  121. const historyTableRef = ref()
  122. //选中弹出框
  123. const isVisible = ref<boolean>(false)
  124. const handleClose = () => {
  125. isVisible.value = false
  126. }
  127. // 绑定输入框的值
  128. // const inputValue = ref<string>('')
  129. // 选中的项目
  130. const selectedItems = ref<TableItem[]>([])
  131. // 控制弹框和通知的显示
  132. const showModal = ref<boolean>(false)
  133. const showWarn = ref<boolean>(false)
  134. // 当前操作的图标和提示信息
  135. const currentAction = ref<{
  136. type: string
  137. icon: string
  138. message: string
  139. confirmText: string
  140. cancelText: string
  141. }>({
  142. type: '',
  143. icon: '',
  144. message: '',
  145. confirmText: '',
  146. cancelText: '',
  147. })
  148. // 通知消息
  149. const warnMessage = ref<string>('')
  150. // 未选择项目通知的图标
  151. // 定义不同操作的图标和提示信息
  152. const actions: Record<
  153. string,
  154. {
  155. type: string
  156. icon: string
  157. message: string
  158. confirmText: string
  159. cancelText: string
  160. }
  161. > = {
  162. delete: {
  163. type: 'delete',
  164. icon: WarnSvg,
  165. message: '请确认是否删除所选项目',
  166. confirmText: '确认删除',
  167. cancelText: '取消',
  168. },
  169. print: {
  170. type: 'print',
  171. icon: PrintSvg,
  172. message: '请确认是否打印所选项目',
  173. confirmText: '确认打印',
  174. cancelText: '取消',
  175. },
  176. export: {
  177. type: 'export',
  178. icon: WarnSvg,
  179. message: '请确认是否导出所选项目',
  180. confirmText: '确认导出',
  181. cancelText: '取消',
  182. },
  183. }
  184. const selectedIds = ref<number[]>([])
  185. // 处理表格选中的项目
  186. const handleSelection = (items: TableItem[]) => {
  187. console.log(items)
  188. selectedItems.value = items
  189. }
  190. const handleSelectIds = (ids: number[]) => {
  191. selectedIds.value = ids
  192. }
  193. const rowData = ref<TableItem>()
  194. const handleSelectRow = (item: TableItem) => {
  195. isVisible.value = true
  196. rowData.value = item
  197. }
  198. const formatDate = (date: string | number | Date) => {
  199. return dayjs(date).format('YYYY-MM-DD')
  200. }
  201. // 根据操作类型显示不同的确认弹框或通知
  202. const showActionConfirm = (actionType: string) => {
  203. // 判断是否有选中的项目
  204. if (selectedItems.value.length === 0) {
  205. // 如果没有选中项目,弹出通知框
  206. warnMessage.value = '请先选择项目'
  207. showWarn.value = true
  208. return
  209. }
  210. // 如果是删除操作,确认删除的数量
  211. if (actionType === 'delete') {
  212. currentAction.value = {
  213. ...actions[actionType],
  214. message: `是否删除选中的 ${selectedItems.value.length} 条记录?`
  215. }
  216. } else {
  217. currentAction.value = actions[actionType]
  218. }
  219. showModal.value = true
  220. }
  221. //控制骨架屏
  222. const loading = ref(false)
  223. // 获取表格数据
  224. const tableData = ref<TableItem[]>([])
  225. const currentPage = ref(1)
  226. const pageSize = ref(20)
  227. const total = ref(0)
  228. const totalPage = ref(0)
  229. const tableKey = ref(0)//控制重新渲染
  230. const tableContainer = ref(null as HTMLElement | null)
  231. const hasMore = ref(true)
  232. const loadingText = ref("加载中...")
  233. const getTableData = async (isReset: boolean = false) => {
  234. if (isReset) {
  235. // 重置数据和页码
  236. tableData.value = []
  237. currentPage.value = 1
  238. hasMore.value = true
  239. }
  240. if (loading.value || !hasMore.value) return
  241. loading.value = true
  242. try {
  243. const res = await getHistoryInfoApi()
  244. if (currentPage.value > totalPage.value) {
  245. hasMore.value = false
  246. loadingText.value = "没有更多数据了"
  247. } else {
  248. tableData.value = [...tableData.value, ...res.data.list]
  249. currentPage.value++;
  250. loadingText.value = "加载中..."
  251. }
  252. } catch (error) {
  253. console.error('获取数据失败', error)
  254. loadingText.value = "加载失败,请重试"
  255. } finally {
  256. setTimeout(() => {
  257. loading.value = false
  258. }, 1000)
  259. }
  260. }
  261. const getHistoryInfoApi = async () => {
  262. const params = {
  263. pageNum: currentPage.value,
  264. pageSize: pageSize.value,
  265. }
  266. try {
  267. const res = await getHistoryInfo(params)
  268. total.value = res.data.total
  269. totalPage.value = res.data.totalPage
  270. return res
  271. } catch (error) {
  272. console.log("获取数据失败", error)
  273. }
  274. }
  275. const onScroll = (event: any) => {
  276. const container = event.target;
  277. const isNearBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 100;
  278. if (isNearBottom && !loading.value) {
  279. getTableData()
  280. }
  281. }
  282. // 搜索功能 暂时注释
  283. // const handleSearch = async () => {
  284. // console.log('搜索内容:', inputValue.value)
  285. // try {
  286. // const res = await searchHistoryInfo(inputValue.value)
  287. // console.log(res.data.list)
  288. // // 直接替换数据,不进行累加
  289. // tableData.value = res.data.list as TableItem[]
  290. // // 重置分页相关状态
  291. // currentPage.value = 1
  292. // hasMore.value = false
  293. // } catch (error) {
  294. // console.error('搜索失败', error)
  295. // }
  296. // }
  297. // 确认操作时的回调函数
  298. const handleConfirm = async () => {
  299. showModal.value = false
  300. showWarn.value = false
  301. const actionType = currentAction.value.type
  302. if (actionType === 'delete') {
  303. await handleConfirmDelete()
  304. } else if (actionType === 'print') {
  305. // 执行打印操作
  306. handlePrint()
  307. } else if (actionType === 'export') {
  308. // 执行导出操作
  309. handleExport()
  310. }
  311. }
  312. const handleWarnClose = () => {
  313. getTableData()
  314. showWarn.value = false
  315. }
  316. // 取消操作时的回调函数
  317. const handleCancel = () => {
  318. showModal.value = false
  319. showWarn.value = false
  320. }
  321. // 处理删除确认
  322. const handleConfirmDelete = async () => {
  323. try {
  324. // 一次删除一条记录
  325. for (const item of selectedItems.value) {
  326. const res = await deleteHistoryInfo(item.id)
  327. if (!res.success) {
  328. throw new Error('删除失败')
  329. }
  330. }
  331. // 从表格数据中移除被删除的项目
  332. const deleteIds = selectedItems.value.map(item => item.id)
  333. tableData.value = tableData.value.filter(item => !deleteIds.includes(item.id))
  334. // 通过表格组件清空选择状态
  335. if (historyTableRef.value) {
  336. historyTableRef.value.clearSelection()
  337. }
  338. eMessage.success('删除成功')
  339. } catch (error) {
  340. eMessage.error('删除失败')
  341. } finally {
  342. showModal.value = false
  343. }
  344. }
  345. let warnIcon: any
  346. // 打印功能
  347. const handlePrint = async () => {
  348. try {
  349. if (selectedItems.value.length > 10) {
  350. warnMessage.value = '一次最多只能打印 10 条记录'
  351. warnIcon = new URL('@/assets/Index/History/warn.svg', import.meta.url).href
  352. showWarn.value = true
  353. return
  354. }
  355. const idsToPrint = selectedItems.value.map((item) => item.id)
  356. for (const item of idsToPrint) {
  357. const res = await printHistoryInfo(item)
  358. if (res.success && res.ecode === "SUC") {
  359. warnMessage.value = '打印成功'
  360. warnIcon = new URL('@/assets/Index/History/success.svg', import.meta.url).href
  361. showWarn.value = true
  362. // 清空选中状态
  363. selectedItems.value = []
  364. selectedIds.value = []
  365. // 手动清除表格的选中状态
  366. if (historyTableRef.value?.clearSelection) {
  367. historyTableRef.value.clearSelection()
  368. }
  369. } else {
  370. throw new Error(res.message || '打印失败')
  371. }
  372. }
  373. } catch (error) {
  374. console.error('打印失败', error)
  375. warnMessage.value = '打印失败,请重试'
  376. warnIcon = ErrorSvg
  377. showWarn.value = true
  378. }
  379. }
  380. // 导出功能
  381. const handleExport = () => {
  382. // 执行导出操作
  383. // 根据实际需求实现导出功能
  384. console.log('导出项目:', selectedItems.value)
  385. warnMessage.value = '导出成功'
  386. showWarn.value = true
  387. }
  388. onMounted(() => {
  389. getTableData()
  390. })
  391. </script>
  392. <style scoped lang="less">
  393. :global(.custom-message) {
  394. min-width: 380px !important;
  395. padding: 16px 24px !important;
  396. .el-message__content {
  397. font-size: 24px !important;
  398. line-height: 1.5 !important;
  399. }
  400. .el-message__icon {
  401. font-size: 24px !important;
  402. margin-right: 12px !important;
  403. }
  404. }
  405. #history-container {
  406. width: 100%;
  407. height: 90vh;
  408. display: flex;
  409. flex-direction: column;
  410. background-color: #f5f7fa;
  411. box-sizing: border-box;
  412. .history-filter {
  413. width: 100%;
  414. height: 70px;
  415. margin-bottom: 20px;
  416. display: flex;
  417. justify-content: space-between;
  418. align-items: center;
  419. background-color: #fff;
  420. border-radius: 10px;
  421. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  422. .filter-input {
  423. flex: 1;
  424. max-width: 800px;
  425. .el-input {
  426. height: 50px;
  427. font-size: 26px;
  428. .el-input__wrapper {
  429. border-radius: 25px;
  430. padding: 0 20px;
  431. box-shadow: 0 0 0 1px #dcdfe6;
  432. &:hover {
  433. box-shadow: 0 0 0 1px #409eff;
  434. }
  435. &.is-focus {
  436. box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  437. }
  438. }
  439. .el-input__icon {
  440. font-size: 26px;
  441. color: #909399;
  442. }
  443. }
  444. }
  445. .filter-button {
  446. display: flex;
  447. .search-button,
  448. .reload-button {
  449. height: 50px;
  450. border-radius: 25px;
  451. font-size: 26px;
  452. font-weight: 500;
  453. transition: all 0.3s;
  454. &:hover {
  455. transform: translateY(-2px);
  456. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  457. }
  458. }
  459. .search-button {
  460. width: 200px;
  461. &:disabled {
  462. background-color: #a0cfff;
  463. border-color: #a0cfff;
  464. &:hover {
  465. transform: none;
  466. box-shadow: none;
  467. }
  468. }
  469. }
  470. .reload-button {
  471. width: 90px;
  472. color: #606266;
  473. border: 1px solid #dcdfe6;
  474. &:hover {
  475. color: #409eff;
  476. border-color: #c6e2ff;
  477. background-color: #ecf5ff;
  478. }
  479. }
  480. }
  481. }
  482. .history-table {
  483. flex: 1;
  484. overflow-y: auto; // 只允许垂直滚动
  485. overflow-x: hidden; // 禁止水平滚动
  486. background-color: #fff;
  487. border-radius: 10px;
  488. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  489. margin: 0 20px;
  490. padding: 20px;
  491. position: relative;
  492. // 优化滚动条样式
  493. &::-webkit-scrollbar {
  494. width: 6px;
  495. height: 6px;
  496. }
  497. &::-webkit-scrollbar-thumb {
  498. background: #c0c4cc;
  499. border-radius: 3px;
  500. &:hover {
  501. background: #909399;
  502. }
  503. }
  504. &::-webkit-scrollbar-track {
  505. background: #f5f7fa;
  506. }
  507. // 添加表格容器阴影效果
  508. &::after {
  509. content: '';
  510. position: absolute;
  511. left: 0;
  512. right: 0;
  513. bottom: 0;
  514. height: 30px;
  515. background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
  516. pointer-events: none;
  517. }
  518. }
  519. .history-function {
  520. width: 100%;
  521. height: 84px;
  522. margin-top: 20px;
  523. background-color: #fff;
  524. box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.05);
  525. display: flex;
  526. justify-content: center;
  527. align-items: center;
  528. gap: 20px;
  529. .el-button {
  530. height: 50px;
  531. border-radius: 25px;
  532. font-size: 26px;
  533. font-weight: 500;
  534. transition: all 0.3s;
  535. &:hover {
  536. transform: translateY(-2px);
  537. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  538. }
  539. &:nth-child(1) {
  540. width: 215px;
  541. }
  542. &:nth-child(2),
  543. &:nth-child(3) {
  544. width: 392px;
  545. }
  546. &.is-plain {
  547. background-color: #fff;
  548. &:hover {
  549. background-color: #ecf5ff;
  550. }
  551. }
  552. }
  553. }
  554. }
  555. .detail-container {
  556. .detail-section {
  557. margin-bottom: 24px;
  558. }
  559. .detail-item {
  560. display: flex;
  561. align-items: center;
  562. padding: 16px 0;
  563. font-size: 28px;
  564. .label {
  565. color: #606266;
  566. min-width: 200px;
  567. font-weight: 500;
  568. }
  569. .value {
  570. color: #303133;
  571. flex: 1;
  572. word-break: break-all;
  573. }
  574. }
  575. .divider {
  576. height: 1px;
  577. background-color: #ebeef5;
  578. margin: 16px 0;
  579. }
  580. .detail-footer {
  581. margin-top: 40px;
  582. text-align: center;
  583. .confirm-btn {
  584. width: 90%;
  585. height: 88px;
  586. background-color: #409eff;
  587. border: none;
  588. border-radius: 44px;
  589. color: white;
  590. font-size: 32px;
  591. font-weight: 500;
  592. cursor: pointer;
  593. transition: all 0.3s;
  594. &:hover {
  595. background-color: #66b1ff;
  596. transform: translateY(-2px);
  597. box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  598. }
  599. &:active {
  600. transform: translateY(0);
  601. }
  602. }
  603. }
  604. }
  605. </style>