aiot-app/pages/equipment_ledger/malfunction/malfunction.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="故障记录"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <uni-section title="故障记录" type="line">
      <uni-collapse>
        <uni-collapse-item
          :open="index === 0"
          :typeOpen="1"
          :show-animation="true"
          v-for="(item, index) in tableData"
          :key="item.id"
        >
          <template v-slot:title>
            <view class="modle-info">
              <view class="modle-line">
                <view>
                  {{ item.repairsPerson }}
                </view>
                <view>{{ item.repairsCode }}</view>
              </view>
              <view class="modle-line">
                <view>{{ item.createTime }}</view>
              </view>
            </view>
          </template>
          <CellInfo label="来源类型" :value="item.source.desc"></CellInfo>
          <CellInfo label="来源单号" :value="item.sourceCode"></CellInfo>
          <CellInfo
            :label="index === 0 ? '维修工单编号' : ''"
            :value="item"
            v-for="(item, index) in item.workOrderCodeList"
          ></CellInfo>
          <CellInfo label="验收人" :value="item.repairsPerson"></CellInfo>
          <CellInfo label="验收时间" :value="item.finishTime"></CellInfo>
        </uni-collapse-item>
      </uni-collapse>
    </uni-section>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import { postJ } from '@/utils/api.js'
let [page, size, isEnd] = [1, 20, true]
export default {
  components: {
    CellInfo
  },
  data () {
    return {
      info: {},
      tableData: []
    }
  },
  onLoad (option) {
    this.info = JSON.parse(decodeURIComponent(option.info))
  },
  onShow () {
    page = 1
    this.getData()
  },
  onReachBottom () {
    if (isEnd) {
      return
    }
    page++
    this.getData()
  },
  methods: {
    getData () {
      postJ(this.apiUrl + `/repair/info/getPage?page=${page}&size=${size}`, {
        equiCode: this.info.assetCode
      }).then(res => {
        if (res.success) {
          if (page === 1) {
            this.tableData = res.data.records
          } else {
            this.tableData.push(...res.data.records)
          }
          isEnd = this.tableData.length >= res.data.total
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mainBox {
  /deep/.uni-collapse-item__title {
    background-color: rgba(215, 215, 215, 1);
  }
  /deep/.uni-collapse-item__wrap {
    background-color: rgba(244, 244, 244, 1);
  }
  .modle-info {
    .modle-line {
      width: 94%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      font-size: 28rpx;
      .line-status {
        display: inline-block;
        background: #47975a;
        padding: 6rpx 12rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
        color: #fff;
        font-size: 20rpx;
      }
    }
    .modle-line:last-child {
      color: #999;
      padding: 0rpx 0 20rpx;
    }
  }
}
</style>