微信小程序:点击按钮实现数据加载(带模糊查询)

效果图

代码 

wxml:

<!-- 搜索框-->
<form action="" bindsubmit="search_all_productiond"><view class="search_position"><view class="search"><view class="search_left">工单号:</view><view class="search_right"><input name="wip_entity_name" type="text" /></view></view></view><view class="search_position"><view class="search"><view class="search_left">工序名:</view><view class="search_right"><input name="operation_code" type="text" /></view></view></view><view class="search_position"><view class="search"><view class="search_left">料号:</view><view class="search_right"><input name="item_no" type="text" /></view></view></view><view class="search_position"><view class="search"><view class="search_left">料号名称:</view><view class="search_right"><input name="item_name" type="text" /></view></view></view><view class="search_position"><button class="button" form-type="submit">查询</button></view>
</form>
<!-- 表格 -->
<scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;margin-right:15%;"><view style="padding:15px 5px;"><view class="table"><view class="table-tr"><view class="table-th1">工单号</view><view class="table-th1">料号</view><view class="table-th1">料号名称</view><view class="table-th1">工序</view><view class="table-th1">单位</view><view class="table-th1">生产日期</view><view class="table-th1">工号</view><view class="table-th1">生产人员</view><view class="table-th1">生产数量</view><view class="table-th1">不良数量</view><view class="table-th1">开始时间</view><view class="table-th1">结束时间</view><view class="table-th1">生产小时</view><view class="table-th1">备注</view></view><view class="table-tr" wx:for="{{list}}" wx:key="unique"><view class="table-td3">{{item.wip_entity_name}}</view><view class="table-td2">{{item.item_no}}</view><view class="table-td2">{{item.item_name}}</view><view class="table-td2">{{item.operation_code}}</view><view class="table-td2">{{item.uom}}</view><view class="table-td2">{{item.transaction_date}}</view><view class="table-td2">{{item.employee_num}}</view><view class="table-td2">{{item.employee_name}}</view><view class="table-td2">{{item.transaction_quantity}}</view><view class="table-td2">{{item.bad_quantity}}</view><view class="table-td2">{{item.begin_date}}</view><view class="table-td2">{{item.end_date}}</view><view class="table-td2">{{item.hours_diff}}</view><view class="table-td2" wx:if="{{item.remark}}">{{item.remark}}</view><view class="table-td2" wx:else></view></view></view></view>
</scroll-view>
<button class="last" bindtap="bindMore" wx:if="{{!allDataLoaded}}">点击获取更多</button>

增加按钮

<button class="last" bindtap="bindMore" wx:if="{{!allDataLoaded}}">点击获取更多</button>

js:

const app = getApp()
Page({data: {search: app.globalData.icon + 'index/search.png',list: [], page: 1,pageSize: 20,allDataLoaded: false,wip_entity_name:'',operation_code:'',item_no:'',item_name:'',},// 进入页面显示onLoad: function () {this.loadData();},// //模糊查询待排程信息search_all_productiond(e) {let wip_entity_name = e.detail.value.wip_entity_name //工单号let operation_code = e.detail.value.operation_code //工序let item_no = e.detail.value.item_no //料号let item_name = e.detail.value.item_name //料号this.setData({wip_entity_name:wip_entity_name,operation_code:operation_code,item_no:item_no,item_name:item_name,})this.setData({list: [],page: 1,allDataLoaded: false});this.loadData();},// 加载数据loadData: function () {wx.request({url: app.globalData.position + 'Produce/search_all_productiond',data: {username: app.globalData.username,page: this.data.page, // 传递页码和每页数量pageSize: this.data.pageSize,wip_entity_name:this.data.wip_entity_name,operation_code:this.data.operation_code,item_no:this.data.item_no,item_name:this.data.item_name,},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {console.log(res.data);const data = res.data;//检查data.info是否存在并且是一个数组if (Array.isArray(data.info)) {// 判断是否还有更多数据console.log('data.info.length'+data.info.length)console.log('this.pageSize'+this.data.pageSize)if (data.info.length < this.data.pageSize) {this.hasMoreData = false;this.setData({allDataLoaded: true //标志着数据全部加载完毕})}} else {this.setData({allDataLoaded: false //标志着数据全部加载完毕})}// 拼接新数据const newList = this.data.list.concat(data.info);this.setData({list: newList,count: data.count});},fail(res) {console.log("查询失败");},complete: () => {// 停止下拉刷新wx.stopPullDownRefresh();}});},// 滚动到底部触发加载更多数据loadMoreData: function () {if (!this.data.allDataLoaded) {this.setData({page: this.data.page + 1});this.loadData();}},//加载按钮bindMore: function () {if (!this.data.allDataLoaded) {this.setData({page: this.data.page + 1});this.loadData();}},//刷新onPullDownRefresh() {this.onLoad(); //需要再次调用接口的函数 setTimeout(function () {// 不加这个方法真机下拉会一直处于刷新状态,无法复位wx.stopPullDownRefresh()}, 3000)},onShareAppMessage:function(){//清空登录信息wx.removeStorageSync('username');//返回登录页面return {title: '标品杰生产系统',path: '/pages/login/main/main',imageUrl: '/images/share/title.png',}},
})

wxss:

/* 表格 */
/* 表格样式 */
.table {font-size:85%;display: table;width: 200%;border-collapse: collapse;box-sizing: border-box;
}
.table-tr {display: table-row;
}
.table-th1 {width:40%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color:#51aad6;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-th2 {width:40%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color:#51aad6;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-th3 {width:40%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color:#51aad6;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-td1{width:40%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-td2 {width:40%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-td3 {width:40%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;word-break: break-all;/* padding: 5px 0; */
}
/* 超链接 */
.a{color:rgb(20, 119, 185);
}
/* 搜索框 */
.search_position{display: flex;align-items: center;justify-content: center;width:100%;margin:5% 0;
}
.search{width:90%;/* border:1px solid black; */display: flex;
}
.search_left{font-size:105%;font-weight: bold;color:rgb(90, 90, 90);width:30%;
}
.search_right{border-bottom:1px solid rgb(95, 95, 95);width:70%;
}
.button{margin:5%;background-color:#40A4D6;color:#fff;
}

后端thinkphp:

 public function search_all_productiond(){$username = input('post.username');$wip_entity_name = input('post.wip_entity_name');$operation_code = input('post.operation_code');$item_no = input('post.item_no');$item_name = input('post.item_name');$page = input('post.page', 1, 'intval'); // 每页显示数量$pageSize = input('post.pageSize', 10, 'intval'); // 每页显示数量$data['info'] = db::table('wip_operation_plan');$employee_num = db::table('fa_account_info')->where(['username' => $username])->value('employee_num');//数据$data['info'] = db::table('wip_transactions')->alias('d') //设置wip_jobs_all的别名->join(['wip_jobs_all' => 'a'], 'd.wip_entity_name=a.wip_entity_name')// ->join(['so_lines_all' => 'e'], 'a.so_header_number=e.order_number AND a.so_line_number=e.line')// ->join(['so_headers_all' => 'b'], 'b.order_number=e.order_number')->join(['sf_item_no' => 'c'], 'a.primary_item=c.item_no')->field('d.*,c.item_no as item_no,c.item_name as item_name,c.units as uom')->where(['employee_num' => $employee_num])->where(['d.wip_entity_name'  =>  ['like', '%' . $wip_entity_name . '%'],'d.operation_code'  =>  ['like', '%' . $operation_code . '%'],'c.item_name'  =>  ['like', '%' . $item_name . '%'],'c.item_no'  =>  ['like', '%' . $item_no . '%'],])->order(array('end_date' => 'desc'))->limit(($page - 1) * $pageSize, $pageSize)->select();//不加分页条件的总数量$data['count'] = db::table('wip_transactions')->alias('d') //设置wip_jobs_all的别名->join(['wip_jobs_all' => 'a'], 'd.wip_entity_name=a.wip_entity_name')// ->join(['so_lines_all' => 'e'], 'a.so_header_number=e.order_number AND a.so_line_number=e.line')// ->join(['so_headers_all' => 'b'], 'b.order_number=e.order_number')->join(['sf_item_no' => 'c'], 'a.primary_item=c.item_no')->field('d.*,c.item_no as item_no,c.item_name as item_name,c.units as uom')->where(['employee_num' => $employee_num])->where(['d.wip_entity_name'  =>  ['like', '%' . $wip_entity_name . '%'],'d.operation_code'  =>  ['like', '%' . $operation_code . '%'],'c.item_name'  =>  ['like', '%' . $item_name . '%'],'c.item_no'  =>  ['like', '%' . $item_no . '%'],])->order(array('end_date' => 'desc'))->count();for ($i = 0; $i < count($data['info']); $i++) {//计算时差$data['info'][$i]['hours_diff'] = number_format(($data['info'][$i]['end_date'] - $data['info'][$i]['begin_date']) / 3600, 4);if ($data['info'][$i]['transaction_type'] != '良品') {$data['info'][$i]['hours_diff'] = '';}//处理时间$data['info'][$i]['transaction_date'] = date('Y-m-d', $data['info'][$i]['transaction_date']);$data['info'][$i]['begin_date'] = date('Y-m-d H:i:s', $data['info'][$i]['begin_date']);$data['info'][$i]['end_date'] = date('Y-m-d H:i:s', $data['info'][$i]['end_date']);if (!$data['info'][$i]['transaction_quantity']) {$data['info'][$i]['transaction_quantity'] = '';}//员工姓名$data['info'][$i]['employee_name'] = db::table('hr_employees')->where(['employee_num' => $data['info'][$i]['employee_num']])->value('employee_name');}echo json_encode($data);}

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

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

相关文章

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测…

【Java Web基础】mvn命令、Maven的安装与配置

本文极大程度上来自Maven安装(超详解)&#xff0c;但是担心安的过程中遇到什么不一样的问题&#xff0c;顺便加深印象&#xff0c;所以还是打算自己弄一篇。 目录 第一步&#xff1a;Download Maven第二步&#xff1a;解压与安装2.1 解压2.2 安装 第一步&#xff1a;Download …

不需要C盘清理软件,这样清理c盘也很有效!

“救命&#xff01;电脑c盘又红了&#xff01;感觉每次用电脑都在清理c盘&#xff0c;已经累了&#xff0c;大家有什么比较好的c盘清理软件或者方法可以给我推荐推荐吗&#xff1f;” 电脑的c盘为我们保存了很多重要的文件和系统资料。因此&#xff0c;我们可能会发现&#xff…

无涯教程-Lua - for语句函数

for 循环是一种重复控制结构&#xff0c;可让您有效地编写需要执行特定次数的循环。 for loop - 语法 Lua编程语言中 for 循环的语法如下- for init,max/min value, increment dostatement(s) end 这是 for 循环中的控制流程- 首先执行 init 步骤&#xff0c;并且仅执行一…

网络安全漏洞(风险)扫描类型

漏洞&#xff08;风险&#xff09;扫描是保障现代企业数字化转型安全开展过程中一个至关重要的组成部分&#xff0c;可以帮助企业识别数字化系统和应用中的各类安全缺陷。在实际应用时&#xff0c;漏洞扫描的类型需要和它们能够保护的IT环境保持一致。如果充分了解不同类型漏洞…

QT中使用ffmpeg的api进行视频的播放

在了解ffmpeg使用api进行视频的播放之前&#xff0c;我们首先了解一下视频的播放流程。 一、视频的播放流程 首先是我们最常见的视频文件&#xff0c;在播放流程中首先是要打开视频文件&#xff0c;将视频文件中的数据进行解封装&#xff0c;之后再将解封装之后的视频进行解码…

单片机中的通用LED驱动

前言 项目中需要用到很多的LED灯&#xff0c;存在不同的闪烁方式&#xff0c;比如单闪&#xff0c;双闪&#xff0c;快闪&#xff0c;慢闪等等&#xff0c;我需要一个有如下特性的LED驱动 方便的增加不同闪烁模式可以切换闪烁模式增加LED数目不会有太多的改动方便移植&#x…

Stable Diffusion 硬核生存指南:WebUI 中的 VAE

本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议&#xff0c;欢迎转载、或重新修改使用&#xff0c;但需要注明来源。 署名 4.0 国际 (CC BY 4.0) 本文作者: 苏洋 创建时间: 2023年07月30日 统计字数: 11485字 阅读时间: 23分钟阅读 本文链接: https://soulteary.com/2023/07…

MySQL实用命令

一、 DISTINCT 去重 案例&#xff1a;user_test表对班级字段进行去重操作 SELECT DISTINCT class FROM user_test 二、 的作用 案例&#xff1a; SELECT NULL10 三、 concat 实现连接字符串 ​​​案例&#xff1a; SELECT CONCAT(NAME,class) AS 姓名班级 FROM user_test 四…

【多模态】23、RO-ViT | 基于 Transformer 的开发词汇目标检测(CVPR2023)

文章目录 一、背景二、方法2.1 基础内容2.2 Region-aware Image-text Pretraining2.3 Open-vocabulary Detector Finetuning 三、效果3.1 细节3.2 开放词汇目标检测效果3.3 Image-text retrieval3.4 Transfer object detection3.5 消融实验 论文&#xff1a;Region-Aware Pretr…

《网络是怎样连接的》(二.2)

(6条消息) 《网络是怎样连接的》&#xff08;二.1&#xff09;_qq_38480311的博客-CSDN博客 本文主要取材于 《网络是怎样连接的》 第二章 2.5 2.6章节。 目录 简述&#xff1a; 本文的主要内容是 以太网的收发操作 和 UDP协议的收发操作。 IP与以太网的包收发操作 包是什…

蓝海卓越计费管理系统任意文件读取下载

看了大佬的文章&#xff0c;太牛逼啦&#xff0c;下面是大佬文章原文。 蓝海卓越计费管理系统任意文件读取下载 鹰图语法&#xff1a;web.title"蓝海卓越计费管理系统" 访问url 直接更改url就行了 /download.php?file../../../../../etc/passwd

我能“C“——扫雷游戏

一.前言&#xff1a; 扫雷游戏&#xff0c;一款经典的游戏&#xff0c;没玩过的话也可以试着玩一玩&#xff0c;这样对写扫雷游戏这个小游戏的化是会有一个很好的思路的。那么本片博客就来介绍如何实现扫雷游戏的具体步骤。扫雷游戏链接&#x1f449; 扫雷游戏网页版 - Minesw…

【MMCV】mmpretrain/mmclassification概览、环境安装与验证

概览 MMPretrain 是一个全新升级的预训练开源算法框架,旨在提供各种强大的预训练主干网络, 并支持了不同的预训练策略。MMPretrain 源自著名的开源项目 MMClassification 和 MMSelfSup,并开发了许多令人兴奋的新功能。 目前,预训练阶段对于视觉识别至关重要,凭借丰富而强…

GPT Prompt编写的艺术:如何提高AI模型的表现力

随着AI技术的迅速发展&#xff0c;人工智能模型变得越来越强大&#xff0c;能够协助我们完成各种任务。然而&#xff0c;如何更好地利用AI的能力仍然存在很大的探索空间。在与AI进行交互的过程中&#xff0c;我们主要依赖于Prompt&#xff0c;不管是直接与大模型交互&#xff0…

Simulink仿真模块 - Relay

目录 说明 模块特性 Relay是在两个常量输出之间进行切换。 在仿真库中的位置为:Simulink / Discontinuitie模型为: 说明 Relay 模块的输出在两个指定值之间切换。打开中继时,它会一直保持打开,直到输入低于 Switch off point 参数的值为止。关闭中继时,它会一直保持关闭…

[C++项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍...

项目背景 Boost库是C中一个非常重要的开源库. 它实现了许多C标准库中没有涉及的特性和功能, 一度成为了C标准库的拓展库. C新标准的内容, 很大一部分脱胎于Boost库中. Boost库的高质量代码 以及 提供了更多实用方便的C组件, 使得Boost库在C开发中会被高频使用 为方便开发者学…

Excel功能总结

1&#xff09;每一张表格上都打印表头 “页面布局”-->“打印标题”-->页面设置“工作表”页-->打印标题“顶端标题行” 如&#xff1a;固定第1~2行&#xff0c;设置成“$1:$2” 2&#xff09;将页面内容打印在一页【缩印】 1.选好需要打印的区域&#xff0c;“页面布…

算法通关村——如何使用中序和后序来恢复一棵二叉树

通过序列构造二叉树 给出以下三个二叉树遍历的序列&#xff1a; (1) 前序: 1 2 3 4 5 6 8 7 9 10 11 12 13 15 14 (2) 中序: 3 4 8 6 7 5 2 1 10 9 11 15 13 14 12 (3) 后序: 8 7 6 5 4 3 2 10 15 14 13 12 11 9 1 前中序复原二叉树 所需序列 (1) 前序: 1 2 3 4 5 6 8 7 9 10 …

瑞芯微RK3568开发板保姆级护航入门学习嵌入式

资料优势 专为3568编写|迅为原创|拒绝网络拼凑 20个手册2800页手册进行结构分层适用于学习与开发 为了方便大家清晰快速的学习&#xff0c;迅为iTOP-3568开发板手册资料全面升级&#xff0c;对手册内容进行了结构分层&#xff0c;共计20个文档&#xff0c;超2800页的资料专为…