点击弹窗

src/views/property-marketing/assignment-management/index.vue

@@ -66,7 +66,7 @@
             margin-top: 8px;
           "
         >
-          <a-button size="small" class="mr-12px">
+          <a-button size="small" class="mr-12px color-scheme-btn" :bordered="false">
             <template #icon>
               <icon-info-circle-fill size="16" class="color-#55585F" />
             </template>
@@ -162,36 +162,136 @@
         <!-- 动态日期列渲染 -->
         <template #dateCell="{ record, column }">
           <div v-if="record[column.dataIndex] && record[column.dataIndex].length > 0" class="task-container">
-            <div v-if="record[column.dataIndex].length >= 3" class="task-more" @click="handleMore(record, column)">
+            <div v-if="record[column.dataIndex].length >= 3" class="task-more">
               <div
                 :key="record[column.dataIndex][0].id"
                 class="task-item size-12px"
                 :title="record[column.dataIndex][0].name || '-'"
               >
-                <div class="size-12px color-#211F24 mr-4px">
+                <a-trigger trigger="click" position="br">
-                  {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
+                  <div class="task-item size-12px">
-                </div>
+                    <div class="size-12px color-#211F24 mr-4px">
-                <div :style="{ color: getTaskColor(record[column.dataIndex][0].type) }">
+                      {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
-                  {{ formatTaskName(record[column.dataIndex][0].name) }}{{ record[column.dataIndex][0].type }}
+                    </div>
-                </div>
+                    <div
-              </div>
+                      class="size-12px"
-              <div class="size-12px color-#8f959f" style="padding: 0px 8px">
+                      :style="{
-                还有{{ record[column.dataIndex].length - 1 }}项
+                        color: getTaskColor(
+                          record[column.dataIndex][0].type,
+                          record[column.dataIndex][0].execution_time,
+                        ),
+                      }"
+                      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+                    >
+                      {{ formatTaskName(record[column.dataIndex][0].name) }}
+                    </div>
+                  </div>
+                  <template #content>
+                    <div class="flex flex-col items-start cell-detail">
+                      <div class="flex items-center">
+                        <img
+                          :src="getPlatformIcon(record.platform)"
+                          style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
+                        />
+                        {{ record.name || '-' }}
+                      </div>
+                      <div class="size-12px color-#939499 mt-2px">
+                        {{ timestampToTime1(record[column.dataIndex][0].execution_time) }}
+                      </div>
+                      <div class="size-14px color-#211F24 mt-12px">
+                        {{ record[column.dataIndex][0].name || '未命名' }}
+                      </div>
+                      <div class="flex items-center mt-12px">
+                        <div class="opt-btn">修改发布时间</div>
+                        <div class="opt-btn" style="margin-right: 0px">删除</div>
+                      </div>
+                    </div>
+                  </template>
+                </a-trigger>
               </div>
+              <a-trigger trigger="click" position="br">
+                <div class="size-12px color-#8f959f" style="padding: 0px 8px">
+                  还有{{ record[column.dataIndex].length - 1 }}项
+                </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 v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
+                      <a-trigger trigger="click" align-point>
+                        <div class="flex items-start mb-8px">
+                          <div class="size-12px color-#211F24 mr-4px">
+                            {{ timestampToTime(task.execution_time) }}
+                          </div>
+                          <div class="size-12px" :style="{ color: getTaskColor(task.type, task.execution_time) }">
+                            {{ task.name || '未命名' }}
+                          </div>
+                        </div>
+                        <template #content>
+                          <div class="flex flex-col items-start cell-detail">
+                            <div class="flex items-center">
+                              <img
+                                :src="getPlatformIcon(record.platform)"
+                                style="
+                                  border-radius: 8px;
+                                  width: 16px;
+                                  height: 16px;
+                                  margin-right: 8px;
+                                  font-size: 14px;
+                                "
+                              />
+                              {{ record.name || '-' }}
+                            </div>
+                            <div class="size-12px color-#939499 mt-2px">
+                              {{ timestampToTime1(task.execution_time) }}
+                            </div>
+                            <div class="size-14px color-#211F24 mt-12px">{{ task.name || '未命名' }}</div>
+                            <div class="flex items-center mt-12px">
+                              <div class="opt-btn">修改发布时间</div>
+                              <div class="opt-btn" style="margin-right: 0px">删除</div>
+                            </div>
+                          </div>
+                        </template>
+                      </a-trigger>
+                    </div>
+                  </div>
+                </template>
+              </a-trigger>
             </div>
-            <div
+            <div v-else v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
-              v-else
+              <a-trigger trigger="click" align-point>
-              v-for="task in record[column.dataIndex]"
+                <div class="task-item">
-              :key="task.id"
+                  <div class="size-12px color-#211F24 mr-4px">
-              class="task-item"
+                    {{ timestampToTime(task.execution_time) }}
-              :title="task.name || '-'"
+                  </div>
-            >
+                  <div
-              <div class="size-12px color-#211F24 mr-4px">
+                    :style="{ color: getTaskColor(task.type, task.execution_time) }"
-                {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
+                    style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-              </div>
+                  >
-              <div :style="{ color: getTaskColor(task.type) }">
+                    {{ formatTaskName(task.name) }}
-                {{ formatTaskName(record[column.dataIndex][0].name) }}{{ record[column.dataIndex][0].type }}
+                  </div>
-              </div>
+                </div>
+                <template #content>
+                  <div class="flex flex-col items-start cell-detail">
+                    <div class="flex items-center">
+                      <img
+                        :src="getPlatformIcon(record.platform)"
+                        style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
+                      />
+                      {{ record.name || '-' }}
+                    </div>
+                    <div class="size-12px color-#939499 mt-2px">
+                      {{ timestampToTime1(task.execution_time) }}
+                    </div>
+                    <div class="size-14px color-#211F24 mt-12px">{{ task.name || '未命名' }}</div>
+                    <div class="flex items-center mt-12px">
+                      <div class="opt-btn">修改发布时间</div>
+                      <div class="opt-btn" style="margin-right: 0px">删除</div>
+                    </div>
+                  </div>
+                </template>
+              </a-trigger>
             </div>
           </div>
           <div v-else class="no-task"></div>
@@ -217,6 +317,10 @@ import icon7 from '@/assets/img/platform/icon-ks.png';
 import icon8 from '@/assets/img/platform/icon-bilibili.png';
 import DateUtils from '@/utils/DateUtils';
 
+const visible = ref(false);
+const modalVisible = ref(false);
+const selectedTask = ref<any>(null);
+
 const choseType = ref('周');
 const dayModel = ref(new Date());
 const weekModel = ref(new Date());
@@ -260,6 +364,16 @@ const handleMore = (record: any, column: any) => {
   console.log('data', record[column.dataIndex]);
 };
 
+const handleCell = (record: any, column: any, task: any) => {
+  selectedTask.value = {
+    ...task,
+    platform: record.platform,
+    accountName: record.name,
+  };
+  modalVisible.value = true;
+  console.log('data', record[column.dataIndex]);
+};
+
 // 计算当前日期范围内的所有日期，统一返回 number 数组
 const currentDateHeaders = computed(() => {
   if (choseType.value === '周') {
@@ -292,8 +406,15 @@ const getPlatformIcon = (platform: number) => {
 };
 
 // 获取任务颜色
-const getTaskColor = (taskType: number) => {
+const getTaskColor = (taskType: number, executionTime: number) => {
-  // 根据API文档，type: 0=选题，1=内容稿件
+  // 判断任务是否已过期
+  const isExpired = executionTime * 1000 < Date.now();
+  // 如果已过期，根据任务类型返回对应颜色
+  if (isExpired) {
+    return taskType === 0 ? '#A794FE' : '#FFCF66';
+  }
+
+  // 未过期，根据API文档，type: 0=选题，1=内容稿件
   return taskType === 0 ? '#6d4cfe' : '#ffae00';
 };
 
@@ -309,6 +430,18 @@ const timestampToDayNumber = (timestamp: number) => {
   return date.getDate(); // 返回数字类型的日期
 };
 
+// 时间戳转时间格式 (MM月DD HH:MM)
+const timestampToTime1 = (timestamp: number): string => {
+  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
+  // 获取月份和日期（注意：月份从0开始，需要+1）
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+
+  return `${month}月${day} ${hours}:${minutes}`;
+};
+
 // 时间戳转时间格式 (HH:MM)
 const timestampToTime = (timestamp: number): string => {
   const date = new Date(timestamp * 1000); // 假设时间戳是秒级
@@ -578,7 +711,6 @@ const getOperators = async () => {
         value: op.id,
         name: op.name,
       }));
-      console.log('operatorsData:', operators.value);
     }
   } catch (error) {
     console.error('获取运营人员数据失败:', error);
@@ -655,4 +787,30 @@ onMounted(() => {
 :deep(.weekend-column) {
   background-color: #fbfaff !important;
 }
+
+/* 颜色示意按钮样式 */
+:deep(.color-scheme-btn) {
+  border: none !important;
+  background: none !important;
+  box-shadow: none !important;
+}
+
+.cell-detail {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: #00000010 0px 2px 8px;
+  padding: 8px 16px;
+  margin-top: 8px;
+}
+.opt-btn {
+  font-size: 12px;
+  width: 138px;
+  height: 28px;
+  background-color: #f2f3f5;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 4px;
+  margin-right: 12px;
+}
 </style>