|
|
|
|
@ -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>
|
|
|
|
|
|
Dragon
1 year ago
