人力资源智能化管理项目（day07:员工详情）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject

页面结构和路由

<template><div class="dashboard-container"><div class="app-container"><div class="edit-form"><el-form ref="userForm" label-width="220px"><!-- 姓名 部门 --><el-row><el-col :span="12"><el-form-item label="姓名" prop="username"><el-input size="mini" class="inputW" /></el-form-item></el-col></el-row><!-- 工号 入职时间 --><el-row><el-col :span="12"><el-form-item label="工号" prop="workNumber"><el-input size="mini" class="inputW" /></el-form-item></el-col></el-row><!--手机 聘用形式  --><el-row><el-col :span="12"><el-form-item label="手机" prop="mobile"><el-input size="mini" class="inputW" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="部门" prop="departmentId"><!-- 放置及联部门组件 --></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="聘用形式" prop="formOfEmployment"><el-select size="mini" class="inputW" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="入职时间" prop="timeOfEntry"><el-date-pickersize="mini"type="date"value-format="yyyy-MM-dd"class="inputW"/></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="转正时间"><el-date-picker size="mini" type="date" class="inputW" /></el-form-item></el-col></el-row><!-- 员工照片 --><el-row><el-col :span="12"><el-form-item label="员工头像"><!-- 放置上传图片 --></el-form-item></el-col></el-row><!-- 保存个人信息 --><el-row type="flex"><el-col :span="12" style="margin-left: 220px"><el-button size="mini" type="primary">保存更新</el-button></el-col></el-row></el-form></div></div></div>
</template><script>
export default {}
</script><style scoped lang="scss">
.edit-form {background: #fff;padding: 20px;.inputW {width: 380px;}
}
</style>

    {path: '/employee/detail', // 员工详情的地址component: () => import('@/views/employee/detail.vue'),hidden: true, // 表示隐藏在左侧菜单meta: {title: '员工详情'}}

数据和校验

<template><div class="dashboard-container"><div class="app-container"><div class="edit-form"><el-formref="userForm":model="userInfo":rules="rules"label-width="220px"><!-- 姓名 部门 --><el-row><el-col :span="12"><el-form-item label="姓名" prop="username"><el-input v-model="userInfo.username" size="mini" class="inputW" /></el-form-item></el-col></el-row><!-- 工号 入职时间 --><el-row><el-col :span="12"><el-form-item label="工号" prop="workNumber"><!-- 工号是系统生成的 禁用这个组件 --><el-input v-model="userInfo.workNumber" disabled size="mini" class="inputW" /></el-form-item></el-col></el-row><!--手机 聘用形式  --><el-row><el-col :span="12"><el-form-item label="手机" prop="mobile"><el-input v-model="userInfo.mobile " size="mini" class="inputW" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="部门" prop="departmentId"><!-- 放置及联部门组件 --></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="聘用形式" prop="formOfEmployment"><el-select v-model="userInfo.formOfEmployment" size="mini" class="inputW"><el-option label="正式" :value="1" /><el-option label="非正式" :value="2" /></el-select></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="入职时间" prop="timeOfEntry"><el-date-pickerv-model="userInfo.timeOfEntry"size="mini"type="date"value-format="yyyy-MM-dd"class="inputW"/></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="转正时间" prop="correctionTime"><el-date-picker v-model="userInfo.correctionTime" size="mini" type="date" class="inputW" /></el-form-item></el-col></el-row><!-- 员工照片 --><el-row><el-col :span="12"><el-form-item label="员工头像"><!-- 放置上传图片 --></el-form-item></el-col></el-row><!-- 保存个人信息 --><el-row type="flex"><el-col :span="12" style="margin-left: 220px"><el-button size="mini" type="primary" @click="saveData">保存更新</el-button></el-col></el-row></el-form></div</div></div></div></template><script>
export default {data() {return {userInfo: {username: '', // 员工名字mobile: '', // 员工手机号formOfEmployment: null, // 员工聘用形式workNumber: '', // 员工工号departmentId: null, // 员工部门idtimeOfEntry: '', // 员工入职时间correctionTime: '' // 员工转正日期},rules: {username: [{ required: true, message: '请输入员工姓名', trigger: 'blur' },{ min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }], mobile: [{ required: true, message: '请输入电话号码', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/,message: '手机号格式不正确',trigger: 'blur' }], formOfEmployment: [{required: true, message: '请输入聘用形式', trigger: 'blur'}], departmentId: [{required: true, message: '请输入部门', trigger: 'blur'}], timeOfEntry: [{required: true, message: '请选择入职时间', trigger: 'blur'}], correctionTime: [{required: true, message: '请选择转正时间', trigger: 'blur'}, {validator: (rule, value, callback) => {if (this.userInfo.timeOfEntry) {if (new Date(this.userInfo.timeOfEntry) > new Date(value)) {callback(new Error('转正时间不能小于入职时间'))return}}callback()}}]}}}, methods: {saveData() {this.$refs.userForm.validate()}}
}
</script><style scoped lang="scss">
.edit-form {background: #fff;padding: 20px;.inputW {width: 380px;}
}
</style>

封装部门级联组件

<template><!-- element-ui级联组件 --><el-cascader separator="-" :props="props" :options="treeData" size="mini" />
</template>
<script>
import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils/index'
export default {data () {return {treeData: [], // 赋值给级联组件的optionsprops: {label: 'name', // 要展示的字段value: 'id' // 要存储的字段}}},created () {this.getDepartment()},methods: {async getDepartment () {// 将组织架构的数据转化为树形赋值给treeDatathis.treeData = transListToTreeData(await getDepartment(), 0)}}
}
</script>

<el-row><el-col :span="12"><el-form-item label="部门" prop="departmentId"><!-- 放置及联部门组件 --><select-tree class="inputW" /></el-form-item></el-col></el-row>

Cascader级联组件的特性

options为一个树形结构的数据源

props可以设置数据源中的字段如label（展示）value（存取）

separator为展示的分隔符

级联组件-双向绑定

  <!-- element-ui级联组件 --><el-cascader:value="value"separator="-":props="props":options="treeData"size="mini"@change="changeValue"/>props: {value: {type: Number, // 存储的是部门的iddefault: null}}changeValue (list) {// 取到数组的最后一个值if (list.length > 0) {// 将最后一位的id取出来 传出去this.$emit('input', list[list.length - 1])} else {// 如果长度为0 说明值为空this.$emit('input', null)}}<!-- 放置及联部门组件 --><select-tree v-model="userInfo.departmentId" class="inputW" />

新增员工

/**** 增加员工**/
export function addEmployee (data) {return request({url: '/sys/user',method: 'POST',data})
}saveData() {this.$refs.userForm.validate(async isOk => {// 如果校验成功if (isOk) {await addEmployee(this.userInfo)this.$message.success('新增员工成功')// 跳转到员工页面this.$router.push('/employee')}})}

编辑员工-查看员工

/**** 获取-员工-基本信息**/
export function getEmployeeDetail (id) {return request({url: `/sys/user/${id}`,method: 'GET'})
}{path: '/employee/detail/:id?', // 员工详情的地址component: () => import('@/views/employee/detail.vue'),hidden: true, // 表示隐藏在左侧菜单meta: {title: '员工详情'}}created() {this.$route.params.id && this.getEmployeeDetail()}async getEmployeeDetail() {this.userInfo = await getEmployeeDetail(this.$route.params.id)}<el-buttonsize="mini"type="text"@click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>

编辑员工-保存

/**** 修改-员工-基本信息**/
export function updateEmployee (data) {return request({url: `/sys/user/${data.id}`,method: 'PUT',data})
}<el-input v-model="userInfo.mobile" :disabled="!!$route.params.id" size="mini" class="inputW" />saveData() {this.$refs.userForm.validate(async isOk => {// 如果校验成功if (isOk) {// 判断是否编辑模式if (this.$route.params.id) {await updateEmployee(this.userInfo)this.$message.success('修改员工信息成功')} else {// 新增模式await addEmployee(this.userInfo)this.$message.success('新增员工成功')}// 跳转到员工页面this.$router.push('/employee')}})}

上传员工头像封装

<template><!-- （自动上传）action是上传地址 人资项目不需要 人资项目（手动上传） --><!-- show-file-list不展示列表 --><el-uploadclass="avatar-uploader"action="":show-file-list="false":before-upload="beforeAvatarUpload"><img v-if="value" :src="value" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload>
</template><script>
export default {props: {value: {type: String,default: ''}},methods: {// 检查函数 判断文件的类型还有大小 return true(继续上传)/false(停止上传)beforeAvatarUpload (file) {const isJPG = ['image/jpeg','image/png','image/gif','image/bmp'].includes(file.type)const isLt2M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!')}return isJPG && isLt2M}}
}
</script>
<style>
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>

<!-- 员工照片 --><el-row><el-col :span="12"><el-form-item label="员工头像"><!-- 放置上传图片 --><imageUpload v-model="userInfo.staffPhoto" /></el-form-item></el-col></el-row>