supervision
/
supervision-vue
6
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

涉访涉诉--展示更多详情

master
buaixuexideshitongxue 1 month ago
parent
bcebdc988a
commit
bef152d7ed
3 changed files with 596 additions and 331 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 351
      src/components/data/complaint_detail.vue
  2. 360
      src/components/data/complaintdes.vue
  3. 216
      src/components/data/complaintproblemInfo.vue

351
src/components/data/complaint_detail.vue
Unescape View File

@ -1,183 +1,17 @@
<template> <template>
<el-dialog title="详情" v-model="visible" width="60vw" :lock-scroll="false" destroy-on-close> <el-dialog title="详情" v-model="visible" width="60vw" :lock-scroll="false" destroy-on-close>
<div style="min-height: 50vh" v-loading="loading"> <div style="min-height: 50vh" v-loading="loading">
<div class="row" style="margin: 0 60px"> <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"> <div class="col col-24">
<label>标签</label> <complaint-problem-info :data="base" :dict="dict" />
<span>{{ getDictLabel(dict?.sfssTags, base.tag) }}</span>
</div>
<div class="col col-12">
<label>办理方式</label>
<span>{{ getDictLabel(dict?.handleMethodType, base.handleMethod) }}</span>
</div> </div>
<div class="col col-24"> <div class="col col-24">
<label>来件内容</label> <complaintdes :data="base" :dict="dict" />
<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>
</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>
<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>
</div> </div>
<el-empty v-if="!loading && loaded && !detail?.id" description="未查询到详情数据" />
<el-empty v-if="!loading && !loaded && !id" description="未传入ID" />
</div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button size="large" @click="visible = false">关闭</el-button> <el-button size="large" @click="visible = false">关闭</el-button>
@ -187,10 +21,11 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from "vue"; import {computed, ref, watch} from "vue";
import { ElMessage } from "element-plus"; import {ElMessage} from "element-plus";
import {watchDetail} from "@/api/data/complaintCollection.ts"; 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({ const props = defineProps({
modelValue: { type: Boolean, default: false }, modelValue: { type: Boolean, default: false },
@ -211,111 +46,6 @@ const detail = ref({});
/** ✅ 假设接口统一返回：detail = { ...baseFields, negative: { ...核查/涉及信息 } } */ /** ✅ 假设接口统一返回：detail = { ...baseFields, negative: { ...核查/涉及信息 } } */
const base = computed(() => detail.value || {}); 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() { async function fetchDetail() {
if (!props.id) return; if (!props.id) return;
@ -348,70 +78,29 @@ watch(
</script> </script>
<style scoped> <style scoped>
/* 参考你给的 row/col 展示结构：普通详情，不是表单禁用态 */ /* ✅ 让弹窗内容纵向排列，每个模块一整行 */
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column; /* 关键：不要横向排 */
gap: 14px; /* 替代 row-gap，更直观 */
margin: 0; 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 { .col-24 {
width: 100%; width: 100%;
flex: 0 0 100%;
max-width: 100%;
min-width: 0;
} }
label { /* ✅ 保险：如果你的子组件根节点是 el-collapse，确保它也占满 */
width: 120px; :deep(.el-collapse) {
color: #606266; width: 100%;
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;
} }
:deep(.el-collapse-item__header) {
.inner { width: 100%;
margin: 0;
row-gap: 10px;
} }
.dialog-footer {
padding: 16px 24px 24px;
display: flex;
justify-content: flex-end;
}
</style> </style>

360
src/components/data/complaintdes.vue
Unescape View File

@ -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>

216
src/components/data/complaintproblemInfo.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save