3 changed files with 596 additions and 331 deletions
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue