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