ruoyi-miniapp/sub/task/record.vue

<template>
  <scroll-view class="view-container" scroll-y>
    <view class="box detail" style="margin-bottom: 12px">
      <text class="wd-font-800 wd-text-16">
        {{ detail.title }}
      </text>
      <view class="tagList">
        <view class="tag" v-if="detail.priority">
          {{ $dict.echoDicValue(dictMap.task_priority, detail.priority) }}
        </view>
        <view
          v-for="(tag, index) in detail.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 wd-font-800">
            {{
              `${$util.formatDate(
                detail.startDate,
                'YYYY年M月D日'
              )} 至 ${$util.formatDate(detail.endDate, 'YYYY年M月D日')}`
            }}
          </text>
        </view>
      </view>
      <cs-text-more :value="detail.description"></cs-text-more>
      <view
        class="wd-flex wd-items-center enterprise"
        @tap="goEnterprise(detail.enterprise)"
      >
        <u-avatar
          :src="detail.enterprise.files[0].url"
          shape="square"
          size="64"
        ></u-avatar>
        <view class="wd-flex wd-flex-col" style="overflow: hidden">
          <text class="wd-font-800 wd-text-15">
            {{ detail.enterprise.enterprisesName }}
          </text>
          <view class="wd-flex" style="margin-top: 4rpx">
            <u-icon name="map" size="28rpx" color="#17C653"></u-icon>
            <text class="address wd-text-12" style="margin-left: 8rpx">
              {{
                `${$dict.echoDicValue(
                  dictMap.enterprises_area,
                  detail.enterprise.region
                )} | ${detail.enterprise.address}`
              }}
            </text>
          </view>
          <view class="tagList" style="margin-top: 16rpx">
            <view
              class="tag"
              v-for="(tag, index) in detail.enterprise.tagList"
              :key="index"
            >
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
      <view class="audit">
        <cs-dict-tag
          :dict="dictMap.task_state"
          :value="detail.status"
        ></cs-dict-tag>
      </view>
    </view>

    <view class="box record">
      <view class="wd-text-14 wd-font-800">结果反馈</view>
      <view
        class="row log"
        v-for="item in list"
        :key="item.id"
        @tap="goLog(item)"
      >
        <view style="margin-bottom: 24rpx">
          <text
            :style="{
              marginRight: '20rpx',
              fontWeight: 'bold',
              color: $dict.echoDictOption(
                dictMap.Inspections_status,
                item.status
              ).remark
            }"
          >
            {{
              $dict.echoDicValue(dictMap.Inspections_status, item.status)
            }}
          </text>
          <text>
            {{ $util.formatDate(item.createTime, 'YYYY/M/D h:m') }}
          </text>
        </view>
        <scroll-view
          scroll-x="true"
          style="flex-flow: row nowrap; white-space: nowrap"
        >
          <view
            class="row"
            v-for="people in item.userList"
            :key="people.userId"
            style="display: inline-flex; gap: 24rpx; margin-right: 24rpx"
          >
            <u-avatar
              :src="people.avtar"
              size="80rpx"
              shape="circle"
            ></u-avatar>
            <view class="wd-flex wd-flex-col" style="gap: 4rpx">
              <text>{{ people.realName }}</text>
              <text>{{ people.deptName }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="emty" v-if="list.length == 0">
        <image
          class="image"
          src="/static/images/emty.png"
          mode="aspectFill"
        ></image>
        <text class="wd-text-14" style="color: #99a1b7">暂无处理结果</text>
      </view>
      <view class="audit">
        <cs-dict-tag
          :dict="dictMap.inspections_mark"
          :value="inspectionsState"
          color="#fff"
          :bgColor="setColor(inspectionsState)"
        ></cs-dict-tag>
      </view>
    </view>

    <cs-bottom-wrapper>
      <view
        class="operation"
        v-if="[null, 0, 3].includes(inspectionsState)"
      >
        <view class="btn green" @tap="locate">执法签到</view>
      </view>
      <view class="operation" v-else-if="inspectionsState == 1">
        <view class="btn red" @tap="tackle(3)">整改处理</view>
        <view class="btn green" @tap="tackle(2)">审批通过</view>
      </view>
      <view class="operation" v-else>
        <view class="btn grey">任务完成</view>
      </view>
    </cs-bottom-wrapper>
  </scroll-view>
</template>

<script>
import { getDeptTree, getDictBatchByType } from '@/api/system/dict.js'
import { TaskApi } from '@/api/task/index.js'
import { getEnterPrise } from '@/api/enterprise/index.js'
import { InspectionsApi } from '../../api/inspections'
export default {
  data() {
    return {
      dictMap: {},
      // 任务详情
      detail: {
        id: '',
        description: '',
        priority: '',
        enterprise: {
          region: '',
          type: ''
        }
      },
      // 是否展开文本
      isShowAllText: false,
      // 查询条件
      queryParams: {
        taskId: '',
        recordId: '',
        enterpriseId: ''
      },
      list: [],
      inspectionsState: null
    }
  },
  onLoad(res) {
    this.queryParams.taskId = res.taskId
    this.queryParams.recordId = res.recordId
    this.queryParams.enterpriseId = res.enterpriseId
    this.getDict()
    this.init()
  },
  onShow() {
    this.init()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: [
          'Inspections_status',
          'task_state',
          'inspections_mark',
          'enterprises_type',
          'enterprises_area',
          'task_priority'
        ].join(',')
      })
      const dept = await getDeptTree()
      this.dictMap = {
        ...dict.data,
        dept: dept.data
      }
    },
    async init() {
      const res = await TaskApi.getDetail(this.queryParams.taskId)
      const enterprise = await getEnterPrise(this.queryParams.enterpriseId)
      this.detail = {
        ...res.data,
        enterprise: enterprise.data
      }
      const feedBack = await InspectionsApi.getFeedBack(
        this.queryParams.recordId
      )
      this.list = feedBack.data
      this.inspectionsState =
        this.list[this.list.length - 1]?.status || null
    },
    goEnterprise(enterprise) {
      uni.navigateTo({
        url: `/sub/enterprise/detail?id=${enterprise.id}`
      })
    },
    viewPosition(enterprise) {
      const position = enterprise.gpsLocation
        .split(',')
        .map(i => Number(i))
      this.$util.viewPosition({
        lat: position[0],
        lng: position[1],
        name: enterprise.enterprisesName,
        address: enterprise.address
      })
    },
    locate() {
      uni.navigateTo({
        url: `/sub/task/locate?inspectionsId=${this.queryParams.recordId}&enterpriseId=${this.queryParams.enterpriseId}`
      })
    },
    setColor(status) {
      const colorMap = {
        1: '#F6B100',
        2: '#17C653',
        3: '#F8285A'
      }
      return colorMap[status]
    },
    tackle(state) {
      uni.navigateTo({
        url: `/sub/task/enforce?state=${state}&inspectionsId=${this.queryParams.recordId}`
      })
    },
    goLog(record) {
      if ([2, 3].includes(record.status)) {
        uni.navigateTo({
          url: `/sub/task/log?id=${record.id}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 0 24rpx;
  position: relative;
  padding-bottom: 200rpx;
  .box {
    background-color: #fff;
    border-radius: $cs-border-radius;
    padding: 32rpx;
    margin-top: 24rpx;
  }
  .row {
    border-radius: $cs-border-radius;
    padding: 24rpx;
    border: 2rpx solid #f9f9f9;
  }
  .detail {
    display: flex;
    flex-flow: column nowrap;
    gap: 24rpx;
    position: relative;
    overflow: hidden;

    .enterprise {
      border: 2rpx solid #f9f9f9;
      padding: 24rpx;
      border-radius: $cs-border-radius;
      gap: 24rpx;
      position: relative;
      overflow: hidden;
      font-size: 24rpx;
      .address {
        color: $uni-text-color-grey;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:active {
        background-color: $cs-color-touch;
      }
    }
    .audit {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(36rpx) translateY(32rpx) rotateZ(45deg);
      transform-origin: 50% 50%;
    }
  }

  .record {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    gap: 24rpx;
    .emty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24rpx;
      border-radius: 16rpx;
      border: 2rpx solid var(--LightMode-Grey-Grey-100, #f9f9f9);
      padding: 48rpx 24rpx;
      border-radius: 16rpx;
      .image {
        width: 128rpx;
        height: 128rpx;
      }
    }
    .audit {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(68rpx) translateY(19rpx) rotateZ(45deg);
      transform-origin: 50% 50%;
    }
  }
  .log {
    &:active {
      background-color: $cs-color-touch;
    }
  }
  .operation {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24rpx;
    .btn {
      flex: 1;
      border-radius: 16rpx;
      display: flex;
      padding: 24rpx 0;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .green {
      background-color: $cs-color-main;
      color: #fff;
    }
    .red {
      background-color: #f8285a;
      color: #fff;
    }
    .grey {
      background-color: #f1f1f4;
      color: #99a1b7;
    }
  }
}
</style>