微信小程序：点击按钮实现数据加载（带模糊查询）

news2024/11/15 21:28:45

效果图

代码 

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.coloradmin.cn/o/834683.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣 416. 分割等和子集

力扣 416. 分割等和子集

题目来源&#xff1a;https://leetcode.cn/problems/partition-equal-subset-sum/description/ C题解&#xff08;思路来源代码随想录&#xff09; &#xff1a; 背包问题有多种背包方式&#xff0c;常见的有&#xff1a;01背包、完全背包、多重背包、分组背包和混合背包等等。…
阅读更多...
实验笔记之——Android项目的适配

实验笔记之——Android项目的适配

android有一个很烦人的点就是版本之间差距较大&#xff0c;且不兼容&#xff0c;导致不同版本之间代码兼容很容易出问题&#xff0c;一个常见的例子就是几年前自己开发的app&#xff0c;几年后再用竟然配置不了。。。为此&#xff0c;写下本博客记录一下配置旧项目的过程。 …
阅读更多...
IDA+Frida分析CTF样本和Frid源码和objection模块

IDA+Frida分析CTF样本和Frid源码和objection模块

文章目录 一些资料IDA调试命令IDA调试安卓的10个技巧objection基本使用 Wallbreaker1frida源码阅读之frida-java 第一个实例EasyJNI第二个实例objection资料 art_trace2.pyart_trace2.js IDAFrida分析CTF样本和Frid源码和objection模块 一些资料 IDA调试命令 adb devices adb…
阅读更多...
Redis 如何解决缓存雪崩、缓存击穿、缓存穿透难题

Redis 如何解决缓存雪崩、缓存击穿、缓存穿透难题

前言 Redis 作为一门热门的缓存技术&#xff0c;引入了缓存层&#xff0c;就会有缓存异常的三个问题&#xff0c;分别是缓存击穿、缓存穿透、缓存雪崩。我们用本篇文章来讲解下如何解决&#xff01; 缓存击穿 缓存击穿: 指的是缓存中的某个热点数据过期了&#xff0c;但是此…
阅读更多...
我们一起聊聊Docker And Dockerfile

我们一起聊聊Docker And Dockerfile

目录 一、前言 二、了解Dockerfile 三、Dockerfile 指令 四、多阶段构建 五、Dockerfile 高级用法 六、小结 一、前言 对于开发人员来说&#xff0c;会Docker而不知道Dockerfile等于不会Docker&#xff0c;上一篇文章带大家学习了Docker的基本使用方法&#xff1a;《一文…
阅读更多...
Mybatis where 1=1 会导致索引失效？

Mybatis where 1=1 会导致索引失效？

背景 这几天在网上百度看到有说法 where 11 会导致索引失效 实践 1.直接where 条件 这是我自己本地建立的表&#xff0c;索引也看到了&#xff0c;是这个index_shopname 2.where 11 and 条件 这个是加了11的&#xff0c;可以看到也是走了索引的 3.直接select * from whe…
阅读更多...
测试平台——用户模块开发

测试平台——用户模块开发

这里写目录标题 一、创建子应用二、用户注册设计1、用户注册模型类设计a、Django认证系统提供了用户模型类User&#xff0c;为什么还要定义User模型类?b、AbstractUserc、自定义用户模型类的字段有d、User模型类编写好了就可以了吗? 2、用户注册序列化器类设计a、注意b、单字…
阅读更多...
基于分级安全的OpenHarmony架构设计

基于分级安全的OpenHarmony架构设计

本文转载自 OpenHarmony TSC 官方微信公众号《峰会回顾第1期 | 基于分级安全的OpenHarmony架构设计》 演讲嘉宾 | 付天福 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 付天福&#xff0c;OpenHarmony技术指导委员会安全及机密计算TSG负责人&#xff0c;华为公司科学家委员会…
阅读更多...
机器人“瓦力”近在咫尺？谷歌最新的RT-2 AI模型简介

机器人“瓦力”近在咫尺？谷歌最新的RT-2 AI模型简介

“首创”的机器人 AI 模型能够识别垃圾并执行复杂的动作。 上周五&#xff0c;谷歌 DeepMind 宣布了机器人变形器 2&#xff08;RT-2&#xff09;&#xff0c;这是一种“首次推出”的视觉-语言-行动&#xff08;VLA&#xff09;模型&#xff0c;利用从互联网上抓取的数据&…
阅读更多...
理解 CSS 中的 Containing Block

理解 CSS 中的 Containing Block

前言 在开始本文之前先来看一个例子&#xff0c;下面一段简单的 html 代码&#xff0c;布局很简单&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"w…
阅读更多...
clickhouse调研报告2

clickhouse调研报告2

由Distributed表发送分片数据 clickhouse分区目录合并 clickhouse副本协同流程 clickhouse索引查询逻辑 clickhouse一级索引生成逻辑(两主键) clickhouse的data目录下包含如下目录： [root@brfs-stress-01 201403_10_10_0]# ll /data01/clickhouse/data total 4 drwxr-x---…
阅读更多...
【Linux操作系统】网络配置详解：从原理到实践（详细通俗讲明DNS）

【Linux操作系统】网络配置详解：从原理到实践（详细通俗讲明DNS）

导语&#xff1a;网络配置是Linux系统中的一项重要任务&#xff0c;合理的网络配置可以保证计算机与其他设备的正常通信。本文将详细介绍Linux网络配置的原理和实践&#xff0c;包括网络配置原理、查看网络IP和网关、测试网络连通性、网络环境配置、设置主机名和hosts映射以及主…
阅读更多...
获取全部的地区并生成表格

获取全部的地区并生成表格

思路 写文章的时间2023-8-4&#xff0c;大部分网页设置的区域都是先是省&#xff0c;然后通过省获取对应的市&#xff0c;再通过市获取对应的区&#xff0c;以此类推。所以模拟的请求也是按照这个逻辑&#xff0c;先获取所有的省&#xff0c;再获取所有的市&#xff0c;最后获取…
阅读更多...
【2023华数杯全国大学生数学建模竞赛】C题 母亲身心健康对婴儿成长的影响第一、二问

【2023华数杯全国大学生数学建模竞赛】C题 母亲身心健康对婴儿成长的影响第一、二问

第一问部分截图 第二问部分截图 参考文献 理论和可直接运行代码获取参见&#xff1a;理论和可直接运行代码获取参见&#xff1a;理论和可直接运行代码获取参见&#xff1a;理论和可直接运行代码获取参见&#xff1a; 有人看的话更新后续问题思路。
阅读更多...
【项目经验】产研流程（超级详细的步骤）

【项目经验】产研流程（超级详细的步骤）

一、产研流程简述 项目立项-——定需求——Sprint需求宣讲会——技术方案——技术方案评审会——开发及单元测试——测试用例评审会——提测——测试——Sprint评审会——发版——Sprint复盘会 二、产研流程详情 以下部分根据Sprint里程碑节点进行循环&#xff08;sprint周期…
阅读更多...
Java8实战-总结12

Java8实战-总结12

Java8实战-总结12 Lambda表达式Lambda 和方法引用实战第1步&#xff1a;传递代码第2步&#xff1a;使用匿名类第3步&#xff1a;使用Lambda表达式第4步&#xff1a;使用方法引用 复合Lambda表达式的有用方法比较器复合逆序比较器链 函数复合 Lambda表达式 Lambda 和方法引用实…
阅读更多...
【C++】从无到有了解并掌握C++面向对象编程的三大特性——封装、继承、多态

【C++】从无到有了解并掌握C++面向对象编程的三大特性——封装、继承、多态

前置知识&#xff1a;类和对象 参考书籍&#xff1a;《C Primer 第五版》 目录 什么是面向过程&#xff1f;什么是面向对象&#xff1f; 一、封装 1、封装的含义以及如何实现封装 1.1 访问限定符&#xff08;访问说明符&#xff09; 1.2 什么是封装&#xff1f; 2、封装的优点…
阅读更多...
2023年华数杯选题人数发布！！

2023年华数杯选题人数发布！！

该选题人数&#xff0c;主要基于根据各个平台开赛后12小时各项数据统计&#xff0c;进行评估&#xff08;方法见注释&#xff09;&#xff0c;最终得出2023年华数杯选选题人数&#xff0c;大致为 题号选题人数A120B159C420 注释&#xff1a;选题人数来源&#xff1a;源自各个平…
阅读更多...
Java字符串常量池以及new String(“abc“)到底创建了几个对象？各种字符串到底相不相等？

Java字符串常量池以及new String(“abc“)到底创建了几个对象？各种字符串到底相不相等？

new String(“abc”)到底创建了几个对象&#xff1f; 字符串常量池 是 JVM 为了提升性能和减少内存消耗针对字符串&#xff08;String 类&#xff09;专门开辟的一块区域&#xff0c;主要目的是为了避免字符串的重复创建。 1.如果字符串常量池中不存在“abc”的引用&#xff…
阅读更多...
GD32F103VE外部中断

GD32F103VE外部中断

GD32F103VE外部中断线线0~15&#xff0c;对应外部IO口的输入中断。它有7个中断向量&#xff0c;外部中断线0 ~ 4分别对应EXTI0_IRQn ~ EXTI4_IRQn中断向量&#xff1b;外部中断线 5 ~ 9 共用一个 EXTI9_5_IRQn中断向量&#xff1b;外部中断线10~15 共用一个 EXTI15_10_IRQn中断…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023