From a5651e394f5d006a52fc882ace0da6a556fe113c Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Mon, 18 Mar 2024 13:32:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/search/search.ts            |  14 +++
 src/assets/icons/delete-history.svg |  22 ++++
 src/components/Search/Search.vue    | 171 +++++++++++++++++++++-------
 3 files changed, 168 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/icons/delete-history.svg

diff --git a/src/api/search/search.ts b/src/api/search/search.ts
index 20230cb..9df567d 100644
--- a/src/api/search/search.ts
+++ b/src/api/search/search.ts
@@ -27,3 +27,17 @@ export async function historySearch(params) {
 
   return res
 }
+
+/**
+ * 清除历史记录
+ * @returns
+ */
+export async function deleteSearch(params) {
+  const res = await http.request({
+    url: `/ocr/history/searchdelete`,
+    method: 'delete',
+    params,
+  })
+
+  return res
+}
diff --git a/src/assets/icons/delete-history.svg b/src/assets/icons/delete-history.svg
new file mode 100644
index 0000000..4260184
--- /dev/null
+++ b/src/assets/icons/delete-history.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>删除</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="16" height="16"></rect>
+    </defs>
+    <g id="搜索/首次登录弹框" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="index_1.1搜索_历史数据" transform="translate(-1100.000000, -285.000000)">
+            <g id="搜索" transform="translate(320.000000, 248.000000)">
+                <g id="编组-30" transform="translate(0.000000, 8.000000)">
+                    <g id="删除" transform="translate(780.000000, 29.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="蒙版" fill="#000000" fill-rule="nonzero" opacity="0" xlink:href="#path-1"></use>
+                        <path d="M13.2307998,4 C13.368871,4 13.4807998,4.11192881 13.4807998,4.25 L13.4807998,5 C13.4807998,5.13807119 13.368871,5.25 13.2307998,5.25 L12.465,5.25 L11.7226709,13.7410082 C11.7104109,13.8811403 11.6414657,14.0026939 11.5404047,14.0850526 C11.4495602,14.1797756 11.3212552,14.2391055 11.179093,14.2391055 L4.81909304,14.2391055 C4.70337624,14.2391055 4.59684068,14.1997959 4.51211159,14.1338019 C4.39143287,14.0515597 4.30699447,13.9181993 4.29329846,13.7616532 L3.548,5.25 L2.75,5.25 C2.61192881,5.25 2.5,5.13807119 2.5,5 L2.5,4.25 C2.5,4.11192881 2.61192881,4 2.75,4 L13.2307998,4 Z M10.533,12.989 L11.21,5.25 L4.803,5.25 L5.48,12.989 L10.533,12.989 Z M9.75,1.75 C9.88807119,1.75 10,1.86192881 10,2 L10,2.75 C10,2.88807119 9.88807119,3 9.75,3 L6.25,3 C6.11192881,3 6,2.88807119 6,2.75 L6,2 C6,1.86192881 6.11192881,1.75 6.25,1.75 L9.75,1.75 Z" id="形状结合" fill="#666666" mask="url(#mask-2)"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index de59eac..da3b834 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -1,56 +1,97 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { getSearchList, historySearch } from '@/api/search/search'
+import { reactive, ref, toRefs } from 'vue'
+import { debounce, difference } from 'lodash-es'
+
+import { deleteSearch, getSearchList, historySearch } from '@/api/search/search'
 
 const value = ref('')
 const showList = ref(false)
+const historyList: any = ref([])
 const handlerShowList = () => (showList.value = true)
-const mock_list = [
-  {
-    title: '任务审批管理',
-    data: [
-      {
-        title: '某某企业名称占位-1月拜访计划计划',
-      },
-      {
-        title: '某某企业名称占位符占位占位-12月拜访计划计划',
-      },
-      {
-        title: '某某企业-某某事业部-第四季度拜访计划计划',
-      },
-    ],
-  },
-  {
-    title: '任务终审管理',
-    data: [
-      {
-        title: '某某企业名称占位-1月拜访计划计划',
-      },
-      {
-        title: '某某企业名称占位符占位占位-12月拜访计划计划',
-      },
-      {
-        title: '某某企业名称占位符占位占位-12月拜访计划计划',
-      },
-    ],
-  },
-]
+// const resultList = [
+//   {
+//     title: '任务审批管理',
+//     data: [
+//       {
+//         title: '某某企业名称占位-1月拜访计划计划',
+//       },
+//       {
+//         title: '某某企业名称占位符占位占位-12月拜访计划计划',
+//       },
+//       {
+//         title: '某某企业-某某事业部-第四季度拜访计划计划',
+//       },
+//     ],
+//   },
+//   {
+//     title: '任务终审管理',
+//     data: [
+//       {
+//         title: '某某企业名称占位-1月拜访计划计划',
+//       },
+//       {
+//         title: '某某企业名称占位符占位占位-12月拜访计划计划',
+//       },
+//       {
+//         title: '某某企业名称占位符占位占位-12月拜访计划计划',
+//       },
+//     ],
+//   },
+// ]
+const state = reactive({
+  resultList: [],
+}) as any
+
+const { resultList } = toRefs(state)
 
+const inputHandler = debounce((keyword) => {
+  if (keyword)
+    handlerSearch(keyword)
+}, 500)
+
+// 搜索
 async function handlerSearch(value) {
   const res = await getSearchList({
     search: value,
   })
+  if (res.code === 'OK') {
+    resultList.value = [{
+      title: 'AI工单管理',
+      data: res.data,
+    }]
+  }
+}
+
+// 删除历史记录
+async function deleteHistory() {
+  const res = await deleteSearch({
+  })
   if (res.code === 'OK')
-    console.log(res)
+    historyList.value = []
 }
 
+// 获取历史搜索结果
 async function getHistory() {
   const res = await historySearch({
   })
   if (res.code === 'OK')
-    console.log(res)
+    historyList.value = res.data
 }
 getHistory()
+
+function goTask() {}
+
+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>`
+  })
+
+  return highlightedText
+}
 </script>
 
 <template>
@@ -63,7 +104,7 @@ getHistory()
         v-model:value="value"
         placeholder="搜索任务ID、任务名称、提报人、拜访终端"
         type="text"
-        @input="handlerSearch"
+        @input="inputHandler"
         @mousedown="handlerShowList"
       >
         <template #prefix>
@@ -73,17 +114,35 @@ getHistory()
     </div>
     <div v-show="showList" class="list_box">
       <div
-        v-for="(item, index) in mock_list"
+        v-if="historyList.length"
+        class="list_classfiy_item"
+        style="border-bottom:1px solid #e4e4e4"
+      >
+        <div class="list_title">
+          历史搜索
+        </div>
+        <div class="history-list flex">
+          <div class="tag-wrap">
+            <div v-for="(item, index) of historyList" :key="index" class="tag">
+              {{ item.historyname }}
+            </div>
+          </div>
+          <SvgIcon class="icon-delete" name="delete-history" size="16" @click="deleteHistory" />
+        </div>
+      </div>
+      <div
+        v-for="(item, index) in resultList"
         :key="index"
         class="list_classfiy_item"
-        :style="(index == mock_list.length - 1) ? '' : 'border-bottom:1px solid #e4e4e4'"
+        :style="(index === resultList.length - 1) ? '' : 'border-bottom:1px solid #e4e4e4'"
       >
         <div class="list_title">
           {{ item.title }}
         </div>
-        <div v-for="(sitem, sindex) in item.data" :key="sindex" class="list_item">
+        <div v-for="(sitem, sindex) in item.data" :key="sindex" class="list_item" @click="goTask(sitem.id)">
           <SvgIcon name="task-icon" size="16" />
-          <a style="margin-left: 5px">{{ sitem.title }}</a>
+          <!-- <a style="margin-left: 5px">{{ sitem.name }}</a> -->
+          <span style="margin-left: 5px" v-html="highlightText(sitem.name, value)" />
         </div>
       </div>
     </div>
@@ -144,4 +203,38 @@ getHistory()
 :deep(.n-input .n-input-wrapper) {
   margin: 8px;
 }
+
+.history-list{
+  align-items: center;
+  padding-bottom: 9px;
+}
+
+.tag-wrap{
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  .tag{
+    padding: 0 12px;
+    height: 22px;
+    border: 1px solid #e4e7ed;
+    border-radius: 12px;
+    margin-right: 12px;
+    font-size: 13px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: Regular;
+    text-align: left;
+    color: #666666;
+  }
+}
+
+.icon-delete{
+  cursor: pointer;
+}
+
+.highlight{
+  color: #507AFD;
+}
 </style>