微人事-基础信息设置-职称管理前后端接口对接

最新推荐文章于 2021-05-07 22:01:58 发布
最新推荐文章于 2021-05-07 22:01:58 发布
阅读量214 收藏 2
点赞数
分类专栏： 项目 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39232166/article/details/107994393
版权

职称管理前后端接口对接

查询数据

后端数据，前端存放的位置

放在table的jls中 下一步就是取到后端数据 放到data中
:data="jls"

<template>
   <div>
      <div>
         <el-input size="small" v-model="jl.name" style="width: 300px" prefix-icon="el-icon-plus" placeholder="添加职称..."></el-input>
         <el-select v-model="jl.titleLevel" placeholder="职称等级" size="small" style="margin-left: 5px;margin-right: 5px">
            <el-option
                    v-for="item in titleLevels"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
         </el-select>
         <el-button icon="el-icon-plus" type="primary" size="small">添加</el-button>
      </div>
      <div style="margin-top: 10px">
         <el-table
              :data="jls"
              size="small"
              border
              style="width: 80%">
         <el-table-column
                 prop="id"
                 label="编号"
                 width="55">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="职称名称"
                 width="150">
         </el-table-column>
         <el-table-column
                 prop="titleLevel"
                 label="职称级别">
         </el-table-column>
         <el-table-column
                 prop="createDate"
                 label="创建时间">
         </el-table-column>
         <el-table-column
                 laber="操作"
                 label="创建时间">
            <template slot-scope="scope">
               <el-button size="small">编辑</el-button>
               <el-button size="small" type="danger">删除</el-button>
            </template>
         </el-table-column>
       </el-table>
      </div>
   </div>
</template>

<script>
    export default {
        name: "JobLevelMana",
       data(){
           return{
              jls:[],
              jl:{
                 name:'',
                 titleLevel:''
              },
              titleLevels:[
                      '正高级',
                      '副高级',
                      '中级',
                      '初级',
                      '员级'
              ]
           }
       }
    }
</script>

<style scoped>

</style>

取得数据并放到data中

此处的mounted是方法methods是属性

<script>
    export default {
        name: "JobLevelMana",
       data(){
           return{
              jls:[],
              jl:{
                 name:'',
                 titleLevel:''
              },
              titleLevels:[
                      '正高级',
                      '副高级',
                      '中级',
                      '初级',
                      '员级'
              ]
           }
       },
       mounted() {
           this.initJls();
       },
       methods:{
           initJls(){
              this.getRequest("/system/basic/jobLevel/").then(resp=>{
                 if (resp){
                     this.jls=resp;
                 }
              })

           }
       }
    }
</script>

效果图下
依然是日期问题
在这里插入图片描述
在jobLevel实体上使用

    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "Asia/Shanghai")
    public Date getCreateDate() {
        return createDate;
    }

效果图下
在这里插入图片描述

添加数据

给按钮添加事件

前

    <el-button icon="el-icon-plus" type="primary" size="small">添加</el-button>

后

  <el-button icon="el-icon-plus" type="primary" size="small" @click="addJobLevel">添加</el-button>

判断若为空字符串返回false，否则重新进行初始化操作，并将name和titleLevel质空

       methods: {
          addJobLevel() {
             if (this.jl.name && this.jl.titleLevel) {
                this.postRequest("/system/basic/jobLevel/", this.jl).then(resp => {
                   if (resp) {
                      this.initJls();
                   }
                })
             } else {
                this.$message.error("添加字段不可以为空")
             }
          },
          initJls() {
             this.getRequest("/system/basic/jobLevel/").then(resp => {
                if (resp) {
                   this.jls = resp;
                   this.jl = {
                      name: '',
                      titleLevel: ''
                   }
                }
             })
          }
       }

删除数据

删除在表格中操作，先设置点击事件

前

<template slot-scope="scope">
<el-button size="small">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>

后

<template slot-scope="scope">
<el-button size="small">编辑</el-button>
<el-button size="small" type="danger" @click="deleteHander(scope.row)">删除</el-button>
</template>

          deleteHander(data){
             this.$confirm('此操作将删除【'+data.name+'】职称, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(() => {
                this.deleteRequest("/system/basic/jobLevel/"+data.id).then(resp=>{
                   if (resp) {
                      this.initJls();
                   }
                })
             }).catch(() => {
                this.$message({
                   type: 'info',
                   message: '已取消删除'
                });
             });
          },

编辑数据

添加是否可用
boolean值需要自定义表格内容的方式来展示

<template>
   <div>
      <div>
         <el-input size="small" v-model="jl.name" style="width: 300px" prefix-icon="el-icon-plus" placeholder="添加职称..."></el-input>
         <el-select v-model="jl.titleLevel" placeholder="职称等级" size="small" style="margin-left: 5px;margin-right: 5px">
            <el-option
                    v-for="item in titleLevels"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
         </el-select>
         <el-button icon="el-icon-plus" type="primary" size="small" @click="addJobLevel">添加</el-button>
      </div>
      <div style="margin-top: 10px">
         <el-table
              :data="jls"
              size="small"
              border
              style="width: 80%">
         <el-table-column
                 prop="id"
                 label="编号"
                 width="55">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="职称名称"
                 width="150">
         </el-table-column>
         <el-table-column
                 prop="titleLevel"
                 label="职称级别">
         </el-table-column>
         <el-table-column
                 prop="createDate"
                 label="创建时间">
         </el-table-column>
            <el-table-column
                    label="是否启用">
               <template slot-scope="scope">
                  <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
                  <el-tag v-else type="warning">未启用</el-tag>
               </template>
            </el-table-column>
         <el-table-column
                 laber="操作"
                 label="创建时间">
            <template slot-scope="scope">
               <el-button size="small">编辑</el-button>
               <el-button size="small" type="danger" @click="deleteHander(scope.row)">删除</el-button>
            </template>
         </el-table-column>
       </el-table>
      </div>
   </div>
</template>

<script>
    export default {
        name: "JobLevelMana",
       data(){
           return{
              jls:[],
              jl:{
                 name:'',
                 titleLevel:''
              },
              titleLevels:[
                      '正高级',
                      '副高级',
                      '中级',
                      '初级',
                      '员级'
              ]
           }
       },
       mounted() {
           this.initJls();
       },
       methods: {
          deleteHander(data){
             this.$confirm('此操作将删除【'+data.name+'】职称, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(() => {
                this.deleteRequest("/system/basic/jobLevel/"+data.id).then(resp=>{
                   if (resp) {
                      this.initJls();
                   }
                })
             }).catch(() => {
                this.$message({
                   type: 'info',
                   message: '已取消删除'
                });
             });
          },
          addJobLevel() {
             if (this.jl.name && this.jl.titleLevel) {
                this.postRequest("/system/basic/jobLevel/", this.jl).then(resp => {
                   if (resp) {
                      this.initJls();
                   }
                })
             } else {
                this.$message.error("添加字段不可以为空")
             }
          },
          initJls() {
             this.getRequest("/system/basic/jobLevel/").then(resp => {
                if (resp) {
                   this.jls = resp;
                   this.jl = {
                      name: '',
                      titleLevel: ''
                   }
                }
             })
          }
       }
    }
</script>

<style scoped>

</style>

显示效果如下
在这里插入图片描述
这样编辑即需要修改职称名称，职称级别，是否启用

点击编辑按钮 调用方法showEditView并将row信息传入

               <el-button size="small" @click="showEditView(scope.row)">编辑</el-button>

拷贝数据到udpateJl中 即显示在dialog中的本行信息 将dialogVisible设置为true 显示dialog

          showEditView(data){
             Object.assign(this.updateJl, data);
             this.dialogVisible = true;
          },

显示的修改框

<el-dialog
              title="修改职称"
              :visible.sync="dialogVisible"
              width="30%">
         <div>
            <table>
               <tr>
                  <td><el-tag>职称名称</el-tag></td>
                  <td><el-input size="small" v-model="updateJl.name"></el-input></td>
               </tr>
               <tr>
                  <td><el-tag>职称级别</el-tag></td>
                  <el-select v-model="updateJl.titleLevel" placeholder="职称等级" size="small" style="margin-left: 5px;margin-right: 5px">
                     <el-option
                             v-for="item in titleLevels"
                             :key="item"
                             :label="item"
                             :value="item">
                     </el-option>
                  </el-select>
               </tr>
               <tr>
                  <td><el-tag>是否可见</el-tag></td>
                  <el-switch
                          v-model="updateJl.enabled"
                          active-text="启用"
                          inactive-text="禁用">
                  </el-switch>
               </tr>
            </table>
         </div>

使用dialogVisible属性控制显示与否

点击取消 设置 false 不显示

         <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
         </span>

确认按钮调用更新

<el-button size="small" type="primary" @click="doUpdate">确 定</el-button>

如果返回正常 则初始化当前页面 并将dialog设置为false不可见

        doUpdate(){
             this.putRequest("/system/basic/jobLevel/",this.updateJl).then(resp=>{
                if (resp) {
                   this.initJls()
                   this.dialogVisible=false;
                }
             })
          },

整体页面代码如下

<template>
   <div>
      <div>
         <el-input size="small" v-model="jl.name" style="width: 300px" prefix-icon="el-icon-plus" placeholder="添加职称..."></el-input>
         <el-select v-model="jl.titleLevel" placeholder="职称等级" size="small" style="margin-left: 5px;margin-right: 5px">
            <el-option
                    v-for="item in titleLevels"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
         </el-select>
         <el-button icon="el-icon-plus" type="primary" size="small" @click="addJobLevel">添加</el-button>
      </div>
      <div style="margin-top: 10px">
         <el-table
              :data="jls"
              size="small"
              border
              style="width: 80%">
         <el-table-column
                 prop="id"
                 label="编号"
                 width="55">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="职称名称"
                 width="150">
         </el-table-column>
         <el-table-column
                 prop="titleLevel"
                 label="职称级别">
         </el-table-column>
         <el-table-column
                 prop="createDate"
                 label="创建时间">
         </el-table-column>
            <el-table-column
                    label="是否启用">
               <template slot-scope="scope">
                  <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
                  <el-tag v-else type="warning">未启用</el-tag>
               </template>
            </el-table-column>
         <el-table-column
                 laber="操作"
                 label="创建时间">
            <template slot-scope="scope">
               <el-button size="small" @click="showEditView(scope.row)">编辑</el-button>
               <el-button size="small" type="danger" @click="deleteHander(scope.row)">删除</el-button>
            </template>
         </el-table-column>
       </el-table>
      </div>
      <el-dialog
              title="修改职称"
              :visible.sync="dialogVisible"
              width="30%">
         <div>
            <table>
               <tr>
                  <td><el-tag>职称名称</el-tag></td>
                  <td><el-input size="small" v-model="updateJl.name"></el-input></td>
               </tr>
               <tr>
                  <td><el-tag>职称级别</el-tag></td>
                  <el-select v-model="updateJl.titleLevel" placeholder="职称等级" size="small" style="margin-left: 5px;margin-right: 5px">
                     <el-option
                             v-for="item in titleLevels"
                             :key="item"
                             :label="item"
                             :value="item">
                     </el-option>
                  </el-select>
               </tr>
               <tr>
                  <td><el-tag>是否可见</el-tag></td>
                  <el-switch
                          v-model="updateJl.enabled"
                          active-text="启用"
                          inactive-text="禁用">
                  </el-switch>
               </tr>
            </table>
         </div>
         <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
         </span>
      </el-dialog>
   </div>
</template>

<script>
    export default {
        name: "JobLevelMana",
       data(){
           return{
              updateJl:{
                  name:'',
                  titleLevel:'',
                  enabled:false
              },
              dialogVisible:false,
              jls:[],
              jl:{
                 name:'',
                 titleLevel:''
              },
              titleLevels:[
                      '正高级',
                      '副高级',
                      '中级',
                      '初级',
                      '员级'
              ]
           }
       },
       mounted() {
           this.initJls();
       },
       methods: {
          doUpdate(){
             this.putRequest("/system/basic/jobLevel/",this.updateJl).then(resp=>{
                if (resp) {
                   this.initJls()
                   this.dialogVisible=false;
                }
             })
          },
          showEditView(data){
             Object.assign(this.updateJl, data);
             this.dialogVisible = true;
          },
          deleteHander(data){
             this.$confirm('此操作将删除【'+data.name+'】职称, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(() => {
                this.deleteRequest("/system/basic/jobLevel/"+data.id).then(resp=>{
                   if (resp) {
                      this.initJls();
                   }
                })
             }).catch(() => {
                this.$message({
                   type: 'info',
                   message: '已取消删除'
                });
             });
          },
          addJobLevel() {
             if (this.jl.name && this.jl.titleLevel) {
                this.postRequest("/system/basic/jobLevel/", this.jl).then(resp => {
                   if (resp) {
                      this.initJls();
                   }
                })
             } else {
                this.$message.error("添加字段不可以为空")
             }
          },
          initJls() {
             this.getRequest("/system/basic/jobLevel/").then(resp => {
                if (resp) {
                   this.jls = resp;
                   this.jl = {
                      name: '',
                      titleLevel: ''
                   }
                }
             })
          }
       }
    }
</script>

<style scoped>

</style>
azto
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微人事-基础信息设置-职称管理后端接口设计
azto的博客
07-02 188
职称管理后端接口设计查询接口新增接口更新接口删除接口controllerservice 查询接口 controller @GetMapping("/") public List<JobLevel> getAllJobLevels() { return jobLevelService.getAllJobLevels(); } service public List<JobLevel> getAllJobLevels() {
微人事人力资源管理系统
03-17
微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot+Vue 开发，项目加入常见的企业级应用所涉及到的技术点，例如 Redis、RabbitMQ 等。 后端技术栈 Spring Boot Spring Security MyBatis MySQL Redis RabbitMQ Spring Cache WebSocket 前端技术栈 Vue ElementUI axios vue-router Vuex WebSocket vue-cli4
微人事项目学习之职位管理前后端接口对接
人生错觉
03-08 303
职位管理前后端接口对接
微人事（4）- 前后端接口对接
一角残叶的博客
08-10 721
1 前后端接口对接 1.1 安装 axios 1.2 vue项目 api.js import axios from 'axios' import {Message} from 'element-ui' /*响应的拦截器*/ axios.interceptors.response.use(success=>{ if(success.status && success.status ==200 && success.data.status==500){
职称详解
顺其自然~专栏
11-10 3403
一、什么是职称               职称（Professional Title）最初源于职务名称，理论上职称是指专业技术人员的专业技术水平、能力，以及成就的等级称号，是反映专业技术人员的技术水平、工作能力的标志。随着社会发展的需要，逐步产生了对专业技术人员的水平评价与聘任岗位相分离的需要，即“评聘分离”，职称的概念也相应发生了变化。聘任的岗位称之为“专业技术职务”，简称职务；而专业技术人...
基于Go-Zero + Ant Design Pro的前后端分离微服务管理系统的前端模
最新发布
07-03
而Go-Zero的API接口设计和文档生成功能，方便前端与后端进行接口对接。 在微服务管理系统中，前端通常需要与多个微服务进行交互，获取和展示不同服务的数据。利用Go-Zero的服务注册与发现功能，前端可以动态地找到...
Coo1Runner-Ⅱ器件实现8051微控制器接口
11-17
Coo1Runner-Ⅱ器件则提供了一个平台，使得8051微控制器能够与复杂可编程逻辑器件（CPLD）无缝对接，以实现更灵活和定制化的系统设计。本文将详细阐述如何利用Coo1Runner-Ⅱ器件来实现8051微控制器接口，并探讨其在...
前后端开发接口文档
03-15
课程提供了前后端开发接口文档（采用 Swagger 语言进行编写），并与 Nginx 进行了整 合。双击 Nginx 执行文件启动后，在地址栏输入 http://localhost:801 即可访问 API 文档
前后端对接-使用个人博客项目说明.md
02-02
前后端对接-使用个人博客项目说明.md
基于Springboot+MybatisPlus+Vue前后端分离的人事招聘管理系统
06-07
本文将深入探讨一个基于Springboot+MybatisPlus+Vue技术栈构建的前后端分离的人事招聘管理系统，旨在帮助开发者理解并掌握这一系统的实现原理和技术要点。 一、Springboot框架介绍 Springboot是由Pivotal团队提供的...
微人事项目
04-24
人事管理系统——微人事。主要目的是通过这个项目加强各个部门之间的协调从而提高工作效率。该项目是一个前后端分离的开发方式，前端使用vue来构建单页面应用， 单页面应用通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个页面。vue是一套用于构建用户界面的渐进式框架，采用MVVM的设计模式。而后端使用Spring Boot开发，使用到了Spring Security实现权限认证、 WebSocket实现消息代理等。
微人事系统教程源代码vhr-master.zip
11-14
权限认证采用SpringSecurity，数据库访问持久层用MyBatis，Redis实现认证信息缓存，MySql数据库，前端使用VUE，项目管理用MAVEN
职业分类json数据
04-08
自己从整理出来的职业分类json数据，有点和招聘网站中的职业分类相似，
工作职位分类json数据（树结构）
09-08
工作职位分类树结构 字段：id,title,pid,children 例[{"id":1001,"title":"销售","pid":null,"children":[{"id":10010001,"title":"销售代表","pid":1001,"children":null},{"id":10010002,"title":"销售助理",……
微人事-服务端菜单接口设计
azto的博客
06-01 234
服务端菜单接口设计通过id来获取菜单 通过id来获取菜单 控制层 由于前端数据不可信所以不能从前端取用户id package com.akk.vhr.controller; import com.akk.vhr.model.Menu; import com.akk.vhr.service.MenuService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bin
微人事项目学习之导航菜单接口制作
人生错觉
03-04 397
导航菜单接口制作
微人事vhr 前端篇 -5 员工资料
yu77777777777的博客
05-07 225
只记录自己不熟悉的 本文不适合他人查阅 本想着很快就能梳理一遍，结果比想象中的难啊 系统管理-操作员管理
微人事vhr 前端篇 -6 薪资管理
yu77777777777的博客
05-07 177
只记录自己不熟的，不适合他人查阅！！ 工资账套 使用Table表格中的多级表 MessageBox弹框 Steps步骤条 员工账套 Tooltip文字提示
微人事-总结
一个还在上学的程序缘
01-12 4967
vhr项目：地址 目前跟随江南一点雨大佬已经完成微人事的百分之80，因为一直在赶进度，所以得做个总结。 已完成模块 1.登录模块 2.权限组 3.职称管理 4.职位管理 5.部门管理 6.基本资料 7.操作员管理 未完成模块 1.邮件发送 2.工资账套 3.员工聊天 已完成界面： ...
获取表数据--前后端接口对接-vue
03-10
关于获取表数据的前后端接口对接，我可以为您提供一些建议。首先，您可以在后端编写一个API接口，用于查询数据库中的表数据，并将数据以JSON格式返回给前端。然后，在前端使用Vue框架，通过axios库发送HTTP请求，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值