前言
目录
一、员工详情页效果图
二、建立详情页路由
在src/router/modules/employees.js中添加路由规则:
{
path: 'detail/:id', // ?的含义是表示该参数可传可不传 动态路由参数 /employees/detail/123 /employees/detail
component: () => import('@/views/employees/detail'),
hidden: true, // 表示该内容不在左侧菜单显示
meta: {
title: '员工详情'
}
},
三、员工详情页基本布局
在src/views/employees/details.vue中建立基本布局:
<div class="dashboard-container">
<div class="app-container">
<el-card>
<el-tabs>
<el-tab-pane label="登录账户设置">
<!-- 放置表单 -->
<el-form label-width="120px" style="margin-left: 120px; margin-top:30px">
<el-form-item label="姓名:">
<el-input style="width:300px" />
</el-form-item>
<el-form-item label="密码:">
<el-input style="width:300px" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary">更新</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="个人详情" />
<el-tab-pane label="岗位信息" />
</el-tabs>
</el-card>
</div>
</div>
然后在src/views/employees/index.vue中绑定跳转:
<el-button type="text" size="small" @click="$router.push(`/employees/detail/${obj.row.id}`)">查看</el-button>
然后在src/api/employees.js中封装读取和保存用户信息的请求:
/** *
* 获取某个用户的基本信息
* ***/
export function getUserDetailById(id) {
return request({
url: `/sys/user/${
id}`
})
}
/** *
* 保存员工的基本信息
* **/
export function saveUserDetailById(data) {
return request({
url: `/sys/user/${
data.id}`,
method: 'put',
data
})
}
四、实现用户名和密码的修改
在src/views/employees/detail.vue中添加如下代码:
<!-- 放置表单 -->
<el-form ref="userForm" :model="userInfo" :rules="rules" label-width="120px" style="margin-left: 120px; margin-top:30px">
<el-form-item label="姓名:" prop="username">
<el-input v-model="userInfo.username" style="width:300px" />
</el-form-item>
<el-form-item label="新密码:" prop="password">
<el-input v-model="userInfo.password" style="width:300px" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveUser">更新</el-button>
</el-form-item>
</el-form>
import {
getUserDetailById } from '@/api/user'
import {
saveUserDetailById } from '@/api/employees'
export default {
data() {
return {
userId: this.$route.params.id, // 这样可以后面直接通过 this.userId进行获取数据
userInfo: {
// 专门存放基本信息
username: '',
password: ''
},
rules: {
username: [{
required: true, message: '姓名不能为空', trigger: 'blur' }],
password: [{
required: true, message: '密码不能为空', trigger: 'blur' },
{
min: 6, max: 9, message: '密码长度6-9位', trigger: 'blur' }]
}
}
},
created() {
this.getUserDetailById()
},
methods: {
async getUserDetailById() {
this.userInfo = await getUserDetailById(this.userId)
},
async saveUser() {
try {
// 校验
await this.$refs.userForm.validate()
await saveUserDetailById({
...this.userInfo, password: this.userInfo.password }) // 将新密码的值替换原密码的值
this.$message.success('保存成功')
} catch (error) {
console.log(error)
}
}
}
}
五、将个人详情和岗位详情封装为组件
5.1 个人详情和岗位详情组件效果图
5.2 封装个人详情组件
首先,在src/views/employees/components/user-info.vue中添加基本布局:
注意:因为个人详情页的表单数据过多,所以这里只展示了一部分数据,避免重复操作过多
<template>
<div class="user-info">
<!-- 个人信息 -->
<el-form label-width="220px">
<!-- 工号 入职时间 -->
<el-row class="inline-info">
<el-col :span="12">
<el-form-item label="工号">
<el-input v-model="userInfo.workNumber" class="inputW" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入职时间">
<el-date-picker
v-model="userInfo.timeOfEntry"
type="date"
class="inputW"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
</el-row>
<!-- 姓名 部门 -->
<el-row class="inline-info">
<el-col :span="12">
<el-form-item label="姓名">
<el-input v-model="userInfo.username" class="inputW" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门">
<el-input v-model="userInfo.departmentName" class="inputW" />
</el-form-item>
</el-col>
</el-row>
<!--手机 聘用形式 -->
<el-row class="inline-info">
<el-col :span="12">
<el-form-item label="手机">
<el-input v-model="userInfo.mobile" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="聘用形式">
<el-select v-model="userInfo.formOfEmployment" class="inputW">
<el-option
v-for="item in EmployeeEnum.hireType"
:key="item.id"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 员工照片 -->
<el-row class="inline-info">
<el-col :span="12">
<el-form-item label="员工头像">
<!-- 放置上传图片 -->
</el-form-item>
</el-col>
</el-row>
<!-- 保存个人信息 -->
<el-row class="inline-info" type="flex" justify="center">
<el-col :span="12">
<el-button type="primary" @click="saveUser">保存更新</el-button>
<el-button @click="$router.back()">返回</el-button>
</el-col>
</el-row>
</el-form>
</template>
然后,在src/views/employees/detail.vue中注册并使用:
<el-tab-pane label="个人详情">
<!-- 放置个人详情 -->
<component :is="userComponent" />
<!-- <user-info /> -->
</el-tab-pane>
注意:这里使用了动态组件component,它通过 is属性来绑定需要显示在该位置的组件,is属性可以直接为注册组件的组件名称即可
然后,在src/api/employees.js中封装读取个人信息和保存个人信息的请求:
/** *
* 读取用户详情的基础信息
* **/
export function getPersonalDetail(id) {
return request({
url: `/employees/${
id}/personalInfo`
})
}
/** *
* 更新用户详情的基础信息
* **/
export function updatePersonal(data) {
return request({
url: `/employees/${
data.userId}/personalInfo`,
method: 'put',
data
})
}
最后,在src/views/employees/components/user-info.vue中调用接口获取和保存数据:
import {
saveUserDetailById } from '@/api/employees'
import {
getUserDetailById } from '@/api/user'
created() {
this.getUserDetailById()
},
methods: {
async saveUser() {
// 调用父组件
await saveUserDetailById(this.userInfo)
this.$message.success('保存成功')
},
async getUserDetailById() {
this.userInfo = await getUserDetailById(this.userId)
}
5.3 封装岗位信息组件
岗位信息组件的逻辑与个人信息组件完全相同,这里不做过多赘述