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

<template>
  <div>
    <el-tooltip
      placement="top"
      effect="light"
      popper-class="report-list-tooltip"
      :disabled="isExpanded"
    >
      <template #content>
        <div class="tooltip-report-list">
          <div
            v-for="item in row.reportDOList"
            :key="item?.id"
            class="tooltip-report-item"
            @click="handleClick(row, item)"
          >
            <span
              class="tooltip-dot"
              :style="{ backgroundColor: getStatusColor(item.taskStatus) }"
            ></span>
            <span class="tooltip-name">{{ getReportName(item) }}</span>
            <span v-if="item?.fee" class="tooltip-fee">({{ item?.fee }})</span>
          </div>
        </div>
      </template>
      <div
        ref="containerRef"
        :class="['report-list-container', { expanded: isExpanded }]"
      >
        <span
          v-for="item in row.reportDOList"
          :key="item?.id"
          class="report-item"
        >
          <el-icon v-if="item?.recheckStatus === 300"
                   class="warning-icon" size="16"
          >
            <WarningFilled/>
          </el-icon>
          <span v-else
             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>
    </el-tooltip>
    <div
      v-if="isOverflow || isExpanded"
      class="expand-toggle"
      @click="isExpanded = !isExpanded"
    >
      <span>{{ isExpanded ? '收起' : '全部展开' }}</span>
      <el-icon
        :style="{
          transition: 'transform 0.3s',
          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
        }"
      >
        <ArrowDown />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUpdated } from 'vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { useRouter } from 'vue-router'
import { WarningFilled, ArrowDown } from '@element-plus/icons-vue'
import { PressureTaskOrderTaskStatus } from '@/utils/constants'
import { PipeTaskOrderApi, PipeTaskOrderOrderItemVO } from '@/api/pressure2/pipetaskorder'
import { useUserStore } from '@/store/modules/user'

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

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

const containerRef = ref<HTMLElement>()
const isOverflow = ref(false)
const isExpanded = ref(false)

const checkOverflow = () => {
  if (containerRef.value) {
    isOverflow.value = containerRef.value.scrollHeight > containerRef.value.clientHeight + 1
  }
}

const PartTypeList = getStrDictOptions(DICT_TYPE.PRESSURE2_BOILER_PART_TYPE)
const userStore = useUserStore()
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 = async (row, item: ReportItem) => {
  if (row.isClaim === false) {
    return
  }

  if (!canCheckInput(row)) {
    return
  }

  const res = await PipeTaskOrderApi.checkSchemeStatus(row.orderId)
  if (!res) {
    ElMessage.warning('请先完成检验方案的审核审批')
    return
  }

  if (row.taskStatus >= PressureTaskOrderTaskStatus.REPORT_INPUT) {
    if (!row.endCheckDate) {
      ElMessage.error('请添加结束检验时间再进行编制！')
      return
    }
  }

  localStorage.setItem('activePipeDetailItemId', item.id)
  router.push({
    name: 'PipeCheckerTaskDetail',
    query: { id: row.id, type: 'PipeMyTask' }
  })
}

onMounted(() => {
  nextTick(() => {
    setTimeout(checkOverflow, 100)
  })
})

onUpdated(() => {
  nextTick(checkOverflow)
})

const canCheckInput = (row: PipeTaskOrderOrderItemVO) => {
  const userId = userStore.user.id
  if (row.mainCheckerUser && row.mainCheckerUser.id === userId) {
    return true
  }
  if (row.checkUsers && row.checkUsers.length > 0) {
    return row.checkUsers.some(user => user.id === userId)
  }
  return false
}
</script>

<style lang="scss" scoped>
.report-list-container {
  display: block;
  line-height: 1.8;
  overflow: hidden;
  max-height: 5.4em;

  &.expanded {
    max-height: none;
  }
}

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

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

  .warning-icon {
    color: lightcoral;
    display: inline-block;
    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;
  }
}

.expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #409eff;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  margin-top: 2px;

  &:hover {
    color: #66b1ff;
  }
}
</style>

<style lang="scss">
.report-list-tooltip {
  max-width: 400px !important;
  padding: 12px 16px !important;
}

.tooltip-report-list {
  max-height: 300px;
  overflow-y: auto;
}

.tooltip-report-item {
  display: flex;
  align-items: center;
  line-height: 2;
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;

  &:hover {
    background-color: #f5f7fa;
  }
}

.tooltip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.tooltip-name {
  color: #303133;
}

.tooltip-fee {
  color: #909399;
  margin-left: 4px;
}
</style>