Compare commits
26 Commits
012798018b
...
4612d3d936
wxc
20 changed files with 1318 additions and 3358 deletions
@ -1,106 +0,0 @@ |
|||||||
<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-24"> |
|
||||||
<complaint-problem-info :data="base" :dict="dict" /> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col col-24"> |
|
||||||
<complaintdes :data="base" :dict="dict" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<template #footer> |
|
||||||
<div class="dialog-footer"> |
|
||||||
<el-button size="large" @click="visible = false">关闭</el-button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-dialog> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup> |
|
||||||
import {computed, ref, watch} from "vue"; |
|
||||||
import {ElMessage} from "element-plus"; |
|
||||||
import {watchDetail} from "@/api/data/complaintCollection.ts"; |
|
||||||
import ComplaintProblemInfo from "@/components/data/complaintproblemInfo.vue"; |
|
||||||
import Complaintdes from "@/components/data/complaintdes.vue"; |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
modelValue: { type: Boolean, default: false }, |
|
||||||
id: { type: [String, Number], default: "" }, |
|
||||||
dict: { type: Object, default: () => ({}) }, |
|
||||||
}); |
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue"]); |
|
||||||
|
|
||||||
const visible = computed({ |
|
||||||
get: () => props.modelValue, |
|
||||||
set: (v) => emit("update:modelValue", v), |
|
||||||
}); |
|
||||||
|
|
||||||
const loading = ref(false); |
|
||||||
const loaded = ref(false); |
|
||||||
const detail = ref({}); |
|
||||||
|
|
||||||
/** ✅ 假设接口统一返回：detail = { ...baseFields, negative: { ...核查/涉及信息 } } */ |
|
||||||
const base = computed(() => detail.value || {}); |
|
||||||
|
|
||||||
async function fetchDetail() { |
|
||||||
if (!props.id) return; |
|
||||||
|
|
||||||
loading.value = true; |
|
||||||
loaded.value = false; |
|
||||||
try { |
|
||||||
const body={ |
|
||||||
id:props.id |
|
||||||
} |
|
||||||
const res = await watchDetail(body); |
|
||||||
detail.value = res?.data ?? res ?? {}; |
|
||||||
loaded.value = true; |
|
||||||
} catch (e) { |
|
||||||
detail.value = {}; |
|
||||||
loaded.value = true; |
|
||||||
ElMessage.error(e?.message || "详情获取失败"); |
|
||||||
} finally { |
|
||||||
loading.value = false; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** 打开弹窗或 id 变化时自动请求 */ |
|
||||||
watch( |
|
||||||
() => [visible.value, props.id], |
|
||||||
([v]) => { |
|
||||||
if (v) fetchDetail(); |
|
||||||
} |
|
||||||
); |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
/* ✅ 让弹窗内容纵向排列，每个模块一整行 */ |
|
||||||
.row { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; /* 关键：不要横向排 */ |
|
||||||
gap: 14px; /* 替代 row-gap，更直观 */ |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* ✅ 强制每个 col-24 占满 100% 宽度（在 flex 下生效） */ |
|
||||||
.col.col-24, |
|
||||||
.col-24 { |
|
||||||
width: 100%; |
|
||||||
flex: 0 0 100%; |
|
||||||
max-width: 100%; |
|
||||||
min-width: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* ✅ 保险：如果你的子组件根节点是 el-collapse，确保它也占满 */ |
|
||||||
:deep(.el-collapse) { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
:deep(.el-collapse-item__header) { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,360 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,266 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
:show-close="false" |
||||||
|
width="90vw" |
||||||
|
top="2vh" |
||||||
|
class="dialog-header-nopadding dialog-body-nopadding" |
||||||
|
style="--el-dialog-padding-primary: 10px; margin-bottom: 0" |
||||||
|
:lock-scroll="false" |
||||||
|
:close-on-press-escape="false" |
||||||
|
ref="dialogRef" |
||||||
|
> |
||||||
|
<template #header="{ close }"> |
||||||
|
<header class="dialog-header"> |
||||||
|
<el-button link circle size="large" @click="close" class="close-btn"> |
||||||
|
<template #icon> |
||||||
|
<icon name="el-icon-close" :size="26" :color="'#fff'" /> |
||||||
|
</template> |
||||||
|
</el-button> |
||||||
|
</header> |
||||||
|
</template> |
||||||
|
<main> |
||||||
|
<iframe :src="`http://65.47.60.145/#/mail-detail?mailId=` + id"></iframe> |
||||||
|
</main> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
const props = defineProps({ |
||||||
|
id: { |
||||||
|
type: String, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
iframe { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
main { |
||||||
|
height: 90vh; |
||||||
|
} |
||||||
|
.dialog-header { |
||||||
|
position: absolute; |
||||||
|
top: 10px; |
||||||
|
right: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style lang="scss"> |
||||||
|
.dialog-body-nopadding .el-dialog__body { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue