任务管理

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

@@ -117,6 +117,7 @@
                     :options="operators"
                     v-model="query.operator_id"
                     @change="handleSearch"
+                    class="!w-200px"
                   />
                 </a-space>
               </div>
@@ -128,6 +129,7 @@
                     :options="platformOptions"
                     v-model="query.platform"
                     @change="handleSearch"
+                    class="!w-200px"
                   />
                 </a-space>
               </div>
@@ -215,7 +217,7 @@ import icon7 from '@/assets/img/platform/icon-ks.png';
 import icon8 from '@/assets/img/platform/icon-bilibili.png';
 import DateUtils from '@/utils/DateUtils';
 
-const choseType = ref('日');
+const choseType = ref('周');
 const dayModel = ref(new Date());
 const weekModel = ref(new Date());
 const monthModel = ref(new Date());
@@ -251,6 +253,7 @@ const query = reactive({
   execution_time: [] as string[],
 });
 
+// 显示所有的
 const handleMore = (record: any, column: any) => {
   console.log('record', record);
   console.log('column', column);
@@ -290,7 +293,6 @@ const getPlatformIcon = (platform: number) => {
 
 // 获取任务颜色
 const getTaskColor = (taskType: number) => {
-  console.log('taskType', taskType);
   // 根据API文档，type: 0=选题，1=内容稿件
   return taskType === 0 ? '#6d4cfe' : '#ffae00';
 };
@@ -339,19 +341,14 @@ const processTableData = (apiData: any[]) => {
     if (account.task_schedules && account.task_schedules.length > 0) {
       account.task_schedules.forEach((task: any) => {
         const taskDay = timestampToDayNumber(task.execution_time);
-        console.log('taskDay', taskDay, typeof taskDay);
-        console.log('currentDateHeaders', currentDateHeaders.value);
-        console.log('rowData', currentDateHeaders.value.includes(taskDay));
         // 如果这个日期在当前表头中，则添加到对应列
         if (currentDateHeaders.value.includes(taskDay)) {
-          console.log('taskDay', task);
           rowData[taskDay].push({
             id: task.id,
             name: task.name,
             type: task.type,
             execution_time: task.execution_time,
           });
-          console.log('taskDay', rowData[taskDay]);
         }
       });
     }
@@ -393,7 +390,8 @@ const setTableSpecific = () => {
       title: '账号与发布平台',
       slotName: 'name',
       width: 150,
-      fixed: 'left',
+      ellipsis: true,
+      tooltip: true,
     },
   ];
 
@@ -405,17 +403,27 @@ const setTableSpecific = () => {
   } else if (choseType.value === '月') {
     const date = new Date(monthModel.value);
     const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
-    dateHeaders = tabTitle;
+    // 为月视图添加日期对象，以便后续判断是否为周末
+    dateHeaders = tabTitle.map((item) => {
+      const dayDate = new Date(date.getFullYear(), date.getMonth(), item.day);
+      return {
+        ...item,
+        date: dayDate,
+      };
+    });
   } else {
     // 日维度
     const date = new Date(dayModel.value);
     const day = date.getDate();
     const weekday = DateUtils.formatDateToWeekdayDay(date);
-    dateHeaders = [{ day: day, weekday, date: DateUtils.formatDate(date) }];
+    dateHeaders = [{ day: day, weekday, date: date }];
   }
 
   // 添加日期列
   dateHeaders.forEach((item) => {
+    // 检查是否为周末（周日为0，周六为6）
+    const isWeekend = item.date ? item.date.getDay() === 0 || item.date.getDay() === 6 : false;
+
     columns.value.push({
       title: `${item.weekday}`,
       dataIndex: item.day, // 使用日期数字作为dataIndex
@@ -424,6 +432,8 @@ const setTableSpecific = () => {
       sortable: {
         sortDirections: ['ascend', 'descend'],
       },
+      // 如果是周末，添加自定义样式
+      cellClass: isWeekend ? 'weekend-column' : '',
     });
   });
 };
@@ -448,7 +458,6 @@ const onChangeDate = (val: any) => {
 
 // 日期变化处理（周维度）
 const onChangeWeek = (val: any) => {
-  console.log('onChangeWeek val', val);
   if (val) {
     // 确保val是Date对象
     const selectedDate = val instanceof Date ? val : new Date(val);
@@ -468,9 +477,7 @@ const onChangeWeek = (val: any) => {
 const onChangeMonth = (val: any) => {
   if (typeof val === 'string') {
     val = DateUtils.MonthStrToDate(val);
-    console.log('onChangeMonth val', val);
   }
-  console.log('onChangeMonth val', val);
   if (val) {
     // 确保val是Date对象
     const selectedDate = val instanceof Date ? val : new Date(val);
@@ -548,7 +555,6 @@ const handleToday = () => {
 const handleSearch = () => {
   query.page = pageInfo.page;
   query.page_size = pageInfo.page_size;
-  console.log('query', query);
   getTaskSchedules(query)
     .then((response) => {
       if (response.data) {
@@ -559,7 +565,6 @@ const handleSearch = () => {
       }
     })
     .catch((error) => {
-      console.error('获取任务排期数据失败:', error);
       data.value = [];
     });
 };
@@ -571,8 +576,9 @@ const getOperators = async () => {
     if (code === 200) {
       operators.value = operatorsData.map((op: any) => ({
         value: op.id,
-        label: op.name,
+        name: op.name,
       }));
+      console.log('operatorsData:', operators.value);
     }
   } catch (error) {
     console.error('获取运营人员数据失败:', error);
@@ -620,42 +626,33 @@ onMounted(() => {
 .task-container {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 4px 0;
+  height: 100%;
 }
 
 .task-item {
-  padding: 4px 8px;
-  border-radius: 4px;
-  color: white;
-  line-height: 1.4;
-  word-break: break-word;
-  cursor: pointer;
-  transition: opacity 0.2s;
   display: flex;
+  align-items: center;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.task-item:hover {
-  opacity: 0.8;
+.task-more {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 }
 
 .no-task {
-  color: #999;
-  font-style: italic;
-  text-align: center;
-  padding: 8px 0;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.tip-trigger {
-  background-color: #ffffff;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  padding: 4px 8px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  width: 100px;
-  height: 80px;
-}
-.tip-trigger:hover {
-  background-color: #f0f0f0;
+
+/* 周末列背景色 */
+:deep(.weekend-column) {
+  background-color: #fbfaff !important;
 }
 </style>