YY_MP_REFACTOR/src/pages-task/task-detail/components/NormalTaskDetail.vue

<template>
  <TaskDetailSummary :task-detail="taskDetail" />

  <view class="task-detail-content">
    <view class="task-detail-content__heading">
      <view class="task-detail-content__heading-mark" />
      <text>任务内容</text>
    </view>

    <view
      v-for="field in contentFields"
      :key="`${field.seq}-${field.name}`"
      class="task-detail-field"
    >
      <view class="task-detail-field__name">
        <text v-if="field.required" class="task-detail-field__required">*</text>
        {{ field.name }}
      </view>

      <view v-if="field.imageUrls.length" class="task-detail-field__images">
        <image
          v-for="(url, index) in field.imageUrls"
          :key="`${url}-${index}`"
          class="task-detail-field__image"
          :src="url"
          mode="aspectFill"
          @click="previewImages(field.imageUrls, index)"
        />
      </view>

      <view v-if="field.text" class="task-detail-field__text">{{ field.text }}</view>
      <view
        v-else-if="!field.imageUrls.length"
        class="task-detail-field__text task-detail-field__text--empty"
      >
        -
      </view>
    </view>

    <view v-if="!contentFields.length" class="task-detail-content__empty"> 暂无任务内容 </view>
  </view>
</template>

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

import type {
  TaskDetailContentItem,
  TaskFormDetailResponse,
} from '@/services/modules/task/taskDetail/type'
import type {
  TaskContentConfig,
  TaskContentConfigByTaskTypeIdResponse,
} from '@/services/modules/task/taskFrom/type'

import { previewImages, toFullUrl } from '../utils'
import TaskDetailSummary from './TaskDetailSummary.vue'

const IMAGE_FIELD_TYPES = new Set(['img', 'sign'])
const DICT_FIELD_TYPES = new Set(['select', 'domain', 'multiple_select'])

const props = defineProps<{
  taskDetail: TaskFormDetailResponse
  taskConfig: TaskContentConfigByTaskTypeIdResponse | null
}>()

const taskConfigs = computed<TaskContentConfig[]>(() => {
  const source = props.taskConfig
  if (!source) return []

  const configs =
    'dict' in source ? [source] : Object.values(source).filter((item) => 'dict' in item)

  return configs as TaskContentConfig[]
})

/** 将所有表单配置预先整理为「字段名 -> value -> label」索引。 */
const dictLabelsByField = computed(() => {
  const result = new Map<string, Map<string, string>>()

  for (const { config, dict } of taskConfigs.value) {
    if (!Array.isArray(config) || !dict) continue

    for (const field of config) {
      const dictGroupName = field.dictGroupName?.trim()
      const dictItems = dictGroupName ? dict[dictGroupName] : undefined
      if (!Array.isArray(dictItems) || !dictItems.length) continue

      const fieldName = field.taskFiledValue.trim()
      const labels = result.get(fieldName) ?? new Map<string, string>()

      for (const item of dictItems) {
        const value = String(item.value).trim()
        const label = String(item.label).trim()

        if (value && label && !labels.has(value)) {
          labels.set(value, label)
        }
      }

      if (labels.size) result.set(fieldName, labels)
    }
  }

  return result
})

/**
 * wmTaskContent 按 seq 排序；select、domain、multiple_select 类型优先从字段配置
 * 对应的字典中获取 label，字典缺失或值无法完整匹配时直接回显 value。
 * 其余情况在 item.label 为空时用 value 回显。
 * img、sign 类型转成图片列表，其余类型显示标准化后的 label。
 */
const contentFields = computed(() => {
  const content = props.taskDetail.wmTaskContent
  if (!content) return []

  return Object.entries(content)
    .sort(([, left], [, right]) => left.seq - right.seq)
    .map(([name, field]) => {
      const items = field.items.map((item) => ({
        ...item,
        label: resolveItemLabel(name, item),
      }))
      const imageUrls = items
        .filter((item) => isImageFieldType(item.type))
        .flatMap((item) => parseImageUrls(item.label))
      const text = items
        .filter((item) => !isImageFieldType(item.type))
        .map((item) => item.label)
        .filter(Boolean)
        .join('、')

      return {
        name,
        seq: field.seq,
        required: field.required,
        imageUrls: [...new Set(imageUrls)],
        text,
      }
    })
})

const resolveItemLabel = (fieldName: string, item: TaskDetailContentItem): string => {
  const fieldType = item.type.trim().toLowerCase()
  if (!DICT_FIELD_TYPES.has(fieldType)) return item.label?.trim() || item.value
  if (fieldType !== 'multiple_select' && item.label?.trim()) return item.label.trim()

  const values =
    fieldType === 'multiple_select'
      ? item.value
          .split(',')
          .map((value) => value.trim())
          .filter(Boolean)
      : [item.value.trim()]
  const labels = dictLabelsByField.value.get(fieldName.trim())

  if (!values.length || !labels) return item.value

  const resolvedLabels = values.map((value) => labels.get(value))
  return resolvedLabels.every(Boolean) ? resolvedLabels.join('、') : item.value
}

const isImageFieldType = (type: string) => {
  return IMAGE_FIELD_TYPES.has(type.trim().toLowerCase())
}

const parseImageUrls = (value: string): string[] => {
  return value
    .split(',')
    .map((url) => toFullUrl(url))
    .filter(Boolean)
}
</script>

<style lang="scss" scoped>
.task-detail-content {
  margin-top: 24rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(24, 39, 75, 0.05);
}

.task-detail-content__heading {
  display: flex;
  align-items: center;
  gap: 12rpx;
  min-height: 86rpx;
  padding: 0 28rpx;
  color: #1e293b;
  font-size: 29rpx;
  font-weight: 650;
  border-bottom: 1rpx solid #eef2f6;
}

.task-detail-content__heading-mark {
  width: 7rpx;
  height: 30rpx;
  background: #3b9bed;
  border-radius: 4rpx;
}

.task-detail-field {
  padding: 24rpx 28rpx 28rpx;
  border-bottom: 1rpx solid #f1f4f7;
}

.task-detail-field:last-child {
  border-bottom: 0;
}

.task-detail-field__name {
  color: #6f7d8f;
  font-size: 24rpx;
  line-height: 36rpx;
}

.task-detail-field__required {
  margin-right: 4rpx;
  color: #e5484d;
}

.task-detail-field__text {
  margin-top: 12rpx;
  color: #1e293b;
  font-size: 27rpx;
  line-height: 42rpx;
  white-space: pre-wrap;
  word-break: break-all;
}

.task-detail-field__text--empty {
  color: #9aa6b5;
}

.task-detail-field__images {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 18rpx;
}

.task-detail-field__image {
  width: 196rpx;
  height: 196rpx;
  background: #eef2f6;
  border-radius: 14rpx;
}

.task-detail-content__empty {
  padding: 80rpx 28rpx;
  color: #9aa6b5;
  font-size: 25rpx;
  text-align: center;
}
</style>