用Spring Boot+Vue做微人事项目第十三天
目录
选择组件并添加
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 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
export default {
name: "DepMana",
data() {
return {
pos: {
name: ''
},
dialogVisible: false,
updatePos: {
name: ''
},
positions: []
}
},
在组件里面有两个按钮 分别是取消和确定 给与对应的事件
<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对话框隐藏
doUpdate() {
this.putRequest("/system/basic/pos/", this.updatePos).then(resp => {
if (resp) {
this.initPositions();
this.updatePos.name = ''
this.dialogVisible = false
}
})
},
效果图
后端更新
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);
}
dao
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>