yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/pipeReportPreparationList/PipeReportList.vue

<template>
  <div class="report-list-container">
    <span
      v-for="item in row.reportDOList"
      :key="item?.id"
      class="report-item"
    >
      <span
        class="color-dot"
        :style="{ backgroundColor: getStatusColor(item.taskStatus) }"
      ></span>
      <span
        class="report-name"
        :style="{ color: getStatusColor(item.taskStatus) }"
        @click="() => handleClick(row, item)"
      >
        {{ getReportName(item) }}
      </span>
      <span
        v-if="item?.fee"
        class="report-fee"
        :style="{ color: getStatusColor(item.taskStatus) }"
      >
        ({{ item?.fee }})
      </span>
    </span>
  </div>
</template>

<script setup lang="ts">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import {useRouter} from "vue-router";

interface ReportItem {
  id: string
  reportName: string
  taskStatus: number
  fee?: string | number
  itemPartId?: string
  [key: string]: any
}

const router = useRouter()
const props = defineProps<{
  row
}>()

const PartTypeList = getStrDictOptions(DICT_TYPE.PRESSURE2_BOILER_PART_TYPE)

const getTypeName = (type: string) => {
  const item = PartTypeList.find(item => item.value === type)
  return item ? item.label : ''
}

const getReportName = (item: ReportItem) => {
  if (!item.itemPartId || item.itemPartId === '0') {
    return item.reportName
  }
  return `${item.reportName}(${getTypeName(item.itemPartId)})`
}

const getStatusColor = (status: number): string => {
  const statusMap: Record<number, string> = {
    100: '#5B9BD5',  // 待录入
    400: '#70AD47',  // 记录录入
    500: '#9973C2',  // 记录校核
    520: '#FFC000',  // 报告编制
    600: '#ED7D31',  // 报告审核
    700: '#FF8DC7',  // 报告审批
    800: '#303133'   // 报告办结
  }
  return statusMap[status] || '#A7D78B'
}

const handleClick = (row, item: ReportItem) => {
  if (row.isClaim === false) {
    return
  }
  localStorage.setItem('activePipeDetailItemId', item.id)
  router.push({
    name: 'PipeCheckerTaskDetail',
    query: {id: row.id,orderId:row.orderId, type: 'PipeMyTask'},
  })
}
</script>

<style lang="scss" scoped>
.report-list-container {
  display: inline;
  line-height: 1.8;
}

.report-item {
  display: inline-block;
  white-space: nowrap;
  margin-right: 12px;

  .color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
  }

  .report-name {
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.8;
      text-decoration: underline;
    }
  }

  .report-fee {
    margin-left: 2px;
  }
}
</style>