tjy-uniapp/src/pages/unClaim/components/TaskItemInfo.vue

<template>
  <view class="task-center" @click="handleClick">
    <view class="row-center">
      <text class="title">检验时间：<text class="text">{{ item.checkDate }}</text></text>
      <text class="title">联系人：<text class="text">{{ item.unitContact }}</text></text>
      <text class="title">联系电话：<text class="text">{{ item.unitPhone }}</text></text>
    </view>

    <text class="title block">使用单位：<text class="text">{{ item.unitName }}</text></text>
    <text class="title block">单位地址：<text class="text">{{ item.unitAddress }}</text></text>

    <view class="row-center">
      <text class="title flex-1">项目负责人：<text class="text">{{ item.manager?.nickname }}</text></text>
    </view>
    <view class="row-center">
      <text class="title flex-1">检验人：<text class="text">{{ item?.appoinmentUser?.map((v: any) => v.nickname)?.join('、') || '' }}</text></text>
    </view>

    <text v-if="item.remark" class="title block">备注：<text class="text">{{ item.remark }}</text></text>

    <view class="row-center actions-row">
      <view class="title action-item" @click.stop="handleSecurityCheck">
        <text>安全检查记录：</text>
        <text class="status-badge bg-blue">{{ item.securityCheckCount || 0 }}</text>
      </view>
      
      <view class="title action-item" @click.stop="pdfClickFun(200)">
        <text>告知单：</text>
        <text class="status-badge bg-green">{{ resultStatusText }}</text>
      </view>

      <view class="title action-item" @click.stop="pdfClickFun(100)">
        <text>服务单/受理单：</text>
        <text class="status-badge bg-orange">{{ serviceOrderStatusText }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  item: any
}

const props = defineProps<Props>()

const emit = defineEmits<{
  click: []
  securityCheck: []
  pdfDetail: [businessType: number, signFilePdf: string]
}>()

// 服务单/受理单状态
const serviceOrderStatus = computed(() => {
  const list = props.item.signFileList || []
  return list.find((v: any) => v.businessType === 100)
})

const serviceOrderStatusText = computed(() => {
  if (serviceOrderStatus.value) {
    return serviceOrderStatus.value.isSignature === '1' ? '已签名' : '未签名'
  }
  return '未签名'
})

// 检验结果状态
const resultStatus = computed(() => {
  const list = props.item.signFileList || []
  return list.find((v: any) => v.businessType === 200)
})

const resultStatusText = computed(() => {
  if (resultStatus.value) {
    return resultStatus.value.isSignature === '1' ? '已签名' : '未签名'
  }
  return '未签名'
})

// PDF 点击事件
const pdfClickFun = (businessType: number) => {
  if (businessType === 100) {
    emit('pdfDetail', businessType, serviceOrderStatus.value?.signFilePdf || '')
  } else if (businessType === 200) {
    emit('pdfDetail', businessType, resultStatus.value?.signFilePdf || '')
  }
}

// 点击卡片
const handleClick = () => {
  emit('click')
}

// 点击安全检查记录
const handleSecurityCheck = () => {
  emit('securityCheck')
}
</script>

<style lang="scss" scoped>
.task-center {
  display: flex;
  flex-direction: column;
  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;
}

.block {
  display: block;
}

.flex-1 {
  flex: 1;
}

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

.actions-row {
  margin-top: 5px;
  justify-content: flex-start;
  gap: 10px;
}

.action-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
}

.status-badge {
  border-radius: 2px;
  padding: 3px;
  min-width: 46px;
  text-align: center;
  font-size: 12px;
  color: white;
}

.bg-blue {
  background-color: rgba(47, 141, 255, 1);
}

.bg-green {
  background-color: rgba(103, 194, 58, 1);
}

.bg-orange {
  background-color: rgba(230, 162, 60, 1);
}
</style>