no message
This commit is contained in:
lq
@ -23,7 +23,7 @@
|
||||
<div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:data-source="data"
|
||||
:bordered="{ cell: true }"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
style="width: 100%"
|
||||
@ -32,62 +32,63 @@
|
||||
@cell-click="handleCellClick"
|
||||
>
|
||||
<!-- 空数据显示 -->
|
||||
<template #empty>
|
||||
<div class="flex flex-col items-center justify-center" style="min-height: 400px">
|
||||
<template #emptyText>
|
||||
<div class="flex flex-col items-center justify-center" style="min-height: 600px">
|
||||
<img :src="emptyIcon" class="img mt-20px" alt="暂无数据" width="106" height="72" />
|
||||
<div class="text mt-36px">暂无数据</div>
|
||||
<div class="mt-12px mb-12px">可通过账号管理添加账号，进行任务排期管理</div>
|
||||
<a-button type="primary" @click="handleAddAccount">去添加</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 账号与平台列 -->
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center justify-start">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
|
||||
:alt="getPlatformName(record.platform)"
|
||||
/>
|
||||
{{ record.name || '-' }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 动态日期单元格 -->
|
||||
<template #dateCell="{ record, column }">
|
||||
<div v-if="record[column.dataIndex]?.length" class="task-container">
|
||||
<!-- 任务数量≥3时显示更多 -->
|
||||
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
|
||||
<TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
|
||||
<a-trigger trigger="click" position="br">
|
||||
<div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
|
||||
还有{{ record[column.dataIndex].length - 1 }}项
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="bg-#fff w-160px p-12px rounded-4px flex flex-col more-content">
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</div>
|
||||
<!-- 任务数量<3时直接显示 -->
|
||||
<div v-else>
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<div class="flex items-center justify-start">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
|
||||
:alt="getPlatformName(record.platform)"
|
||||
/>
|
||||
{{ record.name || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-task"></div>
|
||||
</template>
|
||||
|
||||
<!-- 动态日期单元格 -->
|
||||
<template v-else-if="column.slots?.customRender === 'dateCell'">
|
||||
<div v-if="record[column.dataIndex]?.length" class="task-container">
|
||||
<!-- 任务数量≥3时显示更多 -->
|
||||
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
|
||||
<TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
|
||||
<a-popover trigger="click" placement="bottomRight">
|
||||
<div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
|
||||
还有{{ record[column.dataIndex].length - 1 }}项
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="bg-#fff w-160px p-12px rounded-4px flex flex-col more-content">
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
<!-- 任务数量<3时直接显示 -->
|
||||
<div v-else>
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-task"></div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
@ -95,14 +96,14 @@
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
size="small"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
show-size-changer
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
@change="handlePageChange"
|
||||
@show-size-change="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,8 +118,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, computed, inject } from 'vue';
|
||||
import type { ColumnProps } from 'ant-design-vue/es/table';
|
||||
import { ref, reactive, onMounted, computed, inject, nextTick } from 'vue';
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
import router from '@/router';
|
||||
import DateUtils from '@/utils/DateUtils';
|
||||
// 组件引入
|
||||
@ -164,7 +165,7 @@ const dateSelectorModel = ref({
|
||||
weekModel: new Date(),
|
||||
monthModel: new Date(),
|
||||
});
|
||||
const columns = ref<ColumnProps[]>([]);
|
||||
const columns = ref<TableProps['columns']>([]);
|
||||
const data = ref<any[]>([]);
|
||||
const operators = ref([]);
|
||||
const accountList = ref([]);
|
||||
@ -218,7 +219,6 @@ const timestampToDayNumber = (timestamp: number) => {
|
||||
const processTableData = (apiData: any[]) => {
|
||||
const processedData: any[] = [];
|
||||
const dateHeaders = currentDateHeaders.value;
|
||||
|
||||
apiData.forEach((account) => {
|
||||
const rowData: any = {
|
||||
id: account.id,
|
||||
@ -242,7 +242,7 @@ const processTableData = (apiData: any[]) => {
|
||||
|
||||
processedData.push(rowData);
|
||||
});
|
||||
|
||||
console.log('处理后的数据:', processedData);
|
||||
return processedData;
|
||||
};
|
||||
|
||||
@ -267,16 +267,15 @@ const setTableColumns = () => {
|
||||
columns.value = [
|
||||
{
|
||||
title: '账号与发布平台',
|
||||
slotName: 'name',
|
||||
dataIndex: 'name',
|
||||
slots: { customRender: 'name' },
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
fixed: 'left', // 固定列
|
||||
},
|
||||
} as TableProps['columns'][0],
|
||||
];
|
||||
let dateHeaders: any[] = [];
|
||||
const { choseType } = dateSelectorModel.value;
|
||||
|
||||
if (choseType === '周') {
|
||||
dateHeaders = DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0);
|
||||
} else if (choseType === '月') {
|
||||
@ -315,22 +314,27 @@ const setTableColumns = () => {
|
||||
console.log('Today flag value:', todayFlag);
|
||||
}
|
||||
|
||||
const columnConfig = {
|
||||
const columnConfig: any = {
|
||||
title: `${item.weekday}`,
|
||||
dataIndex: item.day,
|
||||
slotName: 'dateCell',
|
||||
dataIndex: item.day.toString(),
|
||||
slots: { customRender: 'dateCell' },
|
||||
date: item.date,
|
||||
width: 135,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
sorter: true,
|
||||
},
|
||||
sorter: true,
|
||||
weekday: item.weekday,
|
||||
todayFlag,
|
||||
// 为周末设置特定的背景色
|
||||
cellClass: isWeekend ? 'weekend-column' : '',
|
||||
customCell: (record: any, rowIndex: number) => {
|
||||
return {
|
||||
class: [isWeekend ? 'weekend-column' : '', todayFlag ? 'today-column' : ''],
|
||||
};
|
||||
},
|
||||
// 为今日添加特殊类名
|
||||
class: todayFlag ? 'today-column' : '',
|
||||
customHeaderCell: (column: any) => {
|
||||
return {
|
||||
class: todayFlag ? 'today-column' : '',
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
// 更多调试信息
|
||||
@ -338,14 +342,13 @@ const setTableColumns = () => {
|
||||
console.log('Column config for today:', columnConfig);
|
||||
}
|
||||
|
||||
columns.value.push(columnConfig);
|
||||
columns.value.push(columnConfig as TableProps['columns'][0]);
|
||||
});
|
||||
};
|
||||
|
||||
// 当前日期头部计算
|
||||
const currentDateHeaders = computed(() => {
|
||||
const { choseType } = dateSelectorModel.value;
|
||||
|
||||
if (choseType === '周') {
|
||||
return DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0).map((item) =>
|
||||
parseInt(item.day.toString(), 10),
|
||||
@ -371,6 +374,7 @@ const handleSearch = () => {
|
||||
if (apiData) {
|
||||
data.value = processTableData(apiData);
|
||||
}
|
||||
console.log('显示数据', data.value);
|
||||
pageInfo.value.total = response.data.total || apiData.length;
|
||||
}
|
||||
})
|
||||
@ -416,7 +420,6 @@ const handleDateSelectorChange = (value: any) => {
|
||||
};
|
||||
|
||||
// 筛选条件变化处理
|
||||
|
||||
const handleFilterChange = (filters: any) => {
|
||||
console.log(filters);
|
||||
if (typeof filters === 'object' && filters !== null) {
|
||||
@ -441,12 +444,10 @@ const handleFilterChange = (filters: any) => {
|
||||
};
|
||||
|
||||
// 表格排序变化
|
||||
const handleTableChange = (pagination: any, sorter: any) => {
|
||||
if (sorter && sorter.sorter?.direction === 'ascend' && sorter.sorter?.field) {
|
||||
const column = columns.value.find((col) => col.dataIndex == sorter.sorter.field);
|
||||
if (column?.date) {
|
||||
query.top_execution_time = DateUtils.formatDate(column.date);
|
||||
}
|
||||
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
||||
if (sorter && sorter.order === 'ascend' && sorter.column?.date) {
|
||||
const column = sorter.column;
|
||||
query.top_execution_time = DateUtils.formatDate(column.date);
|
||||
} else {
|
||||
query.top_execution_time = undefined;
|
||||
}
|
||||
@ -574,6 +575,15 @@ const getAccountList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 分页处理
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
onPageChange(page);
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
onPageSizeChange(size);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 确保在初始化时设置表格列和执行搜索
|
||||
@ -636,7 +646,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 只对 td 单元格应用样式，避免影响表头 */
|
||||
:deep(td .arco-table-cell) {
|
||||
:deep(td .ant-table-cell) {
|
||||
padding: 0px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -644,12 +654,12 @@ onMounted(() => {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
:deep(td .arco-table-cell:first-child) {
|
||||
:deep(td .ant-table-cell:first-child) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(td.today-column) .arco-table-cell-wrap {
|
||||
:deep(td.today-column) .ant-table-cell-wrap {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@ -675,7 +685,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 下拉框样式优化 */
|
||||
:deep(.arco-dropdown-open .arco-icon-down) {
|
||||
:deep(.ant-dropdown-open .anticon-down) {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user