搜索功能

app/src/App.vue

@@ -256,21 +256,23 @@
     </el-dialog>
     <!-- 保存 -->
     <el-dialog v-model="saveJson" title="保存文件" :width="800">
-      <el-switch v-model="filetype" size="small" active-text="文件" inactive-text="模板" />
+      <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="saveFileName" style="width: 150px; margin-right: 10px" placeholder="请输入文件名"
         clearable></el-input>
       <el-button type="primary" @click="save">保存文件</el-button>
     </el-dialog>
     <!-- 文件列表 -->
     <el-dialog v-model="filelist" title="文件列表" :width="800">
-      <el-switch v-model="filetype" size="small" active-text="文件" inactive-text="模板" @click="templateItems" />
-      <el-input v-model="search" style="width: 150px; margin-right: 10px" placeholder="请输入文件名"
-        clearable></el-input>
+      <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>
       <div class="demo-image">
         <div v-for="name in names" :key="name.id" class="block">
           <span class="demonstration">{{ name[1].id }}</span>
           <el-image style="width: 100px; height: 100px" :src="name[1].url" @click="importFromJsonServer(name[1].id)" />
-          <el-button type="danger"  @click="DeleteeFromJsonServer(name[1].id)" plain>删除</el-button>
+          <el-button type="danger" @click="DeleteeFromJsonServer(name[1].id)" plain>删除</el-button>
         </div>
       </div>
     </el-dialog>
@@ -547,13 +549,33 @@ const importFromJsonServer = async (itemId) => {
     const jsonObject = JSON.parse(jsonData.data)
     console.log(jsonObject.data)
     app.setData(jsonObject.data)
-    filelist.value=false
+    filelist.value = false
     ElNotification.success('导入成功')
   } catch (error) {
     ElNotification.success('导入失败')
     console.log(error)
   }
 }
+//搜索功能
+const search = ref('')
+const searchTemplate = async () => {
+  try {
+    const url = new URL('http://127.0.0.1:8080/api/search');
+    url.searchParams.append('name', search.value);
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    if (response.ok) {
+      console.log(response)
+      ElNotification.success('获取成功')
+    }
+  } catch(error) {
+    ElNotification.warning('系统出错')
+  }
+}
+
 //删除
 const DeleteeFromJsonServer = async (itemId) => {
   ElMessageBox.confirm('确定删除吗？', '提示', {
@@ -562,20 +584,20 @@ const DeleteeFromJsonServer = async (itemId) => {
     type: 'warning',
   }).then(async () => {
     try {
-    const url = new URL('http://localhost:8080/api/template');
-    url.searchParams.append('name', itemId);
-    const response = await fetch(url, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    })
-    if (!response.ok) throw new Error('Failed to fetch JSON data')
-    templateItems()
-    ElNotification.success('删除成功')
-  } catch (error) {
-    ElNotification.warning('删除失败',error)
-  }
+      const url = new URL('http://localhost:8080/api/template');
+      url.searchParams.append('name', itemId);
+      const response = await fetch(url, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      if (!response.ok) throw new Error('Failed to fetch JSON data')
+      templateItems()
+      ElNotification.success('删除成功')
+    } catch (error) {
+      ElNotification.warning('删除失败', error)
+    }
   })
 }
 // 导出
@@ -586,7 +608,7 @@ const handleExportCommand = type => {
     //   paddingX: exportImagePaddingX.value,
     //   paddingY: exportImagePaddingY.value,
     //   onlySelected: exportOnlySelected.value
-      exportImageUrl.value = app.exportImage({
+    exportImageUrl.value = app.exportImage({
       renderBg: true,
       paddingX: exportImagePaddingX.value,
       paddingY: exportImagePaddingY.value,
@@ -597,7 +619,7 @@ const handleExportCommand = type => {
     navigator.clipboard.writeText(exportImageUrl.value).catch(error => {
       ElNotification.warning('导出链接失败');
     });
-    saveJson.value=true
+    saveJson.value = true
     ElNotification.success('图片链接已复制到剪贴板')
   } else if (type === 'json') {
     exportJsonData.value = app.exportJson()
@@ -630,12 +652,12 @@ const save = async () => {
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
     ElNotification.success('保存成功')
-    saveJson.value=false
+    saveJson.value = false
   } catch (error) {
     console.log(error)
   }
 }
-//导入
+//导入模板文件到画板
 const handleButtonClick = async () => {
   await templateItems();
   filelist.value = !filelist.value; // 设置为true以显示弹窗
@@ -645,9 +667,8 @@ const templateItems = async () => {
   const requestBody = {
     type: filetype.value,
   };
-
   const defaultUrl = 'https://erp.baozhida.cn/assets/icon-91f5d92f.png'; // 替换为实际的默认URL
-
+  names.clear() //清空map 重新渲染
   try {
     const response = await fetch('http://localhost:8080/api/template', {
       method: 'POST',