学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject
页面结构
<template><div class="container"><div class="app-container"><div class="left"><el-input style="margin-bottom:10px" type="text" prefix-icon="el-icon-search" size="small" placeholder="输入员工姓名全员搜索" /><!-- 树形组件 --></div><div class="right"><el-row class="opeate-tools" type="flex" justify="end"><el-button size="mini" type="primary">添加员工</el-button><el-button size="mini">excel导入</el-button><el-button size="mini">excel导出</el-button></el-row><!-- 表格组件 --><!-- 分页 --></div></div></div>
</template><script>
export default {name: 'Employee'
}
</script><style lang="scss" scoped>
.app-container {background: #fff;display: flex;.left {width: 280px;padding: 20px;border-right: 1px solid #eaeef4;}.right {flex: 1;padding: 20px;.opeate-tools {margin:10px ;}.username {height: 30px;width: 30px;line-height: 30px;text-align: center;border-radius: 50%;color: #fff;background: #04C9BE;font-size: 12px;display:inline-block;}}
}</style>
左树加载
//放置树形组件
<el-tree:data="depts":props="defaultProps"default-expand-all:expand-on-click-node="false"highlight-current/>//定义树组件需要的数据data() {return {depts: [], // 组织数据defaultProps: {label: 'name',children: 'children'}}
}//初始化时加载数据转化树形created() {this.getDepartment()},methods: {async getDepartment() {// 递归方法 将列表转化成树形// let result = await getDepartment()this.depts = transListToTreeData(await getDepartment(), 0)}}
选中首个节点
<!-- 树形组件 -->
<!-- 数据、树形配置 -->
<!-- node-key标识唯一性 -->
<el-treeref="deptTree"node-key="id":data="depts":props="defaultProps":default-expand-all="true":expand-on-click-node="false":highlight-current="true"@current-change="selectNode"/>// 存储查询参数queryParams: {departmentId: null}async getDepartment () {// 递归方法 将列表转化成树形this.depts = transListToTreeData(await getDepartment(), 0)// 获取首个节点并记录this.queryParams.departmentId = this.depts[0].id// 设置选中节点// 数组件渲染是异步是，等到更新完毕this.$nextTick(() => {// 此时意味着数渲染完毕this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId)})},// 切换节点selectNode (node) {console.log(node)this.queryParams.departmentId = node.id}
员工列表结构
<!-- 表格组件 --><el-table><el-table-column align="center" label="头像" /><el-table-column label="姓名" /><el-table-column label="手机号" sortable /><el-table-column label="工号" sortable /><el-table-column label="聘用形式" /><el-table-column label="部门" /><el-table-column label="入职时间" sortable /><el-table-column label="操作" width="280px"><template><el-button size="mini" type="text">查看</el-button><el-button size="mini" type="text">角色</el-button><el-button size="mini" type="text">删除</el-button></template></el-table-column></el-table><!-- 分页 --><el-row style="height: 60px" align="middle" type="flex" justify="end"><el-pagination layout="total,prev, pager, next" :total="1000" /></el-row>
获取员工数据
/**** 获取员工列表**/
export function getEmployeeList (params) {return request({url: '/sys/user',method: 'GET',params // 地址参数 查询参数})
}<!-- 表格组件 --><el-table :data="list"><el-table-column prop="staffPhoto" align="center" label="头像" /><el-table-column prop="username" label="姓名" /><el-table-column prop="mobile" label="手机号" sortable /><el-table-column prop="workNumber" label="工号" sortable /><el-table-column prop="formOfEmployment" label="聘用形式" /><el-table-column prop="departmentName" label="部门" /><el-table-column prop="timeOfEntry" label="入职时间" sortable /><el-table-column label="操作" width="280px"><template><el-button size="mini" type="text">查看</el-button><el-button size="mini" type="text">角色</el-button><el-button size="mini" type="text">删除</el-button></template></el-table-column></el-table>list: [], // 存储员工列表数据// 获取员工列表的方法async getEmployeeList () {const { rows, total } = await getEmployeeList(this.queryParams)this.list = rowsthis.total = total},async getDepartment () {// 递归方法 将列表转化成树形this.depts = transListToTreeData(await getDepartment(), 0)// 获取首个节点并记录this.queryParams.departmentId = this.depts[0].id// 设置选中节点// 数组件渲染是异步是，等到更新完毕this.$nextTick(() => {// 此时意味着数渲染完毕this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId)})// 这个时候参数记录了idthis.getEmployeeList()},// 切换节点selectNode (node) {this.queryParams.departmentId = node.idthis.queryParams.page = 1 // 设置为第一页this.getEmployeeList()},
头像和聘用形式的处理
<el-table-column prop="staffPhoto" align="center" label="头像"><template v-slot="{ row }"><el-avatarv-if="row.staffPhoto":src="row.staffPhoto":size="30"/><span v-else class="username">{{ row.username.charAt(0) }}</span></template></el-table-column><el-table-column prop="formOfEmployment" label="聘用形式"><template v-slot="{ row }"><span v-if="row.formOfEmployment === 1">正式</span><span v-else-if="row.formOfEmployment === 2">非正式</span><span v-else>无</span></template></el-table-column>
员工分页处理
// 存储查询参数queryParams: {departmentId: null,page: 1, // 当前页码pagesize: 5, // 每页显示的条数},total: 0 // 记录员工的总数<!-- 分页 --><el-row style="height: 60px" align="middle" type="flex" justify="end"><el-paginationlayout="total,prev, pager, next":total="total":current-page="queryParams.page":page-size="queryParams.pagesize"@current-change="changePage"/></el-row>// 切换页码changePage (newPage) {this.queryParams.page = newPage // 赋值新页码this.getEmployeeList()}// 切换节点selectNode (node) {this.queryParams.departmentId = node.idthis.queryParams.page = 1 // 设置为第一页this.getEmployeeList()}// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
员工模糊搜索
<el-inputv-model="queryParams.keyword"style="margin-bottom: 10px"type="text"prefix-icon="el-icon-search"size="small"placeholder="输入员工姓名全员搜索"@input="changeValue"/>// 存储查询参数queryParams: {departmentId: null,page: 1, // 当前页码pagesize: 5, // 每页显示的条数keyword: ''}// 输入值内容改变时触发changeValue () {// 使用防抖节约资源clearTimeout(this.timer)// 页码设置第一页this.timer = setTimeout(() => {this.queryParams.page = 1// 查询员工this.getEmployeeList()}, 300)}
员工导出excel
/**** 导出员工的excel**/
export function exportEmployee () {return request({url: '/sys/user/export',// method: 'GET',// 改变接收数据的类型responseType: 'blob' // 使用blob接收二进制文件流})
}// 判断是不是Blobif (response.data instanceof Blob) return response.data // 返回了Blob对象import FileSaver from 'file-saver' <el-button size="mini" @click="exportEmployee">excel导入</el-button>// 导出员工的excelasync exportEmployee () {// await exportEmployee()导出所有的员工接口// 使用npm包（file-saver），直接将blob文件下载到本地// FileSaver.saveAs(blob对象,文件名称)FileSaver.saveAs(await exportEmployee(), '员工信息表.xlsx') // 下载文件}
excel组件封装
<template><el-dialogwidth="500px"title="员工导入":visible="showExcelDialog"@close="$emit('update:showExcelDialog', false)"><el-row type="flex" justify="center"><div class="upload-excel"><inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"/><div class="drop"><i class="el-icon-upload" /><el-button type="text">下载导入模板</el-button><span>将文件拖到此处或<el-button type="text">点击上传</el-button></span></div></div></el-row><el-row type="flex" justify="end"><!-- update:props属性名，值 直接修改 .sync修饰符的属性值 --><el-buttonsize="mini"type="primary"@click="$emit('update:showExcelDialog', false)">取消</el-button></el-row></el-dialog>
</template>
<script>
export default {props: {showExcelDialog: {type: Boolean,default: false}},methods: {}
}
</script><style scoped lang="scss">
.upload-excel {display: flex;justify-content: center;margin: 20px;width: 360px;height: 180px;align-items: center;color: #697086;.excel-upload-input {display: none;z-index: -9999;}.btn-upload,.drop {border: 1px dashed #dcdfe6;width: 100%;height: 100%;text-align: center;line-height: 160px;border-radius: 8px;display: flex;flex-direction: column;justify-content: center;}.drop {line-height: 40px;color: #bbb;i {font-size: 60px;display: block;color: #c0c4cc;}}
}
</style>
<el-button size="mini" @click="importEmployee">excel导入</el-button><!-- 放置导入组件 --><import-excel :show-excel-dialog.sync="showExcelDialog" />components: {1ImportExcel},// 导入员工的excelimportEmployee () {this.showExcelDialog = true}
excel-下载导入模板
/**** 下载导入员工模板**/
export function getExportTemplate () {return request({url: '/sys/user/import/template',method: 'GET',// 改变接收数据的类型responseType: 'blob' // 使用blob接收二进制文件流})
}<el-button type="text" @click="getTemplate">下载导入模板</el-button>async getTemplate () {FileSaver.saveAs(await getExportTemplate(), '员工导入模板.xlsx')}
员工导入-上传excel
/**** 导入员工(上传excel)**/
export function uploadExcel (data) {return request({url: '/sys/user/import',method: 'POST',data // form-data类型 因为要上传文件类型})
}<el-button type="text" @click="handleUpload">点击上传</el-button>
<inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"@change="uploadChange"/>// 弹出文件选择器-只有一种方式，通过input filehandleUpload () {this.$refs['excel-upload-input'].click()},async uploadChange (event) {// input文件列表const files = event.target.filesif (files.length > 0) {// 大于0，说明有文件要上传const data = new FormData()// file: file类型data.append('file', files[0]) // 将文件参数加入到formData中try {await uploadExcel(data)// 成功this.$emit('uploadSucess') // 通知父组件 我上传成功this.$emit('update:showExcelDialog', false)this.$message.success('上传文件成功')} catch (error) {// 捕获失败} finally {this.$refs['excel-upload-input'].value = ''}}}<!-- 放置导入excel组件 --><import-excel:show-excel-dialog.sync="showExcelDialog"@uploadSuccess="getEmployeeList"/>
删除员工
/**** 删除-员工**/
export function delEmployee (id) {// request执行之后会得到promise对象(再通过使用async和await可以获取结果)return request({url: `/sys/user/${id}`,method: 'DELETE'})
}<el-popconfirmtitle="确认删除该行数据吗？"@onConfirm="confirmDel(row.id)"><el-buttonslot="reference"style="margin-left: 10px"type="text">删除</el-button></el-popconfirm>async confirmDel (id) {await delEmployee(id)// 如果是当页最后一个if (this.list.length === 1 && this.queryParams.page > 1) {this.queryParams.page--}// 重新加载this.getEmployeeList()this.$message.success('删除员工成功')}
