微人事-基础信息设置-职位修改操作

最新推荐文章于 2021-03-15 13:18:36 发布

azto

最新推荐文章于 2021-03-15 13:18:36 发布

阅读量511

点赞数

分类专栏：项目文章标签： java

本文链接：https://blog.csdn.net/weixin_39232166/article/details/107017771

版权

项目专栏收录该内容

18 篇文章 3 订阅

订阅专栏

职位修改操作

选择组件并添加

在这里插入图片描述
el-dialog标签

    <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 icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
        </div>

        <div class="posManaMain">
            <el-table :data="positions"
                      border
                      size="small"
                      stripe
                      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="180">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        width="120"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <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>
        </div>
        
        <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 size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>

使用的时候先要保证dialog对话框是隐藏的
所以dialogVisible:false初始赋值为false

<script>
    export default {
        name: "PosMana",
        data(){
            return{
                pos:{
                    name:''
                },
                updatePos:{
                    name:''
                },
                dialogVisible:false,
                positions:[]
            }
        },

在组件里面有两个按钮分别是取消和确定给与对应的事件

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

取消:直接将dialog设置成false 不显示
确定:走doUpdate 方法

通过axios发送更新请求如果成功返回数据的话
1 重新加载
2 将对话框中的name设置为初始值’’
3 将dialog对话框隐藏

 methods:{
            doUpdate(){
                this.putRequest("/system/basic/pos/",this.updatePos).then(resp=>{
                    if (resp) {
                        this.initPositions();
                        this.updatePos.name='';
                        this.dialogVisible=false;
                    }
                })
            },

效果图

在这里插入图片描述

后端更新

controller

    @PutMapping("/")
    public RespBean updatePosition(@RequestBody Position position){
        if (positionService.updatePosition(position) == 1) {
            return RespBean.ok("更新成功");
        }
        return RespBean.error("更新失败");
    }

service

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

mapper.xml

  <update id="updateByPrimaryKeySelective" parameterType="com.akk.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>