From bef152d7edaa2cb7e7507268f5dc34352014d122 Mon Sep 17 00:00:00 2001
From: buaixuexideshitongxue <2936013465@qq.com>
Date: Tue, 10 Feb 2026 17:57:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=89=E8=AE=BF=E6=B6=89=E8=AF=89--=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=9B=B4=E5=A4=9A=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/data/complaint_detail.vue     | 351 ++----------------
 src/components/data/complaintdes.vue         | 360 +++++++++++++++++++
 src/components/data/complaintproblemInfo.vue | 216 +++++++++++
 3 files changed, 596 insertions(+), 331 deletions(-)
 create mode 100644 src/components/data/complaintdes.vue
 create mode 100644 src/components/data/complaintproblemInfo.vue

diff --git a/src/components/data/complaint_detail.vue b/src/components/data/complaint_detail.vue
index 529a3a8..fe84a97 100644
--- a/src/components/data/complaint_detail.vue
+++ b/src/components/data/complaint_detail.vue
@@ -1,181 +1,15 @@
-  <template>
+<template>
   <el-dialog title="详情" v-model="visible" width="60vw" :lock-scroll="false" destroy-on-close>
     <div style="min-height: 50vh" v-loading="loading">
       <div class="row" style="margin: 0 60px">
-        <!-- ================== 基本信息（登记来件） ================== -->
-        <div class="col col-12">
-          <label>来源</label>
-          <span>{{ sourcePathText }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>业务类别</label>
-          <span>{{ getDictLabel(dict?.businessType, base.businessTypeCode) }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>编号</label>
-          <span>{{ base.originId || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>受理时间</label>
-          <span>{{ base.discoveryTime ? dayjs(base.discoveryTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>来件人姓名</label>
-          <span>{{ base.responderName || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>身份证号码</label>
-          <span>{{ base.responderIdCode || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>联系电话</label>
-          <span>{{ base.responderPhone || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>被投诉二级机构</label>
-          <span>{{ base.secondDepartName || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>涉嫌问题</label>
-          <span>{{ suspectProblemText }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>是否重复件</label>
-          <span>{{ getDictLabel(dict?.yesNo, base.repeatt) }}</span>
-        </div>
-
-        <div class="col col-24">
-          <label>标签</label>
-          <span>{{ getDictLabel(dict?.sfssTags, base.tag) }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>办理方式</label>
-          <span>{{ getDictLabel(dict?.handleMethodType, base.handleMethod) }}</span>
-        </div>
-
         <div class="col col-24">
-          <label>来件内容</label>
-          <span class="content">{{ base.thingDesc || "/" }}</span>
-        </div>
-
-        <!-- ================== 核查情况（新增：放在基本信息后、涉及信息前） ================== -->
-        <div class="col col-24 section-title">
-          <h5>核查情况</h5>
-        </div>
-
-        <div class="col col-12">
-          <label>涉及案件/警情编号</label>
-          <span>{{ base.caseNumber || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>涉及单位</label>
-          <span>{{ base.involveDepartName || "/" }}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>核查结论</label>
-          <span>{{ base.checkStatusName || '/'}}</span>
-        </div>
-
-        <div class="col col-12">
-          <label>涉及对象</label>
-          <span>{{ getDictLabel(dict?.accountabilityTarget, base.accountabilityTarget) }}</span>
+          <complaint-problem-info :data="base" :dict="dict" />
         </div>
 
         <div class="col col-24">
-          <label>问题核查情况
-          </label>
-          <span>{{ base.checkStatusDesc }}</span>
-        </div>
-        <!-- ================== 涉及信息（人员/单位）（你上次要的那块，保持不变） ================== -->
-        <div class="col col-24 section-title">
-          <h5>涉及单位</h5>
-        </div>
-
-        <template v-if="deptBlames.length">
-          <div class="col col-24 sub-title">
-            <strong>涉及班子成员</strong>
-          </div>
-
-          <div
-              class="col col-24 blame-card"
-              v-for="(item, idx) in deptBlames"
-              :key="item.id || item.blameEmpNo || idx"
-          >
-            <div class="row inner">
-              <div class="col col-12">
-                <label>姓名</label>
-                <span>{{ item.blameName || "/" }}</span>
-              </div>
-              <div class="col col-12">
-                <label>警号</label>
-                <span>{{ item.blameEmpNo || "/" }}</span>
-              </div>
-              <div class="col col-12">
-                <label>身份证号码</label>
-                <span>{{ item.blameIdCode || "/" }}</span>
-              </div>
-              <div class="col col-12">
-                <label>人员属性</label>
-                <span>{{ item.ivPersonTypeName || item.ivPersonType || "/" }}</span>
-              </div>
-            </div>
-          </div>
-        </template>
-        <div class="col col-24" v-else>
-          <label></label>
-          <span>/</span>
-        </div>
-
-        <div class="col col-24 section-title">
-          <h5>涉及人员</h5>
-        </div>
-
-        <template v-if="personalBlames.length">
-          <div
-              class="col col-24 blame-card"
-              v-for="(item, idx) in personalBlames"
-              :key="item.id || item.blameEmpNo || idx"
-          >
-            <div class="row inner">
-              <div class="col col-12">
-                <label>姓名</label>
-                <span>{{ item.blameName || "/" }}</span>
-              </div>
-              <div class="col col-12">
-                <label>警号</label>
-                <span>{{ item.blameEmpNo || "/" }}</span>
-              </div>
-              <div class="col col-12">
-                <label>身份证号码</label>
-                <span>{{ item.blameIdCode || "/" }}</span>
-              </div>
-              <div class="col col-12">
-                <label>人员属性</label>
-                <span>{{ item.ivPersonTypeName || item.ivPersonType || "/" }}</span>
-              </div>
-            </div>
-          </div>
-        </template>
-        <div class="col col-24" v-else>
-          <label></label>
-          <span>/</span>
+          <complaintdes :data="base" :dict="dict" />
         </div>
       </div>
-
-      <el-empty v-if="!loading && loaded && !detail?.id" description="未查询到详情数据" />
-      <el-empty v-if="!loading && !loaded && !id" description="未传入ID" />
     </div>
 
     <template #footer>
@@ -187,10 +21,11 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from "vue";
-import { ElMessage } from "element-plus";
+import {computed, ref, watch} from "vue";
+import {ElMessage} from "element-plus";
 import {watchDetail} from "@/api/data/complaintCollection.ts";
-import dayjs from "dayjs";
+import ComplaintProblemInfo from "@/components/data/complaintproblemInfo.vue";
+import Complaintdes from "@/components/data/complaintdes.vue";
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
@@ -211,111 +46,6 @@ const detail = ref({});
 
 /** ✅ 假设接口统一返回：detail = { ...baseFields, negative: { ...核查/涉及信息 } } */
 const base = computed(() => detail.value || {});
-const neg = computed(() => detail.value?.negative || detail.value?.neg || {});
-
-function getDictLabel(list, value) {
-  if (!Array.isArray(list)) return '/'
-
-  if (value === null || value === undefined || value === '') return '/'
-
-  let values = []
-
-  // 1️⃣ value 是数组
-  if (Array.isArray(value)) {
-    values = value
-  }
-  // 2️⃣ value 是 "1,2,3" 这种字符串
-  else if (typeof value === 'string' && value.includes(',')) {
-    values = value.split(',').map(v => v.trim())
-  }
-  // 3️⃣ 单值（string / number）
-  else {
-    values = [value]
-  }
-
-  // 4️⃣ 映射成字典中文
-  const labels = values
-      .map(v => {
-        const item = list.find(d => d.dictValue == v)
-        return item?.dictLabel
-      })
-      .filter(Boolean)
-
-  return labels.length ? labels.join('，') : '/'
-}
-
-/** 来源展示：优先后端给的“全路径”，否则用 sourcePath 数组拼 */
-const sourcePathText = computed(() => {
-  if (base.value?.sourceTablePath) return base.value.sourceTablePath;
-  if (Array.isArray(base.value?.sourcePath) && base.value.sourcePath.length) {
-    return base.value.sourcePath.join(" / ");
-  }
-  return "/";
-});
-
-/** 涉嫌问题：involveProblemStr 优先，其次 involveProblemIdList -> 字典label */
-const suspectProblemText = computed(() => {
-  if (base.value?.involveProblemStr) return base.value.involveProblemStr;
-  const ids = base.value?.involveProblemIdList;
-  if (!Array.isArray(ids) || !ids.length) return "/";
-  const labels = ids
-      .map((v) => dictLabel(props.dict?.suspectProblem, v))
-      .filter((x) => x && x !== "/");
-  return labels.length ? labels.join("，") : "/";
-});
-
-/** 标签：优先 tag(单值)；其次 tags(数组/逗号串) */
-const tagText = computed(() => {
-  const v = base.value?.tag ?? base.value?.tags;
-  if (!v) return "/";
-  if (!Array.isArray(v) && String(v).indexOf(",") === -1 && base.value?.tag !== undefined) {
-    return dictLabel(props.dict?.tagList, v);
-  }
-  const arr = Array.isArray(v) ? v : String(v).split(",");
-  const labels = arr
-      .map((x) => dictLabel(props.dict?.tagList, x))
-      .filter((x) => x && x !== "/");
-  return labels.length ? labels.join("，") : "/";
-});
-
-/** 核查办理里的逻辑：problemIsTrue = checkStatusCode 为 1/2/3 :contentReference[oaicite:2]{index=2} */
-const problemIsTrue = computed(() => ["1", "2", "3"].includes(String(neg.value?.checkStatusCode ?? "")));
-
-/** 核查办理里的逻辑：整改限制显示条件（isRectify=NOT 且 checkStatusCode 1/2/3） :contentReference[oaicite:3]{index=3}
- * 你枚举里 IsRectify.NOT 是多少不确定，这里按你的模板写法：isRectifyCode === '0' 或 '2' 这类也可能是未整改
- * 为了稳：用 “非真” 来判断，项目里你再对齐。
- */
-const showRectifyRestrictionDays = computed(() => {
-  const code = String(neg.value?.isRectifyCode ?? "");
-  const isNotRectify = code === "0" || code === "2" || code.toLowerCase() === "not";
-  return problemIsTrue.value && isNotRectify;
-});
-
-/** 未整改原因：你模板里是 (form.isRectifyCode === '0' || form.isRectifyCode === '2') :contentReference[oaicite:4]{index=4} */
-const showUnrectifyReason = computed(() => {
-  const code = String(neg.value?.isRectifyCode ?? "");
-  return code === "0" || code === "2";
-});
-
-/** 问题整改情况：你模板里是 problemIsTrue && isRectifyCode === InspectCase.TRUE :contentReference[oaicite:5]{index=5}
- * 这里同样做宽松兼容：'1' / 'true' / 'TRUE'
- */
-const showRectifyDesc = computed(() => {
-  if (!problemIsTrue.value) return false;
-  const code = String(neg.value?.isRectifyCode ?? "");
-  return code === "1" || code.toLowerCase() === "true" || code.toUpperCase() === "TRUE";
-});
-
-/** 涉及对象分类（人员/单位） */
-const BlameType = { PERSONAL: "PERSONAL", DEPARTMENT: "DEPARTMENT" };
-const deptBlames = computed(() => (Array.isArray(base.value?.deptBlames) ? base.value.deptBlames : []));
-const personalBlames = computed(() => (Array.isArray(base.value?.personalBlames) ? base.value.personalBlames : []));
-/**
- * ✅ 替换为你的真实接口（接口一次性返回 base + negative）
- * 示例：
- * import { getDetail } from "@/api/xxx";
- * return await getDetail({ id })
- */
 
 async function fetchDetail() {
   if (!props.id) return;
@@ -348,70 +78,29 @@ watch(
 </script>
 
 <style scoped>
-/* 参考你给的 row/col 展示结构：普通详情，不是表单禁用态 */
+/* ✅ 让弹窗内容纵向排列，每个模块一整行 */
 .row {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column; /* 关键：不要横向排 */
+  gap: 14px;              /* 替代 row-gap，更直观 */
   margin: 0;
-  row-gap: 14px;
-}
-
-.col {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.col-12 {
-  width: 50%;
 }
 
+/* ✅ 强制每个 col-24 占满 100% 宽度（在 flex 下生效） */
+.col.col-24,
 .col-24 {
   width: 100%;
+  flex: 0 0 100%;
+  max-width: 100%;
+  min-width: 0;
 }
 
-label {
-  width: 120px;
-  color: #606266;
-  flex: 0 0 auto;
-}
-
-span {
-  flex: 1 1 auto;
-  color: #303133;
-}
-
-.content {
-  white-space: pre-wrap;
-  line-height: 1.6;
-}
-
-.section-title h5 {
-  margin: 12px 0 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.sub-title {
-  margin-top: 6px;
-  color: #606266;
-}
-
-.blame-card {
-  background: #f9faff;
-  border-radius: 6px;
-  padding: 10px 12px;
+/* ✅ 保险：如果你的子组件根节点是 el-collapse，确保它也占满 */
+:deep(.el-collapse) {
+  width: 100%;
 }
-
-.inner {
-  margin: 0;
-  row-gap: 10px;
+:deep(.el-collapse-item__header) {
+  width: 100%;
 }
 
-.dialog-footer {
-  padding: 16px 24px 24px;
-  display: flex;
-  justify-content: flex-end;
-}
 </style>
diff --git a/src/components/data/complaintdes.vue b/src/components/data/complaintdes.vue
new file mode 100644
index 0000000..ffed735
--- /dev/null
+++ b/src/components/data/complaintdes.vue
@@ -0,0 +1,360 @@
+<template>
+  <el-collapse v-model="activeNames" class="detail-collapse">
+    <!-- ================== 核查办理 ================== -->
+    <el-collapse-item name="verify">
+      <template #title>
+        <span class="collapse-title">核查情况</span>
+      </template>
+
+      <div>
+        <div class="row">
+          <div class="col col-12">
+            <label>涉及案件/警情编号</label>
+            <span>{{ data.caseNumber || "/" }}</span>
+          </div>
+          <div class="col col-12">
+            <label>涉及举报对象</label>
+            <span>{{ getDictLabel(dict?.accountabilityTarget, data.accountabilityTarget) }}</span>
+          </div>
+          <div class="col col-12">
+            <label>核查结论</label>
+            <span>{{ data.checkStatusName || "/" }}</span>
+          </div>
+          <div class="col col-12">
+            <label>涉及单位</label>
+            <span>{{ data.involveDepartName || "/" }}</span>
+          </div>
+          <div class="col col-12">
+            <label>办结情况</label>
+            <span>
+              {{
+                data.completionStatus === "1"
+                    ? "程序办结"
+                    : data.completionStatus === "2"
+                        ? "已解决合理诉求"
+                        : "/"
+              }}
+            </span>
+          </div>
+          <div class="col col-12">
+            <label>群众认可</label>
+            <span>
+              {{
+                data.publicRecognition === "1"
+                    ? "认可"
+                    : data.publicRecognition === "2"
+                        ? "不认可"
+                        : data.publicRecognition === "3"
+                            ? "不接电话"
+                            : "/"
+              }}
+            </span>
+          </div>
+        </div>
+
+        <div class="col col-24">
+          <label>问题核查情况</label>
+          <span>{{ data.checkStatusDesc || "/" }}</span>
+        </div>
+      </div>
+    </el-collapse-item>
+
+    <!-- ================== 涉及单位 ================== -->
+    <template v-if="personalBlames.length">
+      <el-collapse-item
+          v-for="(item, index) in personalBlames.filter(
+                (item) => item.type === BlameType.DEPARTMENT
+            )"
+          :key="item.id || index"
+          title="涉及单位"
+          :name="`dept${index}`"
+      >
+        <div class="row">
+          <div class="col col-6">
+            <label>班子成员姓名</label>
+            <span>{{ item.blameName || "/" }}</span>
+          </div>
+          <div class="col col-6">
+            <label>身份证号码</label>
+            <span>{{ item.blameIdCode || "/" }}</span>
+          </div>
+          <div class="col col-6">
+            <label>人员属性</label>
+            <span>{{ item.ivPersonTypeName || item.ivPersonType || "/" }}</span>
+          </div>
+        </div>
+        <div
+            class="row"
+            v-for="(problem, index) in item.problems"
+            :key="index"
+        >
+          <div class="col col-24">
+            <label>问题类型{{ index + 1 }}</label>
+            <span
+            >{{ problem.oneLevelContent || "/" }} /
+                {{ problem.twoLevelContent || "/" }} /
+                {{ problem.threeLevelContent || "/" }}
+                {{ problem.threeLevelContent === '其他' && problem.threeLevelContentOther ? `(${problem.threeLevelContentOther})` : ''}}
+                </span
+                >
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-6" v-if="item.subjectiveAspectName">
+            <label>主观方面</label>
+            <span>{{ item.subjectiveAspectName }}</span>
+          </div>
+          <div class="col col-6">
+            <label>责任类别</label>
+            <span>{{ item.responsibilityTypeName || "/" }}</span>
+          </div>
+          <div class="col col-6" v-if="item.handleResultName">
+            <label>处置结果</label>
+            <span>
+              <span>{{ item.handleResultName }}</span>
+              <span v-if="item.handleResultNameOther">({{ item.handleResultNameOther }})</span>
+            </span>
+          </div>
+        </div>
+      </el-collapse-item>
+    </template>
+    <el-collapse-item v-else name="dept">
+      <template #title>
+        <span class="collapse-title">涉及单位</span>
+      </template>
+      <div class="col col-24">
+        <span>/</span>
+      </div>
+    </el-collapse-item>
+
+    <!-- ================== 涉及人员 ================== -->
+    <template v-if="personalBlames.length">
+      <el-collapse-item
+          v-for="(item, index) in personalBlames.filter(
+                (item) => item.type === BlameType.PERSONAL
+            )"
+          :key="item.id || index"
+          :title="`涉及人员${index + 1}`"
+          :name="`involved${index}`"
+      >
+        <div class="row">
+          <div class="col col-6">
+            <label>涉及人员姓名</label>
+            <span>
+              <span>{{ item.blameName || "/" }}</span>
+              <span class="text-primary ml-10">{{ item.blameEmpNo || "/" }}</span>
+            </span>
+          </div>
+          <div class="col col-6">
+            <label>身份证</label>
+            <span>{{ item.blameIdCode || "/" }}</span>
+          </div>
+          <div class="col col-6">
+            <label>人员属性</label>
+            <span>{{ item.ivPersonTypeName || item.ivPersonType || "/" }}</span>
+          </div>
+        </div>
+        <div
+            class="row"
+            v-for="(problem, index) in item.problems"
+            :key="index"
+        >
+          <div class="col col-24">
+            <label>问题类型{{ index + 1 }}</label>
+            <span
+            >{{ problem.oneLevelContent || "/" }} /
+                {{ problem.twoLevelContent || "/" }} /
+                {{ problem.threeLevelContent || "/" }}
+                {{ problem.threeLevelContent === '其他' && problem.threeLevelContentOther ? `(${problem.threeLevelContentOther})` : ''}}
+                </span
+                >
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-6" v-if="item.responsibilityTypeName">
+            <label>责任类别</label>
+            <span>{{ item.responsibilityTypeName }}</span>
+          </div>
+          <div class="col col-6" v-if="item.subjectiveAspectName">
+            <label>主观方面</label>
+            <span>{{ item.subjectiveAspectName }}</span>
+          </div>
+          <div class="col col-6" v-if="item.handleResultName">
+            <label>处置结果</label>
+            <span>
+              <span>{{ item.handleResultName }}</span>
+              <span v-if="item.handleResultNameOther">({{ item.handleResultNameOther }})</span>
+            </span>
+          </div>
+          <div class="col col-6" v-if="item.protectRightsName">
+            <label>维权容错</label>
+            <span>{{ item.protectRightsName }}</span>
+          </div>
+          <div class="col col-6" v-if="item.superviseMeasuresName">
+            <label>督察措施</label>
+            <span>{{ item.superviseMeasuresName }}</span>
+          </div>
+
+        </div>
+        <div class="row">
+
+          <div class="col col-12" v-if="item.ConfinementData">
+            <label>禁闭时间</label>
+            <span >{{item.ConfinementData.startTime+ "   -   " + item.ConfinementData.endTime}}</span>
+          </div>
+          <div class="col col-4" v-if="item.ConfinementData">
+            <label>禁闭时长（天）</label>
+            <span >{{item.ConfinementData.confinementTime}}</span>
+          </div>
+          <div class="col col-24" v-if="item.ConfinementData">
+            <label>禁闭措施</label>
+            <span>{{item.ConfinementData.matter}}</span>
+          </div>
+        </div>
+        <div class="row" style="background: #f5f5f5">
+          <div class="col col-6">
+            <label>涉及领导姓名</label>
+            <span v-if="item.leadName">{{ item.leadName }} {{ item.leadEmpNo }}</span>
+            <span v-else>/</span>
+          </div>
+          <div class="col col-6">
+            <label>身份证</label>
+            <span>{{ item.leadIdCode || "/" }}</span>
+          </div>
+
+          <div class="col col-6" v-if="item.leadResponsibilityTypeName">
+            <label>责任类别</label>
+            <span>{{ item.leadResponsibilityTypeName }}</span>
+          </div>
+          <div class="col col-6" v-if="item.leadMeasuresName">
+            <label>督察措施</label>
+            <span>{{ item.leadMeasuresName }}</span>
+          </div>
+          <div class="col col-6" v-if="item.leadHandleResultName">
+            <label>处置结果</label>
+            <span>
+              <span>{{ item.leadHandleResultName }}</span>
+              <span v-if="item.leadHandleResultNameOther">({{ item.leadHandleResultNameOther }})</span>
+            </span>
+          </div>
+
+        </div>
+        <div class="row" style="background: #f5f5f5" v-if="item.leadConfinement">
+          <div class="col col-12"v-if="item.leadConfinement" >
+            <label>禁闭时间</label>
+            <span >{{item.leadConfinement.startTime+ "   -   " + item.leadConfinement.endTime}}</span>
+          </div>
+          <div class="col col-4" v-if="item.leadConfinement">
+            <label>禁闭时长（天）</label>
+            <span >{{item.leadConfinement.confinementTime}}</span>
+          </div>
+          <div class="col col-24" v-if="item.leadConfinement">
+            <label>禁闭措施</label>
+            <span>{{item.leadConfinement.matter}}</span>
+          </div>
+        </div>
+
+
+        <div class="row" style="background: #f5f5f5">
+          <div class="col col-6" v-if="item.leadProtectRightsName">
+            <label>维权容错</label>
+            <span>{{ item.leadProtectRightsName }}</span>
+          </div>
+        </div>
+      </el-collapse-item>
+    </template>
+
+    <!-- ================== 办结佐证材料 ================== -->
+    <el-collapse-item name="attachments" v-if="fileCount > 0">
+      <template #title>
+        <div class="title-with-count">
+          <span class="collapse-title">办结佐证材料</span>
+          <span class="count">{{ fileCount }}个附件</span>
+        </div>
+      </template>
+
+      <div>
+        <file-list :files="data.files" />
+      </div>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<script setup>
+import { computed, ref, watchEffect } from "vue";
+import {BlameType} from "@/enums/dictEnums.ts";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  dict: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+function getDictLabel(list, value) {
+  if (!Array.isArray(list) || value === null || value === undefined || value === "") return "/";
+  const item = list.find((d) => d.dictValue == value);
+  return item?.dictLabel || "/";
+}
+
+const personalBlames = computed(() => props.data?.personalBlames || []);
+const deptBlames = computed(() => personalBlames.value.filter((item) => item.type === BlameType.DEPARTMENT));
+const fileCount = computed(() => props.data?.files?.length ?? 0);
+
+/**
+ * 默认展开哪些面板
+ * - attachments 只有在存在附件时才显示/展开
+ */
+const activeNames = ref(["verify"]);
+
+watchEffect(() => {
+  // 重置 activeNames
+  let newActiveNames = ["verify"];
+
+
+  // 添加涉及人员面板
+  for (let i = 0; i < personalBlames.value.length; i++) {
+    newActiveNames.push("involved" + i);
+  }
+
+  // 添加涉及单位面板（如果有数据）
+  if (deptBlames.value.length > 0) {
+    newActiveNames.push("dept0");
+  }
+
+  // 添加附件面板（如果存在）
+  if (fileCount.value > 0) {
+    newActiveNames.push("attachments");
+  }
+
+  activeNames.value = newActiveNames;
+});
+
+</script>
+
+<style scoped>
+/* 让折叠头部更接近你截图：蓝色标题 + 右侧箭头（箭头 element-plus 自带） */
+.detail-collapse {
+  --el-collapse-header-text-color: var(--primary-color);
+  --el-collapse-header-font-size: 16px;
+}
+
+.collapse-title {
+  font-weight: 600;
+}
+
+.title-with-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.count {
+  font-size: 12px;
+  color: #666;
+}
+</style>
diff --git a/src/components/data/complaintproblemInfo.vue b/src/components/data/complaintproblemInfo.vue
new file mode 100644
index 0000000..fa51b9e
--- /dev/null
+++ b/src/components/data/complaintproblemInfo.vue
@@ -0,0 +1,216 @@
+<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>
+        <span>{{ getDictLabel(dict?.yesNo, data.repeatt) }}</span>
+      </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>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import dayjs from "dayjs";
+
+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("，") || "/";
+});
+</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;
+}
+</style>