优化表格分页

src/api/dashboard.js

@@ -16,4 +16,13 @@ export function getIndexHourReport(data) {
         method: 'post',
         data
     })
+}
+
+// 查询用户行为数据统计
+export function getIndexUserStatistic(data) {
+    return request({
+        url: '/agent-service/index/userStatistic',
+        method: 'post',
+        data
+    })
 }

src/components/table/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="system-table-box">
-    <el-table v-bind="$attrs" ref="table" class="system-table" border height="100%" :data="data"
+    <el-table v-bind="$attrs" ref="table" class="system-table" border :height="height" :data="data"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" align="center" width="50" v-if="showSelection" />
       <el-table-column label="序号" width="60" align="center" v-if="showIndex">
@@ -33,7 +33,9 @@
         }
       },
       pageLayout: { type: String, default: "total, sizes, prev, pager, next, jumper" }, // 分页需要显示的东西，默认全部
-      pageSizes: { type: Array, default: [10, 20, 50, 100] }
+      pageSizes: { type: Array, default: [10, 20, 50, 100] },
+      id: { type: String, default: '' }, // 行数据的 Key，用来优化 Table 的渲染；
+      height: { type: String, default: '100%' },
     },
     setup(props, context) {
       const table = ref(null)
@@ -41,9 +43,9 @@
       // 分页相关：监听页码切换事件
       const handleCurrentChange = (val) => {
         if (timer) {
-          props.page.index = 1
+          props.page.pageNum = 1
         } else {
-          props.page.index = val
+          props.page.pageNum = val
           context.emit("getTableData")
         }
       }
@@ -53,7 +55,7 @@
         setTimeout(() => {
           timer = null
         }, 100)
-        props.page.size = val
+        props.page.pageSize = val
         context.emit("getTableData", true)
       }
       // 选择监听器

src/views/main/dashboard/components/charts/userDataChart.vue

@@ -25,8 +25,19 @@
 <script setup>
 import { ref } from 'vue'
 import Chart from '@/components/charts/index.vue'
+import { getIndexUserStatistic } from '@/api/dashboard.js'
 //穿山甲、优量汇、快手、Sigmob、百度
 
+const getIndexUserStatisticData = async() => {
+    let res = await getIndexUserStatistic()
+    console.log('user',res)
+}
+
+
+onBeforeMount(async () => {
+  await getIndexUserStatisticData()
+})
+
 
 const xAxisList = [
     '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00',

src/views/main/formworkErection/adPlatformAdmin.vue

@@ -136,7 +136,6 @@
   const page = reactive({
     pageNum: 1,
     pageSize: 20,
-    limit: 20,
     total: 0,
   });
 
@@ -224,9 +223,9 @@
   };
 
   const changeTableData = () => {
-    formSearch.value.pageNum = page.pageNum;
-    formSearch.value.pageSize = page.pageSize;
-    formSearch.value.limit = page.limit;
+    formSearch.value.page = page.pageNum;
+    formSearch.value.pageSizes = page.pageSize;
+    formSearch.value.limit = page.pageSize;
     // 分页切换
     getList();
   };

src/views/main/formworkErection/adSourceAdmin.vue

@@ -114,7 +114,6 @@ const tableData = ref([]);
 const page = reactive({
     pageNum: 1,
     pageSize: 20,
-    limit: 20,
     total: 0,
 });
 
@@ -194,9 +193,9 @@ const getList = async () => {
 };
 
 const changeTableData = () => {
-    formSearch.value.pageNum = page.pageNum;
-    formSearch.value.pageSize = page.pageSize;
-    formSearch.value.limit = page.limit;
+    formSearch.value.page = page.pageNum;
+    formSearch.value.pageSizes = page.pageSize;
+    formSearch.value.limit = page.pageSize;
     // 分页切换
     getList();
 };

src/views/main/formworkErection/placementAdmin.vue

@@ -135,7 +135,6 @@ const appData = ref([]);
 const page = reactive({
   pageNum: 1,
   pageSize: 20,
-  limit: 20,
   total: 0,
 });
 
@@ -229,9 +228,9 @@ const getList = async () => {
 };
 
 const changeTableData = () => {
-  formSearch.value.pageNum = page.pageNum;
-  formSearch.value.pageSize = page.pageSize;
-  formSearch.value.limit = page.limit;
+  formSearch.value.page = page.pageNum;
+  formSearch.value.pageSizes = page.pageSize;
+  formSearch.value.limit = page.pageSize;
   // 分页切换
   getList();
 };

src/views/main/outBagModule/appAdmin.vue

@@ -313,7 +313,7 @@
 <script setup>
 import { onBeforeMount, ref, reactive } from "vue";
 import QRCode from 'qrcode' //生成二维码
-import { ElMessage } from "element-plus";
+import { ElMessage,ElLoading } from "element-plus";
 import { useGetDictList } from "@/hooks/useGetDictList.js";
 import {
   channelAddOne,
@@ -339,7 +339,6 @@ const channelData = ref([]);
 const page = reactive({
   pageNum: 1,
   pageSize: 20,
-  limit: 20,
   total: 0,
 });
 
@@ -347,7 +346,6 @@ const page = reactive({
 const channelPage = reactive({
   pageNum: 1,
   pageSize: 20,
-  limit: 20,
   total: 0,
 });
 
@@ -373,6 +371,7 @@ onBeforeMount(() => {
   settingData();
   getList();
   getDitchList();
+  getChannelList()
 });
 
 
@@ -389,7 +388,8 @@ const settingData = () => {
       {
         label: "广告平台",
         prop: "channelName",
-        type: "input",
+        type: "select",
+        options: []
       },
       {
         label: "应用类型",
@@ -414,16 +414,40 @@ const settingData = () => {
   });
 };
 
+// 获取广告平台
+const channelListData = ref([])
+const getChannelList = async() => {
+  let res = await channelList({
+    page: 1,
+    limit: 999,
+    pageSizes: 999,
+  })
+
+  channelListData.value.push({
+    label: '全部',
+    value: null,
+  })
+
+  res.data.forEach((item,index) => {
+    let options = {
+      label: item.channelName,
+      value: item.channelName,
+    }
+    channelListData.value.push(options)
+  })
+
+  dynamicFormItems.value[1].options = channelListData.value
+}
+
 // 获取出包渠道
 const ditchListData = ref([])
 const getDitchList = async() => {
   let res = await ditchList({
     page: 1,
     limit: 999,
+    pageSizes: 999,
   })
   ditchListData.value = res.data
-
-  console.log('res',res)
 }
 
 function findByDitchName(name) {
@@ -438,9 +462,9 @@ const getList = async () => {
 };
 
 const changeTableData = () => {
-  formSearch.value.pageNum = page.pageNum;
-  formSearch.value.pageSize = page.pageSize;
-  formSearch.value.limit = page.limit;
+  formSearch.value.page = page.pageNum;
+  formSearch.value.pageSizes = page.pageSize;
+  formSearch.value.limit = page.pageSize;
   // 分页切换
   getList();
 };
@@ -589,7 +613,7 @@ const openChannelLayer = async (row) => {
   if (row) {
     selectedChannelId.value = null
     channelAppId.value = row.appId
-    let res =await relativeChannelList({appId: row.appId,page:channelPage.pageNum,limit:channelPage.limit})
+    let res =await relativeChannelList({appId: row.appId,page:channelPage.pageNum,limit:channelPage.pageSize})
     channelData.value = res.data;
     channelPage.total = res.pageMeta.total;
     channelLayer.value.show = true;
@@ -701,6 +725,20 @@ const getSecondaryCategoriesData = async () => {
   }
 }
 
+const loading = ref(null)
+// 加载信息
+const openFullScreen = (loadText) => {
+    loading.value = ElLoading.service({
+        lock: true,
+        text: loadText,
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+}
+
+const closeFullScreen = () => {
+    loading.value.close()
+}
+
 // 上传二维码图片
 const beforeAvatarUpload = (rawFile) => {
   let fileType = ["image/jpeg", "image/png", "image/webp"];
@@ -718,6 +756,7 @@ const selfUpload = async (param) => {
   const file = param.file
   const formData = new FormData()
   formData.append('file', file)
+  openFullScreen('图片上传中')
   try {
     const res = await attachImage(formData)
     formEdit.value.qrCode = res.data.url
@@ -725,6 +764,8 @@ const selfUpload = async (param) => {
   } catch (err) {
     ElMessage.error('图片上传失败')
     console.error(err)
+  } finally {
+    closeFullScreen()
   }
 };
 
@@ -734,6 +775,7 @@ const customUpload = async (param) => {
   const file = param.file
   const formData = new FormData()
   formData.append('file', file)
+  openFullScreen('APP上传中')
   try {
     const res = await attachFile(formData)
     formEdit.value.apkUrl = res.data.url
@@ -747,6 +789,8 @@ const customUpload = async (param) => {
   } catch (err) {
     ElMessage.error('APP上传失败')
     console.error(err)
+  } finally {
+    closeFullScreen()
   }
 }
 

src/views/main/outBagModule/channelTypeAdmin.vue

@@ -64,28 +64,9 @@ const tableData = ref([]);
 const page = reactive({
   pageNum: 1,
   pageSize: 20,
-  limit: 20,
   total: 0,
 });
 
-// 用途options
-const useWayOptions = reactive([
-  { value: 1, label: '应用商城' },
-  { value: 2, label: '投放' },
-  { value: 3, label: '代理' },
-  { value: 4, label: '游戏赚' },
-])
-
-// 所属代理options
-const agencyOptions = reactive([
-  { value: 1, label: '乐助客' },
-  { value: 2, label: '众人帮' },
-  { value: 3, label: '秒单' },
-  { value: 4, label: '赏帮赚' },
-  { value: 5, label: '兴旺富贵' },
-  { value: 6, label: '合众' },
-])
-
 const formSearch = ref({
   ditchName: null,
   limit: 20,// 当前页数量(查询量)
@@ -122,9 +103,9 @@ const getList = async () => {
 };
 
 const changeTableData = () => {
-  formSearch.value.pageNum = page.pageNum;
-  formSearch.value.pageSize = page.pageSize;
-  formSearch.value.limit = page.limit;
+  formSearch.value.page = page.pageNum;
+  formSearch.value.pageSizes = page.pageSize;
+  formSearch.value.limit = page.pageSize;
   // 分页切换
   getList();
 };

src/views/main/riskModule/riskControlConfig.vue

@@ -113,7 +113,6 @@
     pageNum: 1,
     pageSize: 20,
     total: 0,
-    limit: 20,
   });
 
   const formSearch = ref({
@@ -200,9 +199,9 @@
   };
 
   const changeTableData = () => {
-    formSearch.value.pageNum = page.pageNum;
-    formSearch.value.pageSize = page.pageSize;
-    formSearch.value.limit = page.limit;
+    formSearch.value.page = page.pageNum;
+    formSearch.value.pageSizes = page.pageSize;
+    formSearch.value.limit = page.pageSize;
     // 分页切换
     getList();
   };

src/views/main/userModule/relieveLogsList.vue

@@ -169,8 +169,9 @@
   };
 
   const changeTableData = () => {
-    formSearch.value.pageNum = page.pageNum;
-    formSearch.value.pageSize = page.pageSize;
+    formSearch.value.page = page.pageNum;
+    formSearch.value.pageSizes = page.pageSize;
+    formSearch.value.limit = page.pageSize;
     // 分页切换
     getList();
   };

src/views/main/userModule/riskLogsList.vue

@@ -106,7 +106,6 @@
   const page = reactive({
     pageNum: 1,
     pageSize: 20,
-    limit: 20,
     total: 0,
   });
 
@@ -177,9 +176,9 @@
   };
 
   const changeTableData = () => {
-    formSearch.value.pageNum = page.pageNum;
-    formSearch.value.pageSize = page.pageSize;
-    formSearch.value.limit = page.limit;
+    formSearch.value.page = page.pageNum;
+    formSearch.value.pageSizes = page.pageSize;
+    formSearch.value.limit = page.pageSize;
 
     // 分页切换
     getList();

src/views/main/userModule/userList.vue

@@ -12,8 +12,8 @@
             <el-button type="primary" @click="lookEcpm(scope.row.userId)">查看ECPM</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="userId" label="用户ID" width="280" />
-        <el-table-column prop="nickName" label="用户昵称" width="90" />
+        <el-table-column prop="userId" label="用户ID" width="100" fixed="left" />
+        <el-table-column prop="nickName" label="用户昵称" fixed="left" width="90" />
         <el-table-column prop="userStatus" label="用户状态" width="90">
           <template #default="scope">
             {{ getDictionaryName('user_status',Number(scope.row.userStatus)) }}
@@ -97,18 +97,18 @@
     </Layer>
 
     <Layer :layer="ecpmLayer" @confirm="ecpmLayer.show = false" @close="ecpmLayer.show = false">
-        <Table :showPage="false" ref="ecpmTable" :data="ecpmData">
+        <Table :showPage="false" ref="ecpmTable" :data="ecpmData" :height="ecpmLayer.height">
           <el-table-column prop="userId" label="用户ID" width="100" />
           <el-table-column prop="adSourceId" label="广告源ID" width="100" />
-          <el-table-column prop="beginTime" label="开始时间" width="100" />
+          <el-table-column prop="beginTime" label="开始时间" />
           <el-table-column prop="finishTime" label="完成时间" />
           <el-table-column prop="ecpm" label="ECPM" width="100" />
-          <el-table-column prop="adSourceType" label="广告源类型" width="120">
+          <el-table-column prop="adSourceType" label="广告源类型" width="160">
             <template #default="scope">
               {{ getDictionaryName('ad_source_type',scope.row.adSourceType) }}
             </template>
           </el-table-column>
-          <el-table-column prop="adSourceIndex" label="竞价匹配优先级" width="120" />
+          <el-table-column prop="adSourceIndex" label="竞价匹配优先级" width="130" />
           <el-table-column prop="networkFormId" label="广告平台ID" width="100" />
           <el-table-column prop="networkName" label="广告平台名称" width="120" />
           <el-table-column prop="networkPlacementId" label="广告平台广告位ID" width="160" />
@@ -143,7 +143,6 @@
   const page = reactive({
     pageNum: 1,
     pageSize: 20,
-    limit: 20,
     total: 0,
   });
 
@@ -153,6 +152,7 @@
     lastLoginTime: '',// 最新登录时间
     limit: 20,// 当前页数量(查询量)
     nickName: null,// 用户昵称
+    userId: null,// 用户ID
     page: 1,// 当前页码
     pageSizes: 20,// 总页数
     registryTime: null,// 注册时间
@@ -176,13 +176,17 @@
           prop: 'nickName',
           type: 'input',
         },
-
         {
+          label: '用户ID',
+          prop: 'userId',
+          type: 'input',
+        },
+        /* {
           label: '渠道类型',
           prop: 'channelType',
           type: 'select',
           options: getOptions('channel_type')
-        },
+        }, */
         {
           label: '渠道来源',
           prop: 'channelOrigin',
@@ -209,9 +213,11 @@
   };
 
   const changeTableData = () => {
-    formSearch.value.pageNum = page.pageNum;
-    formSearch.value.pageSize = page.pageSize;
-    formSearch.value.limit = page.limit;
+    formSearch.value.page = page.pageNum;
+    formSearch.value.pageSizes = page.pageSize;
+    formSearch.value.limit = page.pageSize;
+
+    console.log('page',page)
     // 分页切换
     getList();
   };
@@ -224,6 +230,7 @@
     formSearch.value.total = page.total;
     formSearch.value.limit = 20;
     formSearch.value.nickName = formData.nickName;
+    formSearch.value.userId = formData.userId;
     formSearch.value.channelOrigin = formData.channelOrigin;
     formSearch.value.channelType = formData.channelType;
     formSearch.value.userType = formData.userType;
@@ -388,7 +395,8 @@
     show: false,
     title: "查看ECPM",
     showButton: true,
-    width: '80vw'
+    width: '90vw',
+    height: '60vh'
   });
 
   const ecpmTable = ref(null)