MySql结合element-plus pagination的分页查询

实现效果如下:

重点:使用mysql查询的limit和offset

原生SQL写法:

select c.id as deptid,c.name as department,position,a.name staffname,'2024-11' as shijian
,CASE WHEN b.shijian IS NULL THEN 'no' ELSE 'yes' END AS submit
from fa_wecom_staff a left JOIN fa_kpi_table b on a.userid=b.staff_id AND shijian = '2024-11' 
LEFT JOIN fa_wecom_department c ON a.department=c.id
WHERE phone<>'' AND b.shijian IS NOT NULL
GROUP BY a.name,userid,b.shijian
LIMIT 100 OFFSET 1;

limit对应分页插件的参数pageSize,offset对应分页参数的pageNum,计算公式如下:

offset = pageNum==1 ? 1  : (pageNum-1)*pageSize;

后端写法(php)

    public function searchnotsubmit($pageNum=1,$pageSize=10,$shijian=null,$department_id=null,$department_value=null,$status=null){$where = ' AND 1=1';if(!empty($department_id)){$where .= ' AND c.id in ('.$department_id.')';}if(!empty($department_value)){$where .= ' AND c.name in ("'.$department_value.'")';}if(!empty($status)){if($status=='未提交') $where .= ' AND b.shijian IS NULL';if($status=='已提交') $where .= ' AND b.shijian IS NOT NULL';}$sql = "select c.id as deptid,c.name as department,position,a.name staffname,'$shijian' as shijian
,CASE WHEN b.shijian IS NULL THEN '未提交' ELSE '已提交' END AS submit
from fa_wecom_staff a left JOIN fa_kpi_table b on a.userid=b.staff_id AND shijian = '$shijian' 
LEFT JOIN fa_wecom_department c ON a.department=c.id
WHERE phone<>'' $where GROUP BY a.name,userid,b.shijian";$total = count(Db::query($sql));$offset = $pageNum==1 ? 1 : ($pageNum-1)*$pageSize;$row = Db::query($sql." LIMIT $pageSize OFFSET $offset;");$this->success('查询成功',['total'=>$total,'data'=>$row]);}

前端局部代码(pagination分页组件)

<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15":pager-count="10" :page-sizes="[10, 20, 30, 50, 100, 200, 500]" v-model:current-page="search_params.pageNum" backgroundv-model:page-size="search_params.pageSize" layout="total, sizes, prev, pager, next, jumper":total="tableData.total"></el-pagination>

完整前端页面(vue3)

<template><div v-if="1" class="system-dic-container layout-padding"><NoticeBartext="🎉🎉🔥功能更新: "/><el-segmented v-if="true" v-model="value" :options="options" size="default" @change="handleSp(value)" /><el-card shadow="hover" class="layout-padding-auto"><div v-if="1" class="system-user-search d_flex mb15"><div class="search_info mb15"><div class="inline_block mb15"><span>部门下拉:</span><el-cascaderv-model="search_params.d":options="alldepartment":props="alldepartmentProps"show-all-levels="false"placeholder="下拉/输入部门名称"filterable@change="handleChangeDept"/></div><div class="inline_block mb15"><span>部门:</span><el-inputv-model="search_params.department_value"style="width: 240px"placeholder="请输入部门名称"clearable/></div><!-- <div class="ml10 inline_block mb15"><span>部门成员:</span><el-inputv-model="search_params.staff_value"style="width: 240px"placeholder="请输入姓名"clearable/></div>--><div class="ml10 inline_block mb15"><span>流程状态:</span><el-select v-model="search_params.status" :filterable="true" placeholder=""style="width: 240px"><el-optionv-for="(item,index) in ['已提交','未提交']":key="index":label="item":value="item"/></el-select></div> <div class="ml10 inline_block mb15"><span>绩效日期:</span><el-date-picker v-model="search_params.shijian" type="month" placeholder="选择绩效年月"@change="slideMonthFun"></el-date-picker></div></div><div class="search_btn"><el-button size="large" type="primary" class="ml10" @click="searchFun()"><el-icon><ele-Search /></el-icon>查询</el-button><el-button size="large" type="success" class="ml10" @click="resetFun()"><el-icon><ele-RefreshRight /></el-icon>重置</el-button></div></div><el-table id="my-table1" :data="tableData.data" v-loading="tableData.loading" style="width: 100%":height="cardDetailsTableHeight ? cardDetailsTableHeight-100 : 500"><!-- <el-table-column type="selection" width="55" /> --><el-table-column type="index" label="序号" width="80" /><el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column><el-table-column prop="position" label="岗位名称" show-overflow-tooltip></el-table-column><el-table-column prop="staffname" label="姓名" show-overflow-tooltip></el-table-column><el-table-column prop="submit" label="状态" show-overflow-tooltip><template #default="scope"><el-tag type="success" v-if="scope.row.submit == '已提交'">已提交</el-tag><el-tag type="error" v-else-if="scope.row.submit == '未提交'">未提交</el-tag></template></el-table-column><el-table-column prop="shijian" label="绩效日期" show-overflow-tooltip></el-table-column><el-table-column label="操作" width="150"><template #default="scope"><el-button size="small" text type="primary"@click="preview">查看</el-button><el-button size="small" text type="primary"@click="notice">发通知</el-button></template></el-table-column></el-table><el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15":pager-count="10" :page-sizes="[10, 20, 30, 50, 100, 200, 500]" v-model:current-page="search_params.pageNum" backgroundv-model:page-size="search_params.pageSize" layout="total, sizes, prev, pager, next, jumper":total="tableData.total"></el-pagination></el-card><DicDialog ref="dicDialogRef" @refresh="searchFun()" /></div></template><script setup lang="ts" name="systemDic">
import { defineAsyncComponent, reactive, onMounted, ref,nextTick } from 'vue';
import { ElMessage, ElNotification } from 'element-plus';
import { Session } from '/@/utils/storage';
import { formatDate } from '/@/utils/formatTime';
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';
import { getAlldepartmentlistApi, hrApi } from '/@/api/kpi/index';
// 引入组件
const DicDialog = defineAsyncComponent(() => import('/@/views/hr/dialog/dialogKPITemplate.vue'));
const NoticeBar = defineAsyncComponent(() => import('/@/components/noticeBar/index.vue'));
const value = ref('全部')const options = ['全部', '已提交', '未提交']
function handleSp(e: any) {if (e == '全部') {search_params.value.status = ''getTableData()} else {search_params.value.status = egetTableData()}
}const alldepartment = ref(null)
// 定义变量内容
const dicDialogRef = ref();
const tableData = reactive({data: [],total: 0,loading: false,
});// 表格高度
const cardDetailsTableHeight: any = ref()
// 动态设置表格高度
const getCardDetailsTableHeight = () => {let tableH = 370; //距离页面下方的高度let tableHeightDetil = window.innerHeight - tableH;if (tableHeightDetil <= 100) {cardDetailsTableHeight.value = 100;} else {cardDetailsTableHeight.value = window.innerHeight - tableH;}
};
// 监听窗口变化动态设置表格高度
window.onresize = () => {getCardDetailsTableHeight()
}
// 查询参数
const search_params = ref({shijian: formatDate(new Date(), 'YYYY-mm'),department_value: '',department_id: '',staff_value: '',status: null,d:null,pageNum: 1,  //当前页码pageSize: 10,  //每页显示数量
})function preview () {ElMessage.info('查看功能尚未开发')
}
function notice () {ElMessage.info('通知功能尚未开发')
}//请求表格数据
const getTableData = async () => {tableData.loading = true;// 默认加上当前审批者idlet res = await hrApi().searchNotSubmit(search_params.value)tableData.loading = false;if (res.code === 1) {tableData.data = res.data.data;tableData.total = res.data.total;} else if (res.code == 0) {ElMessage.error(res.msg)}
};
// 1、初次渲染,获取部门信息
getdepartmentlistFun()
async function getdepartmentlistFun() {getTableData()
}// 查询
const searchFun = () => {getTableData()
}// 重置
const resetFun = () => {search_params.value = {shijian: '',department_value: '',department_id: '',staff_value: '',status: null,d:null,pageNum: 1,  //当前页码pageSize: 10,  //每页显示数量}getTableData()
}// 切换月份
const slideMonthFun = (e: any) => {if (e != null) {search_params.value.shijian = formatDate(e, 'YYYY-mm');}
}// function changePageFun() {
// 	getTableData()
// }// 每页显示数量改变
const onHandleSizeChange = (val: number) => {search_params.value.pageSize = val;getTableData()
};
// 分页改变
const onHandleCurrentChange = (val: number) => {search_params.value.pageNum = val;getTableData()
};// const alldepartmentProps = {multiple: true,emitPath:true}
// // 部门下拉改变
const handleChangeDept = (val: any) => {search_params.value.department_id = val.join(',');
};
// 页面加载时
onMounted(() => {getCardDetailsTableHeight()nextTick(() => {// console.log('DOM已更新');})getAlldepartmentlistApi().then((res)=>{if(res.code==1){alldepartment.value = res.data}})
});
</script><style lang="scss" scoped>
.calculate_status {background-color: #fff;margin-bottom: 10px;border: 1px solid #e4e7ed;border-radius: 4px;padding: 10px 15px;.item_sum {display: flex;justify-content: space-between;align-items: center;overflow: hidden;.li {display: flex;flex-direction: column;align-items: center;padding: 0 5px;.label {margin-bottom: 7px;font-size: 15px;color: #7f7f7f;}.num {font-size: 18px;color: #535353;&.has_num {color: #e51515;font-weight: bold;}}}}
}.inline_block {display: inline-block;
}.d_flex {display: flex;flex-wrap: wrap;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470699.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu20.04安装FLIR灰点相机BFS-PGE-16S2C-CS的ROS驱动

一、Spinnaker 安装 1.1Spinnaker 下载 下载地址为&#xff1a; https://www.teledynevisionsolutions.com/support/support-center/software-firmware-downloads/iis/spinnaker-sdk-download/spinnaker-sdk–download-files/?pnSpinnakerSDK&vnSpinnakerSDK 在上述地址中…

什么是数字图像?

点赞 关注 收藏 学会了 什么是数字图像&#xff1f; 本文可在公众号「德育处主任」免费阅读 弄懂数字图像的概念对学习计算机视觉很有帮助。 那么&#xff0c;什么是数字图像&#xff1f; 字面意思&#xff0c;数字图像就是有数字组成图像。通常由像素&#xff08;Pixel&…

2024年11月13日

1.创业法律指南 留置权和其他三个权 定金和订金 一般保证和连带保证 1.案例 物权编之担保法律制度案例一 冯系养鸡专业户&#xff0c;为改建鸡会和引进良种需资金20万元。冯向陈借款10万元&#xff0c;以自己的一套价值10万元的音响设备抵押&#xff0c;双方立有抵押字据&a…

Android OpenGL ES详解——立方体贴图

目录 一、概念 二、如何使用 1、创建立方体贴图 2、生成纹理 3、设置纹理环绕和过滤方式 4、激活和绑定立方体贴图 三、应用举例——天空盒 1、概念 2、加载天空盒 3、显示天空盒 4、优化 四、应用举例——环境映射:反射 五、应用举例——环境映射:折射 六、应用…

2024版本IDEA创建Sprintboot项目下载依赖缓慢

目录 步骤一&#xff1a;在IDEA中搜索Maven(双击shift) 步骤二&#xff1a;找到Maven下的settings.xml文件修改镜像 ​编辑 ​编辑​编辑 步骤三&#xff1a;用VScode打开settings.xml文件修改镜像 ​编辑 步骤一&#xff1a;在IDEA中搜索Maven(双击shift) 步骤二&#xff…

Android Framework AMS(16)进程管理

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节主要解读AMS 进程方面的知识。关注思维导图中左上侧部分即可。 我们本章节主要是对Android进程管理相关知识有一个基本的了解。先来了解下L…

python购物计算 2024年6月青少年电子学会等级考试 中小学生python编程等级考试一级真题答案解析

目录 python购物计算 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python购物计算 2024年6月 python编程等级考试一级编程题 一、题目要求 …

Pycharm PyQt5 环境搭建创建第一个Hello程序

第一步: 创建Pycharm项目,下载包: pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple/pip install PyQt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple/下载好了之后,可以看到相应包: PyQt5:PyQt5是一套Python绑定Digia QT5应用的框架。Qt库是最…

【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件

文章目录 一、自定义事件概念及使用场景二、代码解释三、新的示例 一、自定义事件概念及使用场景 概念 在 Vue 3.0 中&#xff0c;自定义事件是一种组件间通信的机制&#xff0c;允许子组件向父组件传递数据或触发父组件中的操作。子组件通过defineEmits函数定义可以触发的事件…

Java的dto,和多表的调用

1理论 需求是新增菜品eg&#xff1a;菜名:豆腐脑&#xff1b;口味&#xff1a;甜口&#xff0c;咸口&#xff0c; 菜单表&#xff1a;dish&#xff1b;口味表dish_flavor&#xff1b; 1dto:数据传输对象 新建一个dishDto对象有两个表里的属性 2用到两个表&#xff0c;dish,d…

【前端学习指南】Vue computed 计算属性 watch 监听器

&#x1f36d; Hello&#xff0c;我是爱吃糖的范同学 &#x1f534; 想把自己学习技术的经历和一些总结分享给大家&#xff01; &#x1f534; 通过这样的方式记录自己成长&#xff0c;同时沉淀自己的技术&#xff0c;我会把所有额外的时间和经历投放到CSDN和公众号&#xff0…

【算法】——二分查找合集

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;二分查找工具 1&#xff1a;最基础模版 2&#xff1a;mid落点问题 一&#xff1a;最…

读数据质量管理:数据可靠性与数据质量问题解决之道03数据目录

1. 同步数据 1.1. 不同的数据仓库和数据湖通过数据集成层来进行桥接 1.2. AWS Glue、Fivetran和Matillion等数据集成工具从不同来源收集数据&#xff0c;统一这些数据&#xff0c;并将其转换为上游来源 1.3. 数据集成的一个典型用例是收集数据湖的数据并以结构化格式将其加载…

openSUSE 环境下通过 zypper 安装软件

操作场景 为了提升您在云服务器上的软件安装效率&#xff0c;减少下载和安装软件的成本&#xff0c;腾讯云提供了 zypper 下载源。openSUSE 操作系统和部分 SLES 的云服务器用户可通过 zypper 快速安装软件。本文档以 openSUSE 操作系统为例&#xff0c;指导您通过 zypper 快速…

ima.copilot-腾讯智能工作台

一、产品描述 ima.copilot是腾讯推出的基于腾讯混元大模型技术的智能工作台&#xff0c;通过先进的人工智能技术&#xff0c;为用户提供了一个全新的搜读写体验&#xff0c;让知识管理变得更加智能和高效。它不仅是一个工具&#xff0c;更是一个智能的伙伴&#xff0c;能够帮助…

NVIDIA Isaac Sim 仿真平台体验测评

目录 一、引言二、GPU加速相关体验2.1 Isaac Sim GPU 加速体验2.2 GPU加速体验分析 三、AI框架集成相关体验四、学术研究价值五、开发生态六、综合分析6.1 主要优势6.1.1 仿真效率6.1.2 开发便利性6.1.3 与 AI 框架的协同性 6.2 潜在应用场景 七、运行体验与建议7.1 GPU加速与P…

WebRTC API分析

主题 本文详细描述常用的webrtc api 媒体协商类 myPeerConnection.createOffer([options]); var options { offerToReceiveAudio: true, // 告诉另一端&#xff0c;你是否想接收音频&#xff0c;默认true offerToReceiveVideo: true, // 告诉另一端&a…

11张思维导图带你快速学习java

博主主页:【南鸢1.0】 本文专栏&#xff1a;JAVA 本文目录 简介 1.Java SE​编辑 2.Java Web 3.MySQL​编辑 4.前端技术 5.Linux 6.Spring SpringMvc mybatis 7.JVM 8.Springboot 9.Vue 10.SpringCloud 11.常用中间件 总结 简介 Java是一种跨平台的编程语言&am…

Jmeter基础篇(22)服务器性能监测工具Nmon的使用

一、前言 我们在日常做压测的过程中&#xff0c;不仅仅需要监控TPS&#xff0c;响应时间&#xff0c;报错率等这些系统基础性能数据&#xff0c;还需要对服务器的性能&#xff08;如CPU、磁盘、内存、网络IO等&#xff09;做监控&#xff0c;以求对系统运行过程中的硬件性能有…

Unity3D学习FPS游戏(12)敌人检测和攻击玩家

前言&#xff1a;上一篇实现了敌人能动&#xff0c;有了点乐趣&#xff0c;但是敌人和玩家没什么对抗性。本篇将实现敌人追击玩家&#xff0c;并攻击玩家。 敌人攻击玩家 敌人检测玩家目标思路-碰撞检测的Trigger触发实现 敌人攻击目标思路-模仿玩家发射子弹的思路实现 效果 敌…