aiot-app/pages/production/order/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="生产工单"
      @clickLeft="back"
    >
    </uni-nav-bar>

    <view class="tab-title">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        v-text="item.label"
        :class="index === pickTabIndex ? 'active' : ''"
        @click="changeChartsTab(index)"
      ></view>
      <view class="search-icon" @click="searchVisible = true">
        筛选
        <image src="~@/static/filter.svg" mode=""></image>
      </view>
    </view>
    <view class="tab-title__placeholder"> </view>
    <card :list="tableList"></card>

    <!-- 搜索组件 -->
    <u-popup
      :show="searchVisible"
      mode="right"
      @close="searchVisible = false"
      @open="openSearch"
    >
      <view class="search-container">
        <view class="title">工单筛选</view>
        <uni-forms
          ref="customForm"
          :modelValue="popupInfo"
          label-position="top"
        >
<!--          <uni-forms-item label="生产版本" name="createTime" label-width="200rpx">
            <view class="version-wrapper">
                <checkbox-group @change="checkboxChange" class="version-group">
					<label class="wrapper-label" v-for="item in items" :key="item.value"
					  :style="item.checked?'background:#157a2c;color:#fff':''"
					>
						<view>
							<checkbox :value="item.value" :checked="item.checked" style="display: none;"/>
						</view>
						<view>{{item.name}}</view>
					</label>
				</checkbox-group>
            </view>
          </uni-forms-item> -->
          <uni-forms-item label="创建时间" name="createTime" label-width="500rpx">
			 <uni-datetime-picker  type="date" v-model="popupInfo.createTimeStart" @change="confirmStart">
				<div class="picker-time"> {{showStart}} </div>
			 </uni-datetime-picker>
		     <uni-datetime-picker  type="date" v-model="popupInfo.createTimeEnd"@change="confirmEnd">
		    	<div class="picker-time"> {{showEnd}} </div> 
		     </uni-datetime-picker>		
          </uni-forms-item>
          <uni-forms-item label="计划开始时间" name="planTime"  label-width="500rpx">
              <uni-datetime-picker  type="date" v-model="popupInfo.planStartTimeStart" @change="confirmPlanStart">
              				<div class="picker-time"> {{planStart}} </div>
              </uni-datetime-picker>
              <uni-datetime-picker  type="date" v-model="popupInfo.planStartTimeEnd"@change="confirmPlanEnd">
              		    	<div class="picker-time"> {{planEnd}} </div> 
              </uni-datetime-picker>	
          </uni-forms-item>
        </uni-forms>
        <view class="footer">
          <view class="btn reset" @click="handleReset"> 重置 </view>
          <view class="btn search" @click="handleSearch"> 搜索 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { get, getJ, post, postJ } from '@/utils/api.js'
import card from './components/card.vue'
let [page, size, isEnd] = [1, 10, false]
import { getListByStatus } from "@/api/production/order.js";
export default {
  components: {
    card
  },
  data () {
    return {
      searchVisible: false,
      tabList: [
        {
          value: '4',
          label: '待生产'
        },
        {
          value: '5',
          label: '生产中'
        },
        {
          value: '6',
          label: '已完成'
        }
      ],
      statusList: [
        { code: '4', label: '待生产' },
        { code: '5', label: '生产中' },
        { code: '6', label: '已完成' }
      ],
      pickTabIndex: 0,
      popupInfo: {
        createTimeStart:'',
		createTimeEnd:'',
		planStartTimeStart:'',
		planStartTimeEnd:''
      }, //筛选数据
	  showStart:'起始日期:',
	  showEnd:'结束日期:',
	  planStart:'起始日期:',
	  planEnd:'结束日期:',
      tableList: [],
      // warehouseList: [],
		items: [
			{
				value: '挤压',
				name: '挤压'
			},
			{
				value: '模压',
				name: '模压',
				checked: 'true'
			},
			{
				value: '等静压',
				name: '等静压'
			}
		]
    }
  },
  onShow () {
    // this._getWarehouseChildren()
    // this.getFirstList()
  },
  //触底加载
  onReachBottom: function () {
    // if (isEnd) {
    //   uni.showToast({
    //     title: '已经没有更多数据了！',
    //     icon: 'none',
    //     duration: 1000 //提示持续时间
    //   })
    //   return
    // }
    // // 显示加载图标
    // uni.showLoading({
    //   title: '数据加载中'
    // })
    // this.getMoreLists()
  },
  methods: {
	confirmStart (e) {
	  this.popupInfo.createTimeStart = e
	  this.showStart = '起始日期:'+ e
	},
	confirmEnd (e) {
	  this.popupInfo.createTimeEnd = e
	  this.showEnd ='结束日期:'+ e
	},
	confirmPlanStart (e) {
	  this.popupInfo.planStartTimeStart = e
	  this.planStart = '起始日期:'+ e
	},
	confirmPlanEnd (e) {
	  this.popupInfo.planStartTimeEnd = e
	  this.planEnd = '结束日期:'+ e
	},
	checkboxChange: function (e) {
		var items = this.items,
			values = e.detail.value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if(values.includes(item.value)){
				this.$set(item,'checked',true)
			}else{
				this.$set(item,'checked',false)
			}
		}
	},
    addAllocation () {
      uni.navigateTo({
        url: '/pages/warehouse/inventoryAllocation/edit'
      })
    },
    handleReset () {
      this.popupInfo = {
        createTimeStart:'',
        createTimeEnd:'',
        planStartTimeStart:'',
        planStartTimeEnd:''
      }
      this.tableList = []
      this.getFirstList()
    },
    handleSearch () {
      this.getFirstList()
    },
    // 搜索弹窗
    openSearch () {
      // console.log('open');
    },
    getFirstList () {
      page = 1
      this.searchVisible = false
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList()
    },
    getMoreLists () {
      //获取更多数据
      page++
      this.getList()
    },
    //获取列表信息
    getList () {
      uni.showLoading({
        title: '加载中'
      })
	  const list = []
	  list.push(this.tabList[this.pickTabIndex].value)
      let data = {
        pageNum:page,
        size,
        ...this.popupInfo,
        statusList: list
      }

      if (data.range?.length) {
        data.createTimeStart = data.range[0]
        data.createTimeEnd = data.range[1]
      }
      delete data.range
	  
	  getListByStatus(data).then(res=>{
			if (page === 1) {
			  this.tableList = res.data.list
			} else {
			  this.tableList.push(...res.data.list)
			}
			isEnd = this.tableList.length >= res.data.count
	  }).then(()=>{
		  uni.hideLoading()
	  })
    },
    //切换tab
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.handleSearch()
    },
    //查看详情
    viewDetails (id, code) {
      uni.navigateTo({
        url: '/pages/warehouse/enterHouse/details?id=' + id + '&code=' + code
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  padding-bottom: 120rpx;
}
.search-container {
  width: 70vw;
  padding: 30rpx 36rpx;
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-shadow: 0 10rpx 30rpx 0 #000;
    .btn {
      width: 50%;
      height: 80rpx;
      border-radius: 0 !important;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      &.reset {
        color: $j-primary-border-green;
      }
      &.search {
        color: #fff;
        background-color: $j-primary-border-green;
      }
    }
  }
  .title {
    font-weight: bold;
    font-size: 30rpx;
	margin-bottom: 20rpx;
  }
  .status-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    view {
      background-color: rgba(242, 242, 242, 1);
      height: 60rpx;
      border-radius: 30rpx;
      line-height: 60rpx;
      text-align: center;
      width: 160rpx;
      border: 1rpx solid rgba(242, 242, 242, 1);
      &.active {
        color: #157a2c;
        border-color: rgba(21, 122, 44, 1);
      }
    }
  }
  /deep/.uni-date {
    .uni-icons {
      display: none;
    }
    .uni-date-x {
      padding: 0;
      view {
        margin: 0 20rpx;
      }
    }
  }
  /deep/.uni-date__x-input,
  /deep/.uni-easyinput__content-input {
    height: 60rpx;
    border-radius: 30rpx;
    overflow: hidden;
    background-color: rgba(242, 242, 242, 1);
  }
  .version-group{
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  flex-wrap: wrap;
  }
  .wrapper-label{
	  height: 50rpx;
	  padding: 0 20rpx;
	  border: 1rpx solid #ccc;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 24rpx;
	  margin: 0 20rpx 20rpx 0;
  }
  .picker-time{
	  width: 100%;
	  height: 60rpx;
	  line-height: 60rpx;
	  border: 1rpx solid #ccc;
	  margin-bottom: 20rpx;
	  text-indent: 10rpx;
	  border-radius: 4rpx;
  }
}
.tab-title {
  position: fixed;
  z-index: 99;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  .search-icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    white-space: nowrap;
    margin-left: 10rpx;
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .tab-item {
    width: 25%;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
    font-weight: bold;
  }

  .tab-item.filter {
    flex: 1;
    padding: 0px 30rpx;

    .uni-icons {
      display: flex;
      padding-top: 5px;
    }
  }
}

.listBox {
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 8px;
  .listTit {
    display: flex;
    align-items: center;
    .stuts {
      width: 55px;
      font-size: 12px;
      // border: 1px solid red;
    }
    .name {
      font-size: $uni-font-size-base;
      padding-left: 15rpx;
    }

    .date {
      font-size: $uni-font-size-sm;
      padding-left: 45rpx;
      color: #999;
    }
  }

  .listCont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 20rpx;
    flex-direction: row;
    margin-top: 10rpx;
    color: #666;

    // border: 1px solid red;
    .item {
      width: 50%;
      font-size: $uni-font-size-sm;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }

    .item text {
      color: #666;
    }
    .item-left {
      font-size: 20px;
      font-weight: 600;
      color: #999;
      position: relative;
      left: 90%;
      top: -55rpx;
    }
  }
  .item-top {
    height: 5rpx;
    width: 96%;
    margin: 0 auto;
    border-bottom: 1px solid #d8d3d3;
  }

  .listbtn {
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .operBox {
      display: flex;
      align-items: center;
    }
  }

  .listbtn button {
    margin-right: 20rpx;
  }
}
</style>