supervision-vue/src/components/data/complaintproblemInfo.vue

<template>
  <div class="info-container">
    <h3>问题信息</h3>

    <div class="row">
      <div class="col col-12">
        <label>来源</label>
        <span>{{ sourcePathText }}</span>
      </div>

      <div class="col col-12">
        <label>业务类型</label>
        <span>{{ getDictLabel(dict?.businessType, data.businessTypeCode) }}</span>
      </div>

      <div class="col col-12">
        <label>编号</label>
        <span>{{ data.originId || "/" }}</span>
      </div>

      <div class="col col-12">
        <label>登记/受理时间</label>
        <span>{{ formatTime(data.discoveryTime) }}</span>
      </div>

      <div class="col col-12">
        <label>来件人姓名</label>
        <span>{{ data.responderName || "/" }}</span>
      </div>

      <div class="col col-12">
        <label>身份证号码</label>
        <span>{{ data.responderIdCode || "/" }}</span>
      </div>

      <div class="col col-12">
        <label>联系电话</label>
        <span>{{ data.responderPhone || "/" }}</span>
      </div>

      <div class="col col-12">
        <label>涉及二级机构</label>
        <span>{{ data.secondDepartName || "/" }}</span>
      </div>

      <div class="col col-24">
        <label>来件内容</label>
        <span>{{ data.thingDesc || "/" }}</span>
      </div>

      <div class="col col-12">
        <label>涉嫌问题</label>
        <span>{{ suspectProblemText }}</span>
      </div>

      <div class="col col-12">
        <label>是否重复件</label>
        <div class="inline-actions">
          <span>{{ getDictLabel(dict?.yesNo, data.repeatt) }}</span>
          <el-button
              v-if="String(data.repeatt) === '1'"
              class="repeat-btn"
              type="primary"
              link
              @click="onRepeatClick"
          >
            查看
          </el-button>
        </div>
      </div>


      <div class="col col-12">
        <label>标签</label>
        <span>{{ tagText }}</span>
      </div>

      <div class="col col-24">
        <label>办理方式</label>
        <span>{{ getDictLabel(dict?.handleMethodType, data.handleMethod) }}</span>
      </div>
    </div>

    <div v-if="data.thingFiles?.length">
      <div class="text-primary mt-10 mb-10">附件</div>
      <file-list :files="data.thingFiles" />
    </div>
  </div>

  <DuplicateDrawerWithDetail
      v-model="duplicateDrawerVisible"
      :dict="dict"
      :query="{
    responderIdCode: data.responderIdCode,
    responderName: data.responderName,
    responderPhone: data.responderPhone
  }"
      :requestFn="maileRepeatt"
      detailIdKey="complaintId"
      :excludeId="data.id"
  />

</template>

<script setup>
import { computed } from "vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import DuplicateDrawerWithDetail from "@/views/data/DuplicateDrawerWithDetail.vue";
import {maileRepeatt} from "@/api/data/complaintCollection.ts";


const props = defineProps({
  data: { type: Object, default: () => ({}) }, // 你原来的 base
  dict: { type: Object, default: () => ({}) },
});

const data = computed(() => props.data || {});
const dict = computed(() => props.dict || {});

function formatTime(v) {
  return v ? dayjs(v).format("YYYY-MM-DD HH:mm:ss") : "/";
}

/** 兼容：单值/数组/逗号串 */
function getDictLabel(list, value) {
  if (!Array.isArray(list)) return "/";
  if (value === null || value === undefined || value === "") return "/";

  const values = Array.isArray(value)
      ? value
      : typeof value === "string" && value.includes(",")
          ? value.split(",").map((v) => v.trim())
          : [value];

  const labels = values
      .map((v) => list.find((d) => d.dictValue == v)?.dictLabel)
      .filter(Boolean);

  return labels.length ? labels.join("，") : "/";
}

/** 来源展示：sourceTablePath 优先，其次 sourcePath */
const sourcePathText = computed(() => {
  if (data.value?.sourceTablePath) return data.value.sourceTablePath;
  if (Array.isArray(data.value?.sourcePath) && data.value.sourcePath.length) {
    return data.value.sourcePath.join(" / ");
  }
  return "/";
});

/** 涉嫌问题：involveProblemStr 优先，否则 involveProblemIdList -> dict.suspectProblem */
const suspectProblemText = computed(() => {
  if (data.value?.involveProblemStr) return data.value.involveProblemStr;

  const ids = data.value?.involveProblemIdList;
  if (!Array.isArray(ids) || !ids.length) return "/";

  const labels = ids
      .map((v) => getDictLabel(dict.value?.suspectProblem, v))
      .filter((x) => x && x !== "/");

  return labels.length ? labels.join("，") : "/";
});

/** 标签：按你原 info-container：base.tag 逗号拆分 -> dict.sfssTags */
const tagText = computed(() => {
  const v = data.value?.tag;
  if (!v) return "/";

  return String(v)
      .split(",")
      .map((x) => getDictLabel(dict.value?.sfssTags, x))
      .filter((x) => x && x !== "/")
      .join("，") || "/";
});



const duplicateDrawerVisible = ref(false);

const onRepeatClick = () => {
  duplicateDrawerVisible.value = true;
};

</script>

<style scoped>
/* 沿用你原来的 info-container 样式 */
.info-container {
  border: 1px solid #eee;
  background: #fafcff;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.info-container h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.col {
  display: flex;
  gap: 8px;
  line-height: 22px;
}

.col-12 {
  width: 50%;
}

.col-24 {
  width: 100%;
}

label {
  width: 120px;
  color: #666;
  flex: 0 0 auto;
}

span {
  color: #222;
  flex: 1 1 auto;
  word-break: break-word;
}

.col-24 span {
  text-align: justify;
  text-align-last: left;
  line-height: 1.6;
}

.text-primary {
  color: #409eff;
  font-weight: 500;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}
.inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.repeat-btn {
  padding: 0; /* link 按钮默认就很轻，这行是让它更像文字 */
}

</style>