<template>
|
<a-card :title="data.subject">
|
<div style="display: flex; align-items: center" class="p-4">
|
<div class="left">
|
<a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
|
<template #icon>
|
<AntDesignOutlined />
|
</template>
|
</a-avatar>
|
</div>
|
<div class="right">
|
<div class="top">
|
<div class="top-left">
|
<div>
|
<span class="top-left-title">发件人：</span>
|
<span class="top-right-title">{{ data.sender }}</span>
|
</div>
|
<div>
|
<span class="top-left-title">收件人：</span>
|
<span class="top-right-title">{{ `${data.receiver}` }}</span>
|
</div>
|
<div>
|
<span class="top-left-title">时间：</span>
|
<span class="top-right-title">{{ data.createTime }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<TinymcePw ref="TinymcePwRef" v-model="data.content"></TinymcePw>
|
</a-card>
|
</template>
|
|
<script lang="ts" setup>
|
name: 'previewIndex';
|
import { AntDesignOutlined } from '@ant-design/icons-vue';
|
|
import { ref, onMounted, computed, } from 'vue';
|
import { TinymcePw } from '@/components/Tinymce';
|
import { useRouter } from 'vue-router';
|
import { getMailInfoApi } from '@/api/email/userList';
|
import { nextTick } from 'vue';
|
|
const { currentRoute } = useRouter();
|
const docCode = computed(() => {
|
return currentRoute.value.query.docCode;
|
});
|
const data = ref<Record<string, any>>({});
|
const TinymcePwRef = ref()
|
function fnGetData() {
|
getMailInfoApi({ docCode: docCode.value })
|
.then((res) => {
|
console.log(res, 'res');
|
nextTick(() => {
|
console.log(data.value, 'data');
|
data.value = res.data;
|
if (!TinymcePwRef || TinymcePwRef.value === undefined) {
|
setTimeout(() => {
|
Object.assign(data.value, data.value.content);
|
}, 1000);
|
}
|
});
|
})
|
.catch((error) => {
|
console.error('获取数据失败:', error);
|
// 可以在这里添加其他错误处理逻辑，例如通知用户
|
});
|
}
|
onMounted(() => {
|
fnGetData();
|
});
|
</script>
|
|
<style scoped lang="less">
|
.right {
|
margin-left: 30px;
|
}
|
|
.top-left-title {
|
color: #999;
|
}
|
|
.top-right-title {
|
color: #000;
|
}
|
</style>
|
