feat: 下载中心
This commit is contained in:
rd
@ -13,3 +13,18 @@ export const getCustomColumns = (params = {}) => {
|
||||
export const updateCustomColumns = (params = {}) => {
|
||||
return Http.put('/v1/custom-columns', params);
|
||||
};
|
||||
|
||||
// 任务中心-分页
|
||||
export const getTask = (params = {}) => {
|
||||
return Http.get('/v1/tasks', params);
|
||||
};
|
||||
|
||||
// 任务中心-批量删除
|
||||
export const deleteBatchTasks = (params = {}) => {
|
||||
return Http.delete('/v1/tasks', params);
|
||||
};
|
||||
|
||||
// 任务中心-删除
|
||||
export const deleteTask = (id: string) => {
|
||||
return Http.delete(`/v1/tasks/${id}`);
|
||||
};
|
||||
|
||||
@ -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,
|
||||
},
|
||||
];
|
||||
|
||||
@ -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('删除成功');
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
.export-task-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
|
||||
@ -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,
|
||||
},
|
||||
];
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
export const TASK_STATUS = [
|
||||
{
|
||||
label: '导出中',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '导出失败',
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -84,5 +84,6 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user