修改task
This commit is contained in:
lq
@ -221,9 +221,10 @@ const emitChange = () => {
|
||||
monthModel: monthModel.value,
|
||||
dateRange: getDateRange(), // 父组件直接可用的日期范围
|
||||
};
|
||||
emit('update:modelValue', result);
|
||||
// 只有在初始化完成后才触发 date-change 事件
|
||||
|
||||
// 只有在初始化完成后才触发 update:modelValue 和 date-change 事件
|
||||
if (!isInitializing) {
|
||||
emit('update:modelValue', result);
|
||||
console.log('emitChange', result);
|
||||
emit('date-change', result); // 父组件监听此事件做后续处理
|
||||
}
|
||||
@ -233,26 +234,22 @@ const emitChange = () => {
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
if (newVal && !isInitializing) {
|
||||
// 只有在初始化完成后才响应外部props变化
|
||||
choseType.value = newVal.choseType;
|
||||
dayModel.value = newVal.dayModel || new Date();
|
||||
weekModel.value = newVal.weekModel || new Date();
|
||||
monthModel.value = newVal.monthModel || new Date();
|
||||
// 只有在初始化完成后才触发 emitChange
|
||||
if (!isInitializing) {
|
||||
emitChange();
|
||||
}
|
||||
emitChange();
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 初始化时触发一次事件
|
||||
emitChange();
|
||||
|
||||
// 初始化完成，设置标志位
|
||||
// 初始化完成，设置标志位，并在之后触发一次事件
|
||||
setTimeout(() => {
|
||||
isInitializing = false;
|
||||
emitChange();
|
||||
}, 0);
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,35 +1,126 @@
|
||||
<template>
|
||||
<a-trigger trigger="click" position="br">
|
||||
<div class="task-item" @click="handleTask(task, record)">
|
||||
<a-trigger trigger="click" position="bl">
|
||||
<div class="task-item">
|
||||
<div class="w-4px h-18px rounded-2px" :style="{ background: getTaskColor() }"></div>
|
||||
<div>{{ task?.name || '-' }}</div>
|
||||
</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>
|
||||
style="background-color: #fff; box-shadow: #e6e6e8 0px 2px 8px; border-radius: 4px"
|
||||
@click="gotoDetail"
|
||||
>
|
||||
<div class="flex flex-col items-start p-16px w-full" @click="gotoDetail">
|
||||
<div class="flex justify-between w-full items-center">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
|
||||
/>
|
||||
<div style="font-size: 16px; font-style: medium; font-weight: 500">{{ record.name || '-' }}</div>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
color: getTaskColor(),
|
||||
backgroundColor: getTaskColor() + '50',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
}"
|
||||
>
|
||||
{{ getTaskStatusText(record.status) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-12px color-#939499 mt-4px h-22px" @click="gotoDetail">
|
||||
{{ timestampToTime1(task.execution_time) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-size-14px color-#211F24 color-#211F24 p-12px" style="margin-top: -10px">
|
||||
{{ task.name || '未命名' }}
|
||||
</div>
|
||||
<div class="flex items-center mt-12px w-full h-1px bg-#E6E6E8"></div>
|
||||
<div class="flex items-center mt-12px mb-16px">
|
||||
<div class="flex items-center mr-12px" @click.stop="handleDelete">
|
||||
<icon-delete style="font-size: 20px; margin: 0px 22px" />
|
||||
</div>
|
||||
<button class="opt-btn" @click.stop="handleTimeChange">修改发布时间</button>
|
||||
<button class="opt-btn ml-12px opt-right mr-16px" @click.stop="handleAICreate">AI立即生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { DeleteOutlined as IconDelete } from '@ant-design/icons-vue';
|
||||
import iconDy from '@/assets/img/platform/icon-dy.png';
|
||||
import iconXhs from '@/assets/img/platform/icon-xhs.png';
|
||||
import iconBilibili from '@/assets/img/platform/icon-bilibili.png';
|
||||
import iconKs from '@/assets/img/platform/icon-ks.png';
|
||||
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';
|
||||
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
task: Object,
|
||||
record: Object,
|
||||
});
|
||||
// 时间戳转时间格式 (HH:MM)
|
||||
const timestampToTime = (timestamp: number): string => {
|
||||
const date = new Date(timestamp * 1000); // 假设时间戳是秒级
|
||||
// 获取小时和分钟
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
return `${hours}:${minutes}`;
|
||||
const isPanelVisible = ref(false);
|
||||
const toggleTimePanel = () => {
|
||||
isPanelVisible.value = !isPanelVisible.value;
|
||||
};
|
||||
const handleVisibleChange = (visible: boolean) => {
|
||||
isPanelVisible.value = visible;
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('handle-task', 'delete', props.task, props.record);
|
||||
};
|
||||
const gotoDetail = () => {
|
||||
console.log('跳转详情');
|
||||
emit('handle-task', 'goto-detail', props.task, props.record);
|
||||
};
|
||||
const handleTimeChange = (time: string) => {
|
||||
if (time) {
|
||||
emit('handle-task', 'edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
|
||||
}
|
||||
};
|
||||
const handleAICreate = (task, record) => {};
|
||||
|
||||
const timestampToTime1 = (): string => {
|
||||
const timestamp = Date.now();
|
||||
const date = new Date(timestamp);
|
||||
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
|
||||
const day = String(date.getDate()).padStart(2, '0'); // 补零
|
||||
|
||||
return `${month}月${day}日`;
|
||||
};
|
||||
|
||||
const emit = defineEmits(['filter-change', 'handle-task']);
|
||||
const handleTask = (task, record) => {};
|
||||
|
||||
// 平台配置
|
||||
const platformConfig = {
|
||||
icons: {
|
||||
0: iconDy,
|
||||
1: iconXhs,
|
||||
2: iconBilibili,
|
||||
3: iconKs,
|
||||
4: iconSph,
|
||||
5: iconWb,
|
||||
6: iconGzh,
|
||||
},
|
||||
};
|
||||
|
||||
// 获取平台图标
|
||||
const getPlatformIcon = (platform: number) => platformConfig.icons[platform] || iconWarn;
|
||||
|
||||
// 根据任务类型获取颜色
|
||||
const getTaskColor = () => {
|
||||
if (!props.task) return '#000';
|
||||
@ -48,6 +139,21 @@ const getTaskColor = () => {
|
||||
return props.task.color || '#939499';
|
||||
}
|
||||
};
|
||||
|
||||
const getTaskStatusText = (status) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '待生成';
|
||||
case 1:
|
||||
return '待发布';
|
||||
case 2:
|
||||
return '已发布';
|
||||
case 3:
|
||||
return '发布失败';
|
||||
default:
|
||||
return '未知状态';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -63,4 +169,18 @@ const getTaskColor = () => {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-btn {
|
||||
width: 154px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
background: #f2f3f5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.opt-right {
|
||||
background: linear-gradient(90deg, #fbf9ff 0%, #f3fafe 100%);
|
||||
color: #9a56ba;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user