114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
<template>
|
||
<div class="system-menu-dialog-container">
|
||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="400px">
|
||
<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="120px" v-loading="state.dialog.loading">
|
||
<el-form-item label="标题：">
|
||
{{ state.ruleForm.title }}
|
||
</el-form-item>
|
||
<el-form-item label="发送者：">
|
||
{{ state.ruleForm.sendUserName }}
|
||
</el-form-item>
|
||
<el-form-item label="接收者：">
|
||
{{ state.ruleForm.userName }}
|
||
</el-form-item>
|
||
<el-form-item label="内容：">
|
||
{{ state.ruleForm.message }}
|
||
</el-form-item>
|
||
<el-form-item label="时间：">
|
||
{{ dateFormatter() }}
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button plain @click="onCancel" size="default">关 闭</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="messagePushDialog">
|
||
import { ElMessage } from 'element-plus';
|
||
import { reactive, ref } from 'vue';
|
||
import { messagePushApi } from '/@/api/messagePush';
|
||
|
||
// 定义变量内容
|
||
const menuDialogFormRef = ref();
|
||
const state = reactive({
|
||
ruleForm: {
|
||
id: '',
|
||
title: '',
|
||
sendUserName: '',
|
||
userName: '',
|
||
message: '',
|
||
createtime: [],
|
||
},
|
||
dialog: {
|
||
isShowDialog: false,
|
||
title: '',
|
||
loading: false,
|
||
},
|
||
});
|
||
|
||
// 引入 api 请求接口
|
||
const mesApi = messagePushApi();
|
||
|
||
// 日期格式化
|
||
const dateFormatter = () => {
|
||
if (state.ruleForm.createtime === null) return '暂无';
|
||
let date = state.ruleForm.createtime;
|
||
return `${date[0]}-${date[1]}-${date[2]} ${date[3]}:${date[4]}:${date[5]}`;
|
||
};
|
||
|
||
// 获取信息详情
|
||
const getDetail = async (id?: number) => {
|
||
try {
|
||
state.dialog.loading = true;
|
||
let res = await mesApi.getMessagePushDetail(id);
|
||
console.log(res);
|
||
if (res?.success) {
|
||
// 当res.data为null时，给state.ruleForm赋值为空对象
|
||
if (res.data === null) {
|
||
state.ruleForm = {
|
||
id: '',
|
||
title: '无',
|
||
sendUserName: '无',
|
||
userName: '无',
|
||
message: '无',
|
||
createtime: [],
|
||
};
|
||
return;
|
||
}
|
||
state.ruleForm = res.data;
|
||
} else {
|
||
ElMessage.error('信息详情获取失败！');
|
||
}
|
||
} catch (error) {
|
||
} finally {
|
||
state.dialog.loading = false;
|
||
}
|
||
};
|
||
|
||
// 打开弹窗
|
||
const openDialog = (id?: any) => {
|
||
state.dialog.isShowDialog = true;
|
||
getDetail(id);
|
||
};
|
||
// 关闭弹窗
|
||
const closeDialog = () => {
|
||
console.log('close');
|
||
state.dialog.isShowDialog = false;
|
||
console.log(state.dialog.isShowDialog);
|
||
};
|
||
|
||
// 取消
|
||
const onCancel = () => {
|
||
closeDialog();
|
||
};
|
||
|
||
// 暴露变量
|
||
defineExpose({
|
||
openDialog,
|
||
});
|
||
</script>
|