feat:新增导出记录弹窗

src/App.vue

 <script setup lang="ts">
-// App.vue
+import { ElConfigProvider } from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 </script>
 
 <template>
+  <el-config-provider :locale="zhCn">
     <router-view />
+  </el-config-provider>
 </template>
 
 <style>

src/api/apiPaths.ts

@@ -118,6 +118,7 @@ export const spiderDataApi = {
   esaList: "/esa/list",
   esaMissionDetail: "/esa/missionDetail",
   esaStationDetail: "/esa/stationDetail",
+  exportRecordList: "/exportRecord/list",
 } as const;
 
 // 爬虫数据相关接口

src/api/spiderData.ts

@@ -119,3 +119,11 @@ export function getESAStationDetail(data: UserQueryParams) {
     }) as unknown as Promise<ApiResponse>
 }
 
+// 获取导出记录
+export function getExportRecord(data: any) {
+    return request({
+        url: spiderDataApi.exportRecordList,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
\ No newline at end of file

src/views/os-dataDisplay/components/exportRecord.vue

+<template>
+  <div>
+    <el-dialog title="导出记录" v-model="dialogVisible" width="65%">
+      <div class="table-content">
+        <el-table
+          v-loading="tableLoading"
+          element-loading-background="rgba(48, 65, 86, 0.3)"
+          :row-style="{ height: '45px' }"
+          :header-cell-style="{ textAlign: 'center' }"
+          :cell-style="{ textAlign: 'center' }"
+          :data="exportRecordList"
+          border
+        >
+          <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column prop="begin_export_time" label="导出开始时间"></el-table-column>
+          <el-table-column prop="end_export_time" label="导出结束时间"></el-table-column>
+          <el-table-column prop="origin_web" label="数据源网" min-width="120">
+            <template #default="{ row }">
+              <div class="flex gap-2 justify-center">
+                <el-tag v-for="code in JSON.parse(row.origin_web)">{{ getDataSourceName(code) }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="user_name" label="导出用户"></el-table-column>
+          <el-table-column prop="create_time" label="记录时间"></el-table-column>
+        </el-table>
+        <div class="flex justify-end mt-2">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            background
+            layout="total, prev, pager, next"
+            :total="pagination.total"
+          />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getExportRecord } from "@/api/spiderData";
+import { reactive, ref } from "vue";
+
+const dialogVisible = ref(false);
+
+const openDialog = () => {
+  dialogVisible.value = true;
+  getData();
+};
+
+defineExpose({
+  openDialog,
+});
+
+//处理当前页变化
+const handleCurrentChange = (value: number) => {
+  pagination.page = value;
+  getData();
+};
+
+//分页参数
+const pagination = reactive({
+  total: 0,
+  page: 1,
+  size: 10,
+});
+
+//根据数据源code返回数据源name
+const getDataSourceName = (code: number) => {
+  switch (code) {
+    case 0:
+      return "DSN-NOW";
+    case 1:
+      return "ITU";
+    case 2:
+      return "SpaceTrack";
+    case 3:
+      return "ESA";
+  }
+};
+
+//记录数据
+const exportRecordList = ref<any[]>([]);
+
+const tableLoading = ref(false);
+
+//获取数据
+const getData = async () => {
+  tableLoading.value = true;
+  const res = await getExportRecord(pagination);
+  tableLoading.value = false;
+  pagination.total = res.data.total;
+  exportRecordList.value = res.data.list;
+};
+</script>
+
+<style scoped>
+.table-content {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px !important;
+  margin: 10px;
+}
+</style>

src/views/os-dataDisplay/index.vue

@@ -3,10 +3,13 @@
     <MenuTitle title="数据展示" subtitle="Data Display" />
     <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
     <div class="segment-content">
-      <div class="custom-style flex gap-4">
+      <div class="custom-style flex justify-between">
+        <div class="flex gap-4">
           <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
           <el-button type="primary" @click="handleExport">导出</el-button>
         </div>
+        <el-button plain @click="handleExportRecord">导出记录</el-button>
+      </div>
     </div>
     <!-- 综合数据页面组件 -->
     <!-- <allDataTab v-if="mode === '综合数据'">
@@ -20,6 +23,7 @@
     <!-- ESA数据页面组件 -->
     <esDataTab v-if="mode === 'ESA数据'"></esDataTab>
     <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
+    <exportRecord ref="expRec" />
   </div>
 </template>
 
@@ -33,6 +37,7 @@ import dsnDataTab from "./components/dsnData/dsnTab.vue";
 import esDataTab from "./components/esDataTab.vue";
 import exportDialog from "@/components/Export/index.vue";
 import MenuTitle from "@/components/MenuTitle.vue";
+import exportRecord from "./components/exportRecord.vue";
 
 const mode = ref(sessionStorage.getItem("dataDisplayMode") || "DSN数据");
 const showDeleteDialog = ref(false);
@@ -41,6 +46,9 @@ const route = useRoute();
 const router = useRouter();
 const modeValue = ref<any>("数据展示");
 
+//导出记录组件引用
+const expRec = ref<any>(null);
+
 const goToStatus = () => {
   router.push({
     path: "/osStatus/list",
@@ -57,6 +65,11 @@ onMounted(() => {
   }
 });
 
+//导出记录
+const handleExportRecord = () => {
+  expRec.value.openDialog();
+};
+
 watch(
   mode,
   (newVal) => {

src/views/os-system/index.vue

@@ -17,7 +17,7 @@
         :cell-style="{ textAlign: 'center' }"
         :row-style="{ height: '58px' }"
         @selection-change="handleSelectionChange"
-        v-loading="tableData?.length == 0"
+        v-loading="tableLoading"
         element-loading-background="rgba(48, 65, 86, 0.3)"
       >
         <el-table-column type="selection" width="40" />
@@ -145,12 +145,17 @@ const openAddUserDialog = () => {
   mode.value = AddMode.ADD_MODE;
   dialogVisible.value = true;
 };
+
+const tableLoading = ref(false);
+
 // 获取用户列表数据的方法
 const getUserListData = async () => {
+  tableLoading.value = true;
   const userList = await getUserList({
     page: pageObj.value.pageNo,
     size: pageObj.value.pageSize,
   });
+  tableLoading.value = false;
   tableData.value = userList.data.list;
   pageObj.value.total = userList.data.total;
 };