aiot-app/pages/pda/workReport/components/recordDialog.vue

<template>
  <u-popup
    :show="show"
    mode="center"
    :round="10"
    closeable
    @close="cancel"
    bgColor="#fff"
    :customStyle="{ width: '88vw', maxHeight: '80vh', overflow: 'auto' }"
  >
    <view class="record_wrap">
      <view class="title">报工记录</view>
      <view v-if="!list.length" class="empty">暂无修改历史记录数据</view>
      <view v-for="(rec, idx) in list" :key="idx" class="record_item">
        <view class="rec_index">第 {{ idx + 1 }} 次</view>
        <view class="rec_row"><text class="rec_label">实际开始：</text>{{ rec.realStartTime || '-' }}</view>
        <view class="rec_row"><text class="rec_label">实际结束：</text>{{ rec.realEndTime || '-' }}</view>
        <view class="rec_row"><text class="rec_label">工时：</text>{{ rec.durationText || '-' }}</view>
        <view class="rec_row"><text class="rec_label">报工数：</text>{{ rec.reportQuantity || 0 }}</view>
        <view class="rec_row"><text class="rec_label">损耗数：</text>{{ rec.lossQuantity || 0 }}</view>
        <view class="rec_row"><text class="rec_label">备注：</text>{{ rec.remark || '-' }}</view>
      </view>
      <button class="btn" @click="cancel">返回</button>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return { show: false, list: [] };
  },
  methods: {
    open(list = []) {
      this.list = list;
      this.show = true;
    },
    cancel() {
      this.show = false;
      this.list = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.record_wrap {
  padding: 30rpx;
  .title {
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .empty {
    text-align: center;
    color: #999;
    padding: 40rpx 0;
    font-size: 26rpx;
  }
  .record_item {
    background: #f7f9fa;
    padding: 16rpx;
    border-radius: 8rpx;
    margin-bottom: 14rpx;
    .rec_index {
      font-size: 24rpx;
      color: $theme-color;
      font-weight: 600;
      margin-bottom: 6rpx;
    }
    .rec_row {
      font-size: 24rpx;
      color: #333;
      line-height: 40rpx;
      .rec_label { color: #999; }
    }
  }
  .btn {
    margin-top: 20rpx;
    height: 76rpx;
    line-height: 76rpx;
    background: $theme-color;
    color: #fff;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
}
</style>