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

<template>
  <a-trigger trigger="click" position="br" @click.stop>
    <div class="task-item">
      <div class="color-indicator" :style="{ background: getTaskColor() }"></div>
      <div class="task-name" :title="task?.name || '-'">{{ task?.name || 'AI生成内容' }}</div>
    </div>
    <template #content>
      <div class="flex flex-col items-start popup-content" @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 title-container">
              <img
                :src="getPlatformIcon(record.platform)"
                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
              />
              <div class="task-title" :title="record.name || 'AI生成内容'">{{ record.name || 'AI生成内容' }}</div>
            </div>
            <div
              class="status-tag"
              :style="{
                color: getTaskColor(),
                backgroundColor: getTaskColor() + '50',
              }"
            >
              {{ getTaskStatusText(task.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 task-description" :title="task.name || 'AI生成内容'">
          {{ task.name || 'AI生成内容' }}
        </div>
        <div v-if="task.ai_generate_status == 0" class="AILoding">
          <ASpin />
          <div style="color: #9a56ba">内容生成中...</div>
          <div style="color: #9a56ba">完成后将自动展示，您可先返回其他操作</div>
        </div>
        <div class="flex items-center mt-12px w-full h-1px bg-#E6E6E8"></div>
        <div class="flex items-center mt-12px mb-16px action-buttons">
          <div class="flex items-center mr-12px" @click.stop="handleDelete">
            <icon-delete style="font-size: 20px; margin-left: 16px" />
          </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 { Spin as ASpin } from 'ant-design-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,
});

onMounted(() => {
  console.log('props.task', props.task, props.record);
});

const isPanelVisible = ref(false);

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) => {
  console.log('任务状态:', 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;
  min-width: 0;

  &:last-child {
    margin-bottom: 0;
  }
}

.color-indicator {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.task-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  width: 0;
}

.popup-content {
  width: 388px;
  background-color: #fff;
  box-shadow: #e6e6e8 0px 2px 8px;
  border-radius: 4px;
}

.title-container {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.task-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  width: 365px;
  margin-top: -10px;
  margin-bottom: 12px;
  padding: 0 16px;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 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;
}

.AILoding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 356px;
  height: 108px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fbf9ff 0%, #f3fafe 100%);
  color: linear-gradient(90deg, #9a56ba 0%, #576fd1 100%);
  margin-left: 16px;
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  leading-trim: NONE;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: center;
}
</style>