🆕导入配置文件完成

web/src/api/setting.js

@@ -1,5 +1,10 @@
 import { request } from '@/utils'
 
 export default {
-  exportConfig: () => request.get('/setting/export'), // 获取当前登陆用户信息
+  exportConfig: () => request.get('/setting/export'), // 导出配置
+  importConfig: (data) => request.post('/setting/import',data,{
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  }),
 }

web/src/layout/components/header/components/Export.vue

@@ -5,13 +5,55 @@
   <n-icon mr-20 size="18" style="cursor: pointer" @click="exportConfig()">
     <icon-ph-export-bold />
   </n-icon>
+  <n-modal
+    v-model:show="showImportUploader"
+    transform-origin="center"
+    preset="card"
+    title="导入配置"
+    :bordered="false"
+    size="large"
+    style="width: 400px"
+    header-style="text-align: center"
+  >
+    <n-upload
+      ref="uploadRef"
+      :multiple="false"
+      directory-dnd
+      :max="1"
+      :custom-request="customRequest"
+      name="file"
+      accept=".json"
+      :default-upload="false"
+      @before-upload="uploadCheck"
+    >
+      <n-upload-dragger>
+        <div style="margin-bottom: 12px">
+          <n-icon size="48" :depth="3">
+            <ArchiveIcon />
+          </n-icon>
+        </div>
+        <n-text style="font-size: 16px">
+          点击或者拖动文件到该区域来上传
+        </n-text>
+        <n-p depth="3" style="margin: 8px 0 0 0">
+          注意：上传后将覆盖原有的配置以及客户端数据等，请谨慎操作！
+        </n-p>
+      </n-upload-dragger>
+    </n-upload>
+    <n-button type="primary" style="margin-left: 40%" @click="submitUpload">确定</n-button>
+  </n-modal>
 </template>
 
 <script setup>
 import api from '@/api/setting'
+import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
+
+const showImportUploader = ref(false)
+const uploadRef = ref(null)
+
 // 导入
 function importConfig() {
-  console.log('导入配置')
+  showImportUploader.value = true
 }
 
 // 导出
@@ -19,7 +61,7 @@ function exportConfig() {
   $dialog.confirm({
     type: 'warning',
     title: '导出配置',
-    content: `是否导出需要导出系统全部配置？`,
+    content: `是否需要导出系统全部配置？`,
     async confirm() {
       api.exportConfig().then(response => {
         const blob = new Blob([JSON.stringify(response.data)], {
@@ -37,4 +79,36 @@ function exportConfig() {
     },
   })
 }
+
+// 上传前检查
+function uploadCheck(data) {
+  if (data.file.file?.name !== "config.json") {
+    $message.error("导入文件只能是[config.json]");
+    return false;
+  }
+  if (data.file.file?.type !== "application/json") {
+    $message.error("只能上传json类型文件，请重新上传");
+    return false;
+  }
+  return true;
+}
+
+// 自定义上传
+function customRequest(file) {
+  api.importConfig({
+    file: file.file.file,
+  }).then(response => {
+    if (response.data.code === 200) {
+      showImportUploader.value = false;
+    } else {
+      $message.error(response.data.message);
+    }
+  })
+
+}
+
+// 点击按钮上传
+function submitUpload() {
+  uploadRef.value?.submit();
+}
 </script>