no message

src/views/property-marketing/assignment-management/components/date-selector.vue

@@ -31,7 +31,7 @@
     <!-- 日期导航按钮 -->
     <div class="flex items-center ml-12px">
       <a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
-        <template #icon><icon-left /></template>
+        <template #icon><SvgIcon name="xt-left" size="14" class="color-#737478" /></template>
       </a-button>
       <a-button
         @click="navigateToToday"
@@ -40,7 +40,7 @@
         >今天</a-button
       >
       <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
-        <template #icon><icon-right /></template>
+        <template #icon><SvgIcon name="xt-right" size="14" class="color-#737478" /></template>
       </a-button>
     </div>
 
@@ -53,7 +53,9 @@
         :popupVisible="dropdownVisible"
         @popupVisibleChange="handleDropdownVisibleChange"
       >
-        <a-button type="text" class="prv-today"> {{ choseType }}<icon-down class="ml-4px" /> </a-button>
+        <a-button type="text" class="prv-today">
+          {{ choseType }}<SvgIcon name="xt-down" size="14" class="color-#737478" />
+        </a-button>
         <template #content>
           <a-doption value="日" class="doption">日</a-doption>
           <a-doption value="周" class="doption">周</a-doption>

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

@@ -23,7 +23,7 @@
       <div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
         <a-table
           :columns="columns"
-          :data="data"
+          :data-source="data"
           :bordered="{ cell: true }"
           :scroll="{ x: 'max-content' }"
           style="width: 100%"
@@ -32,62 +32,63 @@
           @cell-click="handleCellClick"
         >
           <!-- 空数据显示 -->
-          <template #empty>
+          <template #emptyText>
-            <div class="flex flex-col items-center justify-center" style="min-height: 400px">
+            <div class="flex flex-col items-center justify-center" style="min-height: 600px">
               <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 }">
+          <template #bodyCell="{ column, record }">
-            <div class="flex items-center justify-start">
+            <template v-if="column.dataIndex === 'name'">
-              <img
+              <div class="flex items-center justify-start">
-                :src="getPlatformIcon(record.platform)"
+                <img
-                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
+                  :src="getPlatformIcon(record.platform)"
-                :alt="getPlatformName(record.platform)"
+                  style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
-              />
+                  :alt="getPlatformName(record.platform)"
-              {{ record.name || '-' }}
-            </div>
-          </template>
-
-          <!-- 动态日期单元格 -->
-          <template #dateCell="{ record, column }">
-            <div v-if="record[column.dataIndex]?.length" class="task-container">
-              <!-- 任务数量≥3时显示更多 -->
-              <div v-if="record[column.dataIndex].length >= 3" class="task-more">
-                <TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
-                <a-trigger trigger="click" position="br">
-                  <div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
-                    还有{{ record[column.dataIndex].length - 1 }}项
-                  </div>
-                  <template #content>
-                    <div class="bg-#fff w-160px p-12px rounded-4px flex flex-col more-content">
-                      <TaskItem
-                        v-for="task in record[column.dataIndex]"
-                        :key="task.id"
-                        :task="task"
-                        :record="record"
-                        @handle-task="handleTaskAction"
-                      />
-                    </div>
-                  </template>
-                </a-trigger>
-              </div>
-              <!-- 任务数量<3时直接显示 -->
-              <div v-else>
-                <TaskItem
-                  v-for="task in record[column.dataIndex]"
-                  :key="task.id"
-                  :task="task"
-                  :record="record"
-                  @handle-task="handleTaskAction"
                 />
+                {{ record.name || '-' }}
               </div>
-            </div>
+            </template>
-            <div v-else class="no-task"></div>
+
+            <!-- 动态日期单元格 -->
+            <template v-else-if="column.slots?.customRender === 'dateCell'">
+              <div v-if="record[column.dataIndex]?.length" class="task-container">
+                <!-- 任务数量≥3时显示更多 -->
+                <div v-if="record[column.dataIndex].length >= 3" class="task-more">
+                  <TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
+                  <a-popover trigger="click" placement="bottomRight">
+                    <div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
+                      还有{{ record[column.dataIndex].length - 1 }}项
+                    </div>
+                    <template #content>
+                      <div class="bg-#fff w-160px p-12px rounded-4px flex flex-col more-content">
+                        <TaskItem
+                          v-for="task in record[column.dataIndex]"
+                          :key="task.id"
+                          :task="task"
+                          :record="record"
+                          @handle-task="handleTaskAction"
+                        />
+                      </div>
+                    </template>
+                  </a-popover>
+                </div>
+                <!-- 任务数量<3时直接显示 -->
+                <div v-else>
+                  <TaskItem
+                    v-for="task in record[column.dataIndex]"
+                    :key="task.id"
+                    :task="task"
+                    :record="record"
+                    @handle-task="handleTaskAction"
+                  />
+                </div>
+              </div>
+              <div v-else class="no-task"></div>
+            </template>
           </template>
         </a-table>
 
@@ -95,14 +96,14 @@
         <div v-if="pageInfo.total > 0" class="pagination-box">
           <a-pagination
             :total="pageInfo.total"
-            size="mini"
+            size="small"
             show-total
             show-jumper
-            show-page-size
+            show-size-changer
             :current="pageInfo.page"
             :page-size="pageInfo.page_size"
-            @change="onPageChange"
+            @change="handlePageChange"
-            @page-size-change="onPageSizeChange"
+            @show-size-change="handlePageSizeChange"
           />
         </div>
       </div>
@@ -117,8 +118,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed, inject } from 'vue';
+import { ref, reactive, onMounted, computed, inject, nextTick } from 'vue';
-import type { ColumnProps } from 'ant-design-vue/es/table';
+import type { TableProps } from 'ant-design-vue';
 import router from '@/router';
 import DateUtils from '@/utils/DateUtils';
 // 组件引入
@@ -164,7 +165,7 @@ const dateSelectorModel = ref({
   weekModel: new Date(),
   monthModel: new Date(),
 });
-const columns = ref<ColumnProps[]>([]);
+const columns = ref<TableProps['columns']>([]);
 const data = ref<any[]>([]);
 const operators = ref([]);
 const accountList = ref([]);
@@ -218,7 +219,6 @@ const timestampToDayNumber = (timestamp: number) => {
 const processTableData = (apiData: any[]) => {
   const processedData: any[] = [];
   const dateHeaders = currentDateHeaders.value;
-
   apiData.forEach((account) => {
     const rowData: any = {
       id: account.id,
@@ -242,7 +242,7 @@ const processTableData = (apiData: any[]) => {
 
     processedData.push(rowData);
   });
-
+  console.log('处理后的数据:', processedData);
   return processedData;
 };
 
@@ -267,16 +267,15 @@ const setTableColumns = () => {
   columns.value = [
     {
       title: '账号与发布平台',
-      slotName: 'name',
+      dataIndex: 'name',
+      slots: { customRender: 'name' },
       width: 150,
       ellipsis: true,
-      tooltip: true,
       fixed: 'left', // 固定列
-    },
+    } as TableProps['columns'][0],
   ];
   let dateHeaders: any[] = [];
   const { choseType } = dateSelectorModel.value;
-
   if (choseType === '周') {
     dateHeaders = DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0);
   } else if (choseType === '月') {
@@ -315,22 +314,27 @@ const setTableColumns = () => {
       console.log('Today flag value:', todayFlag);
     }
 
-    const columnConfig = {
+    const columnConfig: any = {
       title: `${item.weekday}`,
-      dataIndex: item.day,
+      dataIndex: item.day.toString(),
-      slotName: 'dateCell',
+      slots: { customRender: 'dateCell' },
       date: item.date,
       width: 135,
-      sortable: {
+      sorter: true,
-        sortDirections: ['ascend', 'descend'],
-        sorter: true,
-      },
       weekday: item.weekday,
       todayFlag,
       // 为周末设置特定的背景色
-      cellClass: isWeekend ? 'weekend-column' : '',
+      customCell: (record: any, rowIndex: number) => {
+        return {
+          class: [isWeekend ? 'weekend-column' : '', todayFlag ? 'today-column' : ''],
+        };
+      },
       // 为今日添加特殊类名
-      class: todayFlag ? 'today-column' : '',
+      customHeaderCell: (column: any) => {
+        return {
+          class: todayFlag ? 'today-column' : '',
+        };
+      },
     };
 
     // 更多调试信息
@@ -338,14 +342,13 @@ const setTableColumns = () => {
       console.log('Column config for today:', columnConfig);
     }
 
-    columns.value.push(columnConfig);
+    columns.value.push(columnConfig as TableProps['columns'][0]);
   });
 };
 
 // 当前日期头部计算
 const currentDateHeaders = computed(() => {
   const { choseType } = dateSelectorModel.value;
-
   if (choseType === '周') {
     return DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0).map((item) =>
       parseInt(item.day.toString(), 10),
@@ -371,6 +374,7 @@ const handleSearch = () => {
         if (apiData) {
           data.value = processTableData(apiData);
         }
+        console.log('显示数据', data.value);
         pageInfo.value.total = response.data.total || apiData.length;
       }
     })
@@ -416,7 +420,6 @@ const handleDateSelectorChange = (value: any) => {
 };
 
 // 筛选条件变化处理
-
 const handleFilterChange = (filters: any) => {
   console.log(filters);
   if (typeof filters === 'object' && filters !== null) {
@@ -441,12 +444,10 @@ const handleFilterChange = (filters: any) => {
 };
 
 // 表格排序变化
-const handleTableChange = (pagination: any, sorter: any) => {
+const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-  if (sorter && sorter.sorter?.direction === 'ascend' && sorter.sorter?.field) {
+  if (sorter && sorter.order === 'ascend' && sorter.column?.date) {
-    const column = columns.value.find((col) => col.dataIndex == sorter.sorter.field);
+    const column = sorter.column;
-    if (column?.date) {
+    query.top_execution_time = DateUtils.formatDate(column.date);
-      query.top_execution_time = DateUtils.formatDate(column.date);
-    }
   } else {
     query.top_execution_time = undefined;
   }
@@ -574,6 +575,15 @@ const getAccountList = async () => {
   }
 };
 
+// 分页处理
+const handlePageChange = (page: number, pageSize: number) => {
+  onPageChange(page);
+};
+
+const handlePageSizeChange = (current: number, size: number) => {
+  onPageSizeChange(size);
+};
+
 // 初始化
 onMounted(() => {
   // 确保在初始化时设置表格列和执行搜索
@@ -636,7 +646,7 @@ onMounted(() => {
 }
 
 /* 只对 td 单元格应用样式，避免影响表头 */
-:deep(td .arco-table-cell) {
+:deep(td .ant-table-cell) {
   padding: 0px !important;
   display: flex;
   flex-direction: column;
@@ -644,12 +654,12 @@ onMounted(() => {
   min-height: 42px;
 }
 
-:deep(td .arco-table-cell:first-child) {
+:deep(td .ant-table-cell:first-child) {
   align-items: center;
   justify-content: center;
 }
 
-:deep(td.today-column) .arco-table-cell-wrap {
+:deep(td.today-column) .ant-table-cell-wrap {
   color: white !important;
 }
 
@@ -675,7 +685,7 @@ onMounted(() => {
 }
 
 /* 下拉框样式优化 */
-:deep(.arco-dropdown-open .arco-icon-down) {
+:deep(.ant-dropdown-open .anticon-down) {
   transform: rotate(180deg);
   transition: transform 0.2s ease;
 }