完善搜索

src/components/Search/Search.vue

@@ -1,43 +1,17 @@
 <script setup lang="ts">
 import { reactive, ref, toRefs } from 'vue'
-import { debounce, difference } from 'lodash-es'
-
+import { debounce } from 'lodash-es'
+import { useRoute, useRouter } from 'vue-router'
 import { deleteSearch, getSearchList, historySearch } from '@/api/search/search'
 
+const emit = defineEmits(['close'])
+
 const value = ref('')
 const showList = ref(false)
 const historyList: any = ref([])
 const handlerShowList = () => (showList.value = true)
-// const resultList = [
-//   {
-//     title: '任务审批管理',
-//     data: [
-//       {
-//         title: '某某企业名称占位-1月拜访计划计划',
-//       },
-//       {
-//         title: '某某企业名称占位符占位占位-12月拜访计划计划',
-//       },
-//       {
-//         title: '某某企业-某某事业部-第四季度拜访计划计划',
-//       },
-//     ],
-//   },
-//   {
-//     title: '任务终审管理',
-//     data: [
-//       {
-//         title: '某某企业名称占位-1月拜访计划计划',
-//       },
-//       {
-//         title: '某某企业名称占位符占位占位-12月拜访计划计划',
-//       },
-//       {
-//         title: '某某企业名称占位符占位占位-12月拜访计划计划',
-//       },
-//     ],
-//   },
-// ]
+const router = useRouter()
+const route = useRoute()
 const state = reactive({
   resultList: [],
 }) as any
@@ -55,13 +29,31 @@ async function handlerSearch(value) {
     search: value,
   })
   if (res.code === 'OK') {
-    resultList.value = [{
-      title: 'AI工单管理',
-      data: res.data,
-    }]
+    state.resultList = [
+      {
+        title: 'AI工单管理',
+        path: 'worksheet',
+        data: res.data.ai,
+      },
+      {
+        title: '任务审批管理',
+        path: 'task',
+        data: res.data.preliminary,
+      },
+      {
+        title: '任务终审管理',
+        path: 'final',
+        data: res.data.final,
+      },
+    ]
   }
 }
 
+function handlerHistory(name) {
+  value.value = name
+  handlerSearch(name)
+}
+
 // 删除历史记录
 async function deleteHistory() {
   const res = await deleteSearch({
@@ -79,12 +71,14 @@ async function getHistory() {
 }
 getHistory()
 
-function goTask() {}
+function goPath(item, id) {
+  router.push({ name: item.path, query: { id } })
+  emit('close')
+}
 
 function highlightText(text, query) {
   if (!query)
     return text
-  console.log(text)
   const regex = new RegExp(query, 'gi')
   const highlightedText = text.replace(regex, (match) => {
     return `<span style="color:#507AFD" class="highlight">${match}</span>`
@@ -123,7 +117,7 @@ function highlightText(text, query) {
         </div>
         <div class="history-list flex">
           <div class="tag-wrap">
-            <div v-for="(item, index) of historyList" :key="index" class="tag">
+            <div v-for="(item, index) of historyList" :key="index" class="tag" @click="handlerHistory(item.historyname)">
               {{ item.historyname }}
             </div>
           </div>
@@ -139,10 +133,9 @@ function highlightText(text, query) {
         <div class="list_title">
           {{ item.title }}
         </div>
-        <div v-for="(sitem, sindex) in item.data" :key="sindex" class="list_item" @click="goTask(sitem.id)">
+        <div v-for="(sitem, sindex) in item.data" :key="sindex" class="list_item" @click="goPath(item, sitem.id)">
           <SvgIcon name="task-icon" size="16" />
-          <!-- <a style="margin-left: 5px">{{ sitem.name }}</a> -->
-          <span style="margin-left: 5px" v-html="highlightText(sitem.name, value)" />
+          <span class="name" v-html="highlightText(sitem.name, value)" />
         </div>
       </div>
     </div>
@@ -209,6 +202,11 @@ function highlightText(text, query) {
   padding-bottom: 9px;
 }
 
+.name{
+  margin-left: 5px;
+  cursor: pointer;
+}
+
 .tag-wrap{
   display: flex;
   align-items: center;
@@ -227,6 +225,7 @@ function highlightText(text, query) {
     font-weight: Regular;
     text-align: left;
     color: #666666;
+    cursor: pointer;
   }
 }
 

src/layout/components/Header/SearchModal.vue

@@ -15,7 +15,7 @@ defineExpose({
 <template>
   <div>
     <n-modal v-model:show="show" :mask="false" transform-origin="center">
-      <Search />
+      <Search @close="show = false" />
     </n-modal>
   </div>
 </template>