Commit 8f96f7b6 authored by renhanxue's avatar renhanxue

用户管理

parent 464317a4
......@@ -112,13 +112,22 @@ export const constantRoutes = [
{
path: '/user',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'user',
redirect: '/user/updateUser',
name: 'User',
component: () => import('@/views/dashboard/index'),
meta: { title: '用户管理', icon: 'dashboard' }
}]
meta: { title: '用户管理', icon: 'dashboard' },
children: [{
path: 'updateUser',
name: 'UpdateUser',
component: () => import('@/views/user/updateUser'),
meta: { title: '个人信息管理', icon: 'dashboard' }
},
{
path: 'userList',
name: 'UserList',
component: () => import('@/views/user/userList'),
meta: { title: '用户信息列表', icon: 'dashboard' }
}
]
},
{
......
<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" />
</el-form-item>
<el-form-item label="所在部门:" prop="depart">
<el-input v-model="form.depart" />
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="form.tel" />
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="form.email" />
</el-form-item>
<el-button type="primary">确认修改</el-button>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: 'admin',
depart: '',
tel: '',
email: ''
},
rules: {
name: { required: true, message: '请输入用户名', trigger: 'blur' },
depart: { required: true, message: '请输入所在部门', trigger: 'blur' }
}
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
.el-form {
width: 20%;
}
</style>
<template>
<div>修改密码</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>
<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>
</div>
</div>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div>
</template>
<script>
import baseInfo from '../updateUser/components/baseInfo.vue'
import Password from '../updateUser/components/password.vue'
export default {
components: { baseInfo, Password },
data() {
return {
options: [{
name: '修改基本信息',
value: 1
},
{
name: '修改密码',
value: 2
}],
tabIndex: 0
}
},
methods: {
radioChange(val, index) {
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.update-user-container {
}
.header {
display: flex;
margin-bottom: 10px;
.tab {
background: #f3f3f3;
display: flex;
height: 35px;
border-radius: 10px;
cursor: pointer;
.tab-item {
width: 120px;
line-height: 35px;
text-align: center;
font-size: 14px;
color: #666666;
}
.tab-active {
color: #fff;
background: #1a4be8;
border-radius: 10px;
}
}
}
</style>
<template>
<div>用户信息列表</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
</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