From 9ac572d92f59bd36c8b03e0a3b76f5f68b15b862 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 22 Aug 2024 13:41:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Nuclide=20Library=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E5=AE=9A=E4=BD=8D=E5=B7=A6=E4=BE=A7=E6=A0=B8?=
 =?UTF-8?q?=E7=B4=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Modals/NuclideLibraryModal.vue | 42 +++++++++++++++++--
 .../SelfStationNuclideLibraryModal.vue        | 41 +++++++++++++++++-
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
index 47bc23d..d013870 100644
--- a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
@@ -1,8 +1,8 @@
 <template>
-  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
+  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null" @cancel="handleClose">
     <a-spin :spinning="isLoading">
       <div class="nuclide-library">
-        <div class="nuclide-library-list">
+        <div ref="containerRef" class="nuclide-library-list">
           <div
             class="nuclide-library-list-item"
             :class="{ active: selectedNuclide == item }"
@@ -113,7 +113,6 @@ import ModalMixin from '@/mixins/ModalMixin'
 import TitleOverBorder from '../TitleOverBorder.vue'
 import { getAction } from '@/api/manage'
 import SampleDataMixin from '../../SampleDataMixin'
-import { toFixed } from '@/utils/number'
 
 // 右上角表格配置
 const daughterColumns = [
@@ -233,6 +232,9 @@ export default {
           if (selectFirst) {
             this.selectedNuclide = nuclides[0]
             this.model.nuclideName = nuclides[0]
+            this.$nextTick(() => {
+              this.scrollToView(this.selectedNuclide)
+            })
           }
         } else {
           this.$message.error(message)
@@ -252,7 +254,36 @@ export default {
         nuclideName: '',
       }
       this.getInfo(true)
+      window.addEventListener('keyup', this.handleKeyUp)
     },
+
+    // 键盘按键抬起，定位到首字母为该键的核素
+    handleKeyUp({ key }) {
+      if (/[a-zA-Z]/.test(key)) {
+        const list = this.nuclideList.filter((item) => item.toLowerCase().startsWith(key))
+        if (list.length) {
+          const firstItem = list[0]
+          this.handleNuclideItemClick(firstItem)
+          this.scrollToView(firstItem)
+        }
+      }
+    },
+
+    // 左侧列表中的目标核素滚动到可视范围
+    scrollToView(targetItem) {
+      const index = this.nuclideList.findIndex((item) => item == targetItem)
+      if (-1 !== index) {
+        const targetEle = this.$refs.containerRef.querySelector(`div:nth-child(${index + 1})`)
+        if (targetEle.scrollIntoViewIfNeeded) {
+          targetEle.scrollIntoViewIfNeeded()
+        }
+        // firefox兼容
+        else {
+          targetEle.scrollIntoView()
+        }
+      }
+    },
+
     handleNuclideItemClick(item) {
       this.selectedNuclide = item
       this.model.nuclideName = item
@@ -282,6 +313,11 @@ export default {
       this.getInfo(true)
     },
 
+    // 关闭
+    handleClose() {
+      window.removeEventListener('keyup', this.handleKeyUp)
+    },
+
     handleParentClick(item) {
       this.selectedParent = item
     },
diff --git a/src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue
index 10bd9eb..e5d1352 100644
--- a/src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue
@@ -1,8 +1,8 @@
 <template>
-  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
+  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null" @cancel="handleClose">
     <a-spin :spinning="isLoading">
       <div class="nuclide-library">
-        <div class="nuclide-library-list">
+        <div ref="containerRef" class="nuclide-library-list">
           <div
             class="nuclide-library-list-item"
             :class="{ active: selectedNuclide == item }"
@@ -232,6 +232,9 @@ export default {
           if (selectFirst) {
             this.selectedNuclide = nuclides[0]
             this.model.nuclideName = nuclides[0]
+            this.$nextTick(() => {
+              this.scrollToView(this.selectedNuclide)
+            })
           }
         } else {
           this.$message.error(message)
@@ -252,7 +255,36 @@ export default {
       }
       this.getInfo(true)
       this.visible = true
+      window.addEventListener('keyup', this.handleKeyUp)
     },
+
+    // 键盘按键抬起，定位到首字母为该键的核素
+    handleKeyUp({ key }) {
+      if (/[a-zA-Z]/.test(key)) {
+        const list = this.nuclideList.filter((item) => item.toLowerCase().startsWith(key))
+        if (list.length) {
+          const firstItem = list[0]
+          this.handleNuclideItemClick(firstItem)
+          this.scrollToView(firstItem)
+        }
+      }
+    },
+
+    // 左侧列表中的目标核素滚动到可视范围
+    scrollToView(targetItem) {
+      const index = this.nuclideList.findIndex((item) => item == targetItem)
+      if (-1 !== index) {
+        const targetEle = this.$refs.containerRef.querySelector(`div:nth-child(${index + 1})`)
+        if (targetEle.scrollIntoViewIfNeeded) {
+          targetEle.scrollIntoViewIfNeeded()
+        }
+        // firefox兼容
+        else {
+          targetEle.scrollIntoView()
+        }
+      }
+    },
+
     handleNuclideItemClick(item) {
       this.selectedNuclide = item
       this.model.nuclideName = item
@@ -282,6 +314,11 @@ export default {
       this.getInfo(true)
     },
 
+    // 关闭
+    handleClose() {
+      window.removeEventListener('keyup', this.handleKeyUp)
+    },
+
     handleParentClick(item) {
       this.selectedParent = item
     },