105 lines
2.7 KiB
Vue
105 lines
2.7 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.name }}
|
|
</el-form-item>
|
|
<el-form-item label="联系方式：">
|
|
{{ state.ruleForm.phone }}
|
|
</el-form-item>
|
|
<el-form-item label="类型：">
|
|
{{ state.ruleForm.type }}
|
|
</el-form-item>
|
|
<el-form-item label="时间：">
|
|
{{ dateFormatter() }}
|
|
</el-form-item>
|
|
<el-form-item label="留言：">
|
|
{{ state.ruleForm.message }}
|
|
</el-form-item>
|
|
<el-form-item label="回复：" v-if="state.ruleForm.replay">
|
|
{{ state.ruleForm.replay }}
|
|
</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="messageDialog">
|
|
import { ElMessage } from 'element-plus';
|
|
import { reactive, ref } from 'vue';
|
|
import { messageApi } from '/@/api/message';
|
|
|
|
// 定义变量内容
|
|
const menuDialogFormRef = ref();
|
|
const state = reactive({
|
|
ruleForm: {
|
|
id: '',
|
|
name: '',
|
|
phone: "",
|
|
type: "",
|
|
message: "",
|
|
createtime: [],
|
|
replay: null
|
|
},
|
|
dialog: {
|
|
isShowDialog: false,
|
|
title: '',
|
|
loading: false
|
|
},
|
|
});
|
|
|
|
// 引入 api 请求接口
|
|
const mesApi = messageApi();
|
|
|
|
// 日期格式化
|
|
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.getMessageDetail(id);
|
|
if(res?.success){
|
|
state.ruleForm = res.data;
|
|
}else{
|
|
ElMessage.error('留言详情获取失败！');
|
|
}
|
|
} catch (error) {
|
|
} finally {
|
|
state.dialog.loading = false;
|
|
}
|
|
}
|
|
|
|
// 打开弹窗
|
|
const openDialog = (id?: any) => {
|
|
console.log(id)
|
|
state.dialog.isShowDialog = true;
|
|
state.dialog.title = '人才留言';
|
|
getDetail(id);
|
|
};
|
|
// 关闭弹窗
|
|
const closeDialog = () => {
|
|
state.dialog.isShowDialog = false;
|
|
};
|
|
|
|
// 取消
|
|
const onCancel = () => {
|
|
closeDialog();
|
|
};
|
|
|
|
// 暴露变量
|
|
defineExpose({
|
|
openDialog,
|
|
});
|
|
</script>
|