完善导入导出功能

oscm/board/src/js/api/targetWebsiteApi.js

@@ -38,5 +38,25 @@ export default {
             console.log(error)
         })
     },
+    export(callback) {
+        axios.get('/api/target/website/export', {
+            responseType: 'blob' // 重要：指定响应类型为blob
+        }).then((response) => {
+            callback(response);
+        }).catch((error) => {
+            console.log(error)
+        })
+    },
+    import(formData, callback) {
+        axios.post('/api/target/website/import', formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        }).then((response) => {
+            callback(response);
+        }).catch((error) => {
+            console.log(error)
+        })
+    }
 
 }

oscm/board/src/modules/targets/WebsiteList.vue

@@ -7,11 +7,18 @@
             class="el-icon-plus"></i> 新增
         </el-button>
         <el-button type="primary" style="margin-left:20px;" size="mini" @click="handleExport"><i
-              class="el-icon-download"></i> 导出
+            class="el-icon-download"></i> 导出
         </el-button>
         <el-button type="warning" style="margin-left:20px;" size="mini" @click="handleImport"><i
             class="el-icon-upload2"></i> 导入
         </el-button>
+        <input
+            type="file"
+            ref="fileInput"
+            style="display: none"
+            accept=".json"
+            @change="handleFileChange"
+        />
       </el-col>
       <el-col :span="20">
         <div style="text-align: right;">
@@ -407,6 +414,64 @@ export default {
         this.showDepthList = false;
         this.formData.depth = '';
       }
+    },
+    async handleExport() {
+      try {
+        // 发送GET请求到导出接口
+        await targetWebsiteApi.export((response) => {
+          // 创建下载链接
+          const url = window.URL.createObjectURL(new Blob([response.data]))
+          const link = document.createElement('a')
+          link.href = url
+          link.setAttribute('download', 'target_websites.json') // 设置下载文件名
+          document.body.appendChild(link)
+          link.click()
+          // 清理
+          document.body.removeChild(link)
+          window.URL.revokeObjectURL(url)
+          Message.success('导出成功')
+        })
+
+      } catch (error) {
+        console.error('导出失败:', error)
+        Message.error('导出失败: ' + (error.response?.data?.message || error.message))
+      }
+    },
+
+    // 触发文件选择对话框
+    handleImport() {
+      this.$refs.fileInput.click()
+    },
+
+    // 处理文件选择
+    async handleFileChange(event) {
+      const file = event.target.files[0]
+      if (!file) return
+
+      // 验证文件类型
+      if (!file.name.endsWith('.json')) {
+        Message.error('请选择JSON文件')
+        return
+      }
+
+      try {
+        // 创建FormData对象
+        const formData = new FormData()
+        formData.append('file', file)
+
+        // 发送POST请求到导入接口
+        await targetWebsiteApi.import(formData, (response) => {
+          Message.success(response.data)
+          // 清空文件输入，以便可以重复选择同一文件
+          event.target.value = ''
+          // 可选：导入成功后刷新数据
+          this.resetSearch()
+        })
+
+      } catch (error) {
+        console.error('导入失败:', error)
+        Message.error('导入失败: ' + (error.response?.data?.message || error.message))
+      }
     }
   },
   mounted: function () {