refactor(salesOps): 优化趋势排行页面代码结构

移除冗余代码并简化模板结构
添加数据获取函数并改进状态切换逻辑

src/views/salesOps/trendsRank/index.vue

@@ -1,50 +1,27 @@
 <template>
     <ele-page flex-table>
-        <common-table
-            ref="tableRef"
-            :pageConfig="pageConfig"
-            :columns="columns"
-            :tools="false"
-        >
+        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false" :pagination="false"
+            :datasource="fetchData">
             <template #index="{ $index }">
                 {{ $index + 1 }}
             </template>
 
             <template #image="{ row }">
-                <el-image
-                    :src="row.cover"
-                    class="w-16 h-16 rounded"
-                    fit="cover"
-                    :preview-src-list="[row.cover]"
-                    preview-teleported
-                />
+                <el-image :src="row.cover" class="w-16 h-16 rounded" fit="cover" :preview-src-list="[row.cover]"
+                    preview-teleported />
             </template>
 
             <template #info="{ row }">
                 <div>
-                    <div
-                        class="font-bold text-blue-500 hover:underline cursor-pointer"
-                        >{{ row.bookName }}</div
-                    >
-                    <div class="text-xs text-gray-500 mt-1"
-                        >作者: {{ row.author }}</div
-                    >
-                    <div class="text-xs text-gray-500"
-                        >ISBN: {{ row.isbn }}</div
-                    >
-                    <div class="text-xs text-gray-500"
-                        >出版社: {{ row.publish }}</div
-                    >
+                    <div class="font-bold text-blue-500 hover:underline cursor-pointer">{{ row.bookName }}</div>
+                    <div class="text-xs text-gray-500 mt-1">作者: {{ row.author }}</div>
+                    <div class="text-xs text-gray-500">ISBN: {{ row.isbn }}</div>
+                    <div class="text-xs text-gray-500">出版社: {{ row.publish }}</div>
                 </div>
             </template>
 
             <template #isOnSale="{ row }">
-                <el-switch
-                    v-model="row.isOnSale"
-                    :active-value="1"
-                    :inactive-value="0"
-                    @change="handleStatusChange(row)"
-                />
+                <el-switch :model-value="row.isOnSale === 1" @change="(val) => handleStatusChange(row, val)" />
             </template>
         </common-table>
     </ele-page>
@@ -77,28 +54,41 @@ const columns = ref([
     { label: '更新时间', prop: 'updateTime', align: 'center', minWidth: 180 }
 ]);
 
+const fetchData = async () => {
+    try {
+        const res = await proxy.$http.get(pageConfig.pageUrl, {
+            params: pageConfig.params
+        });
+        if (res.data.code === 200) {
+            return res.data.data || [];
+        }
+        return Promise.reject(new Error(res.data.msg || '获取数据失败'));
+    } catch (e) {
+        return Promise.reject(e);
+    }
+};
+
 const reload = () => {
     tableRef.value?.reload();
 };
 
-const handleStatusChange = (row) => {
+const handleStatusChange = (row, val) => {
+    const newStatus = val ? 1 : 0;
     proxy.$http.post('/shop/shopbook/setShelfStatus', {
-        id: row.id,
-        isOnSale: row.isOnSale
+        isbn: row.isbn,
+        sellStatus: newStatus
     })
         .then((res) => {
             if (res.data.code === 200) {
                 EleMessage.success(
-                    `${row.bookName} ${row.isOnSale === 1 ? '已启用' : '已禁用'}`
+                    `${row.bookName} ${newStatus === 1 ? '已启用' : '已禁用'}`
                 );
             } else {
-                row.isOnSale = row.isOnSale === 1 ? 0 : 1;
-                EleMessage.error(res.data.msg);
+                EleMessage.error(res.data.msg || '操作失败');
             }
         })
-        .catch((e) => {
-            row.isOnSale = row.isOnSale === 1 ? 0 : 1;
-            EleMessage.error(e.message);
+        .catch(() => {
+            reload();
         });
 };
 </script>