xiamen-sb-uniapp/pages/maintain/maintain.vue

<template>
  <view class="container">
    <!-- 关键词搜索栏：与设备台账(equipment.vue)一致，支持设备名称/编号/保养标准编号 -->
    <div class="bg-color-white py2">
      <u-search placeholder="设备名称/编号/保养标准编号" clearabled v-model="keyword" @search="search" @custom="search" @clear="search"></u-search>
    </div>
    <common-tabs :list="list" :current="current" @change="change" />
    <view class="p-top8">
      <template v-if="listData.length > 0">
        <view class="mx3 my2 p3 bg-color-white box p-relative" v-for="(item, index) in listData" :key="item.id"
          @click="handleDetail(item.id)" @longpress="showMask(item.id, $event)">
          <common-mask :item="item" :maskId="maskId" @hide="maskId = 0" @del="handleDel(item.id)" />
          <!-- 卡片标题仅显示设备名称（设备编号），右侧状态角标 -->
          <view class="d-flex j-between border-bottom pb-2 a-center">
            <view class="text-color-3 f-size-32 f-weight-bold text-overflow">{{ item.sbName }} ({{ item.sbNo }})</view>
            <my-badge :text="statusMap[item.status]" :status="dict[item.status]" />
          </view>
          <view class="f-size-26 text-color-6 f-weight-4 mt-2">计划执行日期:{{
            item.startTime
          }}
          </view>
          <view class="f-size-26 text-color-6 f-weight-4 mt-2">实际执行日期:{{
            item.actualStartTime
          }}
          </view>
          <!-- 与 PC 端 CheckJob 任务4保持一致：隐藏设备部位，改显示执行人/班组(checkDeptName 优先，其次 checkUserName) -->
          <view class="f-size-26 text-color-6 f-weight-4 mt-2">执行人/班组:{{
            item.checkDeptName || item.checkUserName || '-'
          }}
          </view>
          <view class="d-flex j-end edit-box">
            <!-- 与 PC 端 CheckJob 保持一致：仅未执行(1)可接收 -->
            <view class="text-color-3 f-size-32 edit" v-if="item.status === 1 && !startFlag">
              <view @click.stop="handleExecute(item)">开始</view>
            </view>
            <!-- 与 PC 端 CheckJob 保持一致：仅执行中(2)可执行/完成 -->
            <!-- <view class="text-color-3 f-size-32 edit" v-if="item.status === 2 && !startFlag">
              <view @click.stop="handleFinish(item)">执行</view>
            </view> -->
            <view class="text-color-3 f-size-32 edit" v-if="item.status === 2">
              <view @click.stop="submit(item)">完成</view>
            </view>
          </view>
        </view>
        <view class="py3">
          <u-loadmore :status="status" />
        </view>
      </template>
      <template v-else>
        <view class="empty">
          <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
      </template>
    </view>
    <!-- <view class="p-fixed d-flex j-around a-center footer">
      <view class="main-color-bg text-color-white common" @tap="handleStart">{{ nums }}</view>
    </view> -->
  </view>
</template>

<script>
import BaseTool from '../../utils/tool'

export default {
  data() {
    return {
      list: [],
      current: 1,
      sbId: '',
      nums: '开始计时',
      // 加载更多
      status: 'loadmore',
      keyword: '',
      page: 1,
      timer: null,
      limit: 10,
      type: 1,
      filter: -1,
      searchType: null,
      startFlag: false,
      loadMore: true,
      listData: [],
      periodMap: null,
      statusMap: null,
      sbStatusMap: null,
      dict: null,
      maskId: 0,
      statusList: null,
      receiveOvertime: null,
      timeFlag: null
    }
  },
  onPullDownRefresh() {
    // 请求结束取消刷新
    this.page = 1
    this.loadMore = true
    this.listData = []
    this.initData()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    if (this.loadMore) {
      this.page++
      this.initData()
    }
  },
  onLoad(options) {
    this.sbId = options.sbId
    this.filter = options.filter
    this.searchType = options.searchType
    this.timeFlag = options.timeFlag
    this.periodMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.CHECK_PLAN_PERIOD_TYPE)
    this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.CHECK_JOB_STATUS)
    this.sbStatusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.CHECK_JOB_SB_STATUS)
    this.list = [{ label: '全部', value: '' }].concat(this.$DictCache.getChildrenList(this.$DictCache.TYPE.CHECK_JOB_STATUS))
    this.dict = this.$DictCache.COLOR.CHECK_JOB_STATUS
  },
  onShow() {
    this.page = 1
    this.loadMore = true
    this.listData = []
    this.initData()
  },
  onHide() {
    this.maskId = 0
  },
  methods: {
    showMask(id, e) {
      this.maskId = id
      // #ifdef H5
      e.preventDefault()
      // #endif
    },
    handleDel(id) {
      const that = this
      const params = []
      params.push(id)
      uni.showModal({
        title: '提示',
        content: '您确认删除吗?',
        success: res => {
          if (res.confirm) {
            this.$Http.deleteCheckJobs(params).then(res => {
              uni.showToast({ title: '删除成功' })
              this.page = 1
              this.loadMore = true
              this.listData = []
              this.initData()
            })
          } else if (res.cancel) {
          }
        }
      })
    },
    // 详情
    handleDetail(id) {
      // if (index == 0) {
      // 	uni.navigateTo({
      // 		url: '../maintain-add/maintain-add'
      // 	});
      // } else {
      // 	uni.navigateTo({
      // 		url: '../maintain-detail/maintain-detail'
      // 	});
      // }
      if (this.maskId !== 0) {
        return (this.maskId = 0)
      }
      uni.navigateTo({
        url: '/pages/maintain-detail/maintain-detail?detailId=' + id + '&filter=' + this.filter + '&searchType=' + this.searchType
      })
    },
    handleExecute(item) {
      this.$Http.execute(item).then(res => {
        item.status = this.$DictCache.VALUE.CHECK_JOB_STATUS.EXECUTING
        this.current = this.$DictCache.VALUE.CHECK_JOB_STATUS.EXECUTING
        this.change(this.current, this.current)
        uni.showToast({ title: '已开始，请及时完成任务' })
      })
    },
    handleFinish(item) {
      uni.navigateTo({
        url: '/pages/maintain-add/maintain-add?detailId=' + item.id + '&filter=' + this.filter + '&searchType=' + this.searchType
      })
    },
    // tab
    change(index, value) {
      this.current = index
      console.log(index)
      this.statusList = null
      this.receiveOvertime = null
      if (index === 0) {
        this.type = ''
      } else if (value === 4) {
        // 已过期与 PC 端逾期页(PollingCheckJobOverTime)一致：receiveOvertime + 不限状态
        this.type = null
        this.statusList = []
        this.receiveOvertime = true
      } else {
        this.type = value
      }
      this.page = 1
      this.loadMore = true
      this.listData = []
      this.initData()
    },
    handleStart() {
      clearInterval(this.timer)
      uni.showToast({
        title: '已开始计时'
      })
      this.startFlag = true
      uni.setStorageSync('check-job-start-' + this.sbId, this.$BaseTool.Date.formatter(new Date(), BaseTool.Date.PICKER_NORM_DATETIME_PATTERN))
      var hour, minute, second // 时 分 秒
      hour = minute = second = 0 // 初始化
      var millisecond = 0 // 毫秒
      this.timer = setInterval(() => {
        millisecond = millisecond + 50
        if (millisecond >= 1000) {
          millisecond = 0
          second = second + 1
        }
        if (second >= 60) {
          second = 0
          minute = minute + 1
        }
        if (minute >= 60) {
          minute = 0
          hour = hour + 1
        }
        // console.log("-------"+hour+'时'+minute+'分'+second+'秒');
        this.nums = hour + '时' + minute + '分' + second + '秒'
      }, 50)
    },
    // 提交
    submit(item) {
      console.log(22)
      uni.navigateTo({
        url: `/pages/maintain/finish?id=${item.id}&standardId=${item.standardId}`
      })
      // item.actualStartTime = uni.getStorageSync('check-job-start');
      // item.status = 3
      // this.$Http.finishJob(item).then((res) => {
      //     uni.showToast({
      //         title: '已完成'
      //     });
      //     this.initData();
      // });
    },
    // 点击搜索：重置分页后按关键词查询
    search() {
      this.page = 1
      this.loadMore = true
      this.listData = []
      this.initData()
    },
    // 关键词搜索默认时间起点：近三个月，避免大表多列 LIKE 全表扫描，保证查询性能（后端未执行/执行中按 start_time，已完成按 actual_start_time 过滤）
    getSearchStartTime() {
      const d = new Date()
      d.setMonth(d.getMonth() - 3)
      return this.$BaseTool.Date.formatter(d, this.$BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
    },
    initData() {
      const that = this
      that.status = 'loading'
      const kw = (this.keyword || '').trim()
      this.$Http
        .getCheckJobPage({
          pageNum: this.page,
          pageSize: this.limit,
          keyword: kw,
          // 仅在关键词搜索时默认限定近三个月，普通列表加载行为保持不变
          searchStartTime: kw ? this.getSearchStartTime() : null,
          type: 2,
          filter: this.filter,
          searchType: this.searchType,
          sbId: this.sbId,
          status: this.type,
          receiveOvertime: this.receiveOvertime,
          // 与 PC 端 CheckJob 一致：默认只查未执行/执行中/已完成，不含已过期(4)
          statusList: this.statusList === null ? [1, 2, 3] : this.statusList,
          timeFlag: this.timeFlag,
          // 与 PC 端 CheckJob loadData 参数保持一致
          mineFlag: false,
          record: this.type === 3 ? 1 : null
        })
        .then(res => {
          const data = res.data.rows
          if (data && data.length > 0 && data.length < that.limit) {
            that.status = 'nomore'
            that.loadMore = false
          } else if (data.length == that.limit) {
            that.status = 'loadmore'
          } else {
            that.status = 'nomore'
          }
          that.listData = [...that.listData, ...data]
        })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.box {
  padding-right: 0;
  border-radius: 20rpx;
}

.edit-box {
  padding: 0 30rpx;
  margin-top: 40rpx;

  .edit {
    padding: 8rpx 40rpx;
    border: 1px solid #ddd;
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #666;
    margin-left: 30rpx;
  }
}

.text-overflow {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.container {
  padding-bottom: 100rpx;

  .footer {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10000;
  }

  .title {
    border-bottom: 1rpx solid #f4f4f4;
  }

  .img {
    width: 100rpx;
    height: 100rpx;
  }

  .p-fixed {
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

    .common {
      padding: 15rpx 200rpx;
      border-radius: 30rpx;
      background-color: #0082ff;
      color: #fff;
    }
  }
}
</style>