后管项目-公司设置页面

后管项目-公司设置页面

1.公司设置-角色管理-删除角色

步骤：

1. 页面搭建
2. 获取数据并渲染到页面上
3. 分页效果
4. 删除角色

页面搭建

…复制粘贴

获取数据并渲染到页面上

步骤：

1. 封装接口
2. 组件中导入并调用
3. 在表格中显示数据

封装接口

api下新建setting.js

import request from '@/utils/request'
/**
 * 获取所有角色信息
 * @param {*} params  {page, pagesize}
 * @returns
 */
export function getRoles(params) {
  return request({
    url: '/api/sys/role',
    method: 'get',
    'params': params
  })
}

组件中导入并调用

// 1. 导入封装好的接口
import { getRoles } from '@/api/setting'

data() {
    return {
      roles: [], // 传入表单中的数据
      total: 0, // 数据总条数
    }
  },
created() {
  // 3. 在钩子函数中调用
    this.loadRoles()
  },
methods: {
  // 2. 调用封装好的接口函数
  async loadRoles() {
      try {
        const res = await getRoles({ page: this.page, pagesize: this.pagesize })
        this.roles = res.data.rows // 表格数据
        this.total = res.data.total // 数据总条数
      } catch (error) {
        this.$message.error(error)
      }
    }
}

在表格中显示数据

数据已经在roles数组中，在el-table标签中添加:data="roles"然后再对应的位置添加prop属性和序号处添加type="index"

分页效果

步骤:

1. 在data中添加当前页码和每页条数数据
2. 绑定分页数据
3. 添加回调函数处理切换页码后数据

<!-- 分页组件
total: 显示条数
current-change: 翻页时执行回调
size-change: 每页几条 改变执行
total： 一共有几条数据
current-page： 当前的页码
page-size： 每页显示几条
page-sizes： 可以自己选择的 每页几条 数据
layout： 整体的布局
-->
<el-pagination
layout="sizes,prev,pager,next"
:current-page="page"
:page-sizes="[1, 2, 3, 4]"
:page-size="pagesize"
:total="total"
@size-change="hSizeChange"
@current-change="hCurrentChange"/>

<script>
data() {
  // 1. 在data中添加当前页码和每页条数数据
    return {
			...
      page: 1, // 当前页码
      pagesize: 2// 每页条数
    }
  },
methods: {
  // 每页几条 改变执行
    hCurrentChange(curPage) {
      // 改变页码
      this.page = curPage
      // 刷新列表
      this.loadRoles()
    },
      // 翻页时执行
    hSizeChange(newPagesize) {
      // 改变条数
      this.pagesize = newPagesize
      // 更改页码为1
      this.page = 1
      // 刷新列表
      this.loadRoles()
    },
</script>

删除角色

步骤：

1. 封装删除角色接口
2. 给删除按钮注册事件并传入id
3. 定义函数删除角色
4. 如果当前表格中只有一条数据, 删除之后自动请求上一页数据，如果页码小于0，说明只剩一页，页码变为1。

封装删除角色接口

/**
 * 删除角色
 * @returns
 */
export function delRole(id) {
  return request({
    url: `/api/sys/role/${id}`,
    method: 'delete'
  })
}

给删除按钮注册事件并传入id

定义函数删除角色

如果当前表格中只有一条数据, 删除之后自动请求上一页数据，如果页码小于0，说明只剩一页，页码变为1。

<!-- 1. 注册点击事件 -->
<el-button size="small" type="danger" @click="hDel(scope.row.id)">删除</el-button>

<script>
// 2. 调用删除角色函数
hDel(id) {
  		// 添加询问框
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用函数
        this.doDel(id)
      }).catch(err => err)
    },
// 3. 封装删除角色函数
async doDel(id) {
      await delRole(id)
      // 提示删除成功
      this.$message.success('删除成功')
      // 如果当前表格中只有一条数据, 删除之后自动请求上一页数据
      if (this.roles.length === 1) {
        // 如果删除之前,当前页面只有一条数据,则当前的页面减一
        this.page--
        if (this.page <= 0) {
          // 如果页码小于0，说明只剩一页，页码变为1
          this.page = 1
        }
      }
      // 刷新列表
      this.loadRoles()
    }
</script>

作业： 让每页的序号不是从1开始，而是延续上一页的序号

element-ui给了我们这样的方法

注册事件,设置函数

<el-table-column label="序号" type="index" :index="addIndex" width="120" />
<script>
// 让每页的页码延续上一页
    addIndex(index) {
      // index由0开始,所以要加1
      index++
      if (this.page > 1) {
        // 第几页,每页几条
        // console.log(this.page, this.pagesize)
        console.log(index, '前')
        index = index + (this.page * this.pagesize) - this.pagesize
        console.log(index, '后')
      }
      return index
    }
</script>

2.公司设置-新增角色

步骤：

1. 在组件中添加弹层和表单内容
2. 给新增角色按钮注册事件，点击显示弹框
3. 封装新增角色功能的api，组件内导入并调用
4. 添加完成之后立即跳转到新增数据的页面

在组件中添加弹层和表单内容

…代码略

给新增角色按钮注册事件，点击显示弹框

// 1. 给新增角色按钮注册事件
<el-button @click="showDialog=false">新增角色</el-button>
// 2. 给弹框添加:visible.sync="showDialog"属性
<el-dialog :visible.sync="showDialog">

封装新增角色功能的api，组件内导入并调用

1. 封装新增角色功能的api

/**
 * @description: 新增角色
 * @param {*} data {name,description}
 * @return {*}
 */
export function addRole(data) {
  return request({
    url: '/api/sys/role',
    method: 'post',
    data
  })
}

2. 在组件中调用

3. 添加完成之后立即跳转到新增数据的页面

async doAdd() {
  		// 1. 调用接口
      await addRole(this.roleForm)
  		// 2. 提示信息
      this.$message.success('添加成功')
      // 3. 关闭弹框
      this.showDialog = false
  		// 4. 添加完成之后立即跳转到新增数据的页面
  		this.total++
      this.page = Math.ceil(this.total / this.pagesize)
			// 5. 刷新列表
      this.loadRole()
    },
hSubmit() {
      // 5. 兜底校验
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          this.doAdd()
        }
      })
    }

3.公司设置-编辑角色

步骤:

1. 区分按钮是编辑还是添加并动态设置标题，点击编辑按钮，展示弹框，数据回填
2. 封装api接口，在组件中导入并调用
3. 关闭弹层数据重置并判断是添加还是编辑

// 1. 注册事件
<el-button size="small" type="primary" @click="hEdit(scope.row)">编辑</el-button>

// 2. data中定义isEdit来判断是添加还是编辑
data() {
	return: {
	// 3. 判断是编辑还是修改
     isEdit: false,
	}
}
methods: {
  hEdit(data) {
      // 1. 打开弹框
      this.showDialog = true
      // 2. 数据回填
      this.roleForm = { ...data }
      // 3. 变为编辑状态
      this.isEdit = true
    },
    async doEdit() {
      try {
        // 1. 发送请求
        await updateRole(this.roleForm)
        // 2. 刷新列表
        this.loadRoles()
        // 3. 提示信息
        this.$message.success('修改成功')
        // 4. 关闭弹框
        this.showDialog = false
      } catch (error) {
        this.$message.error(error)
      }
    },
 		async doAdd() {
      	...
        // 变为添加状态
        this.isEdit = false
      } 
}

封装编辑角色api接口

/**
 * @description: 编辑角色
 * @param {*} data
 * @return {*}
 */
export function updateRole(data) {
  return request({
    url: `/api/sys/role/${data.id}`,
    method: 'put',
    data
  })
}

判断是编辑还是添加

hSubmit() {
      // 兜底校验
      this.$refs.roleForm.validate(valid => {
        // 添加角色
        if (valid) {
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    },

关闭弹层时重置数据

// 1. 注册close事件
<el-dialog ... @close="close">
// 2. 弹层关闭时重置数据
close() {
      this.$refs.roleForm.resetFields()
    }

公司设置页面完成