feat: 任务中心-导入/导出
This commit is contained in:
rd
@ -1,285 +1,325 @@
|
||||
<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.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>
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
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';
|
||||
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref({ ...INITIAL_FORM });
|
||||
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 = { ...INITIAL_FORM };
|
||||
pageInfo.value = { ...DEFAULT_PAGE_INFO };
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
];
|
||||
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;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
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 = () => {
|
||||
// 批量下载逻辑
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${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 = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const visible = ref(false);
|
||||
const query = ref(cloneDeep(INITIAL_FORM));
|
||||
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 = () => {
|
||||
getData();
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
];
|
||||
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;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = (record) => {
|
||||
record.file && downloadByUrl(record.file);
|
||||
};
|
||||
const handleBatchDownload = () => {
|
||||
console.log('handleBatchDownload', selectedRows);
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${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 = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
defineExpose({ init, reset });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,21 +1,16 @@
|
||||
export const INITIAL_FORM = {
|
||||
search: '',
|
||||
type: 0,
|
||||
operator_name: '',
|
||||
module: '',
|
||||
column: undefined,
|
||||
order: undefined,
|
||||
};
|
||||
export const INITIAL_PAGE_INFO = {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
total: 0,
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'file_name',
|
||||
title: '任务名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
// fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '所属模块',
|
||||
@ -23,16 +18,36 @@ export const TABLE_COLUMNS = [
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '下载时间',
|
||||
dataIndex: 'time',
|
||||
width: 120,
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
@ -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 _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('删除成功');
|
||||
|
||||
@ -1,313 +1,324 @@
|
||||
<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';
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask } from '@/api/all/common';
|
||||
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';
|
||||
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref({ ...INITIAL_FORM });
|
||||
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 = { ...INITIAL_FORM };
|
||||
pageInfo.value = { ...DEFAULT_PAGE_INFO };
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
];
|
||||
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;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
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 = () => {
|
||||
// 批量下载逻辑
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${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 = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
},
|
||||
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>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.import-task-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user