table的排序

src/views/property-marketing/assignment-management/components/TaskDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-start cell-detail">
+  <div class="flex flex-col items-start cell-detail" @click="gotoDetail">
     <div class="flex items-center">
       <img
         :src="getPlatformIcon(record.platform)"
@@ -10,9 +10,27 @@
     <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="size-14px color-#211F24 mt-12px color-#6D4CFE">{{ task.name || '未命名' }}</div>
     <div class="flex items-center mt-12px">
-      <div class="opt-btn" @click.stop="handleEditTime">修改发布时间</div>
+      <a-trigger trigger="click" align-point>
+        <div class="opt-btn" @click.stop="handleEditTime">修改发布时间</div>
+        <template #content>
+          <div class="custom-time-picker">
+            <!-- 1. 自定义触发按钮（替代原输入框，点击弹出面板） -->
+            <!-- <button @click="toggleTimePanel" class="trigger-btn">选择时间（点击弹出面板）</button> -->
+
+            <!-- 2. a-time-picker 核心：隐藏输入框容器，仅保留弹出面板 -->
+            <a-time-picker
+              format="HH:mm"
+              :defaultValue="defaultValue"
+              :visible="isPanelVisible"
+              @visible-change="handleVisibleChange"
+              @change="handleTimeChange"
+              class="hide-input-container"
+            />
+          </div>
+        </template>
+      </a-trigger>
       <div class="opt-btn" @click.stop="handleDelete" style="margin-right: 0px">删除</div>
     </div>
   </div>
@@ -24,19 +42,31 @@ import { defineProps, defineEmits } from 'vue';
 const props = defineProps({
   task: {
     type: Object,
-    required: true
+    required: true,
   },
   record: {
     type: Object,
-    required: true
+    required: true,
   },
   getPlatformIcon: {
     type: Function,
-    required: true
-  }
+    required: true,
+  },
 });
-
-const emit = defineEmits(['editTime', 'delete']);
+const isPanelVisible = ref(false);
+const toggleTimePanel = () => {
+  isPanelVisible.value = !isPanelVisible.value;
+};
+const handleVisibleChange = (visible: boolean) => {
+  isPanelVisible.value = visible;
+};
+const handleTimeChange = (time: Date | null) => {
+  if (time) {
+    console.log('Selected time:', time);
+  }
+};
+const defaultValue = ref(new Date());
+const emit = defineEmits(['editTime', 'delete', 'gotoDetail']);
 
 // 时间戳转时间格式 (MM月DD HH:MM)
 const timestampToTime1 = (timestamp: number): string => {
@@ -57,6 +87,11 @@ const handleEditTime = () => {
 const handleDelete = () => {
   emit('delete', props.task);
 };
+
+const gotoDetail = () => {
+  console.log('跳转详情');
+  emit('gotoDetail', props.task);
+};
 </script>
 
 <style scoped>
@@ -79,4 +114,4 @@ const handleDelete = () => {
   border-radius: 4px;
   margin-right: 12px;
 }
-</style>
+</style>

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

@@ -88,174 +88,167 @@
           </template>
         </a-trigger>
 
-        <a-trigger
-          trigger="click"
-          style="
-            background-color: #ffffff;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            box-shadow: #00000010 0px 2px 8px;
-            width: 308px;
-            height: 180px;
-            padding: 24px;
-            margin-top: 8px;
-          "
-        >
-          <a-button size="small">
-            <template #icon>
-              <icon-filter size="16" class="color-#55585F" />
-            </template>
-            <template #default>筛选</template>
-          </a-button>
-          <template #content>
-            <div>
-              <div class="flex items-center mb-24px">
-                <div class="w-70px">运营人员</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    :multiple="false"
-                    :options="operators"
-                    v-model="query.operator_id"
-                    @change="handleSearch"
-                    class="!w-200px"
-                  />
-                </a-space>
-              </div>
-              <div class="flex items-center mb-24px">
-                <div class="w-70px">发布平台</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    :multiple="false"
-                    :options="platformOptions"
-                    v-model="query.platform"
-                    @change="handleSearch"
-                    class="!w-200px"
-                  />
-                </a-space>
-              </div>
-              <div class="flex items-center">
-                <div class="w-70px">账号名称</div>
-                <a-input v-model="query.name" class="!w-200px" placeholder="输入账号名称" @change="handleSearch" />
-              </div>
-            </div>
+        <a-button size="small">
+          <template #icon>
+            <icon-filter size="16" class="color-#55585F" />
           </template>
-        </a-trigger>
+          <template #default>筛选</template>
+        </a-button>
       </div>
     </div>
     <div class="flex justify-between items-start mt-16px" style="width: 100%">
-      <a-table :columns="columns" :data="data" :bordered="{ cell: true }" style="width: 100%" :pagination="false">
-        <template #name="{ record }">
-          <div class="flex items-center">
-            <img
-              :src="getPlatformIcon(record.platform)"
-              style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px"
-            />
-            {{ record.name || '-' }}
-          </div>
-        </template>
+      <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
+        <a-table
+          :columns="columns"
+          :data="data"
+          :bordered="{ cell: true }"
+          style="width: 100%"
+          :pagination="false"
+          @change="handleTableChange"
+        >
+          <!-- 表头插槽：用于自定义日期列的表头样式 -->
+          <template #empty>
+            <div class="flex flex-col items-center justify-center">
+              <img :src="emptyIcon" class="img mt-20px" alt="" width="106" height="72" />
+              <div class="text mt-36px">暂无数据</div>
+              <div class="mt-12px mb-12px">可通过账号管理添加账号，进行任务排期管理</div>
+              <a-button type="primary" @click="handleAddAccount">去添加</a-button>
+            </div>
+          </template>
+          <template #name="{ record }">
+            <div class="flex items-center">
+              <img
+                :src="getPlatformIcon(record.platform)"
+                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px"
+              />
+              {{ record.name || '-' }}
+            </div>
+          </template>
 
-        <!-- 动态日期列渲染 -->
-        <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">
-              <div
-                :key="record[column.dataIndex][0].id"
-                class="task-item size-12px"
-                :title="record[column.dataIndex][0].name || '-'"
-              >
+          <!-- 动态日期列渲染 -->
+          <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">
+                <div
+                  :key="record[column.dataIndex][0].id"
+                  class="task-item size-12px"
+                  :title="record[column.dataIndex][0].name || '-'"
+                >
+                  <a-trigger trigger="click" position="br">
+                    <div class="task-item size-12px">
+                      <div class="size-12px color-#211F24 mr-4px">
+                        {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
+                      </div>
+                      <div
+                        class="size-12px"
+                        :style="{
+                          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>
+                      <TaskDetail
+                        :task="record[column.dataIndex][0]"
+                        :record="record"
+                        :get-platform-icon="getPlatformIcon"
+                        @edit-time="handleModifyTime"
+                        @delete="handleDelete"
+                        @delete-task="handleDelete"
+                        @gotoDetail="handleGoToDetail"
+                      />
+                    </template>
+                  </a-trigger>
+                </div>
                 <a-trigger trigger="click" position="br">
-                  <div class="task-item size-12px">
+                  <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>
+                            <TaskDetail
+                              :task="task"
+                              :record="record"
+                              :get-platform-icon="getPlatformIcon"
+                              @edit-time="handleModifyTime"
+                              @delete="handleDelete"
+                              @delete-task="handleDelete"
+                              @gotoDetail="handleGoToDetail"
+                            />
+                          </template>
+                        </a-trigger>
+                      </div>
+                    </div>
+                  </template>
+                </a-trigger>
+              </div>
+              <div v-else v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
+                <a-trigger trigger="click" align-point>
+                  <div class="task-item">
                     <div class="size-12px color-#211F24 mr-4px">
-                      {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
+                      {{ timestampToTime(task.execution_time) }}
                     </div>
                     <div
-                      class="size-12px"
-                      :style="{
-                        color: getTaskColor(
-                          record[column.dataIndex][0].type,
-                          record[column.dataIndex][0].execution_time,
-                        ),
-                      }"
+                      :style="{ color: getTaskColor(task.type, task.execution_time) }"
                       style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                     >
-                      {{ formatTaskName(record[column.dataIndex][0].name) }}
+                      {{ formatTaskName(task.name) }}
                     </div>
                   </div>
                   <template #content>
                     <TaskDetail
-                      :task="record[column.dataIndex][0]"
+                      :task="task"
                       :record="record"
                       :get-platform-icon="getPlatformIcon"
                       @edit-time="handleModifyTime"
                       @delete="handleDelete"
-                      @delete-task="handleDelete"
+                      @gotoDetail="handleGoToDetail"
                     />
                   </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>
-                          <TaskDetail
-                            :task="task"
-                            :record="record"
-                            :get-platform-icon="getPlatformIcon"
-                            @edit-time="handleModifyTime"
-                            @delete="handleDelete"
-                            @delete-task="handleDelete"
-                          />
-                        </template>
-                      </a-trigger>
-                    </div>
-                  </div>
-                </template>
-              </a-trigger>
             </div>
-            <div v-else v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
-              <a-trigger trigger="click" align-point>
-                <div class="task-item">
-                  <div class="size-12px color-#211F24 mr-4px">
-                    {{ timestampToTime(task.execution_time) }}
-                  </div>
-                  <div
-                    :style="{ color: getTaskColor(task.type, task.execution_time) }"
-                    style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-                  >
-                    {{ formatTaskName(task.name) }}
-                  </div>
-                </div>
-                <template #content>
-                  <TaskDetail
-                    :task="task"
-                    :record="record"
-                    :get-platform-icon="getPlatformIcon"
-                    @edit-time="handleModifyTime"
-                    @delete="handleDelete"
-                  />
-                </template>
-              </a-trigger>
-            </div>
-          </div>
-          <div v-else class="no-task"></div>
-        </template>
-      </a-table>
+            <div v-else class="no-task"></div>
+          </template>
+        </a-table>
+        <div v-if="pageInfo.total > 0" class="pagination-box">
+          <a-pagination
+            :total="pageInfo.total"
+            size="mini"
+            show-total
+            show-jumper
+            show-page-size
+            :current="pageInfo.page"
+            :page-size="pageInfo.page_size"
+            @change="onPageChange"
+            @page-size-change="onPageSizeChange"
+          />
+        </div>
+      </div>
     </div>
   </div>
   <a-modal v-model:visible="showModal" @ok="handleOk" @cancel="handleCancel" ok-text="确认删除">
@@ -269,9 +262,8 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
 import type { TableColumnData } from '@arco-design/web-vue';
-import { getTaskSchedules, delTaskSchedules } from '@/api/all/assignment-management';
-import { fetchAccountOperators } from '@/api/all/propertyMarketing';
-
+import { getTaskSchedules, delTaskSchedules, getTaskSchedulesDetail } from '@/api/all/assignment-management';
+import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/platform/icon-dy.png';
 import icon2 from '@/assets/img/platform/icon-xhs.png';
 import icon3 from '@/assets/img/media-account/icon-warn.png';
@@ -282,6 +274,67 @@ import icon7 from '@/assets/img/platform/icon-ks.png';
 import icon8 from '@/assets/img/platform/icon-bilibili.png';
 import DateUtils from '@/utils/DateUtils';
 import TaskDetail from './components/TaskDetail.vue';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import emptyIcon from '@/assets/img/media-account/icon-empty.png';
+const {
+  dataSource,
+  pageInfo,
+  rowSelection,
+  onPageChange,
+  onPageSizeChange,
+  resetPageInfo,
+  selectedRowKeys,
+  selectedRows,
+  handleSelectAll,
+  DEFAULT_PAGE_INFO,
+} = useTableSelectionWithPagination({
+  onPageChange: () => {
+    handleSearch();
+  },
+  onPageSizeChange: () => {
+    handleSearch();
+  },
+});
+
+const handleTableChange = (pagination: any, sorter: any, extra: any) => {
+  console.log('分页信息:', pagination);
+  console.log('排序信息:', sorter);
+  console.log('额外信息:', extra);
+  console.log('所有列信息:', columns.value);
+
+  // 获取当前排序的列信息
+  if (sorter && sorter.sorter.direction == 'ascend' && sorter.sorter.field !== undefined) {
+    // 在columns中查找对应的列
+    // 注意：dataIndex是数字类型，而sorter.field可能是字符串类型
+    const column = columns.value.find((col: any) => {
+      // 确保比较时类型一致
+      return col.dataIndex == sorter.sorter.field || col.dataIndex == parseInt(sorter.sorter.field);
+    });
+
+    if (column) {
+      console.log('找到的列:', column);
+      if (column.date) {
+        console.log('当前排序列的日期:', column.date);
+        // 获取格式化的日期字符串
+        const formattedDate = DateUtils.formatDate(column.date);
+        console.log('当前排序列的格式化日期:', formattedDate);
+        query.top_execution_time = formattedDate;
+        handleSearch();
+      }
+    } else {
+      console.log('未找到匹配的列，尝试查找dataIndex为', sorter.field, '的列');
+    }
+  } else {
+    query.top_execution_time = undefined;
+    handleSearch();
+  }
+
+  // 获取触发变更的列信息
+  if (extra && extra.column) {
+    console.log('触发变更的列:', extra.column);
+  }
+};
+const isChartEmpty = ref(true);
 const currentTask = ref();
 const visible = ref(false);
 const deleteTitle = ref('');
@@ -301,6 +354,7 @@ const currentDateRange = reactive({
 const columns = ref<TableColumnData[]>([]);
 const data = ref<any[]>([]);
 const operators = ref([]);
+const accountList = ref([]);
 const platformOptions = ref([
   { value: 0, label: '抖音' },
   { value: 1, label: '小红书' },
@@ -311,12 +365,6 @@ const platformOptions = ref([
   { value: 6, label: '公众号' },
 ]);
 
-const pageInfo = reactive({
-  page: 1,
-  page_size: 10,
-  total: 0,
-});
-
 const query = reactive({
   page: 1,
   page_size: 20,
@@ -324,6 +372,7 @@ const query = reactive({
   operator_id: undefined,
   name: '',
   execution_time: [] as string[],
+  operator: '',
 });
 
 // 处理删除操作
@@ -337,7 +386,9 @@ const handleDelete = (task: any) => {
   deleteContent.value = '确认删除“' + task.name + '”吗？';
   showModal.value = true;
 };
-
+const handleGoToDetail = (task: any) => {
+  console.log('跳转详情', task);
+};
 const handleOk = () => {
   showModal.value = false;
   delTaskSchedules(currentTask.value.id).then(() => {
@@ -349,6 +400,7 @@ const handleCancel = () => {
   showModal.value = false;
 };
 
+const handleAddAccount = () => {};
 const handleModifyTime = (task: any) => {
   console.log('修改时间', task);
   // modalVisible.value = false;
@@ -413,17 +465,6 @@ 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); // 假设时间戳是秒级
@@ -509,7 +550,6 @@ const setTableSpecific = () => {
   ];
 
   let dateHeaders: any[] = [];
-
   if (choseType.value === '周') {
     const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
     dateHeaders = specificWeek;
@@ -531,20 +571,33 @@ const setTableSpecific = () => {
     const weekday = DateUtils.formatDateToWeekdayDay(date);
     dateHeaders = [{ day: day, weekday, date: date }];
   }
-
+  // 判断是否为今天
+  const isToday = (date: Date) => {
+    const today = new Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
   // 添加日期列
   dateHeaders.forEach((item) => {
     // 检查是否为周末（周日为0，周六为6）
     const isWeekend = item.date ? item.date.getDay() === 0 || item.date.getDay() === 6 : false;
-
+    const todayFlag = item.date ? isToday(item.date) : false;
     columns.value.push({
       title: `${item.weekday}`,
       dataIndex: item.day, // 使用日期数字作为dataIndex
       slotName: 'dateCell',
+      date: item.date,
       width: 135,
       sortable: {
         sortDirections: ['ascend', 'descend'],
+        sorter: true, // 禁用默认排序
       },
+      // 存储额外信息用于表头渲染
+      weekday: item.weekday,
+      todayFlag: todayFlag,
       // 如果是周末，添加自定义样式
       cellClass: isWeekend ? 'weekend-column' : '',
     });
@@ -663,6 +716,48 @@ const handleToday = () => {
     onChangeDate(today);
   }
 };
+// 处理筛选项选择事件
+const handleFilterChange = (field: string, value: any, options?: any[]) => {
+  console.log(`筛选项 ${field} 发生变化:`, value);
+  // 根据不同的筛选字段执行不同的操作
+  switch (field) {
+    case 'operator_id':
+      console.log('运营人员选择:', value);
+      // 查找选中的运营人员完整信息
+      if (options && value) {
+        if (Array.isArray(value)) {
+          // 多选情况
+          const selectedOperators = options.filter((op: any) => value.includes(op.value));
+          console.log('选中的运营人员完整信息(多选):', selectedOperators);
+        } else {
+          // 单选情况
+          const selectedOperator = options.find((op: any) => op.value == value);
+          console.log('选中的运营人员完整信息(单选):', selectedOperator);
+        }
+      }
+      break;
+    case 'platform':
+      console.log('发布平台选择:', value);
+      // 查找选中的平台完整信息
+      if (options && value !== undefined && value !== '') {
+        if (Array.isArray(value)) {
+          // 多选情况
+          const selectedPlatforms = options.filter((op: any) => value.includes(op.value));
+          console.log('选中的发布平台完整信息(多选):', selectedPlatforms);
+        } else {
+          // 单选情况
+          const selectedPlatform = options.find((op: any) => op.value == value);
+          console.log('选中的发布平台完整信息(单选):', selectedPlatform);
+        }
+      }
+      break;
+    default:
+      console.log('未知筛选字段:', field, value);
+  }
+
+  // 调用原有的搜索函数
+  handleSearch();
+};
 
 // 获取数据
 const handleSearch = () => {
@@ -674,7 +769,7 @@ const handleSearch = () => {
         // 根据API响应结构调整
         const apiData = response.data.data || response.data;
         data.value = processTableData(apiData);
-        pageInfo.total = response.data.total || apiData.length;
+        pageInfo.value.total = response.data.total || apiData.length;
       }
     })
     .catch((error) => {
@@ -697,6 +792,18 @@ const getOperators = async () => {
   }
 };
 
+const getAccountList = async () => {
+  try {
+    const { code, data: accountData } = await getMediaAccountList();
+    if (code === 200) {
+      accountList.value = accountData.map((account: any) => ({
+        value: account.id,
+        name: account.name,
+      }));
+    }
+  } catch (error) {}
+};
+
 // 监听日期维度变化
 watch(choseType, (newVal) => {
   // 重置对应模型的值为当前日期
@@ -720,6 +827,7 @@ onMounted(() => {
   setTableSpecific();
   handleSearch();
   getOperators();
+  getAccountList();
 });
 </script>
 
@@ -793,4 +901,12 @@ onMounted(() => {
   border-radius: 4px;
   margin-right: 12px;
 }
+
+.pagination-box {
+  display: flex;
+  width: 100%;
+  padding: 16px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
 </style>