留言管理
This commit is contained in:
parent
a1b4f465db
commit
53fdad11a2
@ -2,5 +2,5 @@
|
||||
ENV = production
|
||||
|
||||
# 线上环境接口地址
|
||||
# VITE_API_URL = https://lyt-top.gitee.io/vue-next-admin-preview/
|
||||
# VITE_API_URL = http://8.138.175.106/
|
||||
VITE_API_URL = http://8.138.171.103/
|
||||
29
src/api/message/index.ts
Normal file
29
src/api/message/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import request from '/@/utils/request';
|
||||
import { baseUrlHost } from '../baseUrlHost';
|
||||
|
||||
/**
|
||||
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
|
||||
* 注意在写get请求时，参数是params，而不是data，要标注好
|
||||
*
|
||||
* 登录api接口集合
|
||||
* @method getMessageList 获取留言列表
|
||||
* @method getMessageDetail 获取留言详情
|
||||
*/
|
||||
|
||||
export function messageApi() {
|
||||
return {
|
||||
getMessageList: (params: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpMessage',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
},
|
||||
getMessageDetail: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpMessage/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
systemDept: 'systemDept',
|
||||
systemDic: 'systemDic',
|
||||
article: 'article',
|
||||
message: 'message',
|
||||
articleDetail: 'articleDetail',
|
||||
addArticle: 'addArticle',
|
||||
editArticle: 'editArticle',
|
||||
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
systemDept: '部门管理',
|
||||
systemDic: '字典管理',
|
||||
article: '文章管理',
|
||||
message: '留言管理',
|
||||
articleDetail: '文章详情',
|
||||
addArticle: '新增文章',
|
||||
editArticle: '编辑文章',
|
||||
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
systemDept: '部門管理',
|
||||
systemDic: '字典管理',
|
||||
article: '文章管理',
|
||||
message: '聯言管理',
|
||||
articleDetail: '文章詳情',
|
||||
addArticle: '文章新增',
|
||||
editArticle: '文章編輯',
|
||||
|
||||
@ -217,6 +217,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/message',
|
||||
name: 'message',
|
||||
component: () => import('/@/views/message/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.message',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-fuwenbenkuang',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/limits',
|
||||
name: 'limits',
|
||||
|
||||
100
src/views/message/dialog.vue
Normal file
100
src/views/message/dialog.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<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>
|
||||
<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: []
|
||||
},
|
||||
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>
|
||||
150
src/views/message/index.vue
Normal file
150
src/views/message/index.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="system-dept-container layout-padding">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-dept-search mb15">
|
||||
<el-select size="default" v-model="state.tableData.param.type" placeholder="请选择类型" clearable class="ml10" style="max-width: 180px">
|
||||
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
<el-button @click="getTableData" size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="reset" size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="100"/>
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="phone" label="联系方式" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="type" label="类型" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="message" label="留言" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createtime" label="时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.current"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<MessageDialog ref="messageDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="messageIndex">
|
||||
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
||||
import { messageApi } from '/@/api/message';
|
||||
import { ElMessage, TableColumnCtx } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const MessageDialog = defineAsyncComponent(() => import('/@/views/message/dialog.vue'));
|
||||
const messageDialogRef = ref();
|
||||
|
||||
// 表格数据
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
type: '',// 类型
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 类型列表
|
||||
const typeList = ref(["场地咨询","政策咨询","人才服务","赛事咨询","其他"]);
|
||||
|
||||
// 引入 api 请求接口
|
||||
const mesApi = messageApi();
|
||||
|
||||
// 获取表格数据
|
||||
const getTableData = async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
let res = await mesApi.getMessageList(state.tableData.param);
|
||||
if(res?.success){
|
||||
state.tableData.data = res.data.records;
|
||||
state.tableData.total = res.data.total;
|
||||
}else{
|
||||
ElMessage.error('文章列表获取失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
state.tableData.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置
|
||||
const reset = () =>{
|
||||
state.tableData.param = {
|
||||
type: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
}
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 文章详情
|
||||
const toShowDetail = (id: any) => {
|
||||
messageDialogRef.value.openDialog(id);
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
|
||||
if(row.createtime === null) return '暂无';
|
||||
let date = row.createtime;
|
||||
return `${date[0]}-${date[1]}-${date[2]} ${date[3]}:${date[4]}:${date[5]}`;
|
||||
}
|
||||
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.size = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.current = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-dept-container {
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user