From a74553c14b2cd4aa1b63b02fd08b9c654abc9753 Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Wed, 6 Dec 2023 14:14:34 +0800
Subject: [PATCH] Add advanced search functionality

---
 atune/web/src/api/atune.ts             |  9 ++++++
 atune/web/src/components/atuneList.vue | 45 ++++++++++++++++++++------
 atune/web/src/views/Home.vue           | 19 ++++++++---
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/atune/web/src/api/atune.ts b/atune/web/src/api/atune.ts
index 286fc9ee..ba885ed0 100644
--- a/atune/web/src/api/atune.ts
+++ b/atune/web/src/api/atune.ts
@@ -43,3 +43,12 @@ export function deleteTune(data: object) {
     data,
   });
 }
+
+// 高级搜索模板列表分页
+export function searchTune(data: object) {
+  return request({
+    url: '/plugin/atune/search',
+    method: 'get',
+    params: data,
+  });
+}
diff --git a/atune/web/src/components/atuneList.vue b/atune/web/src/components/atuneList.vue
index 8bf249ec..109c6590 100644
--- a/atune/web/src/components/atuneList.vue
+++ b/atune/web/src/components/atuneList.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script lang='ts' setup>
-import { onMounted, ref, defineEmits, watch } from 'vue';
-import { getTuneLists } from '@/api/atune'
+import { onMounted, ref, watch } from 'vue';
+import { getTuneLists, searchTune } from '@/api/atune'
 
 const tableData = ref([] as Atune[]);
 const currentPage = ref(1);
@@ -38,11 +38,19 @@ let props = defineProps({
   refreshData: {
     type: Boolean,
     default: false
-  }
+  },
+  searchTuneName: {
+    type: String,
+    default: ""
+  },
+  searchTune: {
+    type: Boolean,
+    default: false
+  },
 })
 
 // 获取tune模板列表
-const fetchData = async () => {
+const getTuneListsData = async () => {
   try {
     const response = await getTuneLists({
       page: currentPage.value,
@@ -56,16 +64,31 @@ const fetchData = async () => {
   }
 };
 
+// 高级搜索tune模板列表
+const searchTuneListsData = () => {
+  searchTune({
+    page: currentPage.value,
+    size: pageSize.value,
+    name: props.searchTuneName
+  }).then(res => {
+    tableData.value = res.data.data;
+    totalItems.value = res.data.total;
+  }).catch(error => {
+    console.error('Error search data:', error);
+  })
+
+};
+
 // 页码大小
 const handleSizeChange = (newSize: number) => {
   pageSize.value = newSize;
-  fetchData();
+  getTuneListsData();
 };
 
 // 页数
 const handleCurrentChange = (newPage: number) => {
   currentPage.value = newPage;
-  fetchData();
+  getTuneListsData();
 };
 
 // 选中多选框
@@ -74,11 +97,15 @@ const handleSelectionChange = (rows: Atune[]) => {
 };
 
 onMounted(() => {
-  fetchData();
+  getTuneListsData();
 });
 
-watch(() => props.refreshData, () => {
-  fetchData();
+watch(() => [props.refreshData, props.searchTune], ([refreshData, searchTune]): void => {
+  if (searchTune !== undefined) {
+    searchTuneListsData();
+  } else if (refreshData !== undefined) {
+    getTuneListsData();
+  }
 });
 
 </script>
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index f6da6abd..506438d4 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -12,13 +12,15 @@
         <div class="title-content">
           <p>调优模板</p>
         </div>
-        <el-input placeholder="请输入调优名称进行搜索..." :prefix-icon="Search" clearable
-          style="width: 280px;margin-right: 10px;"></el-input>
-        <el-button :icon="Search">搜索</el-button>
+        <el-input v-model="searchTuneName" placeholder="请输入调优名称进行搜索..." :prefix-icon="Search" clearable
+          style="width: 280px;margin-right: 10px;" @keydown.enter.native="handleSearch"></el-input>
+        <el-button :icon="Search" @click="handleSearch">搜索</el-button>
         <el-button class="delete-button" @click="handleDelete">删除</el-button>
       </div>
       <div class="table">
-        <atuneList @selectionChange="handleSelectionChange" :refreshData="refreshData"></atuneList>
+        <atuneList @selectionChange="handleSelectionChange" :refreshData="refreshData" :searchTuneName="searchTuneName"
+          :searchTune="searchTune">
+        </atuneList>
       </div>
     </div>
   </div>
@@ -38,6 +40,8 @@ import atuneTemplete from '@/components/atuneTemplete.vue'
 
 const atuneTree = ref([]);
 const selectedNodeData = ref("");
+const searchTuneName = ref("")
+const searchTune = ref(false)
 const showDialog = ref(false);
 const selectedRows = ref([] as Atune[])
 const refreshData = ref(false);
@@ -61,9 +65,16 @@ const handleSelectionChange = (selected_Rows: any) => {
   selectedRows.value = selected_Rows;
 }
 
+// 刷新
 const handleDataUpdated = () => {
   refreshData.value = !refreshData.value;
 };
+
+// 搜索
+const handleSearch = () => {
+  searchTune.value = !searchTune.value;
+};
+
 // 删除
 const handleDelete = () => {
   ElMessageBox.confirm('确定要删除吗？', '提示', {
-- 
Gitee