ASW-68 feat: application列表页面增加 导入导出按钮

5 files changed, 114 insertions, 5 deletions

diff --git a/src/axios/api/application.js b/src/axios/api/application.js
index a3ca844..b2cde3a 100644
--- a/src/axios/api/application.js
+++ b/src/axios/api/application.js
@@ -57,6 +57,36 @@ export const applicationEditApi = async (data) => {
   }
 };
 
+// application导入
+export const applicationImportApi = async (data) => {
+  try {
+    const res = await axiosInstance({
+      url: '/api/v1/application/import',
+      method: 'POST',
+      data: data,
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+    return res.data;
+  } catch (err) {
+    return err.data;
+  }
+};
+
+// application导出
+export const applicationExportApi = async (data, config) => {
+  try {
+    const res = await axiosInstance({
+      url: '/api/v1/application/export',
+      method: 'GET',
+      params: data,
+      ...config,
+    });
+    return res;
+  } catch (err) {
+    return err;
+  }
+};
+
 // application修改basic
 export const basicEditApi = async (id, data) => {
   try {
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 71eba9a..3ce7cf9 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -28,6 +28,8 @@ export default {
     confirm: 'Confirm',
     back: 'Back',
     notFound: 'Not found',
+    import: 'Import',
+    export: 'Export',
     download: 'Download',
     upload: 'Upload',
     upload_user: 'Upload user',
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index 8c37b09..e749aa9 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -28,6 +28,8 @@ export default {
     confirm: '确定',
     back: '返回',
     notFound: '找不到',
+    import: '导入',
+    export: '导出',
     download: '下载',
     upload: '上传',
     upload_user: '上传用户',
diff --git a/src/views/applications/index.vue b/src/views/applications/index.vue
index 0b2bf57..90e6972 100644
--- a/src/views/applications/index.vue
+++ b/src/views/applications/index.vue
@@ -22,6 +22,28 @@
             <el-icon><Search /></el-icon>
           </template>
         </el-input>
+        <el-upload
+          v-has="'application_add'"
+          action=""
+          :auto-upload="false"
+          :show-file-list="false"
+          multiple
+          v-model:file-list="importFileList"
+          :on-change="importChange"
+        >
+          <el-button size="large" plain style="margin-right: 20px">
+            {{ t('overall.import') }}
+          </el-button>
+        </el-upload>
+        <el-button
+          v-has="'application_view'"
+          size="large"
+          plain
+          :disabled="!tableSelect.length"
+          @click="exportData"
+        >
+          {{ t('overall.export') }}
+        </el-button>
         <el-button
           v-has="'application_add'"
           type="primary"
@@ -46,7 +68,9 @@
         :data="tableData"
         :default-sort="defaultSort"
         @sort-change="sortChange"
+        @selection-change="selectionChange"
       >
+        <el-table-column type="selection" width="55" align="center" />
         <el-table-column
           v-for="item in tableTitle"
           :key="item.prop"
@@ -127,11 +151,16 @@
 import { useRouter } from 'vue-router';
 import { ref, reactive, onBeforeMount, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { applicationListApi, applicationDeleteApi } from '@/axios/api';
+import {
+  applicationListApi,
+  applicationDeleteApi,
+  applicationImportApi,
+  applicationExportApi,
+} from '@/axios/api';
 import moment from 'moment-timezone';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { toThousands, bytes } from '@/utils';
-import { get } from 'lodash';
+import { toThousands, bytes, downloadFile } from '@/utils';
+import { get, debounce } from 'lodash';
 import { useSystemStore } from '@/store/index';
 import { useTable } from '@/hooks/useTable';
 
@@ -149,6 +178,47 @@ watch(
   }
 );
 
+// 导入
+const importFileList = ref([]);
+const importChange = debounce(async (file, fileList) => {
+  let params = new FormData();
+  importFileList.value.forEach((item) => {
+    params.append('files', item.raw);
+  });
+  importFileList.value = [];
+  params.append('workspaceId', workspace.value.id);
+  params.append('format', 'tsg2402');
+  const res = await applicationImportApi(params);
+  if (res.code == 200) {
+    fetchList();
+    ElMessage.success(t('message.save_success'));
+  } else {
+    ElMessage.error(res.msg || res.error);
+  }
+}, 10);
+
+// 导出
+const exportData = async () => {
+  if (!tableSelect.value.length) {
+    return;
+  }
+  const ids = tableSelect.value
+    .map((item) => {
+      return item.id;
+    })
+    .join(',');
+
+  const params = {
+    ids,
+    workspaceId: workspace.value.id,
+    format: 'tsg2402',
+  };
+  const res = await applicationExportApi(params, {
+    responseType: 'blob',
+  });
+  downloadFile(res);
+};
+
 // 新增
 const newApplication = () => {
   router.push({
@@ -291,6 +361,12 @@ const fetchList = async (reset = true) => {
   loading.value = false;
 };
 
+// 表格选中数据
+const tableSelect = ref([]);
+const selectionChange = (val) => {
+  tableSelect.value = val;
+};
+
 const defaultSort = { prop: 'updateTimestamp', order: 'descending' };
 // 排序
 const { orderBy, sortChange } = useTable('-update_timestamp', fetchList);
diff --git a/src/views/pcaps/index.vue b/src/views/pcaps/index.vue
index 1f5a515..f80f96f 100644
--- a/src/views/pcaps/index.vue
+++ b/src/views/pcaps/index.vue
@@ -329,17 +329,16 @@ const download = async () => {
 
 // 上传数据
 const uploadFileList = ref([]);
-
 // 上传
 const uploadChange = debounce(async (file, fileList) => {
   let params = new FormData();
   uploadFileList.value.forEach((item) => {
     params.append('files', item.raw);
   });
+  uploadFileList.value = [];
   params.append('workspaceId', workspace.value.id);
   const res = await pcapUploadApi(params);
   if (res.code == 200) {
-    uploadFileList.value = [];
     fetchList();
     ElMessage.success(t('message.save_success'));
   } else {