9 changed files with 6 additions and 180 deletions
@ -1,104 +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"; |
|
||||||
|
|
||||||
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> |
|
||||||
Loading…
Reference in new issue