feat: 下载中心

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

@@ -0,0 +1,314 @@
+<template>
+  <div class="export-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, INITIAL_PAGE_INFO, 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,
+} = 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(INITIAL_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/export-task/style.scss

@@ -0,0 +1,50 @@
+.export-task-wrap {
+  .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/index.vue

@@ -1,271 +1,29 @@
 <template>
   <a-modal
     v-model:visible="visible"
-    title="下载中心"
+    title="任务中心"
     modal-class="download-center-modal"
     width="860px"
     :mask-closable="false"
     :footer="false"
     @close="onClose"
   >
-    <div class="filter-row flex mb-16px">
+    <ExportTask />
-      <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 && selectedItems.length > 0"
-      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="selectedItems.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">{{ selectedItems.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="{
-        type: 'checkbox',
-        showCheckedAll: true,
-        width: 48,
-      }"
-      :selected-keys="selectedItems"
-      :pagination="false"
-      :scroll="{ x: '100%' }"
-      class="file-table w-100% flex-1"
-      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">
-      <a-pagination
-        :total="pageInfo.total"
-        size="mini"
-        show-total
-        show-jumper
-        show-page-size
-        :current="pageInfo.page"
-        :page-size="pageInfo.pageSize"
-        @change="onPageChange"
-        @page-size-change="onPageSizeChange"
-      />
-    </div>
-
-    <DeleteTaskModal ref="deleteTaskModalRef" @batchUpdate="onBatchSuccess" @update="getData" />
   </a-modal>
 </template>
 
 <script setup>
-import { fetchAccountGroups } from '@/api/all/propertyMarketing';
+import ExportTask from './components/export-task';
-import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
-import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
-import DeleteTaskModal from './delete-task-modal.vue';
-
-import icon1 from '@/assets/img/media-account/icon-delete.png';
 
 const visible = ref(false);
-const dataSource = ref([]);
-const query = ref(cloneDeep(INITIAL_FORM));
-const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
-const selectedItems = ref([]);
-const groups = ref([]);
-const deleteTaskModalRef = ref(null);
-
-const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
-const indeterminate = computed(
-  () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
-);
 
 const open = () => {
-  getGroups();
-  getData();
-
   visible.value = true;
 };
 const onClose = () => {
-  query.value = cloneDeep(INITIAL_FORM);
-  pageInfo.value = cloneDeep(INITIAL_FORM);
-
   visible.value = false;
 };
 
-const getData = () => {
-  dataSource.value = [
-    {
-      id: 1,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-    {
-      id: 2,
-      file_name: '投放指南20150701',
-      module: '营销资产平台',
-      time: 1752130053,
-      name: '张三三张三三张三三张三三张三三',
-    },
-  ];
-};
-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 handleDelete = (record) => {
-  const { id, file_name } = record;
-  deleteTaskModalRef.value.open({
-    id,
-    name: `“${file_name || '-'}”`,
-  });
-};
-const handleBatchDelete = () => {
-  const ids = selectedItems.value.map((item) => item.id);
-  const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
-  deleteTaskModalRef.value?.open({ id: ids, name: names });
-};
-const getGroups = async () => {
-  const { code, data } = await fetchAccountGroups();
-  if (code === 200) {
-    groups.value = data;
-  }
-};
-const handleSelect = (selectedRowKeys, selectedRows) => {
-  selectedItems.value = selectedRowKeys;
-};
-
-const handleSelectAll = (checked) => {
-  if (checked) {
-    selectedItems.value = dataSource.value.map((item) => item.id);
-  } else {
-    selectedItems.value = [];
-  }
-};
-
-const handleCloseTip = () => {
-  selectedItems.value = [];
-};
-
-const handleDownload = () => {
-  console.log('handleDownload');
-};
-const handleBatchDownload = () => {
-  console.log('handleBatchDownload');
-};
-
-const onPageChange = (current) => {
-  pageInfo.value.page = current;
-  getData();
-};
-const onPageSizeChange = (pageSize) => {
-  pageInfo.value.pageSize = pageSize;
-  reload();
-};
-
-const onBatchSuccess = () => {
-  selectedItems.value = [];
-  getData();
-};
-
 defineExpose({ open });
 </script>
 

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

@@ -1,18 +1,4 @@
 .download-center-modal {
-  .arco-input-wrapper,
-  .arco-select-view-single,
-  .arco-select-view-multiple {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus,
-    &.arco-textarea-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
   .arco-modal-header {
     .arco-modal-title {
       color: var(--Text-1, #211f24);
@@ -25,84 +11,35 @@
   }
   .arco-modal-body {
     height: 536px;
-    padding: 24px 20px 40px;
+    display: flex;
-    .filter-row {
+    flex-direction: column;
-      .filter-row-item {
+  }
-        &:not(:last-child) {
+  .filter-row {
-          margin-right: 24px;
+    .filter-row-item {
-        }
+      &:not(:last-child) {
-        .label {
+        margin-right: 24px;
-          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%;
-        }
       }
-    }
-    .tip-row {
-      border-radius: 2px;
-      background: #f0edff;
       .label {
-        font-family: $font-family-medium;
+        margin-right: 12px;
-        font-size: 14px;
+        color: #211f24;
-        font-style: normal;
+        font-family: 'PuHuiTi-Regular';
-        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; /* 166.667% */
-      }
-      .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;
+        flex-shrink: 0;
         line-height: 22px; /* 157.143% */
-        &:not(:last-child) {
-          margin-right: 16px;
-        }
-        &.red {
-          color: #F64B31;
-        }
       }
-    }
+      :deep(.arco-space-item) {
-    .file-table {
+        width: 100%;
-      .cts {
-        color: var(--Text-1, #211f24);
-        font-family: $font-family-medium;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 22px;
       }
     }
   }
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
 }

src/hooks/useTableSelectionWithPagination.ts

@@ -71,6 +71,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
   const rowSelection = computed(() => ({
     type: 'checkbox',
     showCheckedAll: true,
+    width: 48,
   }));
 
   return {

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

@@ -100,7 +100,7 @@
     </div>
     <template #footer>
       <span class="cts color-#3C4043 s1"
-        >已选<span class="color-#6D4CFE num mx-3px">{{ selectedAccounts.length }}个</span>账户</span
+        >已选<span class="color-#6D4CFE num mx-3px">{{ selectedRows.length }}个</span>账户</span
       >
       <div class="flex items-center">
         <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
@@ -109,7 +109,7 @@
           class="ml-16px"
           status="danger"
           size="large"
-          :disabled="!selectedAccounts.length"
+          :disabled="!selectedRows.length"
           @click="onConfirm"
           >添加已选账户</a-button
         >
@@ -136,7 +136,7 @@ const form = ref(null);
 const ROW_KEY = 'account_id';
 const {
   selectedRowKeys,
-  selectedRows: selectedAccounts,
+  selectedRows,
   dataSource,
   pageInfo,
   onPageChange,
@@ -170,7 +170,8 @@ const open = (formData) => {
 
 const onClose = () => {
   form.value = null;
-  selectedAccounts.value = [];
+  selectedRows.value = [];
+  dataSource.value = [];
   selectedRowKeys.value = [];
   query.value = cloneDeep(INITIAL_FORM);
   pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
@@ -178,7 +179,7 @@ const onClose = () => {
 };
 
 const onConfirm = async () => {
-  const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedAccounts.value });
+  const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedRows.value });
   if (code === 200) {
     visible.value = false;
     update();