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

效果图

代码

wxml:

html 复制代码

<!-- 搜索框-->
<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:

javascript 复制代码

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:

css 复制代码

/* 表格 */
/* 表格样式 */
.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:

php 复制代码

 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);
  }