wms-antdvue/src/views/dashboard/message/edit.vue
2024-12-13 13:57:34 +08:00

112 lines
2.4 KiB
Vue

<template>
<a-modal
v-model:visible="props.visible"
title="消息详情"
width="800px"
style="top: 20px"
@cancel="dialogClose"
>
<a-descriptions :column="2" bordered :labelStyle="{ width: '110px' }">
<a-descriptions-item label="消息标题:">{{ formData.title }}</a-descriptions-item>
<a-descriptions-item label="消息类型:">{{ getTyepText(formData.type) }}</a-descriptions-item>
<a-descriptions-item label="业务类型:">{{
formData.bizType == 1 ? '订单' : '其他'
}}</a-descriptions-item>
<a-descriptions-item label="消息状态:">{{
formData.status == 1 ? '已读' : '未读'
}}</a-descriptions-item>
<a-descriptions-item label="消息内容:">{{ formData.content }}</a-descriptions-item>
</a-descriptions>
<template #footer>
<span class="dialog-footer">
<a-button @click="dialogClose">关闭</a-button>
</span>
</template>
</a-modal>
</template>
<script lang="ts" setup>
import { getMessageDetail } from '@/api/dashboard/message';
import { onMounted, reactive } from 'vue';
const emit = defineEmits(['success', 'update:visible']);
/**
* 定义表单参数
*/
const formData = reactive({
id: '',
title: '',
type: '',
bizType: '',
status: '',
content: '',
});
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
messageId: {
type: Number,
required: true,
default: 0,
},
});
/**
* 关闭弹窗
*/
const dialogClose = () => {
emit('update:visible', false);
};
/**
* 设置表单数据
*/
const setFormData = async () => {
const data = await getMessageDetail(props.messageId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
/**
* 获取类型文本描述
* @param type 类型
*/
const getTyepText = (type) => {
let typeText = '';
switch (type) {
case 1:
typeText = '系统通知';
break;
case 2:
typeText = '用户私信 ';
break;
case 3:
typeText = '代办事项';
break;
default:
break;
}
return typeText;
};
/**
* 钩子函数
*/
onMounted(() => {
if (props.messageId) {
setFormData();
}
});
</script>