no message

2025-09-26 14:47:11 +08:00
parent affe4597bd
commit 4834ce5f53
2 changed files with 98 additions and 86 deletions
--- a/src/views/property-marketing/assignment-management/components/date-selector.vue
+++ b/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>
--- a/src/views/property-marketing/assignment-management/index.vue
+++ b/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>
-            <div class="flex flex-col items-center justify-center" style="min-height: 400px">
+          <template #emptyText>
+            <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 }">
-            <div class="flex items-center justify-start">
-              <img
-                :src="getPlatformIcon(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"
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'name'">
+              <div class="flex items-center justify-start">
+                <img
+                  :src="getPlatformIcon(record.platform)"
+                  style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
+                  :alt="getPlatformName(record.platform)"
                />
+                {{ record.name || '-' }}
              </div>
-            </div>
-            <div v-else class="no-task"></div>
+            </template>
+
+            <!-- 动态日期单元格 -->
+            <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"
-            @page-size-change="onPageSizeChange"
+            @change="handlePageChange"
+            @show-size-change="handlePageSizeChange"
          />
        </div>
      </div>
@ -117,8 +118,8 @@
 </template>

 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed, inject } from 'vue';
-import type { ColumnProps } from 'ant-design-vue/es/table';
+import { ref, reactive, onMounted, computed, inject, nextTick } from 'vue';
+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,
-      slotName: 'dateCell',
+      dataIndex: item.day.toString(),
+      slots: { customRender: 'dateCell' },
      date: item.date,
      width: 135,
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-        sorter: true,
-      },
+      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) => {
-  if (sorter && sorter.sorter?.direction === 'ascend' && sorter.sorter?.field) {
-    const column = columns.value.find((col) => col.dataIndex == sorter.sorter.field);
-    if (column?.date) {
-      query.top_execution_time = DateUtils.formatDate(column.date);
-    }
+const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+  if (sorter && sorter.order === 'ascend' && sorter.column?.date) {
+    const column = sorter.column;
+    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;
 }