feat: 任务中心-导入/导出

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

@@ -1,166 +1,20 @@
-<template>
+<script lang="jsx">
-  <div class="export-task-wrap">
+import { ref, computed } from 'vue';
-    <div class="filter-row flex mb-16px">
+import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
-      <div class="filter-row-item flex items-center">
+import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
-        <span class="label">操作人员</span>
+import NoData from '@/components/no-data';
-        <a-input
-          v-model="query.operator_name"
-          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-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% mb-16px 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 === 'status'" #cell="{ record }">
-            <span>{{ TASK_STATUS.find((v) => v.value === record.status)?.label }}</span>
-          </template>
-          <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" fixed="right" title="操作">
-          <template #cell="{ record }">
-            <div class="flex items-center">
-              <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>
-      </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 { 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';
-
 import icon1 from '@/assets/img/media-account/icon-delete.png';
+import icon5 from '@/assets/img/media-account/icon-warn-1.png';
 
+export default {
+  setup(props, { emit, expose }) {
     const {
       selectedRowKeys,
       selectedRows,
@@ -181,8 +35,7 @@ const {
       },
     });
 
-const visible = ref(false);
+    const query = ref({ ...INITIAL_FORM });
-const query = ref(cloneDeep(INITIAL_FORM));
     const deleteTaskModalRef = ref(null);
 
     const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
@@ -191,8 +44,8 @@ const indeterminate = computed(
     );
 
     const reset = () => {
-  query.value = cloneDeep(INITIAL_FORM);
+      query.value = { ...INITIAL_FORM };
-  pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
+      pageInfo.value = { ...DEFAULT_PAGE_INFO };
       selectedRowKeys.value = [];
       selectedRows.value = [];
       dataSource.value = [];
@@ -200,8 +53,6 @@ const reset = () => {
 
     const init = () => {
       getData();
-
-  visible.value = true;
     };
 
     const getData = async () => {
@@ -222,6 +73,7 @@ const getData = async () => {
         },
       ];
       pageInfo.value.total = 2;
+
       const { page, page_size } = pageInfo.value;
       const { code, data } = await getTask({
         ...query.value,
@@ -254,10 +106,22 @@ const handleCloseTip = () => {
     };
 
     const handleDownload = (record) => {
+      Notification.warning({
+        showIcon: false,
+        closable: true,
+        content: (
+          <div class="flex items-center">
+            <icon-loading size="16" class="color-#6D4CFE mr-8px" />
+            <p class="text-14px lh-22px font-400 color-#211F24">{`正在下载“${record.name}”，请稍后...`}</p>
+          </div>
+        ),
+        duration: 3000,
+        class: `px-16px py-9px w-400px rounded-2px bg-#F0EDFF`,
+      });
       record.file && downloadByUrl(record.file);
     };
     const handleBatchDownload = () => {
-  console.log('handleBatchDownload', selectedRows);
+      // 批量下载逻辑
     };
 
     const handleDelete = (record) => {
@@ -269,7 +133,7 @@ const handleDelete = (record) => {
     };
     const handleBatchDelete = () => {
       const ids = selectedRows.value.map((item) => item.id);
-  const names = selectedRows.value.map((item) => `"${item.name || '-'}"`).join('，');
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
       deleteTaskModalRef.value?.open({ id: ids, name: names });
     };
 
@@ -279,7 +143,183 @@ const onBatchSuccess = () => {
       getData();
     };
 
-defineExpose({ init, reset });
+    expose({ init, reset });
+
+    return () => (
+      <div class="export-task-wrap">
+        {/* 筛选行 */}
+        <div class="filter-row flex mb-16px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">操作人员</span>
+            <Input
+              v-model={query.value.operator_name}
+              class="w-240px"
+              placeholder="请输入操作人员"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">所属模块</span>
+            <Input
+              v-model={query.value.module}
+              class="w-240px"
+              placeholder="请输入所属模块"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+        </div>
+
+        {/* 已选提示行 */}
+        {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
+          <div
+            class={[
+              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
+              selectedRows.value.length > 0 ? ' selected' : '',
+            ].join('')}
+          >
+            <div class="flex items-center">
+              <div class="flex items-center">
+                <Checkbox
+                  modelValue={checkedAll.value}
+                  indeterminate={indeterminate.value}
+                  class="mr-8px"
+                  onChange={handleSelectAll}
+                />
+                <span class="label mr-24px">
+                  已选
+                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
+                  个文件
+                </span>
+                <span class="operation-btn" onClick={handleBatchDownload}>
+                  批量下载
+                </span>
+                <span class="operation-btn red" onClick={handleBatchDelete}>
+                  批量删除
+                </span>
+              </div>
+            </div>
+            <IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
+          </div>
+        )}
+
+        {/* 表格 */}
+        <Table
+          ref="tableRef"
+          data={dataSource.value}
+          column-resizable
+          row-key="id"
+          row-selection={rowSelection.value}
+          selected-keys={selectedRowKeys.value}
+          pagination={false}
+          scroll={{ x: '100%', y: '100%' }}
+          class="w-100% flex-1 overflow-hidden"
+          bordered
+          onSorterChange={handleSorterChange}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+          v-slots={{
+            empty: () => <NoData />,
+            columns: () => (
+              <>
+                {TABLE_COLUMNS.map((column) => (
+                  <TableColumn
+                    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
+                    v-slots={{
+                      title: () => (
+                        <div class="flex items-center">
+                          {column.dataIndex === 'ai_evaluate' && (
+                            <img width="16" height="16" src={icon5} class="mr-4px" />
+                          )}
+                          <span class="cts mr-4px">{column.title}</span>
+                          {column.tooltip && (
+                            <Tooltip content={column.tooltip} position="top">
+                              <IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
+                            </Tooltip>
+                          )}
+                        </div>
+                      ),
+                      cell: ({ record }) => {
+                        if (column.dataIndex === 'status') {
+                          return <span>{TASK_STATUS.find((v) => v.value === record.status)?.label}</span>;
+                        }
+                        if (column.dataIndex === 'created_at') {
+                          return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                        }
+                        return formatTableField(column, record, true);
+                      },
+                    }}
+                  />
+                ))}
+                <TableColumn
+                  data-index="operation"
+                  width={100}
+                  fixed="right"
+                  title="操作"
+                  v-slots={{
+                    cell: ({ record }) => (
+                      <div class="flex items-center">
+                        {record.status !== 0 && (
+                          <img
+                            src={icon1}
+                            width="14"
+                            height="14"
+                            class="mr-8px cursor-pointer"
+                            onClick={() => handleDelete(record)}
+                          />
+                        )}
+                        <Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
+                          {record.status === 2 ? '重新导出' : '下载'}
+                        </Button>
+                      </div>
+                    ),
+                  }}
+                />
+              </>
+            ),
+          }}
+        />
+
+        {/* 分页 */}
+        {pageInfo.value.total > 0 && (
+          <div class="flex justify-end my-16px">
+            <Pagination
+              total={pageInfo.value.total}
+              size="mini"
+              show-total
+              show-jumper
+              show-page-size
+              current={pageInfo.value.page}
+              page-size={pageInfo.value.page_size}
+              onChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+
+        {/* 删除弹窗 */}
+        <DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,21 +1,16 @@
 export const INITIAL_FORM = {
-  search: '',
+  type: 0,
+  operator_name: '',
   module: '',
-  column: undefined,
+  sort_column: undefined,
-  order: undefined,
+  sort_order: undefined,
-};
-export const INITIAL_PAGE_INFO = {
-  page: 1,
-  page_size: 20,
-  total: 0,
 };
 
 export const TABLE_COLUMNS = [
   {
-    title: '文件名称',
+    title: '任务名称',
-    dataIndex: 'file_name',
+    dataIndex: 'name',
     width: 180,
-    // fixed: 'left',
   },
   {
     title: '所属模块',
@@ -23,16 +18,36 @@ export const TABLE_COLUMNS = [
     width: 120,
   },
   {
-    title: '下载时间',
+    title: '状态',
-    dataIndex: 'time',
+    dataIndex: 'status',
-    width: 120,
+    width: 100,
+  },
+  {
+    title: '共导入',
+    dataIndex: 'total_number',
+    width: 100,
+  },
+  {
+    title: '导入成功',
+    dataIndex: 'success_number',
+    width: 100,
+  },
+  {
+    title: '导入失败',
+    dataIndex: 'fail_number',
+    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/import-task/delete-task-modal.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     v-model:visible="visible"
-    :title="isBatch ? '批量删除下载记录' : '删除下载记录'"
+    :title="isBatch ? '批量删除导入记录' : '删除导入记录'"
     width="400px"
     @close="onClose"
   >
@@ -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 _fn = isBatch.value ? deleteBatchTasks : deleteTask;
-  const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
+  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/import-task/index.vue

@@ -1,148 +1,20 @@
-<template>
+<script lang="jsx">
-  <div class="import-task-wrap">
+import { ref, computed } from 'vue';
-    <div class="filter-row flex mb-16px">
+import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
-      <div class="filter-row-item flex items-center">
+import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
-        <span class="label">操作人员</span>
+import NoData from '@/components/no-data';
-        <a-input
+import { getTask } from '@/api/all/common';
-          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 { 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';
-
 import icon1 from '@/assets/img/media-account/icon-delete.png';
+import icon5 from '@/assets/img/media-account/icon-warn-1.png';
 
+export default {
+  setup(props, { emit, expose }) {
     const {
       selectedRowKeys,
       selectedRows,
@@ -163,9 +35,7 @@ const {
       },
     });
 
-const visible = ref(false);
+    const query = ref({ ...INITIAL_FORM });
-const query = ref(cloneDeep(INITIAL_FORM));
-const groups = ref([]);
     const deleteTaskModalRef = ref(null);
 
     const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
@@ -174,21 +44,18 @@ const indeterminate = computed(
     );
 
     const reset = () => {
-  query.value = cloneDeep(INITIAL_FORM);
+      query.value = { ...INITIAL_FORM };
-  pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
+      pageInfo.value = { ...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,
@@ -204,57 +71,19 @@ 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;
@@ -262,8 +91,8 @@ const reload = () => {
     };
 
     const handleSorterChange = (column, order) => {
-  query.value.column = column;
+      query.value.sort_column = column;
-  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+      query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
       reload();
     };
 
@@ -271,43 +100,225 @@ 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 = () => {
+    const handleDownload = (record) => {
-  console.log('handleDownload');
+      Notification.warning({
+        showIcon: false,
+        closable: true,
+        content: (
+          <div class="flex items-center">
+            <icon-loading size="16" class="color-#6D4CFE mr-8px" />
+            <p class="text-14px lh-22px font-400 color-#211F24">{`正在下载“${record.name}”，请稍后...`}</p>
+          </div>
+        ),
+        duration: 3000,
+        class: `px-16px py-9px w-400px rounded-2px bg-#F0EDFF`,
+      });
+      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 = () => {
       const ids = selectedRows.value.map((item) => item.id);
-  const names = selectedRows.value.map((item) => `"${item.name || '-'}"`).join('，');
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
       deleteTaskModalRef.value?.open({ id: ids, name: names });
     };
 
     const onBatchSuccess = () => {
       selectedRows.value = [];
+      selectedRowKeys.value = [];
       getData();
     };
 
-defineExpose({ init, reset });
+    expose({ init, reset });
+
+    return () => (
+      <div class="import-task-wrap">
+        {/* 筛选行 */}
+        {/* <div class="filter-row flex mb-16px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">操作人员</span>
+            <Input
+              v-model={query.value.operator_name}
+              class="w-240px"
+              placeholder="请输入操作人员"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">所属模块</span>
+            <Input
+              v-model={query.value.module}
+              class="w-240px"
+              placeholder="请输入所属模块"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+        </div> */}
+
+        {/* 已选提示行 */}
+        {/* {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
+          <div
+            class={[
+              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
+              selectedRows.value.length > 0 ? ' selected' : '',
+            ].join('')}
+          >
+            <div class="flex items-center">
+              <div class="flex items-center">
+                <Checkbox
+                  modelValue={checkedAll.value}
+                  indeterminate={indeterminate.value}
+                  class="mr-8px"
+                  onChange={handleSelectAll}
+                />
+                <span class="label mr-24px">
+                  已选
+                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
+                  个文件
+                </span>
+                <span class="operation-btn" onClick={handleBatchDownload}>
+                  批量下载
+                </span>
+                <span class="operation-btn red" onClick={handleBatchDelete}>
+                  批量删除
+                </span>
+              </div>
+            </div>
+            <IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
+          </div>
+        )} */}
+
+        {/* 表格 */}
+        <Table
+          ref="tableRef"
+          data={dataSource.value}
+          column-resizable
+          row-key="id"
+          selected-keys={selectedRowKeys.value}
+          pagination={false}
+          scroll={{ x: '100%', y: '100%' }}
+          class="w-100% flex-1 overflow-hidden"
+          bordered
+          onSorterChange={handleSorterChange}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+          v-slots={{
+            empty: () => <NoData />,
+            columns: () => (
+              <>
+                {TABLE_COLUMNS.map((column) => (
+                  <TableColumn
+                    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
+                    v-slots={{
+                      title: () => (
+                        <div class="flex items-center">
+                          {column.dataIndex === 'ai_evaluate' && (
+                            <img width="16" height="16" src={icon5} class="mr-4px" />
+                          )}
+                          <span class="cts mr-4px">{column.title}</span>
+                          {column.tooltip && (
+                            <Tooltip content={column.tooltip} position="top">
+                              <IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
+                            </Tooltip>
+                          )}
+                        </div>
+                      ),
+                      cell: ({ record }) => {
+                        if (column.dataIndex === 'status') {
+                          return <span>{TASK_STATUS.find((v) => v.value === record.status)?.label}</span>;
+                        }
+                        if (column.dataIndex === 'created_at') {
+                          return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                        }
+                        return formatTableField(column, record, true);
+                      },
+                    }}
+                  />
+                ))}
+                <TableColumn
+                  data-index="operation"
+                  width={100}
+                  fixed="right"
+                  title="操作"
+                  v-slots={{
+                    cell: ({ record }) => (
+                      <div class="flex items-center">
+                        <img
+                          src={icon1}
+                          width="14"
+                          height="14"
+                          class="mr-8px cursor-pointer"
+                          onClick={() => handleDelete(record)}
+                        />
+                        {record.status === 2 && (
+                          <Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
+                            下载问题表格
+                          </Button>
+                        )}
+                      </div>
+                    ),
+                  }}
+                />
+              </>
+            ),
+          }}
+        />
+
+        {/* 分页 */}
+        {pageInfo.value.total > 0 && (
+          <div class="flex justify-end my-16px">
+            <Pagination
+              total={pageInfo.value.total}
+              size="mini"
+              show-total
+              show-jumper
+              show-page-size
+              current={pageInfo.value.page}
+              page-size={pageInfo.value.page_size}
+              onChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+
+        {/* 删除弹窗 */}
+        <DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+};
 </script>
 
 <style lang="scss" scoped>

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

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

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

@@ -26,6 +26,8 @@ const visible = ref(false);
 const componentRef = ref(null);
 const activeTab = ref('0');
 
+let timer = null;
+
 const handleTabClick = (key) => {
   activeTab.value = key;
   nextTick(() => {
@@ -39,12 +41,25 @@ const getData = () => {
 
 const open = () => {
   getData();
+
+  timer = setInterval(() => {
+    getData();
+  }, 10000);
+
   visible.value = true;
 };
 const onClose = () => {
   activeTab.value = '0';
+
+  clearTimer();
   visible.value = false;
 };
+const clearTimer = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
 
 defineExpose({ open });
 </script>

src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue

@@ -268,6 +268,11 @@ const getAccountDetail = async () => {
 
 const handleBatchImport = async () => {
   try {
+    if (!file.value) {
+      AMessage.warning('请上传要导入的文件');
+      return;
+    }
+
     const formData = new FormData();
     formData.append('file', file.value);