aiot-app/pages/home/work/work.vue

<template>
  <view class="kd-work-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="我的工单"
      @clickLeft="back"
    ></uni-nav-bar>
    <view class="top-wrapper">
      <view class="top-tabs">
		  
        <u-tabs
          :list="tabList"
          @change="handleTabChange"
          lineWidth="0"
          :activeStyle="{
            color: '#157a2c',
            fontWeight: 'bold'
          }"
        ></u-tabs>
      </view>
      <image
        src="~@/static/moreSearch.svg"
        mode=""
        @click="moreSearch = !moreSearch"
      ></image>
      <view class="slide-search">
        <view class="more-search" v-show="moreSearch">
          <view class="cell">
            <view class="label">编号</view>
            <input
              type="text"
              placeholder="请输入"
              v-model="searchFrom.workOrderCode"
            />
          </view>
          <view class="cell">
            <view class="label">状态</view>
            <uni-data-select
              :key="activeType"
              :localdata="statusRange[activeType]"
              v-model="searchFrom.status"
            ></uni-data-select>
          </view>
          <view class="cell" v-if="activeType == 'repair'">
            <view class="label">紧急程度</view>
            <uni-data-select
              :localdata="doneRange"
              @change="doneChange"
              v-model="searchFrom.urgent"
              :clear="false"
            ></uni-data-select>
          </view>
          <view class="btn-search">
            <button @click="reset">重置</button>
            <button class="primary" @click="doSearch">搜索</button>
          </view>
        </view>
      </view>
    </view>
    <view class="work-list">
      <u-list
        @scrolltolower="scrolltolower"
        :key="activeType"
        :preLoadScreen="page * 10"
      >
        <u-list-item v-for="(item, index) in dataList" :key="index">
          <CardTime :time="item.createTime" />
          <KdCard
            :title="item.workOrderCode"
            @handleDetail="handleDetail"
            :status="true"
            :item="item"
            :type="activeType"
          />
        </u-list-item>
        <u-list-item v-if="dataList.length === 0">
          <view class="nodata"> 暂无数据 </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import KdCard from '../components/KdCard/index.vue'
import CardTime from '../components/CardTime.vue'
import { postJ } from '@/utils/api'
let [isEnd] = [false]
export default {
  components: {
    KdCard,
    CardTime
  },
  data () {
    return {
      doneRange: [
        {
          value: 1,
          text: '普通'
        },
        {
          value: 2,
          text: '紧急'
        },
        {
          value: 3,
          text: '重要'
        }
      ],
      tabList: [
        {
          name: '维修工单',
          type: 'repair',
          workOrderType: 3,
          url: `/pages/maintain_service/detail/detail?`,
          badge: {
            value: 0
          }
        },
		{
		  name: '计划维修工单',
		  type: 'repair',
		  workOrderType: 10,
		  url: `/pages/maintain_service/detail/detail?`,
		  badge: {
		    value: 0
		  }
		},
        {
          name: '保养工单',
          type: 'maintenance',
          workOrderType: 2,
          url: `/pages/maintenance/detail/detail?`,
          badge: {
            value: 0
          }
        },
        {
          name: '巡点检工单',
          type: 'patrol',
          workOrderType: 1,
          url: `/pages/tour_tally/detail/detail?`,
          badge: {
            value: 0
          }
        },
        {
          name: '盘点工单',
          type: 'check',
          workOrderType: 4,
          url: `/pages/warehouse/workOrder/inventory/inventory?`,
          badge: {
            value: 0
          }
        }
      ],
      activeType: 'repair',
      activeIndex: 0,
      dataList: [],
      moreSearch: false,
      statusRange: {
        repair: [
          // {
          // 	value: 0,
          // 	text: '待接收'
          // },

          // {
          // 	value: 2,
          // 	text: '待审核'
          // },
          // {
          // 	value: 4,
          // 	text: '已撤回'
          // },

          // {
          // 	value: 6,
          // 	text: '已驳回'
          // },
          {
            value: 8,
            text: '已派单'
          },
          {
            value: 1,
            text: '执行中'
          },
          {
            value: 5,
            text: '待验收'
          },
          {
            value: 3,
            text: '已完成'
          },
          {
            value: 7,
            text: '未修复'
          }
        ],
        maintenance: [
          {
            value: 0,
            text: '待接收'
          },
          {
            value: 1,
            text: '执行中'
          },
          {
            value: 3,
            text: '完成'
          }
        ],
        patrol: [
          {
            value: 0,
            text: '待接收'
          },
          {
            value: 1,
            text: '执行中'
          },
          {
            value: 3,
            text: '完成'
          }
        ],
        check: [
          {
            value: 0,
            text: '待接收'
          },
          {
            value: 1,
            text: '执行中'
          },
          {
            value: 2,
            text: '待审核'
          },
          {
            value: 3,
            text: '完成'
          },
          {
            value: 4,
            text: '已撤回'
          },
          {
            value: 5,
            text: '待验收'
          },
          {
            value: 6,
            text: '已驳回'
          },
          {
            value: 7,
            text: '未修复'
          },
          {
            value: 8,
            text: '已派单'
          }
        ]
      },
      searchFrom: {
        workOrderCode: '',
        status: ''
      },
      page: 1
    }
  },
  onShow () {
    this.getList()
    this.getCount()
  },
  methods: {
    // 紧急度选择
    doneChange (id) {},
    doSearch () {
      this.page = 1
      this.getList()
      this.moreSearch = false
    },
    reset () {
      this.searchFrom = {
        workOrderCode: '',
        status: ''
      }
      this.doSearch()
    },
    statusChange (value) {
      this.searchFrom.status = value
    },
    handleDetail (item) {
      let url = this.tabList[this.activeIndex]?.url
      if (!url) return

      url += `id=${item.id}&workOrderCode=${item.workOrderCode}&BizType=${item.bizType}`
      uni.navigateTo({
        url
      })
      console.log(item)
    },
    scrolltolower () {
      if (isEnd) return
      this.page++
      this.getList()
    },
    handleTabChange (item) {
      this.activeType = item.type
      this.activeIndex = item.index
      this.page = 1
      this.reset()
      this.moreSearch = false
    },
    getCount () {
      Promise.all(
        this.tabList.map(item =>
          this._getMyWorkOrderList(
            {
              workOrderType: item.workOrderType
            },
            false
          )
        )
      ).then(res => {
        res.forEach((itm, index) => {
          if (itm?.success) {
            this.tabList[index].badge.value = itm.data.count
          }
        })
      })
    },
    getList () {
      const params = {
        workOrderType: this.tabList[this.activeIndex].workOrderType,
        page: this.page,
        size: 8,
        ...this.searchFrom
      }
      isEnd = false
      this._getMyWorkOrderList(params).then(res => {
        if (
          res?.success &&
          params.workOrderType === this.tabList[this.activeIndex].workOrderType
        ) {
          if (params.page === 1) {
            this.dataList = []
          }
          this.dataList.push(...res.data.list.records)

          isEnd = this.dataList.length >= res.data.list.total
        }
      })
    },
    //(1:巡点检;2:保养;3:维修;4:盘点)
    _getMyWorkOrderList (params, loading = true) {
      let str = ''
      for (let key in params) {
        str += '&' + key + '=' + params[key]
      }
      return postJ(
        this.apiUrl + `/workOrder/getMyWorkOrderList?${str.substr(1)}`,
        {},
        loading
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.kd-work-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .work-list {
    flex: 1;
    overflow: hidden;
    padding: 16rpx 24rpx;
    background-color: $page-bg;

    .u-list {
      height: 100% !important;
    }
  }

  .nodata {
    font-size: 40rpx;
    text-align: center;
    padding-top: 30rpx;
  }
}

.top-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;

  .slide-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #fff;

    .timerange {
      width: 90%;
      margin: 0 auto 10rpx;
    }

    .select-box {
      display: flex;
      padding: 0 10rpx;

      .uni-stat__select + .uni-stat__select {
        margin-left: 10rpx;
      }
    }

    .more-search {
      padding-bottom: 20rpx;

      .cell {
        display: flex;
        align-items: center;
        padding-right: 20rpx;

        & + .cell {
          margin-top: 10rpx;
        }

        /deep/uni-input {
          flex: 1;
          height: 70rpx;
          border: 1rpx solid #e5e5e5;
          border-radius: 8rpx;
          font-size: 28rpx;
          padding-left: 20rpx;
          box-sizing: border-box;
        }

        .label {
          width: 180rpx;
          text-align: right;
          padding-right: 20rpx;
        }
      }

      /deep/.uni-date__x-input {
        height: 70rpx !important;
      }

      .btn-search {
        text-align: right;
        padding: 10rpx 10rpx 0;

        button {
          display: inline-block;
          width: 200rpx;
          height: 60rpx;
          line-height: 58rpx;
          font-size: 28rpx;
          margin-left: 20rpx;

          &.primary {
            background-color: $j-primary-border-green;
            color: #fff;
          }
        }
      }
    }
  }

  .top-tabs {
    flex: 1;
  }

  /deep/.u-input {
    border: 1rpx solid #ccc;

    .u-input__content__field-wrapper__field {
      height: 40rpx !important;
    }
  }

  image {
    width: 52rpx;
    height: 52rpx;
    margin-left: 10rpx;
  }
}
</style>