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

<template>
  <view class="havedone-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="我的已办"
      @clickLeft="back"
    ></uni-nav-bar>
    <view class="search-box">
      <view class="inp-wrapper">
        <u-input
          placeholder="搜索单号或名称"
          prefixIcon="search"
          v-model="searchData.keywords"
          @blur="doSearch"
          prefixIconStyle="font-size: 22px;color: #909399"
        ></u-input>
      </view>
      <!-- <image
        src="~@/static/moreSearch.svg"
        mode=""
        @click="moreSearch = !moreSearch"
      ></image> -->
      <!--   <view class="slide-search">
        <view class="more-search" v-show="moreSearch">
          <view class="timerange">
            <uni-datetime-picker
              v-model="searchData.time"
              type="daterange"
              rangeSeparator="至"
            />
          </view>
          <view class="select-box">
            <uni-data-select
              :localdata="doneRange"
              @change="doneChange"
              :clear="false"
            ></uni-data-select>
            <uni-data-select
              :localdata="resultRange"
              @change="resultChange"
              :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="list-wrapper">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="done-card" @tap="goDetail(item)">
            <view class="title">
              {{ item.title }}
              <text
                :class="item.handleResult == 0 ? 'text-danger' : 'text-primary'"
                >{{ handleResult[item.handleResult] }}</text
              >
            </view>
            <view class="content">
              <text>单号：{{ item.workOrderCode }}</text>
              <text>处理时间：{{ item.sendingTime }}</text>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import { get } from '@/utils/api'

let [page, isEnd] = [1, false]
export default {
  components: {},
  data () {
    return {
      list: [],
      handleResult: {
        0: '驳回',
        1: '待审核',
        2: '通过'
      },
      moreSearch: false,
      searchData: {
        time: [],
        keywords: '',
        handleResult: '',
        handleType: '',
        devOpsType: ''
      },
      doneRange: [
        { value: '', text: '所有已办' },
        { value: 0, text: '维修计划审批', devOpsType: 3, handleType: 0 },
        { value: 1, text: '维修报工验收', devOpsType: 3, handleType: 1 },
        { value: 2, text: '巡点检计划审批', devOpsType: 1, handleType: 0 },
        { value: 3, text: '保养计划审批', devOpsType: 2, handleType: 0 }
        // { value: 1, text: "申领单审批" },
        // { value: 1, text: "出库单审批" },
        // { value: 1, text: "入库单审批" },
        // { value: 1, text: "盘点审批" },
        // { value: 1, text: "调拔审批" },
        // { value: 1, text: "报损报溢审批" },
      ],
      resultRange: [
        { value: '', text: '所有结果' },
        { value: 0, text: '驳回' },
        { value: 2, text: '通过' }
      ]
    }
  },
  onShow () {
    page = 1
    this.getList()
  },
  methods: {
    goDetail ({
      devOpsType,
      planType,
      workOrderId,
      id,
      workOrderCode,
      handleType
    }) {
      let url = ''
      // 入库
      if (planType.code == 5) {
        url = `/pages/home/backlog/approve_out?type=approval&workOrderId=${workOrderId}&id=${id}&planType=${planType?.code}`
      } else if (planType.code == 6) {
        url = `/pages/home/backlog/approve_enter?type=approval&workOrderId=${workOrderId}&id=${id}&planType=${planType?.code}`
      } else if (planType.code == 7) {
        url = `/pages/home/backlog/approve_allot?type=approval&workOrderId=${workOrderId}&id=${id}&planType=${planType?.code}`
      } else if (planType.code == 8) {
        url = `/pages/home/backlog/approve_approve_allot?type=approval&workOrderId=${workOrderId}&id=${id}&planType=${planType?.code}&handleType=${handleType}`
      } else if (planType.code == 9) {
        url = `/pages/home/backlog/sparepartDetail?workOrderCode=${workOrderCode}&id=${id}&workOrderId=${workOrderId}`
      }
      // 0 审批 1 验收
      else if (handleType) {
        // 工单验收
        /* PATROL(1, "巡点检"),
				MAINTAIN(2, "保养"),
				REPAIR(3, "维修"),
				INVENTORY(4, "盘点"),
				OUT_WARE(5, "出库"),
				IN_WARE(6, "入库"),
				TRANSFER(7, "库存调拨"),
				REPORT_LOSS_OVERFLOW(8,"报损报溢"); */
        switch (planType.code) {
          case 1:
            url = `/pages/tour_tally/detail/detail?id=${workOrderId}&myHandleId=${id}`
            break
          case 2:
            break
          case 3: {
            let par = this.URLSearchParams({
              type: 'approval',
              myHandleId: id,
              workOrderCode: workOrderCode
            })
            url = `/pages/maintain_service/detail/detail?` + par
            break
          }
          case 4:
            url = `/pages/warehouse/workOrder/details/details?workOrderId=${workOrderId}&myHandleId=${id}`
            break
          default:
            break
        }
      } else {
        // 0 计划 1 工单
        if (devOpsType === 0) {
          url = `/pages/home/backlog/planApproval?workOrderId=${workOrderId}&id=${id}&planType=${planType?.code}`
        }
      }

      uni.navigateTo({
        url
      })
    },
    doneChange (value) {
      const obj = this.doneRange.find(i => i.value === value)

      if (obj) {
        this.searchData.devOpsType = obj.devOpsType
        this.searchData.handleType = obj.handleType
      }
    },
    resultChange (value) {
      console.log(arg)
      this.searchData.handleResult = value
    },
    doSearch () {
      page = 1

      this.getList()
    },
    reset () {
      this.searchData = {
        time: [],
        handleResult: '',
        handleType: '',
        keywords: '',
        devOpsType: ''
      }
    },
    scrolltolower () {
      if (isEnd) return

      page++
      this.getList()
    },
    calendarConfirm (...rest) {
      console.log(rest)
    },
    getList () {
      const params = {
        page,
        size: 8,
        handleStatus: 1,
        ...this.searchData
      }

      if (params.time?.length) {
      }

      isEnd = false
      get(this.apiUrl + '/myHandle/getMyHandleList', params).then(res => {
        if (res?.success) {
          if (params.page === 1) {
            this.list = []
          }

          this.list.push(...res.data.records)

          isEnd = this.list.length >= res.data.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.havedone-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  background-color: $page-bg;
  padding-bottom: 24rpx;
}
.list-wrapper {
  padding: 20rpx;
  flex: 1;
  overflow: hidden;

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

.done-card {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 10rpx;
  border-radius: 6rpx;
  .title,
  .content {
    display: flex;
    justify-content: space-between;
  }
  .title {
    font-weight: bold;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    text {
      font-weight: normal;
    }
  }
  .content {
    font-size: 28rpx;
    color: #aaaaaa;
  }
}
.search-box {
  display: flex;
  align-items: center;
  padding: 10rpx;
  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;

      /deep/.uni-date__x-input {
        height: 66rpx !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;
          }
        }
      }
    }
  }
  .inp-wrapper {
    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>