新增公司管理页 分页设置 新增功能 删除功能

新增公司管理页 配置路由

分页设置

在api新建settings.js中定义接口函数

在settings.vue中 定义函数 发送请求

//  Query ==>查询字符串  地址路径'/sys/role?name=' ==>params

// 路径参数 `sys/role/{id}`

// 请求体 =>post,普通,delete =>data

表格的渲染数据

分页功能的实现

current-page修改当前页

// 控制每页条数
    handleSizeChange(val) {
      // 每次刷新后页码值显示在第一页
      this.pageParams.page = 1
      this.pageParams.pagesize = val
      // 刷新信息
      this.loadRoles()
      console.log(`每页 ${val} 条`)
    },
    // 控制每页显示个数
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.loadRoles()
      console.log(`当前页: ${val}`)
    },

删除功能

在setting.js定义接口函数deleteRole 参数为路径(路径 在路径后传`/${id}`) 

在setting.vue文件中 按需导入接口函数  通过插槽#default="{row}传数据" 

删除按钮绑定点击事件 询问框

 

新增的对话框设置

新增功能

给确定按钮绑定hSubmit

兜底校验

定义接口函数 调用接口函数

关闭弹层

重新加载页面

实现数据的回填 

定义接口函数 根据当前id获取数据 保存到表单 中 

新增功能的bug解决

新增角色不能跳转到指定的页码

设置计算属性最大页码值maxPage和当前页的值个数pageFull

实现新增后将当前页码值改为最大页码值

判断当前页个数是否能够被整除 如果能 page++ total++

数据回填

 

设置编辑和新增控制按钮

isEdit为true时是编辑 false时是新增 

表单校验时判断是否为编辑状态 是 doEdit() 否 doAdd()

 完成编辑

通过:title控制编辑和新增

实现编辑

定义接口函数

定义函数  发送请求 关闭弹层  刷新数据

新建组件

在src/components下面补充创建/PageTools/index.vue ，

全局注册Vue.component('组件名',组件对象)

具名插槽 子组件 <slot name=" abc"></slot> 

父组件 <子组件标签  #abc></子组件标签>

全局注册方法二

封装插件 模块化处理 

获取公司员工数据渲染

在 employee.js中 定义接口函数

sortable 实现表格的数据降序排列