aiot-app/pages/warehouse/outbound/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="设备出库单"
      @clickLeft="back"
    ></uni-nav-bar>

    <template>
      <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="tab-item filter">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-shaixuan"
            size="16"
            color="#ccc"
          ></uni-icons
        ></view>
      </view>
      <view class="tab-title__placeholder"></view>
    </template>

    <view class="listBox">
      <view class="listTit">
        <view style="display: inline-block"
          ><u-tag text="未受理" size="mini" shape="circle" type="error"></u-tag
        ></view>
        <view class="name">W0139901938881</view>
        <view class="date">2020-10-09 11:34</view>
      </view>

      <view class="listCont">
        <view class="item"><text>仓库：</text>5001-混炼料仓</view>
        <view class="item"><text>入库登记人：</text>何柏华</view>
        <view class="item"><text>负责人：</text>何柏华</view>
        <view class="item"><text>送货人：</text>李四</view>
        <view class="item" style="width: 100%"
          ><text>来源单据：</text>保养工单 W30981288831</view
        >
      </view>

      <view class="listbtn">
        <view class="operBox">
          <view
            ><u-button type="primary" size="small" text="受理"></u-button
          ></view>
          <view
            ><u-button type="primary" size="small" text="改派"></u-button
          ></view>
        </view>
      </view>
    </view>

    <view class="listBox">
      <view class="listTit">
        <view style="display: inline-block"
          ><u-tag
            text="已完成"
            size="mini"
            shape="circle"
            type="error"
            bgColor="#999"
            borderColor="#999"
          ></u-tag
        ></view>
        <view class="name">W0139901938881</view>
        <view class="date">2020-10-09 11:34</view>
      </view>

      <view class="listCont">
        <view class="item"><text>仓库：</text>5001-混炼料仓</view>
        <view class="item"><text>入库登记人：</text>何柏华</view>
        <view class="item"><text>负责人：</text>何柏华</view>
        <view class="item"><text>送货人：</text>李四</view>
        <view class="item" style="width: 100%"
          ><text>来源单据：</text>保养工单 W30981288831</view
        >
      </view>

      <view class="listbtn">
        <view class="operBox">
          <view
            ><u-button type="success" size="small" text="登记"></u-button
          ></view>
        </view>
      </view>
    </view>

    <view class="listBox">
      <view class="listTit">
        <view style="display: inline-block"
          ><u-tag text="未登记" size="mini" shape="circle"></u-tag
        ></view>
        <view class="name">W0139901938881</view>
        <view class="date">2020-10-09 11:34</view>
      </view>

      <view class="listCont">
        <view class="item"><text>仓库：</text>5001-混炼料仓</view>
        <view class="item"><text>入库登记人：</text>何柏华</view>
        <view class="item"><text>负责人：</text>何柏华</view>
        <view class="item"><text>送货人：</text>李四</view>
        <view class="item" style="width: 100%"
          ><text>来源单据：</text>保养工单 W30981288831</view
        >
      </view>

      <view class="listbtn">
        <view class="operBox">
          <view
            ><u-button type="success" size="small" text="登记"></u-button
          ></view>
        </view>
      </view>
    </view>

    <view class="listBox">
      <view class="listTit">
        <view style="display: inline-block"
          ><u-tag text="未受理" size="mini" shape="circle" type="error"></u-tag
        ></view>
        <view class="name">W0139901938881</view>
        <view class="date">2020-10-09 11:34</view>
      </view>

      <view class="listCont">
        <view class="item"><text>仓库：</text>5001-混炼料仓</view>
        <view class="item"><text>入库登记人：</text>何柏华</view>
        <view class="item"><text>负责人：</text>何柏华</view>
        <view class="item"><text>送货人：</text>李四</view>
        <view class="item" style="width: 100%"
          ><text>来源单据：</text>保养工单 W30981288831</view
        >
      </view>

      <view class="listbtn">
        <view class="operBox">
          <view
            ><u-button type="primary" size="small" text="受理"></u-button
          ></view>
          <view
            ><u-button type="primary" size="small" text="改派"></u-button
          ></view>
        </view>
      </view>
    </view>

    <view class="footBox">
      <view class="reg"
        ><uni-icons
          custom-prefix="iconfont"
          type="icon-shixiangxinzeng"
          size="20"
          color="#fff"
        ></uni-icons>
        出库登记</view
      >
    </view>
  </view>
</template>

<script>
import { post } from '@/utils/api.js'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: {},
  data () {
    return {
      tabList: [
        { value: '2', label: '全部', list: [] },
        { value: '99', label: '未受理', list: [] },
        { value: '2', label: '未登记', list: [] },
        { value: '99', label: '已完成', list: [] }
      ],
      pickTabIndex: 0
    }
  },
  onLoad () {
    this.getFirstList()
  },
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    getFirstList: function () {
      page = 1
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList()
    },
    getMoreLists: function () {
      //获取更多数据
      page++
      this.getList()
    },
    getList () {
      uni.showLoading({
        title: '加载中'
      })
      let data = {
        page,
        size
      }
      let status = this.tabList[this.pickTabIndex].value
      //2 - 99 [已完成]
      post(this.apiUrl + '/repair/worksheet/list?status=' + status, data)
        .then(res => {
          let data = res.data.items
          let pageTotal = res.data.pageTotal
          if (page === 1) {
            this.tabList[this.pickTabIndex].list = res.data.items
          } else {
            data.forEach(element => {
              this.tabList[this.pickTabIndex].list.push(element)
            })
          }
          page < pageTotal ? (isEnd = false) : (isEnd = true)
        })
        .then(() => {
          uni.hideLoading()
        })
    },
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getFirstList()
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  padding-bottom: 120rpx;
}
.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;
  .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 {
  padding: 20rpx 0;
  margin: 30rpx 20rpx;
  border-bottom: 1px #f2f2f2 solid;
  .listTit {
    display: flex;
    align-items: center;
    .name {
      margin-left: 10px;
    }
    .date {
      font-size: 28rpx;
      margin-left: auto;
      color: #999;
    }
  }
  .listCont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
    .item {
      width: 50%;
      font-size: $uni-font-size-sm;
      line-height: 48rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    .item text {
      color: #666;
    }
  }

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

  .listbtn button {
    margin-right: 20rpx;
  }
}

.footBox {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  view {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reg {
    background: $u-success-dark;
  }
  .uni-icons {
    margin-right: 8rpx !important;
    font-weight: bold;
  }
}
</style>