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

点击弹窗

Browse Source
This commit is contained in:
lq
2025-08-30 15:54:54 +08:00
parent e142b373df
commit bdb347d771
1 changed files with 185 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,7 +66,7 @@
margin-top: 8px;
"
>
<a-button size="small" class="mr-12px">
<a-button size="small" class="mr-12px color-scheme-btn" :bordered="false">
<template #icon>
<icon-info-circle-fill size="16" class="color-#55585F" />
</template>
@ -162,36 +162,136 @@
<!-- 动态日期列渲染 -->
<template #dateCell="{ record, column }">
<div v-if="record[column.dataIndex] && record[column.dataIndex].length > 0" class="task-container">
<div v-if="record[column.dataIndex].length >= 3" class="task-more" @click="handleMore(record, column)">
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
<div
:key="record[column.dataIndex][0].id"
class="task-item size-12px"
:title="record[column.dataIndex][0].name || '-'"
>
<div class="size-12px color-#211F24 mr-4px">
{{ timestampToTime(record[column.dataIndex][0].execution_time) }}
</div>
<div :style="{ color: getTaskColor(record[column.dataIndex][0].type) }">
{{ formatTaskName(record[column.dataIndex][0].name) }}{{ record[column.dataIndex][0].type }}
</div>
</div>
<div class="size-12px color-#8f959f" style="padding: 0px 8px">
还有{{ record[column.dataIndex].length - 1 }}项
<a-trigger trigger="click" position="br">
<div class="task-item size-12px">
<div class="size-12px color-#211F24 mr-4px">
{{ timestampToTime(record[column.dataIndex][0].execution_time) }}
</div>
<div
class="size-12px"
:style="{
color: getTaskColor(
record[column.dataIndex][0].type,
record[column.dataIndex][0].execution_time,
),
}"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>
{{ formatTaskName(record[column.dataIndex][0].name) }}
</div>
</div>
<template #content>
<div class="flex flex-col items-start cell-detail">
<div class="flex items-center">
<img
:src="getPlatformIcon(record.platform)"
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
/>
{{ record.name || '-' }}
</div>
<div class="size-12px color-#939499 mt-2px">
{{ timestampToTime1(record[column.dataIndex][0].execution_time) }}
</div>
<div class="size-14px color-#211F24 mt-12px">
{{ record[column.dataIndex][0].name || '未命名' }}
</div>
<div class="flex items-center mt-12px">
<div class="opt-btn">修改发布时间</div>
<div class="opt-btn" style="margin-right: 0px">删除</div>
</div>
</div>
</template>
</a-trigger>
</div>
<a-trigger trigger="click" position="br">
<div class="size-12px color-#8f959f" style="padding: 0px 8px">
还有{{ record[column.dataIndex].length - 1 }}项
</div>
<template #content>
<div
class="flex flex-col items-start"
style="background-color: #fff; padding: 12px; box-shadow: #00000010 0px 2px 8px; border-radius: 4px"
>
<div v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
<a-trigger trigger="click" align-point>
<div class="flex items-start mb-8px">
<div class="size-12px color-#211F24 mr-4px">
{{ timestampToTime(task.execution_time) }}
</div>
<div class="size-12px" :style="{ color: getTaskColor(task.type, task.execution_time) }">
{{ task.name || '未命名' }}
</div>
</div>
<template #content>
<div class="flex flex-col items-start cell-detail">
<div class="flex items-center">
<img
:src="getPlatformIcon(record.platform)"
style="
border-radius: 8px;
width: 16px;
height: 16px;
margin-right: 8px;
font-size: 14px;
"
/>
{{ record.name || '-' }}
</div>
<div class="size-12px color-#939499 mt-2px">
{{ timestampToTime1(task.execution_time) }}
</div>
<div class="size-14px color-#211F24 mt-12px">{{ task.name || '未命名' }}</div>
<div class="flex items-center mt-12px">
<div class="opt-btn">修改发布时间</div>
<div class="opt-btn" style="margin-right: 0px">删除</div>
</div>
</div>
</template>
</a-trigger>
</div>
</div>
</template>
</a-trigger>
</div>
<div
v-else
v-for="task in record[column.dataIndex]"
:key="task.id"
class="task-item"
:title="task.name || '-'"
>
<div class="size-12px color-#211F24 mr-4px">
{{ timestampToTime(record[column.dataIndex][0].execution_time) }}
</div>
<div :style="{ color: getTaskColor(task.type) }">
{{ formatTaskName(record[column.dataIndex][0].name) }}{{ record[column.dataIndex][0].type }}
</div>
<div v-else v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
<a-trigger trigger="click" align-point>
<div class="task-item">
<div class="size-12px color-#211F24 mr-4px">
{{ timestampToTime(task.execution_time) }}
</div>
<div
:style="{ color: getTaskColor(task.type, task.execution_time) }"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>
{{ formatTaskName(task.name) }}
</div>
</div>
<template #content>
<div class="flex flex-col items-start cell-detail">
<div class="flex items-center">
<img
:src="getPlatformIcon(record.platform)"
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
/>
{{ record.name || '-' }}
</div>
<div class="size-12px color-#939499 mt-2px">
{{ timestampToTime1(task.execution_time) }}
</div>
<div class="size-14px color-#211F24 mt-12px">{{ task.name || '未命名' }}</div>
<div class="flex items-center mt-12px">
<div class="opt-btn">修改发布时间</div>
<div class="opt-btn" style="margin-right: 0px">删除</div>
</div>
</div>
</template>
</a-trigger>
</div>
</div>
<div v-else class="no-task"></div>
@ -217,6 +317,10 @@ import icon7 from '@/assets/img/platform/icon-ks.png';
import icon8 from '@/assets/img/platform/icon-bilibili.png';
import DateUtils from '@/utils/DateUtils';
const visible = ref(false);
const modalVisible = ref(false);
const selectedTask = ref<any>(null);
const choseType = ref('周');
const dayModel = ref(new Date());
const weekModel = ref(new Date());
@ -260,6 +364,16 @@ const handleMore = (record: any, column: any) => {
console.log('data', record[column.dataIndex]);
};
const handleCell = (record: any, column: any, task: any) => {
selectedTask.value = {
...task,
platform: record.platform,
accountName: record.name,
};
modalVisible.value = true;
console.log('data', record[column.dataIndex]);
};
// 计算当前日期范围内的所有日期，统一返回 number 数组
const currentDateHeaders = computed(() => {
if (choseType.value === '周') {
@ -292,8 +406,15 @@ const getPlatformIcon = (platform: number) => {
};
// 获取任务颜色
const getTaskColor = (taskType: number) => {
// 根据API文档，type: 0=选题，1=内容稿件
const getTaskColor = (taskType: number, executionTime: number) => {
// 判断任务是否已过期
const isExpired = executionTime * 1000 < Date.now();
// 如果已过期，根据任务类型返回对应颜色
if (isExpired) {
return taskType === 0 ? '#A794FE' : '#FFCF66';
}
// 未过期，根据API文档，type: 0=选题，1=内容稿件
return taskType === 0 ? '#6d4cfe' : '#ffae00';
};
@ -309,6 +430,18 @@ const timestampToDayNumber = (timestamp: number) => {
return date.getDate(); // 返回数字类型的日期
};
// 时间戳转时间格式 (MM月DD HH:MM)
const timestampToTime1 = (timestamp: number): string => {
const date = new Date(timestamp * 1000); // 假设时间戳是秒级
// 获取月份和日期（注意：月份从0开始，需要+1）
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${month}月${day} ${hours}:${minutes}`;
};
// 时间戳转时间格式 (HH:MM)
const timestampToTime = (timestamp: number): string => {
const date = new Date(timestamp * 1000); // 假设时间戳是秒级
@ -578,7 +711,6 @@ const getOperators = async () => {
value: op.id,
name: op.name,
}));
console.log('operatorsData:', operators.value);
}
} catch (error) {
console.error('获取运营人员数据失败:', error);
@ -655,4 +787,30 @@ onMounted(() => {
:deep(.weekend-column) {
background-color: #fbfaff !important;
}
/* 颜色示意按钮样式 */
:deep(.color-scheme-btn) {
border: none !important;
background: none !important;
box-shadow: none !important;
}
.cell-detail {
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: 4px;
box-shadow: #00000010 0px 2px 8px;
padding: 8px 16px;
margin-top: 8px;
}
.opt-btn {
font-size: 12px;
width: 138px;
height: 28px;
background-color: #f2f3f5;
text-align: center;
line-height: 28px;
border-radius: 4px;
margin-right: 12px;
}
</style>