renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改table样式

Browse Source
This commit is contained in:
lq
2025-09-26 16:31:34 +08:00
parent 98f9ec0328
commit 002fa12bc8
1 changed files with 228 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
src/views/property-marketing/assignment-management/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="flex-column justify-between bg-#fff rounded-8px p-24px">
<div class="flex flex-col justify-between bg-white rounded-8px p-24px">
<!-- 日期选择器和筛选区域 -->
<div class="flex justify-between items-start w-full">
<div class="flex justify-between items-start w-full mb-24px">
<DateSelector v-model="dateSelectorModel" @date-change="handleDateSelectorChange" />
<div class="flex items-start">
<colorTip />
<div class="flex items-start gap-12px">
<ColorTip />
<FilterPopup
:operators="operators"
:platformOptions="platformOptions"
@ -12,41 +12,30 @@
:query="query"
@filter-change="handleFilterChange"
/>
<Button type="primary" class="w-112px" size="middle" @click="handleAddTask">
<template #default>创建任务</template>
</Button>
<a-button type="primary" class="w-112px" size="middle" @click="handleAddTask"> 创建任务 </a-button>
</div>
</div>
<!-- 表格内容区域 -->
<div class="flex justify-between items-start w-full">
<div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
<div class="flex-1 w-full">
<div class="flex flex-col" style="width: 100%; overflow-x: auto">
<a-table
:columns="columns"
:data-source="data"
:bordered="{ cell: true }"
:bordered="true"
:scroll="{ x: 'max-content' }"
style="width: 100%"
:pagination="false"
:locale="{ emptyText: emptyText }"
@change="handleTableChange"
@cell-click="handleCellClick"
>
<!-- 空数据显示 -->
<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 #bodyCell="{ column, record }">
<template #bodyCell="{ column, record, index }">
<!-- 账号名称列 -->
<template v-if="column.dataIndex === 'name'">
<div class="flex items-center justify-start">
<div class="flex items-center justify-start color-#211F24">
<img
:src="getPlatformIcon(record.platform)"
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
class="w-16px h-16px mr-8px rounded-4px"
:alt="getPlatformName(record.platform)"
/>
{{ record.name || '-' }}
@ -54,19 +43,20 @@
</template>
<!-- 动态日期单元格 -->
<template v-else-if="column.slots?.customRender === 'dateCell'">
<div v-if="record[column.dataIndex]?.length" class="task-container">
<template v-else-if="column.dataIndex === 'dateCell'">
<div
v-if="record[column.dataIndex]?.length"
class="task-container"
@click="handleCellClick(record, column)"
>
<!-- 任务数量≥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">
<div class="bg-white w-160px p-12px rounded-4px flex flex-col more-content">
<TaskItem
v-for="task in record[column.dataIndex]"
v-for="task in record[column.dataIndex].slice(1)"
:key="task.id"
:task="task"
:record="record"
@ -74,6 +64,9 @@
/>
</div>
</template>
<div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
还有{{ record[column.dataIndex].length - 1 }}项
</div>
</a-popover>
</div>
<!-- 任务数量<3时直接显示 -->
@ -87,7 +80,7 @@
/>
</div>
</div>
<div v-else class="no-task"></div>
<div v-else class="no-task" @click="handleCellClick(record, column)"></div>
</template>
</template>
</a-table>
@ -103,31 +96,41 @@
:current="pageInfo.page"
:page-size="pageInfo.page_size"
@change="handlePageChange"
@show-size-change="handlePageSizeChange"
@showSizeChange="handlePageSizeChange"
/>
</div>
</div>
</div>
</div>
<!-- 删除确认弹窗 -->
<a-modal v-model:visible="showModal" @ok="handleDeleteConfirm" @cancel="showModal = false" ok-text="确认删除">
<template #title>{{ deleteTitle }}</template>
<a-modal
v-model:open="showModal"
@ok="handleDeleteConfirm"
@cancel="showModal = false"
ok-text="确认删除"
:title="deleteTitle"
>
<div>{{ deleteContent }}</div>
</a-modal>
<DrowPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
<DrawPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed, inject, nextTick } from 'vue';
import { ref, reactive, onMounted, computed, nextTick, h } from 'vue';
import { Table, Button, Popover, Pagination, Modal, notification, message } from 'ant-design-vue';
import type { TableProps } from 'ant-design-vue';
import router from '@/router';
import DateUtils from '@/utils/DateUtils';
// 组件引入
import DateSelector from './components/date-selector.vue';
import colorTip from './components/colorTip.vue';
import ColorTip from './components/colorTip.vue';
import FilterPopup from './components/filter-popup.vue';
import DrowPopup from './components/draw-popup.vue';
import DrawPopup from './components/draw-popup.vue';
import TaskItem from './components/task-item.vue';
// API引入
import {
getTaskSchedules,
@ -137,8 +140,10 @@ import {
generateContent,
} from '@/api/all/assignment-management';
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
// 工具引入
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
// 静态资源
import emptyIcon from '@/assets/img/media-account/icon-empty.png';
// 平台图标
@ -150,8 +155,7 @@ import iconSph from '@/assets/img/platform/icon-sph.png';
import iconWb from '@/assets/img/platform/icon-wb.png';
import iconGzh from '@/assets/img/platform/icon-gzh.png';
import iconWarn from '@/assets/img/media-account/icon-warn.png';
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
import { message } from 'ant-design-vue';
// 表格分页逻辑
const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
onPageChange: () => handleSearch(),
@ -165,6 +169,7 @@ const dateSelectorModel = ref({
weekModel: new Date(),
monthModel: new Date(),
});
const columns = ref<TableProps['columns']>([]);
const data = ref<any[]>([]);
const operators = ref([]);
@ -173,6 +178,17 @@ const showModal = ref(false);
const currentTask = ref<any>(null);
const deleteTitle = ref('');
const deleteContent = ref('');
const drawerPopupRef = ref();
// 空状态显示
const emptyText = () => {
return h('div', { class: 'flex flex-col items-center justify-center', style: { minHeight: '600px' } }, [
h('img', { src: emptyIcon, class: 'img mt-20px', alt: '暂无数据', width: 106, height: 72 }),
h('div', { class: 'text mt-36px' }, '暂无数据'),
h('div', { class: 'mt-12px mb-12px' }, '可通过账号管理添加账号，进行任务排期管理'),
h(Button, { type: 'primary', onClick: handleAddAccount }, '去添加'),
]);
};
// 获取当前周的日期范围
const getCurrentWeekRange = () => {
@ -187,7 +203,7 @@ const query = reactive({
platforms: undefined,
operator_ids: undefined,
ids: [],
execution_time: getCurrentWeekRange(), // 设置默认值为当前周
execution_time: getCurrentWeekRange(),
top_execution_time: undefined,
});
@ -205,6 +221,7 @@ const platformConfig = {
{ id: 6, name: '公众号', icon: iconGzh },
],
};
const platformOptions = ref(platformConfig.options);
// 工具函数
@ -219,6 +236,7 @@ const timestampToDayNumber = (timestamp: number) => {
const processTableData = (apiData: any[]) => {
const processedData: any[] = [];
const dateHeaders = currentDateHeaders.value;
apiData.forEach((account) => {
const rowData: any = {
id: account.id,
@ -230,6 +248,7 @@ const processTableData = (apiData: any[]) => {
dateHeaders.forEach((day) => {
rowData[day] = [];
});
// 分配任务到对应日期列
if (account.task_schedules?.length) {
account.task_schedules.forEach((task: any) => {
@ -242,40 +261,26 @@ const processTableData = (apiData: any[]) => {
processedData.push(rowData);
});
console.log('处理后的数据:', processedData);
return processedData;
};
// 创建任务
const handleAddTask = () => {
drawerPopupRef.value?.showDrawer();
};
const handleCreateTask = async (value) => {
const res = await createTask(value);
if (res && res.code === 200) {
message.success('创建成功');
handleSearch();
}
};
// 添加对DrowPopup组件的引用
const drawerPopupRef = ref();
// 设置表格列
const setTableColumns = () => {
columns.value = [
const baseColumns: TableProps['columns'] = [
{
title: '账号与发布平台',
dataIndex: 'name',
slots: { customRender: 'name' },
key: 'name',
width: 150,
ellipsis: true,
fixed: 'left', // 固定列
} as TableProps['columns'][0],
fixed: 'left',
},
];
let dateHeaders: any[] = [];
const { choseType } = dateSelectorModel.value;
if (choseType === '周') {
dateHeaders = DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0);
} else if (choseType === '月') {
@ -305,45 +310,90 @@ const setTableColumns = () => {
// 添加日期列
dateHeaders.forEach((item) => {
const isWeekend = item.date?.getDay() === 0 || item.date?.getDay() === 6;
// 确保item.date存在再进行判断
const todayFlag = item.date ? isToday(item.date) : false;
// 调试信息
if (todayFlag) {
console.log('Today column detected:', item);
console.log('Today flag value:', todayFlag);
}
const columnConfig: any = {
title: `${item.weekday}`,
title: item.weekday,
dataIndex: item.day.toString(),
slots: { customRender: 'dateCell' },
date: item.date,
key: item.day.toString(),
width: 135,
sorter: true,
weekday: item.weekday,
todayFlag,
// 为周末设置特定的背景色
customCell: (record: any, rowIndex: number) => {
return {
class: [isWeekend ? 'weekend-column' : '', todayFlag ? 'today-column' : ''],
};
},
// 为今日添加特殊类名
customHeaderCell: (column: any) => {
return {
class: todayFlag ? 'today-column' : '',
};
customRender: ({ text, record, index }) => {
if (!text || !text.length) {
return h('div', { class: 'no-task' });
}
if (text.length >= 3) {
return h('div', { class: 'task-more' }, [
h(TaskItem, {
task: text[0],
record: record,
onHandleTask: handleTaskAction,
}),
h(
Popover,
{
trigger: 'click',
placement: 'bottomRight',
},
{
content: () =>
h(
'div',
{ class: 'more-content' },
text.slice(1).map((task) =>
h(TaskItem, {
task: task,
record: record,
onHandleTask: handleTaskAction,
}),
),
),
default: () =>
h(
'div',
{
class: 'task-more-indicator',
onClick: (e: Event) => e.stopPropagation(),
},
`还有${text.length - 1}项`,
),
},
),
]);
}
return h(
'div',
{},
text.map((task) =>
h(TaskItem, {
task: task,
record: record,
onHandleTask: handleTaskAction,
}),
),
);
},
onCell: (record, index) => ({
style: {
backgroundColor: isWeekend ? '#fbfaff' : todayFlag ? '#6d4cfe' : 'transparent',
},
class: todayFlag ? 'today-column' : isWeekend ? 'weekend-column' : '',
}),
onHeaderCell: () => ({
style: {
backgroundColor: todayFlag ? '#6d4cfe' : 'transparent',
color: todayFlag ? 'white' : 'inherit',
},
class: todayFlag ? 'today-column' : '',
}),
};
// 更多调试信息
if (todayFlag) {
console.log('Column config for today:', columnConfig);
}
columns.value.push(columnConfig as TableProps['columns'][0]);
baseColumns.push(columnConfig);
});
columns.value = baseColumns;
};
// 当前日期头部计算
@ -367,6 +417,7 @@ const currentDateHeaders = computed(() => {
const handleSearch = () => {
query.page = pageInfo.value.page;
query.page_size = pageInfo.value.page_size;
getTaskSchedules(query)
.then((response) => {
if (response.data) {
@ -374,7 +425,6 @@ const handleSearch = () => {
if (apiData) {
data.value = processTableData(apiData);
}
console.log('显示数据', data.value);
pageInfo.value.total = response.data.total || apiData.length;
}
})
@ -383,37 +433,26 @@ const handleSearch = () => {
});
};
// 添加一个标志位来避免死循环
let isDateSelectorUpdating = false;
// 日期选择器变化处理
let isDateSelectorUpdating = false;
const handleDateSelectorChange = (value: any) => {
// 如果正在更新中，则跳过
if (isDateSelectorUpdating) {
return;
}
if (isDateSelectorUpdating) return;
const newStartDate = value.dateRange.start;
const newEndDate = value.dateRange.end;
// 添加空值检查以避免数组越界错误
const currentStart =
Array.isArray(query.execution_time) && query.execution_time.length > 0 ? query.execution_time[0] : null;
const currentEnd =
Array.isArray(query.execution_time) && query.execution_time.length > 1 ? query.execution_time[1] : null;
// 如果日期范围没有变化，则不执行后续操作
if (currentStart === newStartDate && currentEnd === newEndDate) {
return;
}
if (currentStart === newStartDate && currentEnd === newEndDate) return;
// 设置标志位
isDateSelectorUpdating = true;
query.execution_time = [newStartDate, newEndDate];
setTableColumns();
handleSearch();
// 在下一个事件循环重置标志位
setTimeout(() => {
isDateSelectorUpdating = false;
}, 0);
@ -421,7 +460,6 @@ const handleDateSelectorChange = (value: any) => {
// 筛选条件变化处理
const handleFilterChange = (filters: any) => {
console.log(filters);
if (typeof filters === 'object' && filters !== null) {
Object.keys(filters).forEach((key) => {
switch (key) {
@ -438,7 +476,6 @@ const handleFilterChange = (filters: any) => {
query[key] = filters[key];
}
});
console.log(query);
handleSearch();
}
};
@ -454,41 +491,39 @@ const handleTableChange = (pagination: any, filters: any, sorter: any) => {
handleSearch();
};
const handleCellClick = (record: any, rowIndex: any, column: any) => {
// 单元格点击事件
const handleCellClick = (record: any, column: any) => {
const accountInfo = {
id: record.id,
name: record.name,
platform: record.platform,
};
const selectedDate = rowIndex.date;
// 检查选中的日期是否小于今天，如果是则不处理
const selectedDate = column.date;
const today = new Date();
today.setHours(0, 0, 0, 0);
const selectedDateTime = new Date(selectedDate);
selectedDateTime.setHours(0, 0, 0, 0);
if (selectedDateTime < today) {
console.log('选择的日期已过去，不打开抽屉');
message.warning('选择的日期已过去，无法创建任务');
return;
}
console.log('selectedDate', selectedDate, accountInfo);
drawerPopupRef.value.showDrawer(accountInfo, selectedDate);
drawerPopupRef.value?.showDrawer(accountInfo, selectedDate);
};
// 任务操作处理
const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
console.log('handleTaskAction', action, task, args);
switch (action) {
case 'delete':
currentTask.value = task;
deleteTitle.value = task.type === 1 ? '删除内容稿件排期' : '删除选题排期';
deleteContent.value = `确认删除“${task.name || 'AI生成内容'}”吗？`;
deleteContent.value = `确认删除"${task.name || 'AI生成内容'}"吗？`;
showModal.value = true;
break;
case 'edit-time':
console.log('handleTaskAction edit-time', task, args);
editTaskSchedulesTime(task.id, { execution_time: args[0] }).then((res) => {
if (res.code === 200) {
message.success(res.message);
@ -496,17 +531,19 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
}
});
break;
case 'goto-detail':
router.push(`/media-account/management-detail/${task.id}`);
break;
case 'ai-create':
const res = await generateContent(task.id);
if (res.code === 200) {
message.success(res.message);
}
break;
case 'edit-task':
console.log('edit-task', args[0], typeof args[0]);
const accountInfo = {
id: args[0].id,
name: args[0].name,
@ -515,23 +552,33 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
const selectedDate = task.execution_time;
const date = new Date(selectedDate);
// 显示抽屉
drawerPopupRef.value.showDrawer(accountInfo, date);
// 等待抽屉打开后再填充数据
drawerPopupRef.value?.showDrawer(accountInfo, date);
nextTick(() => {
// 将任务信息回填到draw-popup组件
drawerPopupRef.value.fillTaskData(task);
drawerPopupRef.value?.fillTaskData(task);
});
break;
}
};
// 创建任务
const handleAddTask = () => {
drawerPopupRef.value?.showDrawer();
};
const handleCreateTask = async (value: any) => {
const res = await createTask(value);
if (res && res.code === 200) {
message.success('创建成功');
handleSearch();
}
};
// 确认删除
const handleDeleteConfirm = () => {
if (currentTask.value) {
delTaskSchedules(currentTask.value.id).then(() => {
showModal.value = false;
message.success('删除成功');
handleSearch();
});
}
@ -539,7 +586,6 @@ const handleDeleteConfirm = () => {
// 添加账号
const handleAddAccount = () => {
// 跳转到添加账号页面的逻辑
router.push('/media-account/add');
};
@ -586,7 +632,6 @@ const handlePageSizeChange = (current: number, size: number) => {
// 初始化
onMounted(() => {
// 确保在初始化时设置表格列和执行搜索
setTableColumns();
handleSearch();
getOperators();
@ -599,6 +644,8 @@ onMounted(() => {
display: flex;
flex-direction: column;
height: 100%;
min-height: 42px;
cursor: pointer;
}
.task-item {
@ -613,7 +660,15 @@ onMounted(() => {
.task-more {
display: flex;
flex-direction: column;
}
.task-more-indicator {
color: #8f959f;
height: 19px;
margin-left: 4px;
border-radius: 2px;
cursor: pointer;
font-size: 12px;
}
.no-task {
@ -621,6 +676,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* 周末列样式 */
@ -629,52 +685,59 @@ onMounted(() => {
}
/* 今日列样式 */
:deep(th.today-column),
:deep(td.today-column) {
:deep(.today-column) {
background-color: #6d4cfe !important;
}
:deep(th.today-column) .arco-table-th-item,
:deep(th.today-column) .arco-table-th-item-title {
color: #6d4cfe !important;
background-color: white !important;
font-weight: bold;
}
:deep(th.today-column) .arco-table-th-item-title {
color: #6d4cfe !important;
}
/* 只对 td 单元格应用样式，避免影响表头 */
:deep(td .ant-table-cell) {
padding: 0px !important;
display: flex;
flex-direction: column;
align-items: start;
min-height: 42px;
}
:deep(td .ant-table-cell:first-child) {
align-items: center;
justify-content: center;
}
:deep(td.today-column) .ant-table-cell-wrap {
:deep(.today-column .ant-table-cell) {
color: white !important;
}
/* 抽屉左侧圆角样式 */
:deep(.rounded-left .ant-drawer-content) {
border-top-left-radius: 8px !important;
border-bottom-left-radius: 8px !important;
:deep(.today-column .ant-table-cell .task-item) {
color: white !important;
}
/* 任务弹出框样式 */
:deep(.task-popup-content) {
max-height: 300px;
overflow-y: auto;
/* 添加表格分割线和固定行高 */
:deep(.ant-table) {
border: 1px solid #f0f0f0;
}
:deep(.ant-table-container) {
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
:deep(.ant-table-thead > tr > th) {
border-right: 1px solid #f0f0f0 !important;
background-color: #fafafa;
font-weight: 600;
height: 42px;
padding: 8px 12px;
}
:deep(.ant-table-tbody > tr > td) {
border-right: 1px solid #f0f0f0 !important;
height: 42px;
padding: 8px 12px;
vertical-align: top;
}
/* 第一列垂直居中 */
:deep(.ant-table-tbody > tr > td:first-child) {
vertical-align: middle !important;
}
/* 移除最后一列的右边框 */
:deep(.ant-table-thead > tr > th:last-child),
:deep(.ant-table-tbody > tr > td:last-child) {
border-right: none !important;
}
.task-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 42px;
cursor: pointer;
}
/* 分页样式 */
.pagination-box {
display: flex;
@ -684,17 +747,11 @@ onMounted(() => {
align-items: center;
}
/* 下拉框样式优化 */
:deep(.ant-dropdown-open .anticon-down) {
transform: rotate(180deg);
transition: transform 0.2s ease;
}
.more-content {
border-radius: 8px;
background: #fff;
/* Shadow 2 */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow-y: auto;
}
</style>