Skip to content

W
web-monitor
Commit 84047bf7 authored by renhanxue's avatar renhanxue
Browse files
Options

用户管理模块

parent 0ea4377f
Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 24 deletions
src/components/Pagination/index.vue 0 → 100644
View file @ 84047bf7
<template>
<div class="pagination-wraper">
<el-pagination
background
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
:total="total"
:page-sizes="pageSizes"
:page-size.sync="pageSize"
:current-page.sync="currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
props: {
total: {
required: true,
type: Number,
default: 0
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default() {
return [5, 10, 20, 30]
}
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, size: val })
},
handleCurrentChange(val) {
// 解决有时切换每页显示条数时，偶尔会出现无数据的情况
setTimeout(() => {
this.$emit('pagination', { page: val, size: this.limit })
}, 0)
}
}
}
</script>
<style lang="scss" scoped>
.pagination-wraper {
text-align: center;
}
</style>
src/router/index.js
View file @ 84047bf7
...@@ -122,7 +122,7 @@ export const constantRoutes = [ ...@@ -122,7 +122,7 @@ export const constantRoutes = [
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,
redirect: '/user/updateUser', redirect: '/dashboard',
name: 'User', name: 'User',
meta: { title: '用户管理', icon: 'dashboard' }, meta: { title: '用户管理', icon: 'dashboard' },
children: [{ children: [{
......
src/styles/element-ui.scss
View file @ 84047bf7
...@@ -47,3 +47,7 @@ ...@@ -47,3 +47,7 @@
.el-range-separator { .el-range-separator {
box-sizing: content-box; box-sizing: content-box;
} }
.el-pagination {
margin-top: 20px;
}
src/styles/index.scss
View file @ 84047bf7
...@@ -12,6 +12,13 @@ body { ...@@ -12,6 +12,13 @@ body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
} }
.jbs-table-header {
background-color: #eaf1fe!important;
color:#000;
font-size:16px;
font-weight: 400;
}
label { label {
font-weight: 700; font-weight: 700;
} }
......
src/views/user/updateUser/components/baseInfo.vue
View file @ 84047bf7
<template> <template>
<div> <div>
<h3>修改基本信息</h3>
<el-form ref="form" :model="form" label-width="100px" :rules="rules"> <el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name"> <el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" /> <el-input v-model="form.name" />
...@@ -14,8 +13,10 @@ ...@@ -14,8 +13,10 @@
<el-form-item label="邮箱:"> <el-form-item label="邮箱:">
<el-input v-model="form.email" /> <el-input v-model="form.email" />
</el-form-item> </el-form-item>
<el-button type="primary">确认修改</el-button>
</el-form> </el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div> </div>
</template> </template>
...@@ -35,11 +36,23 @@ export default { ...@@ -35,11 +36,23 @@ export default {
} }
} }
}, },
methods: {} methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
// alert('submit!');
} else {
console.log('error submit!!')
return false
}
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-form { .btn {
width: 20%; margin-top: 50px;
text-align: center;
} }
</style> </style>
src/views/user/updateUser/components/password.vue
View file @ 84047bf7
<template> <template>
<div>修改密码</div> <div>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="原密码:" prop="oldPass">
<el-input v-model="form.oldPass" />
</el-form-item>
<el-form-item label="新密码:" prop="newPass">
<el-input v-model="form.newPass" />
</el-form-item>
<el-form-item label="确认新密码:" prop="confirmPwd">
<el-input v-model="form.confirmPwd" />
</el-form-item>
</el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'))
} else if (value !== this.form.newPass) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return { return {
form: {
name: 'admin',
oldPass: '',
newPass: '',
confirmPwd: ''
},
rules: {
name: { required: true, message: '请输入用户名', trigger: 'blur' },
oldPass: { required: true, message: '请输入原密码', trigger: 'blur' },
newPass: { required: true, message: '请输入新密码', trigger: 'blur' },
confirmPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
}
} }
}, },
methods: {} methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
// alert('submit!');
} else {
console.log('error submit!!')
return false
}
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn {
margin-top: 50px;
text-align: center;
}
</style> </style>
src/views/user/updateUser/index.vue
View file @ 84047bf7
<template> <template>
<div class="update-user-container"> <div>
<div class="header"> <breadcrumb />
<div class="tab"> <div class="update-user-container">
<div v-for="(item,index) in options" :key="item.id" class="tab-item" :class="tabIndex === index ? 'tab-active' : ''" @click="radioChange(item.value,index)"> <div class="header">
{{ item.name }} <div class="tab">
<div v-for="(item,index) in options" :key="item.id" class="tab-item" :class="tabIndex === index ? 'tab-active' : ''" @click="radioChange(item.value,index)">
{{ item.name }}
</div>
</div> </div>
</div> </div>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div> </div>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div> </div>
</template> </template>
<script> <script>
import Breadcrumb from '@/components/Breadcrumb'
import baseInfo from '../updateUser/components/baseInfo.vue' import baseInfo from '../updateUser/components/baseInfo.vue'
import Password from '../updateUser/components/password.vue' import Password from '../updateUser/components/password.vue'
export default { export default {
components: { baseInfo, Password }, components: { Breadcrumb, baseInfo, Password },
data() { data() {
return { return {
options: [{ options: [{
...@@ -40,27 +44,29 @@ export default { ...@@ -40,27 +44,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.update-user-container { .update-user-container {
width: 500px;
margin: 0 auto;
} }
.header { .header {
display: flex; display: flex;
margin-bottom: 10px; justify-content: center;
margin: 30px 0 50px 0;
.tab { .tab {
background: #f3f3f3; background: #f3f3f3;
display: flex; display: flex;
height: 35px; height: 40px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
.tab-item { .tab-item {
width: 120px; width: 130px;
line-height: 35px; line-height: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
} }
.tab-active { .tab-active {
color: #fff; color: #fff;
background: #1a4be8; background: #409eff;
border-radius: 10px; border-radius: 10px;
} }
} }
......
src/views/user/userList/index.vue
View file @ 84047bf7
<template> <template>
<div>用户信息列表</div> <div>
<breadcrumb />
<el-row class="header">
<el-col :span="4">
<div class="message">共<span>{{ total }}</span>条数据</div>
</el-col>
<el-col :span="2" :offset="18">
<el-button type="primary">添加新用户</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" class="jbs-table" :data="tableData" border style="width: 100%" header-cell-class-name="jbs-table-header">
<el-table-column type="index" label="用户编号" align="center" width="100" />
<el-table-column prop="name" label="用户名" align="center" />
<el-table-column prop="realName" label="真实姓名" align="center" />
<el-table-column prop="dept" label="用户部门" align="center" />
<el-table-column prop="phone" label="电话号码" align="center" />
<el-table-column prop="email" label="邮箱" align="center" />
<el-table-column label="操作" align="center">
<template>
<el-button type="text">修改密码</el-button>
<el-button type="text">修改基本信息</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template> </template>
<script> <script>
import Pagination from '@/components/Pagination'
import Breadcrumb from '@/components/Breadcrumb'
export default { export default {
components: {
Pagination,
Breadcrumb
},
data() { data() {
return { return {
searchForm: {
pageNum: 1,
pageSize: 10
},
tableData: [
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
}
],
total: 5,
loading: false
} }
}, },
methods: {} methods: {
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.message {
display: inline-block;
margin-top: 20px;
font-size: 14px;
color:#666666;
span {
font-size: 18px;
color: #409eff;
}
}
.header {
margin: 20px 0;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment