From 614c654ca266df52c11ce6a04e4a84c406a23c2d Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Fri, 19 Sep 2025 17:58:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9task?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/date-selector.vue              |  19 +--
 .../components/task-item.vue                  | 144 ++++++++++++++++--
 2 files changed, 140 insertions(+), 23 deletions(-)

diff --git a/src/views/property-marketing/assignment-management/components/date-selector.vue b/src/views/property-marketing/assignment-management/components/date-selector.vue
index e4bf860..9ad0dbb 100644
--- a/src/views/property-marketing/assignment-management/components/date-selector.vue
+++ b/src/views/property-marketing/assignment-management/components/date-selector.vue
@@ -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>
 
diff --git a/src/views/property-marketing/assignment-management/components/task-item.vue b/src/views/property-marketing/assignment-management/components/task-item.vue
index 4920b02..fef4203 100644
--- a/src/views/property-marketing/assignment-management/components/task-item.vue
+++ b/src/views/property-marketing/assignment-management/components/task-item.vue
@@ -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>