tjy-uniapp/src/pages/taskOnlinePage/components/BoilerTaskItemInfo.vue

<template>
  <view class="task-center">
    <view class="row-center">
      <!-- 检验日期 -->
      <text class="title">
        检验日期：
        <text class="text">{{ item.checkDate }}</text>
      </text>
      <!-- 检验性质 -->
      <text class="title">
        检验性质：
        <text class="text">
          {{ columns.find((col) => col.value === item.checkType)?.label || '-' }}
        </text>
      </text>
      <!-- 主报告状态 -->
      <text class="title">
        主报告状态：
        <text>{{ taskStatusList.find((col) => col.value === item.taskStatus)?.label || '-' }}</text>
      </text>
    </view>
    <view class="row-center">
      <text class="title">
        设备注册代码：
        <text class="text">{{ item.equipCode }}</text>
      </text>
    </view>
    <view class="row-center">
      <text class="title">
        使用证编号：
        <text class="text">{{ item.useRegisterNo }}</text>
      </text>
      <!-- <text class="title">费用：<text class="text">{{ item.fee || '-' }}</text></text> -->
    </view>
    <view class="row-center">
      <text class="title">
        单位名称：
        <text class="text">{{ item.unitName }}</text>
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { PressureCheckerMyTaskStatus } from '@/utils/dictMap'

interface Props {
  item: any
}

const props = defineProps<Props>()

const columns = [
  { label: '定期检验', value: 100 },
  { label: '年度检查', value: 200 },
  // { label: '超年限检验', value: 300 },
]

const taskStatusList = [
  { label: '待认领', value: PressureCheckerMyTaskStatus.WAIT_CONFIRM },
  { label: '作废', value: PressureCheckerMyTaskStatus.CANCELLATION },
  { label: '待录入', value: PressureCheckerMyTaskStatus.CONFIRMED },
  { label: '记录录入', value: PressureCheckerMyTaskStatus.RECORD_INPUT },
  { label: '记录校核', value: PressureCheckerMyTaskStatus.RECORD_CHECK },
  { label: '报告编制', value: PressureCheckerMyTaskStatus.REPORT_INPUT },
  { label: '报告审核', value: PressureCheckerMyTaskStatus.REPORT_AUDIT },
  { label: '报告审批', value: PressureCheckerMyTaskStatus.REPORT_APPROVE },
  { label: '报告报告办结', value: PressureCheckerMyTaskStatus.REPORT_END },
]
</script>

<style lang="scss" scoped>
.task-center {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: rgb(244, 244, 244);
  border-radius: 5px;
}

.row-center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.title {
  color: rgb(108, 108, 108);
  font-size: 12px;
  line-height: 25px;
  margin-right: 5px;
}

.text {
  color: rgb(51, 51, 51);
  font-size: 12px;
  line-height: 25px;
}
</style>