Spring Boot+Vue微人事 15 职位管理编辑

凌枫zero

已于 2022-08-16 10:48:03 修改

阅读量239

点赞数 1

分类专栏： Spring Boot+Vue做微人事项目文章标签： spring boot 后端 java

于 2022-08-11 15:18:05 首次发布

本文链接：https://blog.csdn.net/qq_43674132/article/details/126285071

版权

Spring Boot+Vue做微人事项目专栏收录该内容

16 篇文章 21 订阅

订阅专栏

职位管理编辑后端代码

职位管理编辑前端代码

职位管理编辑后端代码

controller

 @PutMapping("/")
    public RespBean updatePositions(@RequestBody Position position){
        if (positionService.updatePositions(position)==1){
            return RespBean.ok("修改成功！");
        }
        return RespBean.error("修改失败！");

    }

service

 public Integer updatePositions(Position position) {
        return positionMapper.updateByPrimaryKeySelective(position);
    }

mapper

int updateByPrimaryKeySelective(Position record);

mapper.xml

 <update id="updateByPrimaryKeySelective" parameterType="com.lqg.vhr.model.Position">
    update position
    <set>
      <if test="name != null">
        `name` = #{name,jdbcType=VARCHAR},
      </if>
      <if test="createDate != null">
        createDate = #{createDate,jdbcType=TIMESTAMP},
      </if>
      <if test="enabled != null">
        enabled = #{enabled,jdbcType=BIT},
      </if>
    </set>
    where id = #{id,jdbcType=INTEGER}
  </update>

职位管理编辑前端代码

编辑逻辑：点击编辑按钮弹出编辑对话框，编辑完成后点确定修改成功

 <el-button
       size="mini"
       @click="showEditView(scope.$index, scope.row)">编辑
</el-button>

调用showEidtView方法显示修改

showEditView(index,data){
    //获取要修改的职称信息
    Object.assign(this.updatePos,data);
    //dialogVisible为true：打开对话框 false：关闭对话框框 
    this.dialogVisible=true
},

对话框代码

<el-dialog
   title="修改职位信息"
   :visible.sync="dialogVisible"
   width="30%"
>
     <div>
        <el-tag>职位名称</el-tag>
         <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="doUpdate">确 定</el-button>
     </span>
</el-dialog>

因为新增和修改的数据不能混用，所以data里面还得在定义修改的数据

        data() {
            return {
                pos: {
                    name: '',//职称名称
                },
                positions: [],//职称列表数据
                updatePos: { 
                    name:'', //修改的职称名称数据
                },
                dialogVisible:false,//打开对话框状态
                multipleSelection: [],//是为了显示要删除多少条数据
            }
        },

点击修改对话框确认按钮调用后台修改方法

            //定义编辑按钮的方法
            doUpdate() {
                this.putRequest('/system/basic/pos/',this.updatePos).then((resp)=>{
                    if (resp){
                        this.initPositions();
                        this.updatePos.name='';
                        this.dialogVisible=false;
                    }
                })
            },

前端职称管理全部代码

<template>
    <div>
        <div>
            <el-input
                    size="small"
                    class="addPosInput"
                    placeholder="添加职位..."
                    prefix-icon="el-icon-plus"
                    @keydown.enter.native="addPosition"
                    v-model="pos.name">
            </el-input>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addPosition()">添加</el-button>
        </div>
        <!--:data="tableDate 是data数据里面的tableData属性。表格里面显示的数据是json数组"-->
        <!--el-table-column:每一列-->
        <div class="posManaMain">
            <el-table
                    :data="positions"
                    stripe
                    size="small"
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 70%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <!--scope.$index:当前操作到第几行 scope.row：这一行对应的json对象 -->
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showEditView(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--: 表示 v-model-->
            <el-button @click="deleteMany" type="danger" size="small" style="margin-top:8px"
                       :disabled="multipleSelection.length==0">批量删除
            </el-button>

            <el-dialog
                title="修改职位信息"
                :visible.sync="dialogVisible"
                width="30%"
            >
               <div>
                   <el-tag>职位名称</el-tag>
                   <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
               </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doUpdate">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DepMana",
        data() {
            return {
                pos: {
                    name: '',//职称名称
                },
                positions: [],//职称列表数据
                updatePos: {
                    name:'', //修改的职称名称数据
                },
                dialogVisible:false,//打开对话框状态
                multipleSelection: [],//多选的条数
            }
        },
        //mounted是一个函数
        mounted() {
            this.initPositions();
        },
        methods: {
            deleteMany() {
                this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    debugger
                    let ids = '?';
                    this.multipleSelection.forEach(item => {
                        ids += 'ids=' + item.id + '&'
                    })

                    console.log("ids:" + ids)

                    this.deleteRequest("/system/basic/pos/" + ids).then(resp => {
                        if (resp) {
                            // 删除成功后，刷新页面
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            handleSelectionChange(val) {
                this.multipleSelection = val
                console.log(val)
            },

            //定义添加按钮的方法 添加的时候要做判断，看用户是否输入的值，如果没输入就给错误提示
            addPosition() {
                if (this.pos.name) {
                    //this.pos ：参数是pos
                    this.postRequest("/system/basic/pos/", this.pos).then(resp => {
                        if (resp) {
                            //添加成功之后需要把表格刷新一下  可以直接用initPositions，重新加载数据
                            this.initPositions();
                            this.pos.name = '';
                        }
                    })
                } else {
                    this.$message.error("职位名称不可以为空");
                }
            },

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

            //定义编辑按钮的方法
            doUpdate() {
                this.putRequest('/system/basic/pos/',this.updatePos).then((resp)=>{
                    if (resp){
                        this.initPositions();
                        this.updatePos.name='';
                        this.dialogVisible=false;
                    }
                })
            },
            //定义删除按钮的方法
            handleDelete(index, data) {
                this.$confirm('此操作将永久删除【' + data.name + '】职位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/pos/" + data.id).then(resp => {
                        if (resp) {
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //定义一个初始化positions的方法
            initPositions() {
                //发送一个get请求去获取数据 请求地址是"/system/basic/pos/"
                this.getRequest("/system/basic/pos/").then(resp => {
                    //判断如果resp存在的话，请求成功
                    if (resp) {
                        //就把positions的值赋值歌resp就行了
                        this.positions = resp;
                    }
                })
            }
        }
    }
</script>

<style>
    .addPosInput {
        width: 300px;
        margin-right: 8px;

    }

    .posManaMain {
        margin-top: 10px;
    }
</style>