用Spring Boot+Vue做微人事项目第十三天

用Spring Boot Vue做微人事项目第十三天

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

用Spring Boot Vue做微人事项目第十三天

选择组件并添加

效果图

后端更新

选择组件并添加

el-dialog标签

代码语言：javascript复制

<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="handleEdit(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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

通过axios发送更新请求 如果成功返回数据的话

重新加载
将对话框中的name设置为初始值’’
将dialog对话框隐藏

代码语言：javascript复制

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

效果图

后端更新

controller

代码语言：javascript复制

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

    }

service

代码语言：javascript复制

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

dao

代码语言：javascript复制

 int updateByPrimaryKeySelective(Position record);

mapper.xml

代码语言：javascript复制

<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>

jqueryui 网站 spring springboot vue.js

0 人点赞