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 = [
{
path: '/user',
component: Layout,
redirect: '/user/updateUser',
redirect: '/dashboard',
name: 'User',
meta: { title: '用户管理', icon: 'dashboard' },
children: [{
......
src/styles/element-ui.scss
View file @ 84047bf7
......@@ -47,3 +47,7 @@
.el-range-separator {
box-sizing: content-box;
}
.el-pagination {
margin-top: 20px;
}
src/styles/index.scss
View file @ 84047bf7
......@@ -12,6 +12,13 @@ body {
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 {
font-weight: 700;
}
......
src/views/user/updateUser/components/baseInfo.vue
View file @ 84047bf7
<template>
<div>
<h3>修改基本信息</h3>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" />
......@@ -14,8 +13,10 @@
<el-form-item label="邮箱:">
<el-input v-model="form.email" />
</el-form-item>
<el-button type="primary">确认修改</el-button>
</el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div>
</template>
......@@ -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>
<style lang="scss" scoped>
.el-form {
width: 20%;
.btn {
margin-top: 50px;
text-align: center;
}
</style>
src/views/user/updateUser/components/password.vue
View file @ 84047bf7
<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>
<script>
export default {
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'))
} else if (value !== this.form.newPass) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
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>
<style lang="scss" scoped>
.btn {
margin-top: 50px;
text-align: center;
}
</style>
src/views/user/updateUser/index.vue
View file @ 84047bf7
<template>
<div class="update-user-container">
<div class="header">
<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>
<breadcrumb />
<div class="update-user-container">
<div class="header">
<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>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import baseInfo from '../updateUser/components/baseInfo.vue'
import Password from '../updateUser/components/password.vue'
export default {
components: { baseInfo, Password },
components: { Breadcrumb, baseInfo, Password },
data() {
return {
options: [{
......@@ -40,27 +44,29 @@ export default {
</script>
<style lang="scss" scoped>
.update-user-container {
width: 500px;
margin: 0 auto;
}
.header {
display: flex;
margin-bottom: 10px;
justify-content: center;
margin: 30px 0 50px 0;
.tab {
background: #f3f3f3;
display: flex;
height: 35px;
height: 40px;
border-radius: 10px;
cursor: pointer;
.tab-item {
width: 120px;
line-height: 35px;
width: 130px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #666666;
}
.tab-active {
color: #fff;
background: #1a4be8;
background: #409eff;
border-radius: 10px;
}
}
......
src/views/user/userList/index.vue
View file @ 84047bf7
<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>
<script>
import Pagination from '@/components/Pagination'
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: {
Pagination,
Breadcrumb
},
data() {
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>
<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>
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