aiot-app/pages/maintenanceWorkorder/order/order copy.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="维修工单"
      @clickLeft="back"
      right-icon="scan"
      @clickRight="HandlScanCode"
    ></uni-nav-bar>
    <template>
      <view class="tab-title">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          :class="index === pickTabIndex ? 'active' : ''"
          @click="changeChartsTab(index)"
        >
          {{ item.label }}
          <text v-if="index == 0" class="title-red">{{ item.number }}</text>
          <text v-else class="title-num">({{ item.number }})</text>
        </view>
      </view>
      <view class="tab-title__placeholder"></view>
    </template>

    <OrderTask
      v-for="(item, index) in tabList"
      :key="index"
      v-show="index === pickTabIndex"
      :list="item.list"
      :type="tabList.value"
    >
    </OrderTask>
  </view>
</template>

<script>
import OrderTask from './OrderTask.vue'
import { post, postJ } from '@/utils/api.js'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: {
    OrderTask
  },
  data () {
    return {
      tabList: [
        {
          value: 0,
          label: '待执行',
          list: [],
          number: 0
        },
        {
          value: 1,
          label: '执行中',
          list: [],
          number: 0
        },
        {
          value: 2,
          label: '已报工',
          list: [],
          number: 0
        }
      ],
      pickTabIndex: 0,
      qrContent: null,
      barType: 0
    }
  },
  onShow () {
    this.getFirstList()
    this.getStatus()
    let _this = this
    uni.$off('scancode') // 每次进来先 移除全局自定义事件监听器
    uni.$on('scancode', function (data) {
      _this.qrContent = data.code.trim()
      let index = _this.qrContent.indexOf('@_@')
      if (index == -1) {
        _this.barType = 0
      } else {
        _this.barType = _this.qrContent.substring(index + 3, index + 4)
      }
      _this.getData()
    })
  },
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    getStatus () {
      postJ(this.apiUrl + `/workOrder/getWorkOrderTotal`, {
        workOrderType: 3
      }).then(res => {
        let data = res.data
        this.tabList[0].number = data.waitExecutionNum
        this.tabList[1].number = data.executoryNum
        this.tabList[2].number = data.finishNum
      })
    },
    // 扫码
    HandlScanCode () {
      uni.navigateTo({
        url: '/pages/ScanCode/ScanCode'
      })
    },
    // 根据条码请求设备数据
    getData () {
      let par = {
        barType: this.barType,
        qrContent: this.qrContent
      }
      postJ(this.apiUrl + '/scan/getAssetInfo', par).then(res => {
        let data = res.data
        this.matchEquipment(data)
      })
    },
    matchEquipment (data) {
      let par = {
        EquiCode: data.assetCode
      }
      console.log('par', par)
      post(this.apiUrl + '/workOrder/getWorkOrderByEquiCode', par).then(res => {
        let data = res.data
        if (!data) {
          uni.showModal({
            title: '提示',
            content: '该设备无维修工单记录！',
            confirmText: '好的', //这块是确定按钮的文字
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                // 执行确认后的操作
              } else {
                // 执行取消后的操作
              }
            }
          })
        } else {
          uni.navigateTo({
            url: `/pages/maintain_service/detail/detail?workOrderCode=${data}`
          })
        }
      })
    },
    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 searchStatus = this.tabList[this.pickTabIndex].value
      let par = this.URLSearchParams(data)
      //2 - 99 [已完成]
      postJ(this.apiUrl + '/repair/info/getWorkOrderList?' + par, {
        searchStatus,
        workOrderType: 3,
        page,
        size
      })
        .then(res => {
          let data = res.data.records
          let pageTotal = res.data.pages
          if (page === 1) {
            this.tabList[this.pickTabIndex].list = res.data.records
          } 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>
.tab-title {
  position: fixed;
  z-index: 99;
  width: 100%;
  padding: 0 30rpx 10rpx;
  // display: flex;
  // justify-content: space-between;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  // box-sizing: border-box;
  white-space: nowrap;
  overflow: auto hidden;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }

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

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }
  .title-num {
    font-size: 26rpx;
  }
  .title-red {
    display: inline-block;
    font-size: 22rpx;
    padding: 0 10rpx;
    border-radius: 50rpx;
    color: #ffffff;
    background: red;
    line-height: 38rpx;
    position: absolute;
    top: 10rpx;
    min-width: 18rpx;
  }
}
</style>