ruoyi-miniapp/sub/inspection/detail.vue

<template>
  <scroll-view scroll-y flex-enable class="view-container">
    <view
      class="box"
      @tap="goDetail(task)"
      v-for="task in list"
      :key="task.id"
    >
      <view class="wd-font-bold" style="color: #071437">
        {{ task.title }}
      </view>
      <view class="tagList">
        <view class="tag" v-if="task.deptName">
          {{ task.deptName }}
        </view>
        <view class="tag" v-if="task.priority">
          {{ $dict.echoDicValue(dictMap.task_priority, task.priority) }}
        </view>
        <view
          v-for="(tag, index) in task.tagList"
          :key="index"
          class="tag"
        >
          {{ tag }}
        </view>
      </view>
      <view
        class="wd-flex wd-text-13"
        style="justify-content: space-between"
      >
        <view class="wd-flex" style="align-items: center; gap: 8rpx">
          <u-icon name="calendar" color="#17C653" />
          <text class="wd-text-13 wd-ml-4px" style="color: #252f4a">
            {{
              `${$util.formatDate(
                task.startDate,
                'YYYY/M/D'
              )} ~ ${$util.formatDate(task.endDate, 'YYYY/M/D')}`
            }}
          </text>
        </view>
      </view>
      <cs-text-more :value="task.description"></cs-text-more>
      <view class="status">
        <cs-dict-tag
          :dict="dictMap.task_state"
          :value="task.status"
        ></cs-dict-tag>
      </view>
    </view>
    <u-loadmore
      :status="load"
      marginTop="12"
      marginBottom="12"
      v-if="load != 'nomore'"
    />
  </scroll-view>
</template>

<script>
import { getDictBatchByType } from '@/api/system/dict.js'
import { getTaskList } from '@/api/enterprise/index.js'
export default {
  data() {
    return {
      queryParams: {
        enterpriseId: '',
        pageNo: 1,
        pageSize: 10
      },
      list: [],
      dictMap: {},
      load: 'loadmore'
    }
  },
  onLoad(res) {
    uni.setNavigationBarTitle({
      title: res.enterprisesName
    })
    this.queryParams.enterpriseId = res.enterprisesId
    this.getDict()
    this.getList()
  },
  onReachBottom() {
    this.loadMore()
  },
  onPullDownRefresh() {
    this.reset()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['task_state', 'task_priority'].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    async getList() {
      uni.showToast({
        title: '加载中',
        mask: true,
        icon: 'loading'
      })
      this.load = 'loading'
      const res = await getTaskList(this.queryParams)
      this.list.push(...res.data.list)
      this.load = 'loadmore'
      if (this.list.length == res.data.total) {
        this.load = 'nomore'
      }
      uni.hideToast()
    },
    loadMore() {
      if (this.load == 'nomore') {
        uni.showToast({
          title: '没有更多了',
          icon: 'none'
        })
        return
      }
      this.queryParams.pageNo++
      this.getList()
    },
    reset() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    goDetail(task) {
      console.log(task)
      uni.navigateTo({
        url: `/sub/inspection/record?taskId=${task.inspectionsId}&taskName=${task.title}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 24rpx;
  flex-direction: column;
  white-space: nowrap;
  .box {
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    background-color: #fff;
    position: relative;
    margin-bottom: 24rpx;
    overflow: hidden;
    .status {
      position: absolute;
      right: -19px;
      top: 6px;
      transform: rotateZ(45deg) translateX(20px) translateY(-20px);
      transform-origin: 50% 50%;
      padding: 4px 20px;
      font-size: 24rpx;
      text-align: center;
    }
  }
}
</style>