ruoyi-miniapp/sub/inspection/record.vue

<template>
  <scroll-view scroll-y flex-enable class="view-container">
    <view class="box" v-for="log in list" :key="log.id">
      <view class="wd-flex" style="gap: 10px; align-items: center">
        <view
          :style="{
            color: $dict.echoDictOption(
              dictMap.inspections_mark,
              log.status
            ).remark
          }"
        >
          {{
            $dict.echoDictOption(dictMap.inspections_mark, log.status)
              .label
          }}
        </view>
        <view class="">
          {{ $util.formatDate(log.createTime, 'YYYY/M/D') }}
        </view>
      </view>
      <scroll-view
        scroll-x
        style="flex-flow: row nowrap; white-space: nowrap"
        :enable-flex="true"
      >
        <view
          v-for="people in log.userList"
          :key="people.userId"
          style="
            display: inline-flex;
            gap: 24rpx;
            border: 1px solid #f9f9f9;
            border-radius: 16rpx;
            padding: 24rpx;
            margin-right: 24rpx;
          "
        >
          <u-avatar
            :src="people.avtar"
            size="80rpx"
            shape="circle"
          ></u-avatar>
          <view class="wd-flex wd-flex-col" style="gap: 2px">
            <text>{{ people.realName }}</text>
            <text>{{ people.deptName }}</text>
          </view>
        </view>
      </scroll-view>
      <cs-text-more :value="log.feedBack"></cs-text-more>
      <view class="imageList">
        <image
          :src="photo.url"
          v-for="photo in log.fileList"
          :key="photo.id"
          mode="aspectFill"
          class="image"
          @tap="previewImage(log.fileList)"
        ></image>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { getDictBatchByType } from '@/api/system/dict.js'
import { getTaskLog } from '@/api/enterprise/index.js'
export default {
  data() {
    return {
      queryParams: {
        taskId: ''
      },
      list: [],
      dictMap: {}
    }
  },
  onLoad(res) {
    uni.setNavigationBarTitle({
      title: res.taskName
    })
    this.queryParams.taskId = res.taskId
    this.getDict()
    this.getList()
  },
  onReachBottom() {
    this.loadMore()
  },
  onPullDownRefresh() {
    this.reset()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['inspections_mark'].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    async getList() {
      uni.showToast({
        title: '加载中',
        mask: true,
        icon: 'loading'
      })
      const res = await getTaskLog(this.queryParams.taskId)
      this.list = res.data
      uni.hideToast()
    },
    previewImage(url) {
      this.$util.perviewImage(url.map(i => i.url))
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 24rpx;
  flex-direction: column;
  gap: 24rpx;
  .box {
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    background-color: #fff;
    position: relative;
    margin-bottom: 24rpx;
    .imageList {
      display: flex;
      gap: 24rpx;
      .image {
        width: 192rpx;
        height: 192rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }
    }
  }
}
</style>