feat: 下载中心

src/components/_base/navbar/components/download-center-modal/components/export-task/constants.ts

@@ -1,21 +1,16 @@
 export const INITIAL_FORM = {
-  search: '',
+  type: 1,
+  operator_name: '',
   module: '',
-  column: undefined,
-  order: undefined,
-};
-export const INITIAL_PAGE_INFO = {
-  page: 1,
-  pageSize: 20,
-  total: 0,
+  sort_column: undefined,
+  sort_order: undefined,
 };
 
 export const TABLE_COLUMNS = [
   {
     title: '文件名称',
-    dataIndex: 'file_name',
+    dataIndex: 'name',
     width: 180,
-    // fixed: 'left',
   },
   {
     title: '所属模块',
@@ -23,16 +18,21 @@ export const TABLE_COLUMNS = [
     width: 120,
   },
   {
-    title: '下载时间',
-    dataIndex: 'time',
-    width: 120,
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    width: 140,
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
   },
   {
     title: '操作人员',
-    dataIndex: 'name',
+    dataIndex: 'operator.name',
     width: 120,
   },
 ];

src/components/_base/navbar/components/download-center-modal/components/export-task/delete-task-modal.vue

@@ -20,35 +20,35 @@
 
 <script setup>
 import { ref } from 'vue';
-import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
+import { deleteTask, deleteBatchTasks } from '@/api/all/common';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 
 const emits = defineEmits(['update', 'close', 'batchUpdate']);
 
 const visible = ref(false);
-const accountId = ref(null);
+const taskId = ref(null);
 const accountName = ref('');
 
-const isBatch = computed(() => Array.isArray(accountId.value));
+const isBatch = computed(() => Array.isArray(taskId.value));
 
 function onClose() {
   visible.value = false;
-  accountId.value = null;
+  taskId.value = null;
   accountName.value = '';
   emits('close');
 }
 
 const open = (record) => {
   const { id = null, name = '' } = record;
-  accountId.value = id;
+  taskId.value = id;
   accountName.value = name;
 
   visible.value = true;
 };
 
 async function onDelete() {
-  const _fn = isBatch.value ? batchDeleteMediaAccounts : deleteMediaAccount;
-  const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
+  const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
+  const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
   const { code } = await _fn(_params);
   if (code === 200) {
     AMessage.success('删除成功');

src/components/_base/navbar/components/download-center-modal/components/export-task/index.vue

@@ -4,9 +4,9 @@
       <div class="filter-row-item flex items-center">
         <span class="label">操作人员</span>
         <a-input
-          v-model="query.search"
+          v-model="query.operator_name"
           class="w-240px"
-          placeholder="请搜索..."
+          placeholder="请输入操作人员"
           size="medium"
           allow-clear
           @change="handleSearch"
@@ -18,17 +18,24 @@
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">所属模块</span>
-        <a-select v-model="query.module" size="medium" placeholder="全部" allow-clear @change="handleChange">
-          <a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">
-            {{ item.name }}
-          </a-option>
-        </a-select>
+        <a-input
+          v-model="query.module"
+          class="w-240px"
+          placeholder="请输入所属模块"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
       </div>
     </div>
 
     <div
       v-if="dataSource.length > 0 && selectedRows.length > 0"
-      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
+      class="tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px"
       :class="selectedRows.length > 0 ? 'selected' : ''"
     >
       <div class="flex items-center">
@@ -94,22 +101,31 @@
             </div>
           </template>
 
-          <template v-if="column.dataIndex === 'platform'" #cell="{ record }">
-            {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
+          <template v-if="column.dataIndex === 'status'" #cell="{ record }">
+            <span>{{ TASK_STATUS.find((v) => v.value === record.status)?.label }}</span>
           </template>
-          <template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
-            {{ exactFormatTime(record.time) }}
+          <template v-else-if="column.dataIndex === 'created_at'" #cell="{ record }">
+            {{ exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
           </template>
 
           <template v-else #cell="{ record }">
             {{ formatTableField(column, record, true) }}
           </template>
         </a-table-column>
-        <a-table-column data-index="operation" width="100" title="操作">
+        <a-table-column data-index="operation" width="100" fixed="right" title="操作">
           <template #cell="{ record }">
             <div class="flex items-center">
-              <img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="handleDelete(record)" />
-              <a-button type="outline" size="mini" class="search-btn" @click="handleDownload(record)">下载</a-button>
+              <img
+                v-if="record.status !== 0"
+                :src="icon1"
+                width="14"
+                height="14"
+                class="mr-8px cursor-pointer"
+                @click="handleDelete(record)"
+              />
+              <a-button type="outline" size="mini" class="search-btn" @click="handleDownload(record)">{{
+                record.status === 2 ? '重新导出' : '下载'
+              }}</a-button>
             </div>
           </template>
         </a-table-column>
@@ -134,10 +150,12 @@
 </template>
 
 <script setup>
-import { fetchAccountGroups } from '@/api/all/propertyMarketing';
-import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
-import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
+import { getTask } from '@/api/all/common';
+import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
+import { TASK_STATUS } from '../../constants';
+import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { downloadByUrl } from '@/utils/tools';
 
 import DeleteTaskModal from './delete-task-modal.vue';
 
@@ -153,6 +171,7 @@ const {
   rowSelection,
   handleSelect,
   handleSelectAll,
+  DEFAULT_PAGE_INFO,
 } = useTableSelectionWithPagination({
   onPageChange: () => {
     getData();
@@ -164,7 +183,6 @@ const {
 
 const visible = ref(false);
 const query = ref(cloneDeep(INITIAL_FORM));
-const groups = ref([]);
 const deleteTaskModalRef = ref(null);
 
 const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
@@ -174,20 +192,19 @@ const indeterminate = computed(
 
 const reset = () => {
   query.value = cloneDeep(INITIAL_FORM);
-  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
+  pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
   selectedRowKeys.value = [];
   selectedRows.value = [];
   dataSource.value = [];
 };
 
 const init = () => {
-  getGroups();
   getData();
 
   visible.value = true;
 };
 
-const getData = () => {
+const getData = async () => {
   dataSource.value = [
     {
       id: 1,
@@ -203,57 +220,18 @@ const getData = () => {
       time: 1752130053,
       name: '张三三张三三张三三张三三张三三',
     },
-    {
-      id: 3,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 4,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 5,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 6,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 7,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 8,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 9,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
   ];
-  pageInfo.value.total = 9;
+  pageInfo.value.total = 2;
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await getTask({
+    ...query.value,
+    page,
+    page_size,
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data?.total;
+  }
 };
 const reload = () => {
   pageInfo.value.page = 1;
@@ -261,8 +239,8 @@ const reload = () => {
 };
 
 const handleSorterChange = (column, order) => {
-  query.value.column = column;
-  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  query.value.sort_column = column;
+  query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
   reload();
 };
 
@@ -270,29 +248,23 @@ const handleSearch = () => {
   reload();
 };
 
-const getGroups = async () => {
-  const { code, data } = await fetchAccountGroups();
-  if (code === 200) {
-    groups.value = data;
-  }
-};
-
 const handleCloseTip = () => {
   selectedRows.value = [];
+  selectedRowKeys.value = [];
 };
 
-const handleDownload = () => {
-  console.log('handleDownload');
+const handleDownload = (record) => {
+  record.file && downloadByUrl(record.file);
 };
 const handleBatchDownload = () => {
   console.log('handleBatchDownload', selectedRows);
 };
 
 const handleDelete = (record) => {
-  const { id, file_name } = record;
+  const { id, name } = record;
   deleteTaskModalRef.value.open({
     id,
-    name: `“${file_name || '-'}”`,
+    name: `“${name || '-'}”`,
   });
 };
 const handleBatchDelete = () => {
@@ -303,6 +275,7 @@ const handleBatchDelete = () => {
 
 const onBatchSuccess = () => {
   selectedRows.value = [];
+  selectedRowKeys.value = [];
   getData();
 };
 

src/components/_base/navbar/components/download-center-modal/components/export-task/style.scss

@@ -1,4 +1,7 @@
 .export-task-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   .tip-row {
     border-radius: 2px;
     background: #f0edff;

src/components/_base/navbar/components/download-center-modal/components/import-task/constants.ts

@@ -0,0 +1,38 @@
+export const INITIAL_FORM = {
+  search: '',
+  module: '',
+  column: undefined,
+  order: undefined,
+};
+export const INITIAL_PAGE_INFO = {
+  page: 1,
+  page_size: 20,
+  total: 0,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '文件名称',
+    dataIndex: 'file_name',
+    width: 180,
+    // fixed: 'left',
+  },
+  {
+    title: '所属模块',
+    dataIndex: 'module',
+    width: 120,
+  },
+  {
+    title: '下载时间',
+    dataIndex: 'time',
+    width: 120,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'name',
+    width: 120,
+  },
+];

src/components/_base/navbar/components/download-center-modal/components/import-task/delete-task-modal.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除下载记录' : '删除下载记录'"
+    width="400px"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ accountName }} 这条记录吗？</span>
+    </div>
+    <template #footer>
+      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const accountId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(accountId.value));
+
+function onClose() {
+  visible.value = false;
+  accountId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  accountId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? batchDeleteMediaAccounts : deleteMediaAccount;
+  const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

src/components/_base/navbar/components/download-center-modal/components/import-task/index.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="import-task-wrap">
+    <div class="filter-row flex mb-16px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">操作人员</span>
+        <a-input
+          v-model="query.search"
+          class="w-240px"
+          placeholder="请搜索..."
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">所属模块</span>
+        <a-select v-model="query.module" size="medium" placeholder="全部" allow-clear @change="handleChange">
+          <a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </div>
+    </div>
+
+    <div
+      v-if="dataSource.length > 0 && selectedRows.length > 0"
+      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
+      :class="selectedRows.length > 0 ? 'selected' : ''"
+    >
+      <div class="flex items-center">
+        <div class="flex items-center">
+          <a-checkbox
+            :model-value="checkedAll"
+            :indeterminate="indeterminate"
+            class="mr-8px"
+            @change="handleSelectAll"
+          />
+          <span class="label mr-24px">
+            已选
+            <span class="color-#6D4CFE">{{ selectedRows.length }}</span>
+            个文件
+          </span>
+
+          <span class="operation-btn" @click="handleBatchDownload">批量下载</span>
+          <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
+        </div>
+      </div>
+
+      <icon-close size="16" class="cursor-pointer color-#737478" @click="handleCloseTip" />
+    </div>
+
+    <a-table
+      ref="tableRef"
+      :data="dataSource"
+      column-resizable
+      row-key="id"
+      :row-selection="rowSelection"
+      :selected-keys="selectedRowKeys"
+      :pagination="false"
+      :scroll="{ x: '100%', y: '100%' }"
+      class="w-100% flex-1 overflow-hidden"
+      bordered
+      @sorter-change="handleSorterChange"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+    >
+      <template #empty>
+        <NoData />
+      </template>
+      <template #columns>
+        <a-table-column
+          v-for="column in TABLE_COLUMNS"
+          :key="column.dataIndex"
+          :data-index="column.dataIndex"
+          :fixed="column.fixed"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :sortable="column.sortable"
+          :align="column.align"
+          ellipsis
+          tooltip
+        >
+          <template #title>
+            <div class="flex items-center">
+              <img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
+              <span class="cts mr-4px">{{ column.title }}</span>
+              <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+              </a-tooltip>
+            </div>
+          </template>
+
+          <template v-if="column.dataIndex === 'platform'" #cell="{ record }">
+            {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
+          </template>
+          <template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
+            {{ exactFormatTime(record.time) }}
+          </template>
+
+          <template v-else #cell="{ record }">
+            {{ formatTableField(column, record, true) }}
+          </template>
+        </a-table-column>
+        <a-table-column data-index="operation" width="100" title="操作">
+          <template #cell="{ record }">
+            <div class="flex items-center">
+              <img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="handleDelete(record)" />
+              <a-button type="outline" size="mini" class="search-btn" @click="handleDownload(record)">下载</a-button>
+            </div>
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+    <div v-if="pageInfo.total > 0" class="flex justify-end my-16px">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.page_size"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+
+    <DeleteTaskModal ref="deleteTaskModalRef" @batchUpdate="onBatchSuccess" @update="getData" />
+  </div>
+</template>
+
+<script setup>
+import { fetchAccountGroups } from '@/api/all/propertyMarketing';
+import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
+import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+import DeleteTaskModal from './delete-task-modal.vue';
+
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+
+const {
+  selectedRowKeys,
+  selectedRows,
+  dataSource,
+  pageInfo,
+  onPageChange,
+  onPageSizeChange,
+  rowSelection,
+  handleSelect,
+  handleSelectAll,
+  DEFAULT_PAGE_INFO,
+} = useTableSelectionWithPagination({
+  onPageChange: () => {
+    getData();
+  },
+  onPageSizeChange: () => {
+    getData();
+  },
+});
+
+const visible = ref(false);
+const query = ref(cloneDeep(INITIAL_FORM));
+const groups = ref([]);
+const deleteTaskModalRef = ref(null);
+
+const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
+const indeterminate = computed(
+  () => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
+);
+
+const reset = () => {
+  query.value = cloneDeep(INITIAL_FORM);
+  pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  dataSource.value = [];
+};
+
+const init = () => {
+  getGroups();
+  getData();
+
+  visible.value = true;
+};
+
+const getData = () => {
+  dataSource.value = [
+    {
+      id: 1,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 2,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 3,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 4,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 5,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 6,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 7,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 8,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+    {
+      id: 9,
+      file_name: '投放指南20150701',
+      module: '营销资产平台',
+      time: 1752130053,
+      name: '张三三张三三张三三张三三张三三',
+    },
+  ];
+  pageInfo.value.total = 9;
+};
+const reload = () => {
+  pageInfo.value.page = 1;
+  getData();
+};
+
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  reload();
+};
+
+const handleSearch = () => {
+  reload();
+};
+
+const getGroups = async () => {
+  const { code, data } = await fetchAccountGroups();
+  if (code === 200) {
+    groups.value = data;
+  }
+};
+
+const handleCloseTip = () => {
+  selectedRows.value = [];
+};
+
+const handleDownload = () => {
+  console.log('handleDownload');
+};
+const handleBatchDownload = () => {
+  console.log('handleBatchDownload', selectedRows);
+};
+
+const handleDelete = (record) => {
+  const { id, file_name } = record;
+  deleteTaskModalRef.value.open({
+    id,
+    name: `“${file_name || '-'}”`,
+  });
+};
+const handleBatchDelete = () => {
+  const ids = selectedRows.value.map((item) => item.id);
+  const names = selectedRows.value.map((item) => `"${item.name || '-'}"`).join('，');
+  deleteTaskModalRef.value?.open({ id: ids, name: names });
+};
+
+const onBatchSuccess = () => {
+  selectedRows.value = [];
+  getData();
+};
+
+defineExpose({ init, reset });
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/components/_base/navbar/components/download-center-modal/components/import-task/style.scss

@@ -0,0 +1,51 @@
+.import-task-wrap {
+  height: 100%;
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; 
+    }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #f64b31;
+      }
+    }
+  }
+}

src/components/_base/navbar/components/download-center-modal/constants.ts

@@ -0,0 +1,14 @@
+export const TASK_STATUS = [
+  {
+    label: '导出中',
+    value: 0,
+  },
+  {
+    label: '已完成',
+    value: 1,
+  },
+  {
+    label: '导出失败',
+    value: 2,
+  },
+];

src/components/_base/navbar/components/download-center-modal/index.vue

@@ -8,19 +8,41 @@
     :footer="false"
     @close="onClose"
   >
-    <ExportTask />
+    <a-tabs v-model="activeTab" @tab-click="handleTabClick">
+      <a-tab-pane key="0" title="导入"> </a-tab-pane>
+      <a-tab-pane key="1" title="导出"> </a-tab-pane>
+    </a-tabs>
+    <div class="content">
+      <component :is="activeTab === '0' ? ImportTask : ExportTask" ref="componentRef" />
+    </div>
   </a-modal>
 </template>
 
 <script setup>
 import ExportTask from './components/export-task';
+import ImportTask from './components/import-task';
 
 const visible = ref(false);
+const componentRef = ref(null);
+const activeTab = ref('0');
+
+const handleTabClick = (key) => {
+  activeTab.value = key;
+  nextTick(() => {
+    getData();
+  });
+};
+
+const getData = () => {
+  componentRef.value?.init();
+};
 
 const open = () => {
+  getData();
   visible.value = true;
 };
 const onClose = () => {
+  activeTab.value = '0';
   visible.value = false;
 };
 

src/components/_base/navbar/components/download-center-modal/style.scss

@@ -1,5 +1,6 @@
 .download-center-modal {
   .arco-modal-header {
+    border-bottom: none !important;
     .arco-modal-title {
       color: var(--Text-1, #211f24);
       font-size: 16px;
@@ -10,30 +11,61 @@
     }
   }
   .arco-modal-body {
-    height: 536px;
+    padding: 0 !important;
     display: flex;
     flex-direction: column;
-  }
-  .filter-row {
-    .filter-row-item {
-      &:not(:last-child) {
-        margin-right: 24px;
-      }
-      .label {
-        margin-right: 12px;
-        color: #211f24;
-        font-family: 'PuHuiTi-Regular';
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        flex-shrink: 0;
-        line-height: 22px; /* 157.143% */
-      }
-      :deep(.arco-space-item) {
-        width: 100%;
+    height: 650px;
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+        .label {
+          margin-right: 12px;
+          color: #211f24;
+          font-family: 'PuHuiTi-Regular';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+        :deep(.arco-space-item) {
+          width: 100%;
+        }
       }
     }
+    .arco-tabs {
+      .arco-tabs-nav-top {
+        .arco-tabs-tab {
+          margin: 0 20px;
+          .arco-tabs-tab-title {
+            color: var(--Text-2, #3c4043);
+            font-family: $font-family-regular;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 22px; 
+          }
+          &.arco-tabs-tab-active {
+            .arco-tabs-tab-title {
+              color: #6D4CFE;
+              font-family: $font-family-medium;
+            }
+          }
+        }
+      }
+      .arco-tabs-content {
+        display: none;
+      }
+    }
+    .content {
+      flex: 1;
+      padding: 24px 20px;
+      overflow: hidden;
+    }
   }
+
   .cts {
     color: var(--Text-1, #211f24);
     font-family: $font-family-medium;