优化

src/components/search/Index.vue

@@ -12,10 +12,10 @@
         <el-select v-model="params.method" style="width: 70px">
           <el-option v-for="item in allMethods" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select
         >&nbsp;
-        <el-input v-model="params.content" style="width: 240px" clearable placeholder="请输入检索内容"></el-input>
+        <el-input ref="inputRef" v-model="params.content" style="width: 240px" clearable placeholder="请输入检索内容"></el-input>
       </div>
       <div class="data-box">
-        <div style="height: 330px">
+        <!-- <div style="height: 330px">
           <div class="data-item-thead">
             <div style="width: 120px">编码</div>
             <div style="width: 260px">名称</div>
@@ -24,8 +24,18 @@
             <div style="width: 120px" :title="itm.name">{{ itm.code }}</div>
             <div style="width: 260px" :title="itm.name">{{ itm.name }}</div>
           </div>
-        </div>
-        <el-pagination @current-change="handleCurrentChange" :current-page="params.page" :page-size="10" layout="total, pager, next" :total="data.totalSize"></el-pagination>
+        </div> -->
+        <el-table ref="resultRef" :data="data.list" stripe height="360px" highlight-current-row @row-click="clickItem">
+          <el-table-column prop="code" label="编码"></el-table-column>
+          <el-table-column prop="name" label="名称"></el-table-column>
+        </el-table>
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="params.page"
+          :page-size="params.pageSize"
+          layout="total, pager, next"
+          :total="data.totalSize"
+        ></el-pagination>
       </div>
     </div>
 
@@ -55,6 +65,7 @@
 import { reactive, ref, watch } from 'vue'
 import { searchFromServer } from '@/api/yibao/dictionary'
 import { diagTypes } from '@/data/index'
+import Sleep from '@/utils/sleep'
 
 export default {
   props: {
@@ -73,6 +84,8 @@ export default {
   },
   emits: ['close', 'clickItem'],
   setup(props, ctx) {
+    const inputRef = ref(null)
+    const resultRef = ref(null)
     const allMethods = [
       { code: 'alpha', name: '拼音' },
       { code: 'code', name: '编码' },
@@ -83,6 +96,7 @@ export default {
       target: props.target,
       medType: props.medType,
       page: 1,
+      pageSize: 10,
       content: '',
     })
     const data = reactive({
@@ -102,6 +116,8 @@ export default {
         searchFromServer(params).then((res) => {
           data.list = res.list
           data.totalSize = res.totalSize
+          currentIndex.value = currentIndex.value > data.list.length - 1 ? data.list.length - 1 : currentIndex.value
+          resultRef.value.setCurrentRow(data.list[currentIndex.value])
         })
       } else {
         data.list = []
@@ -109,6 +125,8 @@ export default {
       }
     }
 
+    const currentIndex = ref(0)
+
     const handleCurrentChange = (val) => {
       params.page = val
       executeSearch()
@@ -140,7 +158,41 @@ export default {
       }
     )
 
+    onMounted(async () => {
+      await Sleep(100)
+      inputRef.value.focus()
+
+      document.onkeydown = (e) => {
+        switch (e.code) {
+          case 'ArrowUp':
+            resultRef.value.setCurrentRow(data.list[currentIndex.value === 0 ? 0 : --currentIndex.value])
+            return false
+          case 'ArrowDown':
+            resultRef.value.setCurrentRow(data.list[currentIndex.value === data.list.length - 1 ? data.list.length - 1 : ++currentIndex.value])
+            return false
+          case 'ArrowLeft':
+            if (params.page > 1) {
+              handleCurrentChange(params.page - 1)
+            }
+            return false
+          case 'ArrowRight':
+            if (params.page * params.pageSize < data.totalSize) {
+              handleCurrentChange(params.page + 1)
+            }
+            return false
+          case 'Enter':
+            clickItem(data.list[currentIndex.value])
+            break
+          case 'Escape':
+            close()
+            break
+        }
+      }
+    })
+
     return {
+      inputRef,
+      resultRef,
       data,
       params,
       allMethods,
@@ -166,33 +218,4 @@ export default {
   overflow-y: auto;
   border-top: 1px solid rgb(231, 231, 231);
 }
-.data-item-thead {
-  display: flex;
-  height: 30px;
-  line-height: 30px;
-  border-bottom: 1px solid rgb(226, 238, 233);
-}
-.data-item-thead > div {
-  padding: 0 8px;
-  font-weight: bold;
-  font-size: 14px;
-}
-.data-item-line {
-  display: flex;
-  height: 28px;
-  line-height: 28px;
-  border-bottom: 1px solid rgb(226, 238, 233);
-}
-.data-item-line > div {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  padding: 0 8px;
-}
-.data-item-line:hover {
-  background: rgb(17, 151, 129);
-  color: white;
-  font-weight: bold;
-  cursor: pointer;
-}
 </style>