新增留言板页面

src/router/index.js

@@ -93,6 +93,8 @@ const mainRoutes = {
 		{ path: '/postPreference', component: _import('recruit/postPreference'), name: 'postPreference', meta: { title: '岗位偏好设置',isTab: true} },
 		{ path: '/postSkill', component: _import('recruit/postSkill'), name: 'postSkill', meta: { title: '岗位技能设置',isTab: true} },
 		{ path: '/department', component: _import('department/department'), name: 'department', meta: { title: '部门设置',isTab: true} },
+		{ path: '/messageBoard', component: _import('messageBoard/messageBoard'), name: 'messageBoard', meta: { title: '留言板管理',isTab: true} },
+
 	],
 	beforeEnter (to, from, next) {
 		let token = Vue.cookie.get('token')

src/views/messageBoard/messageBoard.vue

@@ -0,0 +1,251 @@
+<template>
+	<div>
+				<div style="display: inline-block;">
+					<div style="position: relative;display: inline-block;margin: 5px;">
+						<span>留言内容：</span>
+						<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入留言内容"
+							v-model="contentS">
+						</el-input>&nbsp;&nbsp;
+					</div>
+					<el-button style='margin: 5px;' size="mini" type="primary" icon="document" @click="select">查询
+					</el-button>
+					<el-button style='margin: 5px;' size="mini" type="primary" icon="document" @click="cleans">重置
+					</el-button>
+				</div>
+				<!-- 留言板表格-->
+				<el-table v-loading="tableDataLoading" :data="tableData.records">
+					<el-table-column prop="messageId" label="编号" width="200">
+					</el-table-column>
+					<el-table-column prop="userId" label="用户ID">
+					</el-table-column>
+					<el-table-column prop="userName" label="用户名称" width="200">
+					</el-table-column>
+                    <el-table-column prop="imageUrl" label="头像">
+                        <template slot-scope="scope">
+                            <img :src="scope.row.avatar" width="60" height="60" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="content" label="留言内容" width="200">
+					</el-table-column>
+                    <el-table-column prop="phone" label="用户电话" width="200">
+					</el-table-column>
+                    <el-table-column prop="isDelete" label="是否删除">
+                        <template slot-scope="scope">
+                            <span v-if="scope.row.isDelete == 0">否</span>
+                            <span v-if="scope.row.isDelete == 1" style="color: #f56c6c;">是</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="createTime" label="创建时间" width="200">
+					</el-table-column>
+                    <el-table-column prop="updateTime" label="更新时间" width="200">
+					</el-table-column>
+				</el-table>
+				<div style="text-align: center;margin-top: 10px;">
+					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+						:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
+						layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
+					</el-pagination>
+				</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				size: 10,
+				page: 1,
+				limit: 10,
+                contentS: '',
+				tableData: {},
+                tableDataLoading: true,
+			}
+		},
+		methods: {
+			handleSizeChange(val) {
+				this.limit = val
+				this.classSelect()
+			},
+			handleCurrentChange(val) {
+				this.page = val
+				this.classSelect()
+			},
+
+			// 获取服务分类数据
+			classSelect() {
+        		this.tableDataLoading = true
+				this.$http({
+					url: this.$http.adornUrl('messageBoard/selectMessageBoardList'),
+					method: 'get',
+					params: this.$http.adornParams({
+						'page': this.page,
+						'limit': this.limit,
+						'key': this.contentS,
+					})
+				}).then(({
+					data
+				}) => {
+					if (data.code == 0) {
+						this.tableDataLoading = false
+						let returnData = data.data
+						this.tableData = returnData
+					} else {
+						this.$notify({
+							title: '提示',
+							duration: 1800,
+							message: data.msg,
+							type: 'warning'
+						});
+					}
+
+
+				})
+			},
+            // 查询
+            select() {
+                this.page = 1
+                this.limit = 10
+                this.classSelect()
+            },
+            // 重置
+            cleans() {
+                this.contentS = ''
+                this.classSelect()
+            },
+
+		},
+		mounted() {
+			this.classSelect()
+		},
+    
+	}
+</script>
+
+<style>
+	.customWidth {
+		width: 80% !important;
+	}
+
+	.adver_main.box {
+		display: block;
+		max-width: 100%;
+		text-align: center;
+		border: 1px dotted rgba(67, 79, 103, .4);
+	}
+
+	.cards {
+		padding: 0 8px;
+		margin-bottom: 15px;
+	}
+
+	.adver_main.box a {
+		display: flex;
+		justify-content: center;
+		height: 150px;
+		line-height: 150px;
+		text-decoration: none
+	}
+
+	.bannerManin {
+		border: 1px solid #e8e8e8;
+		font-size: 14px;
+		padding: 0 24px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 113px;
+		color: rgba(0, 0, 0, .65);
+	}
+
+	.bannerManin span {
+		display: inline-block;
+		margin-left: 5px;
+	}
+
+	.bannerManin img {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+	}
+
+	.bannerbtn {
+		display: flex;
+		border-top: none !important;
+		border: 1px solid #e8e8e8;
+		padding: 11px;
+		font-size: 14px;
+		color: #3E8EF7;
+	}
+
+	.bannerbtn a {
+		flex: 1;
+		text-align: center;
+		color: #3E8EF7 !important;
+		text-decoration: none;
+	}
+
+	.imgs {
+		position: relative;
+		border-radius: 6px;
+		width: 148px;
+		height: 148px;
+		margin-right: 10px;
+		display: inline-block;
+	}
+
+	.dels {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: none;
+	}
+
+	.dels .el-icon-delete {
+		line-height: 148px;
+		padding-left: 58px;
+		font-size: 25px;
+		color: #fff;
+	}
+
+	.imgs:hover .dels {
+		width: 100%;
+		height: 100%;
+		background: #000;
+		display: block;
+		opacity: 0.5;
+	}
+
+	.bqList {
+		padding: 4px 14px;
+		margin: 4px;
+		border: 1px solid #efefef;
+		font-size: 12px;
+		color: #999;
+		border-radius: 4px;
+		margin-right: 15px;
+	}
+
+	.delss {
+		display: none;
+		position: relative;
+	}
+
+	.delss .el-icon-delete {
+		position: absolute;
+		top: 0;
+	}
+
+	.bqList:hover .delss {
+		display: initial;
+		opacity: 0.5;
+
+	}
+
+	.tj {
+		padding: 6px !important;
+		margin: 4px;
+		font-size: 12px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+	}
+</style>