feat: table组件替换

src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue

@@ -28,127 +28,122 @@
     </div>
   </div>
 
-  <a-table
+  <Table
     ref="tableRef"
-    :data="dataSource"
-    row-key="id"
-    column-resizable
-    :row-selection="{
+    :dataSource="dataSource"
+    rowKey="id"
+    :rowSelection="{
       type: 'checkbox',
-      showCheckedAll: true,
-      width: 48,
+      selectedRowKeys: selectedItems,
+      onSelect: handleSelect,
+      onSelectAll: handleSelectAll,
     }"
-    :selected-keys="selectedItems"
     :pagination="false"
     :scroll="{ x: '100%' }"
     class="account-table w-100% flex-1"
     bordered
-    @sorter-change="handleSorterChange"
-    @select="handleSelect"
-    @select-all="handleSelectAll"
+    :showSorterTooltip="false"
+    @change="handleTableChange"
   >
-    <template #empty>
+    <template #emptyText>
       <NoData />
     </template>
-    <template #columns>
-      <a-table-column
-        v-for="column in tableColumns"
-        :key="column.dataIndex"
-        :data-index="column.dataIndex"
-        :fixed="column.fixed"
-        :width="column.width"
-        :min-width="column.minWidth"
-        :sortable="column.sortable"
-        :align="column.align"
-        ellipsis
-        tooltip
-      >
-        <template #title>
-          <div class="flex items-center">
-            <img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
-            <span class="cts mr-4px">{{ column.title }}</span>
-            <Tooltip v-if="column.tooltip" :title="column.tooltip" position="top">
-              <icon-question-circle class="tooltip-icon color-#737478" size="16" />
-            </Tooltip>
-          </div>
-        </template>
+    <Column
+      v-for="column in tableColumns"
+      :key="column.dataIndex"
+      :dataIndex="column.dataIndex"
+      :fixed="column.fixed"
+      :width="column.width"
+      :minWidth="column.minWidth"
+      :sorter="column.sortable"
+      :align="column.align"
+      :ellipsis="true"
+    >
+      <template #title>
+        <div class="flex items-center">
+          <img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
+          <span class="cts mr-4px">{{ column.title }}</span>
+          <Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
+            <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+          </Tooltip>
+        </div>
+      </template>
 
-        <template v-if="column.dataIndex === 'platform'" #cell="{ record }">
-          <img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
-        </template>
-        <template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
-          <StatusBox :item="record" class="w-fit h-28px" />
-        </template>
-        <template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
-          <div class="ai-evaluation-row flex">
-            <template v-if="record.ai_evaluate">
-              <img
-                width="16"
-                height="16"
-                :src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
-                class="mr-8px icon"
-              />
-              <div>
-                <p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
-                <p class="cts text-12px lh-20px !color-#939499">
-                  {{
-                    `观看: ${record[`${getPropPrefix(dateType)}view_rate`]}%  点赞: ${
-                      record[`${getPropPrefix(dateType)}like_rate`]
-                    }%`
-                  }}
-                </p>
-              </div>
-            </template>
-            <template v-else>
-              <p class="cts">-</p>
-            </template>
-          </div>
-        </template>
-        <template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
-          {{
-            formatNumberShow({
-              value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
-                record[`${getPropPrefix(dateType)}collect_number`] ?? 0
-              }`,
-              showExactValue: true,
-            })
-          }}
-        </template>
-        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
-        </template>
+      <template v-if="column.dataIndex === 'platform'" #customRender="{ record }">
+        <img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
+      </template>
+      <template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
+        <StatusBox :item="record" class="w-fit h-28px" />
+      </template>
+      <template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
+        <div class="ai-evaluation-row flex">
+          <template v-if="record.ai_evaluate">
+            <img
+              width="16"
+              height="16"
+              :src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
+              class="mr-8px icon"
+            />
+            <div>
+              <p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
+              <p class="cts text-12px lh-20px !color-#939499">
+                {{
+                  `观看: ${record[`${getPropPrefix(dateType)}view_rate`]}%  点赞: ${
+                    record[`${getPropPrefix(dateType)}like_rate`]
+                  }%`
+                }}
+              </p>
+            </div>
+          </template>
+          <template v-else>
+            <p class="cts">-</p>
+          </template>
+        </div>
+      </template>
+      <template v-else-if="column.dataIndex === 'like_collect_number'" #customRender="{ record }">
+        {{
+          formatNumberShow({
+            value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
+              record[`${getPropPrefix(dateType)}collect_number`] ?? 0
+            }`,
+            showExactValue: true,
+          })
+        }}
+      </template>
+      <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
+        <Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
+      </template>
 
-        <template v-else-if="column.isRateField" #cell="{ record }">
-          <div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
-            <icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
-            <icon-arrow-down v-else size="16" />
-            {{ formatTableField(column, record) }}
-          </div>
-        </template>
-        <template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
-          <p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
-          <p class="cts text-12px lh-20px !color-#939499">
-            {{ exactFormatTime(record.newest_work_published_at) }}
-          </p>
-        </template>
-        <template v-else-if="column.dataIndex === 'second_new_work_title'" #cell="{ record }">
-          <p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
-          <p class="cts text-12px lh-20px !color-#939499">
-            {{ exactFormatTime(record.second_new_work_published_at) }}
-          </p>
-        </template>
+      <template v-else-if="column.isRateField" #customRender="{ record }">
+        <div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
+          <icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
+          <icon-arrow-down v-else size="16" />
+          {{ formatTableField(column, record) }}
+        </div>
+      </template>
+      <template v-else-if="column.dataIndex === 'newest_work_title'" #customRender="{ record }">
+        <p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
+        <p class="cts text-12px lh-20px !color-#939499">
+          {{ exactFormatTime(record.newest_work_published_at) }}
+        </p>
+      </template>
+      <template v-else-if="column.dataIndex === 'second_new_work_title'" #customRender="{ record }">
+        <p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
+        <p class="cts text-12px lh-20px !color-#939499">
+          {{ exactFormatTime(record.second_new_work_published_at) }}
+        </p>
+      </template>
 
-        <template v-else #cell="{ record }">
-          {{ formatTableField(column, record, true) }}
-        </template>
-      </a-table-column>
-      <a-table-column data-index="operation" fixed="right" width="100" title="操作">
-        <template #cell="{ record }">
-          <Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
-        </template>
-      </a-table-column>
-    </template>
-  </a-table>
+      <template v-else #customRender="{ record }">
+        {{ formatTableField(column, record, true) }}
+      </template>
+    </Column>
+    <Column dataIndex="operation" fixed="right" :width="100" title="操作">
+      <template #customRender="{ record }">
+        <Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
+      </template>
+    </Column>
+  </Table>
 
   <CustomTableColumnModal
     ref="customTableColumnModalRef"
@@ -161,7 +156,8 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { Checkbox, Button, Tooltip } from 'ant-design-vue';
+import { Checkbox, Button, Tooltip, Table } from 'ant-design-vue';
+const { Column } = Table;
 
 import { getCustomColumns } from '@/api/all/common';
 import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@@ -220,30 +216,34 @@ const tableColumns = computed(() => {
   return _result;
 });
 
-const handleSelectAll = (checked) => {
-  if (checked) {
-    selectedItems.value = props.dataSource.map((item) => item.id);
-  } else {
-    selectedItems.value = [];
-  }
-  emit('selectionChange', checked ? selectedItems.value : []);
-};
+
 
 const handleDetail = (record) => {
   router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
 };
 
-// 处理排序变化
-const handleSorterChange = (column, order) => {
-  console.log(column, order);
-  emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+// 处理表格变化
+const handleTableChange = (pagination, filters, sorter) => {
+  if (sorter && sorter.field) {
+    emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
+  }
 };
 
-const handleSelect = (selectedRowKeys, selectedRows) => {
-  selectedItems.value = selectedRowKeys;
+const handleSelect = (record, selected, selectedRows, nativeEvent) => {
+  selectedItems.value = selectedRows.map(row => row.id);
   emit('selectionChange', selectedRows);
 };
 
+const handleSelectAll = (selected, selectedRows, changeRows) => {
+  if (selected) {
+    selectedItems.value = props.dataSource.map((item) => item.id);
+    emit('selectionChange', props.dataSource);
+  } else {
+    selectedItems.value = [];
+    emit('selectionChange', []);
+  }
+};
+
 const handleExport = () => {
   emit('export');
 };