lingji-work-fe/src/views/property-marketing/assignment-management/components/task-item.vue

<template>
  <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; 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,
});

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 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';

  // 根据colorTip.vue中的颜色定义设置不同状态的颜色
  switch (props.task.status) {
    case 0: // 待生成
      return '#ffae00';
    case 1: // 待发布
      return '#6d4cfe';
    case 2: // 已发布
      return '#939499';
    case 3: // 发布失败
      return '#f64b31';
    default:
      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>
.task-item {
  width: 100%;
  font-size: 12px;
  height: 19px;
  display: flex;
  align-items: center;
  gap: 4px;

  &:last-child {
    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>