文件修改

app/src/App.vue

@@ -191,14 +191,18 @@
         <el-tooltip effect="light" content="从json文件导入" placement="top">
           <el-button v-if="!readonly" :icon="Upload" circle style="margin-right: 10px" @click="importFromJson" />
         </el-tooltip>
-        <el-tooltip effect="light" content="保存" placement="top">
+        <el-tooltip effect="light" content="保存模板" placement="top">
           <el-button v-if="!readonly" :icon="Check" circle style="margin-right: 10px" @click="saveJson = !saveJson">
           </el-button>
         </el-tooltip>
-        <el-tooltip effect="light" content="文件列表" placement="top">
+        <el-tooltip effect="light" content="模板列表" placement="top">
           <el-button v-if="!readonly" :icon="List" circle style="margin-right: 10px" @click="handleButtonClick">
           </el-button>
         </el-tooltip>
+        <el-tooltip effect="light" content="导出文件" placement="top">
+          <el-button v-if="!readonly" circle style="margin-right: 10px" @click="savetemplate(1)">导出
+          </el-button>
+        </el-tooltip>
         <el-dropdown @command="handleExportCommand">
           <span class="el-dropdown-link">
             <el-button :icon="Download" circle />
@@ -255,18 +259,18 @@
       </div>
     </el-dialog>
     <!-- 保存 -->
-    <el-dialog v-model="saveJson" title="保存文件" :width="800">
-      <el-switch v-model="filetype" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #00ffff"
-        active-text="文件" inactive-text="模板"/>
-      <el-input v-model="saveFileName" style="width: 150px; margin-right: 10px" placeholder="请输入文件名"
+    <el-dialog v-model="saveJson" title="保存模板" :width="800">
+      <!-- <el-switch v-model="filetype" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #00ffff"
+        active-text="文件" inactive-text="模板"/> -->
+      <el-input v-if="!readonly" v-model="saveFileName" style="width: 150px; margin-right: 10px" placeholder="请输入模板名"
         clearable></el-input>
-      <el-button type="primary" @click="save">保存文件</el-button>
+      <el-button type="primary" @click="savetemplate(0)">保存模板</el-button>
     </el-dialog>
     <!-- 文件列表 -->
-    <el-dialog v-model="filelist" title="文件列表" :width="800">
-      <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-dialog v-model="filelist" title="模板列表" :width="800">
+      <!-- <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" :icon="Search" @click="searchTemplate" plain>搜索</el-button>
       <div class="demo-image">
         <div v-for="name in names" :key="name" class="block">
@@ -311,6 +315,7 @@ import {
   CaretTop,
   CaretBottom,
   Minus,
+  Finished,
   Grid,
   View,
   Check,
@@ -351,7 +356,7 @@ const globalAlpha = ref(1)
 // 角度
 const rotate = ref(0)
 //文件类型
-const filetype = ref(true)
+// const filetype = ref(true)
 // 当前缩放
 const currentZoom = ref(100)
 // 缩放允许前进后退
@@ -551,14 +556,20 @@ const importFromJsonServer = async (itemId) => {
       }
     })
     if (response.ok) {
-      const jsonData = await response.json()
+      // const jsonData = await response.json()
       // const jsonObject = JSON.parse(jsonData.data)
-      app.setData(jsonData.data.data)
-      filelist.value = false
-      ElNotification.success('导入成功')
+      const data = await response.json()
+      if (data.code !== 200) {
+        ElNotification.error(data.message)
+      } else {
+        app.setData(data.data.data)
+        filelist.value = false
+        ElNotification.success('导入成功')
+      }
+
     }
   } catch (error) {
-    ElNotification.success('导入失败')
+    ElNotification.warning('导入失败')
     console.log(error)
   }
 }
@@ -607,14 +618,19 @@ const DeleteeFromJsonServer = async (itemId) => {
         }
       })
       if (!response.ok) throw new Error('Failed to fetch JSON data')
-      templateItems()
-      ElNotification.success('删除成功')
+      const data = await response.json()
+      if (data.code !== 200) {
+        ElNotification.error(data.message)
+      } else {
+        templateItems()
+        ElNotification.success('删除成功')
+      }
     } catch (error) {
       ElNotification.warning('删除失败', error)
     }
   })
 }
-// 导出
+// 导出为本地图片或者链接
 const handleExportCommand = type => {
   if (type === 'png') {
     // exportImageUrl.value = app.exportImage({
@@ -630,10 +646,10 @@ const handleExportCommand = type => {
     })
     // exportImageDialogVisible.value = true
     // 将生成的图片链接复制到剪贴板
-    navigator.clipboard.writeText(exportImageUrl.value).catch(error => {
-      ElNotification.warning('导出链接失败');
-    });
-    saveJson.value = true
+    // navigator.clipboard.writeText(exportImageUrl.value).catch(error => {
+    //   ElNotification.warning('导出链接失败');
+    // });
+    // saveJson.value = true
     ElNotification.success('图片链接已复制到剪贴板')
   } else if (type === 'json') {
     exportJsonData.value = app.exportJson()
@@ -649,34 +665,52 @@ const handleExportCommand = type => {
     })
   }
 }
-//保存为json文件
-const save = async () => {
+//保存为模板文件,需要把exportImageUrl.value和app.exportJson()放进同一个变量中以便可以动态获取
+const savetemplate = async (types) => {
+  const exportJson= null
+  if (types === 1) {
+    console.log("当前url", window.location.href)
+    const url = window.location.href
+    const fileName = getQueryParams(url);
+    saveFileName.value = fileName.fileName
+    exportImageUrl.value = app.exportImage({
+      renderBg: true,
+      paddingX: exportImagePaddingX.value,
+      paddingY: exportImagePaddingY.value,
+      onlySelected: exportOnlySelected.value
+    })
+    console.log(exportImageUrl.value)
+    if (fileName === undefined) {
+      ElNotification.warning('URL参数错误')
+      return
+    }
+  }
   if (saveFileName.value === null) {
-    ElNotification.warning('请输入文件名')
+    ElNotification.warning('请输入模板名')
     return
   }
+  exportJson= app.exportJson()
   try {
-    const response = await fetch('http://localhost:8080/api/savefile', {
+    const response = await fetch('http://localhost:8080/api/saveTemplate', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
-        // 'Content-Type': 'application/x-www-form-urlencoded',
       },
       body: JSON.stringify({
-        type: filetype.value, // true:代表普通保存,false:代表模板保存
+        type: types, // 1:代表普通保存,0:代表模板保存
         name: saveFileName.value,
-        data: app.exportJson()
+        data: exportJson
       })
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
+    //重置状态
     const data = await response.json()
+    saveFileName.value = null
+    saveJson.value = false
     if (data.code !== 200) {
       ElNotification.error(data.message)
-    }else{
+    } else {
       ElNotification.success('保存成功')
-      //重置状态
-    saveFileName.value = null
-    saveJson.value = false
     }
   } catch (error) {
     ElNotification.error(data.message)
@@ -684,10 +718,45 @@ const save = async () => {
 
   }
 }
+//保存为文件
+const SaveFile = async () => {
+  console.log("当前url", window.location.href)
+  const url = window.location.href
+  const fileName = getQueryParams(url);
+  if (fileName === undefined) {
+    ElNotification.warning('URL参数错误')
+    return
+  }
+  console.log(fileName); // 输出 "xxxxxx"
+  try {
+    const response = await fetch('http://localhost:8080/api/saveTemplate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: JSON.stringify({
+        type: 1, // 1:代表普通保存,0:代表模板保存
+        name: fileName,
+        data: app.exportJson()
+      })
+    })
+    if (!response.ok) throw new Error('Failed to fetch JSON data')
+    const data = await response.json()
+    if (data.code !== 200) {
+      ElNotification.error(data.message)
+    } else {
+      ElNotification.success('保存成功')
+    }
+  } catch (error) {
+    ElNotification.error(error)
+    console.log(error)
+  }
+}
 
 const templateItems = async () => {
   const requestBody = {
-    type: filetype.value,
+    type: false,
   };
   names.clear() //清空map 重新渲染
   try {
@@ -711,12 +780,27 @@ const templateItems = async () => {
         ElNotification.warning('文件不存在')
       }
     }
-   
+
   } catch (error) {
     ElNotification.warning('获取失败')
     console.log(error);
   }
 };
+//解析url地址
+function getQueryParams(url) {
+  const queryParamsStr = url.includes('?') ? url.split('?')[1] : '';
+  const queryParams = new URLSearchParams(queryParamsStr);
+  const fileName = queryParams.get('task_id') + "_" + queryParams.get('vt_id') + "_" + queryParams.get('key_id')
+  if (!queryParams.has('task_id') || !queryParams.has('vt_id') || !queryParams.has('key_id')) {
+    return {};
+  } else {
+    return {
+      fileName
+    };
+  }
+
+}
+
 
 const reRenderExportImage = () => {
   exportImageUrl.value = app.exportImage({