提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 1.编辑角色-进入行内编辑
- 2.角色管理-行内编辑-数据缓存
- 3.角色管理-编辑角色-确定取消
- 4.角色管理-删除角色
- 员工管理-页面结构
- 6.员工管理-左侧树
- 7.员工管理-选中首个节点
- 8.员工管理-员工列表结构
- 9.员工管理-获取员工数据
- 10.员工管理-头像和聘用形式的处理
- 11.员工管理-员工分页处理
- 12.员工管理-员工模糊搜索
1.编辑角色-进入行内编辑
- 获取数据之后针对每个数据定义标识-使用$set-代码位置(src/views/role/index.vue)
// 针对每一行数据添加一个编辑标记
this.list.forEach(item => {
// item.isEdit = false // 添加一个属性 初始值为false
// 数据响应式的问题 数据变化 视图更新
// 添加的动态属性 不具备响应式特点
// this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加的属性 添加响应式
this.$set(item, 'isEdit', false)
})
- 点击编辑时,将当前行的标记isEdit设置为true(src/views/role/index.vue)
<el-table-column align="center" label="操作">
<template>
<!-- 非编辑状态 -->
<el-button size="mini" type="text">分配权限</el-button>
<el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button>
<el-button size="mini" type="text">删除</el-button>
</template>
</el-table-column>
- 点击编辑的方法-
data(){
return{
row:[]
}
}
methods:{
btnEditRow(row){
row.isEdit = true//改变行的编辑状态
}
}
- 表格列中根据当前的isEdit标记-渲染结构
<el-table-column prop="name" align="center" width="200" label="角色">
<template v-slot="{row}">
<el-input v-if="row.isEdit" size="mini"></el-input>
<span v-else>{{row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="state" align="center" width="200" label="启用">
<template v-slot="{row}">
<el-switch v-if="row.isEdit"/>
<span v-else>{{row.state === 1? '已启用':row.state === 0 ? "未启用" :"无"}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template v-slot="{row}">
<template v-if="row.isEdit">
<el-button type="primary" size="mini" >
确定
</el-button>
<el-button size="mini" >
取消
</el-button>
</template>
<template v-else>
<el-button size="mini" type="text">分配权限</el-button>
<el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button>
<el-button size="mini" type="text">取消</el-button>
</template>
<span v-else>{{row.name}}</span>
</template>
</el-table-column>
- $set的应用
- this.$set(目标对象,属性名称,初始值)
- 等价于Vue.set(目标对象,属性名称,初始值)
- 往响应式对象中添加一个属性，并确保这个新属性同样是响应式的,且触发视图更新。
2.角色管理-行内编辑-数据缓存
- 原因
- 因为编辑时，可以取消回滚到之前的状态，所以编辑时的数据是临时的数据
- editRow的数据是针对当前行的数据做了一份拷贝，针对这个拷贝，可以修改
- 初始化时缓存数据(src/views/role/index.vue)
this.list.forEach(item => {
// item.isEdit = false//添加一个属性，初始值为false
// 数据响应式问题 数据变化 视图更新
// 添加的动态属性 不具备响应式特点
// this.$set(目标对象,属性名称,初始值) 可以针对目标对象 添加的属性 添加响应式
this.$set(item, 'isEdit', false)
this.$set(item,'editRow',{
name:item.name,
state:item.state,
description:item.description
})
console.log(item['isEdit']);
})
- 点击编辑时更新缓存数据-代码位置(src/views/role/index.vue)
btnEditRow(row) {
row.isEdit = true // 改变行的编辑状态
// 更新缓存数据
row.editRow.name = row.name
row.editRow.state = row.state
row.editRow.description = row.description
}
- 将编辑时的表单双向绑定缓存数据-代码位置(src/views/role/index.vue)
<el-table :data="list">
<!-- 列 -->
<el-table-column prop="name" align="center" width="200" label="角色">
<template v-slot="{row}">
<!-- 条件判断 -->
<el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini"></el-input>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="state" align="center" width="200" label="启用">
<!-- 自定义列结构 -->
<template v-slot="{row}">
<!-- 开 1 关0 -->
<el-switch v-if="row.isEdit" v-model="row.editRow.state" :active-value="1" :inactive-value="0"></el-switch>
<span v-else>{{ row.state === 1 ?'已启用':row.state === 0 ?"未启用":'无' }}</span>
</template>
</el-table-column>
<el-table-column prop="description" align="center" label="描述">
<template v-solt="{row}">
<el-input v-if="row.isEdit" v-model="row.editRow.description" type="textarea"></el-input>
<span v-else>{{ row.description }}</span>
</template>
</el-table-column>>
<el-table-column align="center" label="操作">
<!-- 操作按钮 -->
<template v-slot="{row}">
<template v-if="row.isEdit">
<!-- 编辑状态 -->
<el-button type="primary" size="mini">确定</el-button>
<el-button size="mini">
取消
</el-button>
</template>
<template v-else>
<!-- 非编辑状态 -->
<el-button size="mini" type="text">分配权限</el-button>
<el-button size="mini" @click="btnEditRow(row)" type="text">编辑</el-button>
<el-button size="mini" type="text">删除</el-button>
</template>
</template>
</el-table-column>
</el-table>
3.角色管理-编辑角色-确定取消
- 更新角色信息的请求api(src/api/role.js)
export function updateRole(data){
return request({
url:`/sys/role/${data.id}`,
method:'put',
data
})
}
- 确定方法
<!-- 编辑状态 -->
<el-button type="primary" size="mini" @click="btnEditOK(row)">确定</el-button>
<el-button size="mini">
取消
</el-button>
async btnEditOK(row) {
if (row.editRow.name && row.editRow.description) {
//下一步操作 调用更新请求接口
const result = await updateRole(
{
...row.editRow,
id: row.id
}
)
//更新成功提示
this.$message.success('更新角色成功')
//更新显式数据 退出编辑状态
//row.name = row.editRow.name//eslint的校验 误判
//Object.assign(target,source)
Object.assign(row, {
...row.editRow,
isEdit: false//退出编辑模式
})//规避eslint的误判
}else{
this.$message.warning('角色和描述不能为空')
}
}
- 更新成功，要把缓存数据回显到页面上，并且关闭编辑模式
- 取消方法
<el-button size="mini" @click="row.isEdit = false">取消</el-button>
4.角色管理-删除角色
- 删除角色的api(src/api/role.js)
export function delRole(id){
return request({
url:`/sys/role/${id}`,
method:'delte'
})
}
- 在删除位置加入气泡框-代码位置(src/views/role/index.vue)
<!-- 非编辑状态 -->
<el-button size="mini" type="text">分配权限</el-button>
<el-button size="mini" @click="btnEditRow(row)" type="text"
>编辑</el-button
>
<el-popconfirm trigger="hover"
title="确定删除吗?"
@onConfirm="confirmDel(row.id)"
>
<el-button
slot="reference"
style="margin-left: 10px"
size="mini" type="text"
>删除</el-button
>
</el-popconfirm>
- 删除方法-代码位置(src/views/role/index.vue)
async confirmDel(id){
await delRole(id)//后端删除
this.$message.success('删除成功')
//如果删除的是最后一个
if(this.list.length === 1){
return this.pageParams.page--
this.getRoleList()
}
}
员工管理-页面结构
- 基本的页面结构-代码位置(src/views/employee/index.vue)
<div class="app-container">
<div class="left">
<el-input> </el-input>
<!-- 树形组件 -->
</div>
<div class="right">
<el-row class="opeate-tools" type="flex" justify="end">
<el-button type="primary" size="mini">添加员工</el-button>
<el-button size="mini">excel导入</el-button>
<el-button size="mini">excel导出</el-button>
</el-row>
<!-- 表格组件 -->
<!-- 分页 -->
</div>
</div>
<style scoped lang="scss">
.app-container {
background: #fff;
display: flex;
.left {
width: 280px;
padding: 20px;
border-right: solid 1px #eaee64;
}
.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>
6.员工管理-左侧树
- 树组件需要的数据-代码位置(src/views/employee/index.vue)
data() {
return {
depts:[],//组织数据
defaultProps:{
label:'name',
children:'children'
}
};
},
- 树形组件-代码位置(src/views/employee/index.vue)
<el-input> </el-input>
<!-- 树形组件 -->
<el-tree :data="depts" :props="defaultProps" default-expand-all expand-on-click-node="false" highlight-current></el-tree>
- 初始化时加载数据转化树形-(src/views/employee/index.vue)
methods: {
async getDepartment() {
//递归将列表转化成树
const result = this.getDepartment();
console.log(result);
this.depts = transListToTreeData(await getDepartment(), 0);
},
},
7.员工管理-选中首个节点
- 在data中声明一个记录id的参数-代码位置(src/views/employee/index.vue)
data(){
return{
//存查询参数
queryParams:{
departmentId:null
}
}
}
- 因为后面的查询会有很多查询条件，到时候查询条件都会聚合到一起，所以使用一个公共的对象来管理更方便和合适
- 初始化时首个id节点，并且选中-代码位置(src/views/employee/index.vue)
data () {
return {
// 存储查询参数
queryParams: {
departmentId: null
}
}
}
- 初始化时首个id节点，并且选中-代码位置(src/views/employee/index.vue)
methods:{
async getDepartment(){
this.depts = transListToTreeData(await getDepartment(),0)
this.queryParams.departmentId = this.depts[0].id
this.$nextTick(()=>{
this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId)
})
}
}
-监听树组件的节点切换事件-代码位置(src/views/employee/index.vue)
<el-tree ref="deptTree"
:data="depts"
:props="defaultProps"
default-expand-all
expand-on-click-node="false"
highlight-current
@current-change="selectNode"
></el-tree>
- 里需要明白，需要给定node-key属性，否则setCurrentKey方法不知道设置的是哪个字段的值
- 切换节点时再次记录id-代码位置(src/views/employee/index.vue)
selectNode(node){
this.queryParams.departmentId = node.id
}
8.员工管理-员工列表结构
- 右侧列表页面结构-代码位置(src/views/employee/index.vue)
<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>
9.员工管理-获取员工数据
- 获取员工数据的API-代码位置(src/api/employee.js)
export function getEmployeeList(params) {
return request({
url: '/sys/user',
params // 地址参数 查询参数
})
}
- 声明一个list数据进行接受list-代码位置(src/views/employee/index.vue)
data () {
return {
list: []
}
}
- 初始化后获取右侧表格数据-代码位置(src/views/employee/index.vue)
methods: {
async getDepartment() {
// 递归方法 将列表转化成树形
// let result = await getDepartment()
this.depts = transListToTreeData(await getDepartment(), 0)
this.queryParams.departmentId = this.depts[0].id
// 设置选中节点
// 树组件渲染是异步的 等到更新完毕
this.$nextTick(() => {
// 此时意味着树渲染完毕
this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId)
})
// 这个时候参数 记录了id
this.getEmployeeList()
},
// 获取员工列表的方法
async getEmployeeList() {
const { rows } = await getEmployeeList(this.queryParams)
this.list = rows
}
}
- 切换节点时，获取右侧表格数据-代码位置(src/views/employee/index.vue)
async getDepartment() {
//递归将列表转化成树
const result = this.getDepartment();
console.log(result);
this.depts = transListToTreeData(await getDepartment(), 0);
this.queryParams.departmentId = this.depts[0].id
//设置选中节点
//树组件渲染是异步的 等到更新完毕
this.$nextTick(() => {
this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId)
})
//
this.getEmployeeList()
},
selectNode(node) {
this.queryParams.departmentId = node.id //重新记录参数
this.getEmployeeList()
},
//获取员工列表
async getEmployeeList(){
const { rows } = await getEmployeeList(this.queryParams)
this.list = rows;
}
- 绑定表格-代码位置(src/views/employee/index.vue)
<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>
10.员工管理-头像和聘用形式的处理
- 头像的设置-代码位置(src/views/employee/index.vue)
<el-table-column prop="staffPhoto" align="center" label="头像">
<template v-slot="{ row }">
<el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" :size="30" />
<span v-else class="username">{{ row.username?.charAt(0) }}</span>
</template>
</el-table-column>
- 聘用形式的处理-代码位置(src/views/employee/index.vue)
<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>
11.员工管理-员工分页处理
- 定义分页参数(src/views/employee/index.vue)
data(){
return{
queryParams:{
departmentId:null,
page:1,//当前页码
paesize:10
},
total:0,//记录员工的总数
}
}
- 绑定分页参数
<el-pagination
layout="total,prev, pager, next"
:total="total"
:current-page="queryParams.page"
:page-size="queryParams.pagesize"
@current-change="changePage"
/>
- 切换页码事件(src/views/employee/index.vue)
changePage(newPage){
this.queryParams.page = newPage //赋值新页码
this.getEmployeeList()//查询数据
}
- 切换部门时，查询第一页数据(src/views/employee/index.vue)
selectNode(node){
this.queryParams.page = 1;//设置第一页
}
12.员工管理-员工模糊搜索
- 设置模糊搜索的参数字段(src/views/employee/index.vue)
queryParams: {
departmentId: null,
page:1,//当前页码
pageSize:10,
keyword:''//模糊搜索字段
},
- 双向绑定input输入框，监听值改变事件
<el-input v-model="queryParams.keyword" prefix-icon="el-icon-search" size="small" placeholder="输入员工姓名全员搜索" @input="changeValue" />
- input事件只要内容发生变化就会触发，change事件是离开焦点触发
- 值改变查询数据-防抖
changeValue() {
// 单位时间内只执行最后一次
// this的实例上赋值了一个timer的属性
clearTimeout(this.timer) // 清理上一次的定时器
this.timer = setTimeout(() => {
this.queryParams.page = 1
this.getEmployeeList()
}, 300)
}
