ruoyi-miniapp/sub/task/record.vue

<template>
  <view class="view-container">
    <view class="box detail">
      <text class="wd-font-800 wd-text-16" style="margin-bottom: 4px">
        {{ detail.title }}
      </text>
      <view class="tagList">
        <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: 4px">
          <u-icon name="calendar" color="#17C653" />
          <text class="wd-text-13 wd-ml-4px">
            {{
              `${$util.formatDate(
                detail.startDate,
                'YYYY/M/D'
              )}~${$util.formatDate(detail.endDate, 'YYYY/M/D')}`
            }}
          </text>
        </view>
      </view>
      <view
        style="
          font-size: 13px;
          line-height: 160%;
          position: relative;
          transform: 0.2s all;
        "
        v-if="detail.description.length < 20"
      >
        {{ detail.description }}
      </view>
      <view
        v-else
        style="
          font-size: 13px;
          line-height: 160%;
          position: relative;
          transform: 0.2s all;
        "
        @tap="isShowAllText = !isShowAllText"
      >
        {{
          isShowAllText
            ? detail.description
            : `${detail.description.slice(1, 20)}...`
        }}
        <text style="color: #17c653; padding-left: 4px">
          {{ isShowAllText ? '收起' : '展开' }}
        </text>
      </view>

      <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="gap: 4px">
          <text class="wd-font-800 wd-text-15">
            {{ detail.enterprise.enterprisesName }}
          </text>
          <view class="wd-flex wd-pb-8px">
            <u-icon name="map" size="14" color="#17C653"></u-icon>
            <text class="address wd-text-12" style="margin-left: 4px">
              {{ detail.enterprise.address }}
            </text>
          </view>
          <view class="tagList">
            <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>
</template>

<script>
import { getDeptTree, getDictBatchByType } from '@/api/system/dict.js'
import { TaskApi } from '@/api/task/index.js'
import { getEnterPrise } from '@/api/enterprise/index.js'
export default {
  data() {
    return {
      dictMap: {},
      // 任务详情
      detail: {
        id: '',
        description: ''
      },
      // 是否展开文本
      isShowAllText: false,
      // 查询条件
      queryParams: {
        dept: '',
        Inspections_status: '',
        pageSize: 8,
        pageNo: 1,
        taskId: '',
        recordId: ''
      },
      list: [],
      load: 'loadmore'
    }
  },
  onLoad(res) {
    this.queryParams.taskId = res.taskId
    this.queryParams.recordId = res.recordId
    this.queryParams.enterpriseId = res.enterpriseId
    this.getDict()
    this.init()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['task_state', 'Inspections_status'].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
      }
      uni.getLocation({
        success: res => {
          console.log(res)
        }
      })
      // this.getList()
    },
    async getList() {
      uni.showToast({
        title: '加载中',
        mask: true,
        icon: 'loading'
      })
      this.load = 'loading'
      // const { data } = await InspectionsApi.getList(this.queryParams)
      this.list.push(...data.list)
      this.load = 'loadmore'
      if (this.list.length == data.total) {
        this.load = 'nomore'
      }
      uni.hideToast()
    },
    goEnterprise(enterprise) {
      uni.navigateTo({
        url: `/sub/enterprise/detail?id=${enterprise.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 12px;
  .box {
    background-color: #fff;
    border-radius: $cs-border-radius;
    padding: 16px;
  }

  .detail {
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
    position: relative;
    overflow: hidden;
    .tagList {
      display: flex;
      align-items: center;
      gap: var(--Number-4px, 4px);
      .tag {
        display: flex;
        padding: var(--Number-2px, 2px) var(--Number-6px, 6px);
        justify-content: center;
        align-items: center;
        gap: var(--Number-4px, 4px);
        border-radius: var(--Number-2px, 2px);
        background: var(--LightMode-Grey-Grey-100, #f9f9f9);
        color: var(--LightMode-Grey-Grey-600, #78829d);
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    .enterprise {
      border: 1px solid #f9f9f9;
      padding: 12px;
      border-radius: $cs-border-radius;
      gap: 12px;
      position: relative;
      overflow: hidden;
      font-size: 12px;
      .address {
        color: $uni-text-color-grey;
      }
      &:active {
        background-color: $cs-color-touch;
      }
      .tagList {
        margin-top: 8px;
        display: flex;
        gap: 4px;
        color: $uni-text-color-grey;
        display: flex;
        .tag {
          font-size: 12px;
          display: flex;
          padding: 2px 6px;
          justify-content: center;
          align-items: center;
          border-radius: 2px;
          background: #f9f9f9;
        }
      }
      .audit {
        position: absolute;
        right: -19px;
        top: 6px;
        transform: rotateZ(45deg);
        transform-origin: 50% 50%;
        padding: 4px 20px;
        font-size: 12px;
        text-align: center;
      }
    }
    .audit {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(23px) translateY(16px) rotateZ(45deg);
      transform-origin: 50% 50%;
    }
  }
}
</style>