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