搜索

app/src/App.vue

@@ -267,7 +267,7 @@
       <el-switch v-model="filetype" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #00ffff"
         active-text="文件" inactive-text="模板" @click="templateItems" />
       <el-input v-model="search" style="width: 150px; margin-right: 10px" placeholder="请输入文件名" clearable></el-input>
-      <el-button type="primary" @click="searchTemplate" plain>搜索</el-button>
+      <el-button type="primary" :icon="Search" @click="searchTemplate" plain>搜索</el-button>
       <div class="demo-image">
         <div v-for="name in names" :key="name.id" class="block">
           <span class="demonstration">{{ name[1].id }}</span>
@@ -316,6 +316,7 @@ import {
   Check,
   Edit,
   List,
+  Search,
   QuestionFilled
 } from '@element-plus/icons-vue'
 import Contextmenu from './components/Contextmenu.vue'
@@ -323,7 +324,7 @@ import { fontFamilyList, fontSizeList } from './constants'
 import { ElMessage } from 'element-plus'
 // 当前操作类型
 const currentType = ref('selection')
-const saveFileName = ref('')
+let saveFileName = ref('')
 // dom节点
 const box = ref(null)
 
@@ -516,7 +517,12 @@ const redo = () => {
 const empty = () => {
   app.empty()
 }
-
+//导入模板文件到画板
+const handleButtonClick = async () => {
+  await templateItems();
+  filelist.value = !filelist.value; // 设置为true以显示弹窗
+};
+let names = reactive(new Map())
 // 从本地导入模板
 const importFromJson = () => {
   let el = document.createElement('input')
@@ -557,25 +563,37 @@ const importFromJsonServer = async (itemId) => {
   }
 }
 //搜索功能
-const search = ref('')
+let search = ref('')
 const searchTemplate = async () => {
   try {
-    const url = new URL('http://127.0.0.1:8080/api/search');
+    const url = new URL('http://localhost:8080/api/search');
     url.searchParams.append('name', search.value);
     const response = await fetch(url, {
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       }
     })
     if (response.ok) {
-      console.log(response)
-      ElNotification.success('获取成功')
+      const jsonData = await response.json()
+      if (jsonData.code === 200) {
+        names.clear()
+        for (const [key, value] of Object.entries(jsonData.data)) {
+          const json = JSON.parse(value).data.elements;
+
+          const url = json.length === 2 && json[0].url ? json[0].url : defaultUrl;
+
+          names.set(key, { id: key, url });
+        }
+        ElNotification.success('搜索成功')
+        search.value=null
+      }else{
+        ElNotification.warning('文件不存在')
+      }
     }
-  } catch(error) {
+  } catch (error) {
     ElNotification.warning('系统出错')
   }
 }
-
 //删除
 const DeleteeFromJsonServer = async (itemId) => {
   ElMessageBox.confirm('确定删除吗？', '提示', {
@@ -652,17 +670,14 @@ const save = async () => {
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
     ElNotification.success('保存成功')
+    //重置状态
+    saveFileName.value = null
     saveJson.value = false
   } catch (error) {
     console.log(error)
   }
 }
-//导入模板文件到画板
-const handleButtonClick = async () => {
-  await templateItems();
-  filelist.value = !filelist.value; // 设置为true以显示弹窗
-};
-let names = reactive(new Map())
+
 const templateItems = async () => {
   const requestBody = {
     type: filetype.value,