人资项目day10-员工详情页创建和布局

大家好，我是讯享网，很高兴认识大家。

详情页的基本布局和路由

建立详情页路由

{
path: 'detail/:id', // query传参动态路由传参
component: () => import('@/views/employees/detail'),
hidden: true, // 不在左侧菜单显示
meta: {
title: '员工详情' // 标记当前路由规则的中文名称后续在做左侧菜单时使用
}
}

建立基本架构

<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>

读取和保存用户信息的接口

加载个人基本信息

保存个人基本信息

实现用户名和密码的修改

这里有个缺陷，接口中读取的是后端的密文，我们并不能解密，所以当我们没有任何修改就保存时，会校验失败，因为密文超过了规定的12位长度，为了真的修改密码，我们设定了一个临时的字段 password2，用它来存储我们的修改值，最后保存的时候，把password2传给password

以及表单验证

data() {
return {
userId: this.$route.params.id, // 这样可以后面直接通过 this.userId进行获取数据
userInfo: {
// 专门存放基本信息
username: '',
password2: ''
},
rules: {
username: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
password2: [{ 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.password2 }) // 将新密码的值替换原密码的值
this.$message.success('保存成功')
} catch (error) {
console.log(error)
}
}
}

绑定表单数据进行渲染

个人组件和岗位组件封装

封装个人详情组件

员工个人信息分为三部分，账户，个人，岗位，这个小节我们对个人组件和岗位组件进行封装

讯享网

封装个人组件 定义user-info的数据

data() {
return {
userId: this.$route.params.id,
EmployeeEnum, // 员工枚举数据
userInfo: {},
formData: {
userId: '',
username: '', // 用户名
sex: '', // 性别
mobile: '', // 手机
companyId: '', // 公司id
departmentName: '', // 部门名称
// onTheJobStatus: '', // 在职状态 no
dateOfBirth: '', // 出生日期
timeOfEntry: '', // 入职时间
theHighestDegreeOfEducation: '', // 最高学历
nationalArea: '', // 国家
passportNo: '', // 护照号
idNumber: '', // 身份证号
idCardPhotoPositive: '', // 身份证照正
idCardPhotoBack: '', // 身份证照正
nativePlace: '', // 籍贯
nation: '', // 民族
englishName: '', // 英文名字
maritalStatus: '', // 婚姻状况
staffPhoto: '', // 员工照片
birthday: '', // 生日
zodiac: '', // 属相
age: '', // 年龄
constellation: '', // 星座
bloodType: '', // 血型
domicile: '', // 户籍所在地
politicalOutlook: '', // 政治面貌
timeToJoinTheParty: '', // 入党时间
archivingOrganization: '', // 存档机构
stateOfChildren: '', // 子女状态
doChildrenHaveCommercialInsurance: '1', // 保险状态
isThereAnyViolationOfLawOrDiscipline: '', // 违法违纪状态
areThereAnyMajorMedicalHistories: '', // 重大病史
: '', //
wechat: '', // 微信
residenceCardCity: '', // 居住证城市
dateOfResidencePermit: '', // 居住证办理日期
residencePermitDeadline: '', // 居住证截止日期
placeOfResidence: '', // 现居住地
postalAddress: '', // 通讯地址
contactTheMobilePhone: '', // 联系手机
personalMailbox: '', // 个人邮箱
emergencyContact: '', // 紧急联系人
emergencyContactNumber: '', // 紧急联系电话
socialSecurityComputerNumber: '', // 社保电脑号
providentFundAccount: '', // 公积金账号
bankCardNumber: '', // 银行卡号
openingBank: '', // 开户行
educationalType: '', // 学历类型
graduateSchool: '', // 毕业学校
enrolmentTime: '', // 入学时间
graduationTime: '', // 毕业时间
major: '', // 专业
graduationCertificate: '', // 毕业证书
certificateOfAcademicDegree: '', // 学位证书
homeCompany: '', // 上家公司
title: '', // 职称
resume: '', // 简历
isThereAnyCompetitionRestriction: '', // 有无竞业限制
proofOfDepartureOfFormerCompany: '', // 前公司离职证明
remarks: '' // 备注
}
}
}

封装岗位组件定义岗位数据

data() {
return {
userId: this.$route.params.id,
depts: [],
EmployeeEnum,
formData: {
adjustmentAgedays: '', // 调整司龄天
adjustmentOfLengthOfService: '', // 调整工龄天
closingTimeOfCurrentContract: '', // 现合同结束时间
companyId: '', // 公司ID
contractDocuments: '', // 合同文件
contractPeriod: '', // 合同期限
correctionEvaluation: '', // 转正评价
currentContractStartTime: '', // 现合同开始时间
firstContractTerminationTime: '', // 首次合同结束时间
hrbp: '', // HRBP
initialContractStartTime: '', // 首次合同开始时间
otherRecruitmentChannels: '', // 其他招聘渠道
post: '', // 岗位
rank: null, // 职级
recommenderBusinessPeople: '', // 推荐企业人
recruitmentChannels: '', // 招聘渠道
renewalNumber: '', // 续签次数
reportId: '', // 汇报对象
reportName: null, // 汇报对象
socialRecruitment: '', // 社招校招
stateOfCorrection: '', // 转正状态
taxableCity: '', // 纳税城市
userId: '', // 员工ID
workMailbox: '', // 工作邮箱
workingCity: '', // 工作城市
workingTimeForTheFirstTime: '' // 首次参加工作时间
}
}

员工个人信息和岗位信息-读取-保存

读取个人保存个人信息

这个环节里面大部分都是繁杂的属性和重复的过程，所以该环节直接将过程代码拷贝到项目中即可

封装 读取个人信息 保存个人信息 读取岗位信息 保存岗位信息

读取，保存个人信息 user-info 需要注意：这里的保存实际上分成了两个接口，这是接口的设计，我们只能遵守

import { getPersonalDetail, updatePersonal, saveUserDetailById } from '@/api/employees'
import { getUserDetailById } from '@/api/user'
created() {
this.getPersonalDetail()
this.getUserDetailById()
},
methods: {
async getPersonalDetail() {
this.formData = await getPersonalDetail(this.userId) // 获取员工数据
},
async savePersonal() {
await updatePersonal({ ...this.formData, id: this.userId })
this.$message.success('保存成功')
},
async saveUser() {
// 调用父组件
await saveUserDetailById(this.userInfo)
this.$message.success('保存成功')
},
async getUserDetailById() {
this.userInfo = await getUserDetailById(this.userId)
}
}

读取保存岗位信息

读取，保存岗位信息 job-info

import { getEmployeeSimple, updateJob, getJobDetail } from '@/api/employees'

created() {
this.getJobDetail()
this.getEmployeeSimple()
},
methods: {
async getJobDetail() {
this.formData = await getJobDetail(this.userId)
},
// 获取员工列表
async getEmployeeSimple() {
this.depts = await getEmployeeSimple()
},
// 保存岗位信息
async saveJob() {
await updateJob(this.formData)
this.$message.success('保存岗位信息成功')
}
}

封装上传图片组件-上传组件需求分析

初始化cos对象参数

名称	描述
SecretId	开发者拥有的项目身份识别 ID，用以身份认证，可在 API 密钥管理页面获取
SecretKey	开发者拥有的项目身份密钥，可在 API 密钥管理页面获取

注意，上述的参数我们在本次开发过程中，直接将参数放置在前端代码中存储，但是腾讯云本身是不建议这么做的，因为敏感信息放在前端很容易被捕获，由于我们本次是测试研发，所以这个过程可以忽略

正确的做法应该是，通过网站调用接口换取敏感信息相关文档

实例化上传sdk

var cos = new COS({
SecretId: 'COS_SECRETID', // 身份识别 ID
SecretKey: 'COS_SECRETKEY', // 身份密钥
});

该组件需要满足什么要求呢？

可以显示传入的图片地址
可以删除传入的图片地址
可以上传图片到云服务器
上传到腾讯云之后，可以返回图片地址，显示
上传成功之后，可以回调成功函数

上传之前检查

控制上传图片的类型和上传大小，如果不满足条件返回false上传就会停止

beforeUpload(file) {
// 要开始做文件上传的检查了
// 文件类型文件大小
const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
if (!types.includes(file.type)) {
this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
return false
}
// 检查大小
const maxSize = 5 * 1024 * 1024
if (maxSize < file.size) {
this.$message.error('图片大小最大不能超过5M')
return false
}
return true
}

上传动作调用上传腾讯云

// 进行上传操作
upload(params) {
// console.log(params.file)
if (params.file) {
// 执行上传操作
cos.putObject({
Bucket: 'shuiruohanyu-106-', // 存储桶
Region: 'ap-beijing', // 地域
Key: params.file.name, // 文件名
Body: params.file, // 要上传的文件对象
StorageClass: 'STANDARD' // 上传的模式类型直接默认标准模式即可
// 上传到腾讯云 =》哪个存储桶哪个地域的存储桶文件格式名称回调
}, function(err, data) {
// data返回数据之后应该如何处理
console.log(err || data)
})
}
}

上传成功之后处理返回数据

beforeUpload(file) {
// 先检查文件类型
const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
if (!types.some(item => item === file.type)) {
// 如果不存在
this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
return false // 上传终止
}
// 检查文件大小 5M 1M = 1024KB 1KB = 1024B
const maxSize = 5 * 1024 * 1024
if (file.size > maxSize) {
// 超过了限制的文件大小
this.$message.error('上传的图片大小不能大于5M')
return false
}
// 已经确定当前上传的就是当前的这个file了
this.currentFileUid = file.uid // 【新增】
return true // 最后一定要return true
},