修改样式

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

@@ -1,7 +1,8 @@
 <template>
-  <a-trigger trigger="click" position="br" @click.stop>
+  <a-trigger trigger="click" position="br" @click.stop @popup-visible-change="onPopupVisibleChange">
     <div class="task-item">
       <div class="color-indicator" :style="{ background: getTaskColor() }"></div>
+      <div>{{ timestampToTime(task.execution_time) }}</div>
       <div class="task-name" :title="task?.name || '-'">{{ task?.name || 'AI生成内容' }}</div>
     </div>
     <template #content>
@@ -34,11 +35,37 @@
         <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">
+        <div v-if="task.ai_generate_status == 1" class="AILoding">
           <ASpin />
           <div style="color: #9a56ba">内容生成中...</div>
           <div style="color: #9a56ba">完成后将自动展示，您可先返回其他操作</div>
         </div>
+
+        <div v-else-if="task.ai_generate_status == 0 && taskDetail" class="w-full pl-16px">
+          <div
+            v-for="item in choseTextArray"
+            :key="item.id"
+            class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
+          >
+            {{ item }}
+          </div>
+          <div class="flex items-center w-full">
+            <img
+              v-for="item in choseImgArray"
+              :key="item.id"
+              :src="item.cover || item.url"
+              class="w-88 h-88 mr-8px border-rounded-8px"
+            />
+          </div>
+          <div class="flex items-center w-full">
+            <video
+              v-for="item in choseVideoArray"
+              :key="item.id"
+              :src="item.cover || item.url"
+              class="w-44 h-44 mr-8px border-rounded-8px object-fit-contain"
+            />
+          </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">
@@ -53,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, watch } 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';
@@ -63,18 +90,47 @@ 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';
-
+import { getTaskSchedulesDetail } from '@/api/all/assignment-management';
 // 定义props和emit
 const props = defineProps({
   task: Object,
   record: Object,
 });
 
-onMounted(() => {
-  console.log('props.task', props.task, props.record);
-});
+const taskDetail = ref(null);
+const choseImgArray = ref([]);
+const choseTextArray = ref([]);
+const choseVideoArray = ref([]);
+const getTaskDetail = async () => {
+  if (!props.task || !props.task.id) return;
 
-const isPanelVisible = ref(false);
+  try {
+    const res = await getTaskSchedulesDetail(props.task.id);
+    if (res && res.data) {
+      if (res.data.type == 1) {
+        taskDetail.value = res.data.work;
+        choseImgArray.value = res.data.work.files.filter((item) => [0].includes(item.type));
+        choseTextArray.value = res.data.work.files.filter((item) => [2].includes(item.type));
+        choseVideoArray.value = res.data.work.files.filter((item) => [1].includes(item.type));
+      } else {
+        taskDetail.value = res.data.raw_materials;
+        console.log('任务详情:', res.data, taskDetail.value);
+        choseImgArray.value = taskDetail.value.filter((item) => [0].includes(item.type));
+        choseTextArray.value = taskDetail.value.filter((item) => [2].includes(item.type));
+        choseVideoArray.value = taskDetail.value.filter((item) => [1].includes(item.type));
+        console.log('任务详情:', choseImgArray.value, choseTextArray.value);
+      }
+    }
+  } catch (error) {
+    console.error('获取任务详情失败:', error);
+  }
+};
+
+const onPopupVisibleChange = (visible) => {
+  if (visible) {
+    getTaskDetail();
+  }
+};
 
 const handleDelete = () => {
   emit('handle-task', 'delete', props.task, props.record);
@@ -84,12 +140,26 @@ const gotoDetail = () => {
   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');
-  }
+  // if (time) {
+  //   emit('handle-task', 'edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
+  // }
 };
-const handleAICreate = (task, record) => {};
+const handleAICreate = () => {
+  emit('handle-task', 'ai-create', props.task, props.record);
+};
+const timestampToTime = (timestamp: number): string => {
+  // 如果没有传入时间戳，则返回空字符串
+  if (!timestamp) return '';
 
+  // 将时间戳转换为毫秒（如果时间戳是秒单位的话）
+  const date = new Date(timestamp * 1000);
+
+  // 格式化为 HH:mm 格式
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${hours}:${minutes}`;
+};
 const timestampToTime1 = (): string => {
   const timestamp = Date.now();
   const date = new Date(timestamp);