From ca4984e5b248f832b1195ef7a19102600ebbcdb4 Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Tue, 17 Jan 2023 17:46:56 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E5=AE=8C=E5=96=84Search=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/comm.ts                       |  22 +++++
 src/api/system/basis.ts               |   2 +-
 src/components/Search/History.vue     | 125 ++++++++++++++++++++++++++
 src/components/Search/SaveHistory.vue | 100 +++++++++++++++++++++
 src/components/Search/Search.vue      |  76 ++++++++--------
 src/components/Search/types.d.ts      |   8 +-
 src/views/demo/Search.vue             |   2 +-
 7 files changed, 295 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Search/History.vue
 create mode 100644 src/components/Search/SaveHistory.vue

diff --git a/src/api/comm.ts b/src/api/comm.ts
index 8e987884..71d6aa82 100644
--- a/src/api/comm.ts
+++ b/src/api/comm.ts
@@ -1,3 +1,25 @@
 import { BASE_API_PATH } from "@/utils/variable";
+import server from '@/utils/request'
+import { SearchHistoryList } from 'components/Search/types'
 
 export const FILE_UPLOAD = `${BASE_API_PATH}/file/static`;
+
+/**
+ * 保存查询记录
+ * @param data
+ * @param target
+ */
+export const saveSearchHistory = (data: any, target:string) => server.post(`/user/settings/${target}`, data)
+
+/**
+ * 获取查询记录
+ * @param target
+ */
+export const getSearchHistory = (target:string) => server.get<SearchHistoryList[]>(`/user/settings/${target}`)
+
+/**
+ * 删除指定查询记录
+ * @param id
+ * @param target
+ */
+export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`)
diff --git a/src/api/system/basis.ts b/src/api/system/basis.ts
index c8734c43..711a0bcd 100644
--- a/src/api/system/basis.ts
+++ b/src/api/system/basis.ts
@@ -3,4 +3,4 @@ import server from '@/utils/request';
 // 保存
 export const save_api = (data: any) => server.post(`/system/config/scope/_save`, data)
 // 获取详情
-export const getDetails_api = (data: any) => server.post(`/system/config/scopes`, data)
\ No newline at end of file
+export const getDetails_api = (data: any) => server.post(`/system/config/scopes`, data)
diff --git a/src/components/Search/History.vue b/src/components/Search/History.vue
new file mode 100644
index 00000000..27c58809
--- /dev/null
+++ b/src/components/Search/History.vue
@@ -0,0 +1,125 @@
+<template>
+  <a-dropdown-button
+    type='primary'
+    @click='click'
+    placement='bottomLeft'
+    :visible='historyVisible'
+    @visibleChange='visibleChange'
+  >
+    搜索
+    <template #overlay>
+      <a-menu>
+        <template v-if='!showEmpty'>
+          <a-menu-item v-for='item in historyList' :key='item.id'>
+            <div class='history-item'>
+              <span @click.stop='itemClick(item.content)'>{{ item.name }}</span>
+              <a-popconfirm
+                title='确认删除吗？'
+                placement='top'
+                @confirm.stop='deleteHistory(item.id)'
+                :okButtonProps='{
+                  loading: deleteLoading
+                }'
+              >
+                <span class='delete'>
+                  <DeleteOutlined />
+                </span>
+              </a-popconfirm>
+            </div>
+          </a-menu-item>
+        </template>
+        <template v-else>
+          <div class='history-empty'>
+            <a-empty />
+          </div>
+        </template>
+      </a-menu>
+    </template>
+    <template #icon>
+      <SearchOutlined />
+    </template>
+  </a-dropdown-button>
+</template>
+
+<script setup lang='ts' name='SearchHistory'>
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { deleteSearchHistory, getSearchHistory } from '@/api/comm'
+import type { SearchHistoryList } from 'components/Search/types'
+
+type Emit = {
+  (event: 'click'): void
+  (event: 'itemClick', data: string): void
+}
+const emit = defineEmits<Emit>()
+
+const props = defineProps({
+  target: {
+    type: String,
+    default: '',
+    required: true
+  }
+})
+
+const historyList = ref<SearchHistoryList[]>([])
+const historyVisible = ref(false)
+const deleteLoading = ref(false)
+const showEmpty = ref(false)
+
+const visibleChange = async (visible: boolean) => {
+  historyVisible.value = visible
+  if (visible) {
+    const resp = await getSearchHistory(props.target)
+    if (resp.success && resp.result.length) {
+      historyList.value = resp.result.filter(item => item.content)
+      showEmpty.value = false
+    } else {
+      showEmpty.value = true
+    }
+  }
+}
+
+const click = () => {
+  emit('click')
+}
+
+const itemClick = (content: string) => {
+  historyVisible.value = false
+  emit('itemClick', content)
+}
+
+const deleteHistory = async (id: string) => {
+  deleteLoading.value = true
+  const resp = await deleteSearchHistory(props.target, id)
+  deleteLoading.value = false
+  if (resp.success) {
+    historyVisible.value = false
+  }
+}
+
+</script>
+
+<style scoped lang='less'>
+.history-empty {
+  width: 200px;
+  background-color: #fff;
+  box-shadow: @box-shadow-base;
+  border-radius: 2px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+}
+
+.history-item {
+  width: 200px;
+  display: flex;
+
+  > span {
+    flex: 1 1 auto;
+  }
+
+  .delete {
+    padding: 0 6px;
+    flex: 0 0 28px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Search/SaveHistory.vue b/src/components/Search/SaveHistory.vue
new file mode 100644
index 00000000..49c2d091
--- /dev/null
+++ b/src/components/Search/SaveHistory.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-popover
+    title='搜索名称'
+    trigger='click'
+    v-model:visible='visible'
+    @visibleChange='visibleChange'
+  >
+    <template #content>
+      <div style='width: 240px'>
+        <a-form ref='formRef' :model='modelRef'>
+          <a-form-item
+            name='name'
+            :rules='[
+              { required: true, message: "请输入名称"}
+            ]'
+          >
+            <a-textarea
+              v-model:value='modelRef.name'
+              :rows='3'
+              :maxlength='200'
+            />
+          </a-form-item>
+        </a-form>
+        <a-button
+          :loading='saveHistoryLoading'
+          type='primary'
+          class='save-btn'
+          @click='saveHistory'
+        >
+          保存
+        </a-button>
+      </div>
+    </template>
+    <a-button>
+      <template #icon>
+        <SaveOutlined />
+      </template>
+      保存
+    </a-button>
+  </a-popover>
+</template>
+
+<script setup lang='ts' name='SaveHistory'>
+import type { Terms } from './types'
+import { PropType } from 'vue'
+import { saveSearchHistory } from '@/api/comm'
+import { SaveOutlined } from '@ant-design/icons-vue';
+
+const props = defineProps({
+  terms: {
+    type: Object as PropType<Terms>,
+    default: () => ({})
+  },
+  target: {
+    type: String,
+    default: '',
+    required: true
+  }
+})
+
+const searchName = ref('')
+
+const saveHistoryLoading = ref(false)
+
+const visible = ref(false)
+
+const formRef = ref()
+
+const modelRef = reactive({
+  name: undefined
+})
+
+/**
+ * 保存当前查询条件
+ */
+const saveHistory = async () => {
+  // 获取当前查询条件并转化为字符串
+  const formData = await formRef.value.validate()
+  if (formData) {
+    formData.content = JSON.stringify(props.terms)
+    saveHistoryLoading.value = true
+    const resp = await saveSearchHistory(formData, props.target)
+    saveHistoryLoading.value = false
+    if (resp.success) {
+      visible.value = false
+    }
+  }
+}
+
+const visibleChange = (e: boolean) => {
+  visible.value = e
+}
+
+</script>
+
+<style scoped lang='less'>
+.save-btn {
+  width: 100%
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index e51edc81..1047e53b 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -23,24 +23,10 @@
       </div>
       <div :class='["JSearch-footer", expand ? "expand" : ""]'>
         <div class='JSearch-footer--btns'>
-          <a-dropdown-button type="primary" @click='searchSubmit'>
-            搜索
-            <template #overlay>
-              <a-menu v-if='!!historyList.length'>
-                <a-menu-item>
-
-                </a-menu-item>
-              </a-menu>
-              <a-empty v-else />
-            </template>
-            <template #icon><SearchOutlined /></template>
-          </a-dropdown-button>
-          <a-button>
-            <template #icon><PoweroffOutlined /></template>
-            保存
-          </a-button>
+          <History :target='target' @click='searchSubmit' @itemClick='historyItemClick' />
+          <SaveHistory :terms='terms' :target='target'/>
           <a-button @click='reset'>
-            <template #icon><PoweroffOutlined /></template>
+            <template #icon><RedoOutlined /></template>
             重置
           </a-button>
         </div>
@@ -64,7 +50,7 @@
             搜索
           </a-button>
           <a-button @click='reset'>
-            <template #icon><PoweroffOutlined /></template>
+            <template #icon><RedoOutlined /></template>
             重置
           </a-button>
         </div>
@@ -77,10 +63,12 @@
 import SearchItem from './Item.vue'
 import { typeOptions } from './util'
 import { useElementSize, useUrlSearchParams } from '@vueuse/core'
-import { cloneDeep, isFunction, set } from 'lodash-es'
-import { SearchOutlined, DownOutlined } from '@ant-design/icons-vue';
+import { cloneDeep, isFunction, isString, set } from 'lodash-es'
+import { SearchOutlined, DownOutlined, RedoOutlined } from '@ant-design/icons-vue';
 import { PropType } from 'vue'
 import { JColumnsProps } from 'components/Table/types'
+import SaveHistory from './SaveHistory.vue'
+import History from './History.vue'
 import type { SearchItemData, SearchProps, Terms } from './types'
 
 type UrlParam = {
@@ -177,16 +165,18 @@ const addUrlParams = () => {
  * @param v
  */
 const handleLikeValue = (v: string) => {
-  let _v = v
-  return _v.split('').reduce((pre: string, next: string) => {
-    let _next = next
-    if (next === '\\') {
-      _next = '\\\\'
-    } else if (next === '%') {
-      _next = '\\%'
-    }
-    return pre + _next
-  }, '')
+  if (isString(v)) {
+    return v.split('').reduce((pre: string, next: string) => {
+      let _next = next
+      if (next === '\\') {
+        _next = '\\\\'
+      } else if (next === '%') {
+        _next = '\\%'
+      }
+      return pre + _next
+    }, '')
+  }
+  return v
 }
 
 /**
@@ -207,7 +197,7 @@ const handleParamsFormat = () => {
           }
 
           if (_item.handleValue && isFunction(_item.handleValue)) {
-            iItem.value = _item.handleValue(iItem.value, iItem)
+            iItem.value = _item.handleValue(iItem.value)
           }
 
           if (['like','nlike'].includes(iItem.termType) && !!iItem.value) {
@@ -226,7 +216,9 @@ const handleParamsFormat = () => {
  */
 const searchSubmit = () => {
   emit('search', handleParamsFormat())
-  addUrlParams()
+  if (props.type === 'advanced') {
+    addUrlParams()
+  }
 }
 
 /**
@@ -235,8 +227,10 @@ const searchSubmit = () => {
 const reset = () => {
   terms.terms = []
   expand.value = false
-  urlParams.q = null
-  urlParams.target = null
+  if (props.type === 'advanced') {
+    urlParams.q = null
+    urlParams.target = null
+  }
 }
 
 watch(width, (value) => {
@@ -249,6 +243,18 @@ watch(width, (value) => {
   }
 })
 
+const historyItemClick = (content: string) => {
+  try {
+    terms.terms = JSON.parse(content)?.terms || []
+    if (terms.terms.length === 2) {
+      expand.value = true
+    }
+    addUrlParams()
+  } catch (e) {
+    console.warn(`Search组件中handleUrlParams处理JSON时异常：【${e}】`)
+  }
+}
+
 /**
  * 处理URL中的查询参数
  * @param _params
@@ -258,7 +264,6 @@ const handleUrlParams = (_params: UrlParam) => {
   if (_params.target === props.target && _params.q) {
     try {
       terms.terms = JSON.parse(_params.q)?.terms || []
-      console.log(terms)
       if (terms.terms.length === 2) {
         expand.value = true
       }
@@ -372,4 +377,5 @@ handleItems()
     }
   }
 }
+
 </style>
\ No newline at end of file
diff --git a/src/components/Search/types.d.ts b/src/components/Search/types.d.ts
index 941255c7..7c8c67b6 100644
--- a/src/components/Search/types.d.ts
+++ b/src/components/Search/types.d.ts
@@ -37,9 +37,11 @@ export interface SortItem {
   value?: any
 }
 
-export interface Params {
-  sorts: SortItem[]
-  terms: Terms['terms']
+export interface SearchHistoryList {
+  content?: string
+  name: string
+  id: string
+  key: string
 }
 
 export interface SearchProps extends SearchBaseProps, SearchItemProps {
diff --git a/src/views/demo/Search.vue b/src/views/demo/Search.vue
index b26acc16..b62d20ae 100644
--- a/src/views/demo/Search.vue
+++ b/src/views/demo/Search.vue
@@ -2,7 +2,7 @@
   <div class='search'>
     <Search
       :columns='columns'
-      target='device'
+      target='device-instance-search'
       @search='search'
     />
     <Search