職稱管理前端頁面設(shè)計
在職稱管理頁面添加輸入框
export default {
name: "JobLevelMarna",
data(){
return{
Jl:{
name:""
}
}
}
}
效果圖
添加一個下拉框
v-model的值為當(dāng)前被選中的el-option的 value 屬性值
<el-select v-model="Jl.titlelevel" placeholder="職稱等級...." size="small" style="margin-left: 10px;margin-right: 10px">
<el-option
v-for="item in titlelevels"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
data(){
return{
Jl:{
name:"",
titlelevel:"",
},
titlelevels:[
'正高級',
'副高級',
'中級',
'初級',
'員級',
]
}
}
效果圖
添加按鈕
<el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>
效果圖
增加數(shù)據(jù)表格
</el-option>
</el-select>
<el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>
</div>
<div>
<el-table
:data="jls"
stripe
style="width: 80%">
<el-table-column
prop="id"
label="編號"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="職稱名稱"
width="180">
</el-table-column>
<el-table-column
prop="titlelevel"
label="職稱級別">
</el-table-column>
<el-table-column
prop="createData"
label="創(chuàng)建時間">
</el-table-column>
<el-table-column
label="操作">
<template solt="scope"->
<el-button >編輯</el-button>
<el-button type="deng">修改</el-button>
</template>
</el-table-column>
</el-table>
添加一個刪除，修改按鈕
職位管理后端接口設(shè)計
創(chuàng)建一個JobLevelConroller類
JobLevelConroller
@RestController
@RequestMapping("/system/basic/joblevel")
public class JobLevelController {
@Autowired
JobLevelService jobLevelService;
@GetMapping("/")
public List<JObLevel> getAllJobLevels(){
return jobLevelService.getAllJobLevels();
}
@PostMapping("/")
public RespBean addJobLevels(@RequestBody JObLevel jObLevel){
if(jobLevelService.addJobLevels(jObLevel)==1){
return RespBean.ok("添加成功") ;
}
return RespBean.err("添加失敗");
}
@PutMapping("/")
public RespBean updateJobLevels(@RequestBody JObLevel jObLevel){
if(jobLevelService.updateJobLevels(jObLevel)==1){
return RespBean.ok("更新成功") ;
}
return RespBean.err("更新失敗");
}
@DeleteMapping("/{id}")
public RespBean deleteJobLevelById(@PathVariable Integer id){
if(jobLevelService.deleteJobLevelById(id)==1){
return RespBean.ok("刪除成功") ;
}
return RespBean.err("刪除失敗");
}
}
JobLevelService
@Service
public class JobLevelService {
@Autowired
JObLevelMapper jObLevelMapper;
public List<JObLevel> getAllJobLevels() {
return jObLevelMapper.getAllJobLevels();
}
public int addJobLevels(JObLevel jObLevel) {
jObLevel.setCreatedate(new Date());
jObLevel.setEnabled(true);
return jObLevelMapper.insert(jObLevel);
}
public int updateJobLevels(JObLevel jObLevel) {
return jObLevelMapper.updateByPrimaryKeySelective(jObLevel);
}
public int deleteJobLevelById(Integer id) {
return jObLevelMapper.deleteByPrimaryKey(id);
}
}
JoblevelMapper.xml
添加個查詢所有Joblevel，其它接口用自動生成的mapper
<select id="getAllJobLevels" resultMap="BaseResultMap">
select * from joblevel;
</select>
用PostMan測試看看接口是否用問題
前后端接口對接
展示數(shù)據(jù)庫數(shù)據(jù)
查詢所有數(shù)據(jù)連接后端接口
methods:{
JobLevelAll(){
this.getRequest("/system/basic/joblevel/").then(resp=>{
this.jls=resp;
})
}
},
mounted(){
this.JobLevelAll()
}
}
添加操作數(shù)據(jù)連接后端
添加按鈕事件
輸入需要添加的數(shù)據(jù)
添加事件函數(shù)進行
addLevel(){
this.postRequest("/system/basic/joblevel/",this.Jl).then(resp=>{
if (resp){
this.JobLevelAll();
this.Jl.name="";
this.Jl.titlelevel=""
}
})
},
刪除操作
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
handleDelete(index,data){
this.deleteRequest("/system/basic/joblevel/"+data.id).then(resp=>{
if (resp){
this.JobLevelAll();
}
})
},
修改操作
添加對話框
對話框添加輸入框和選擇框
<el-dialog
title="修改職稱"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<div>
<div>
<el-tag>職稱名字</el-tag>
<el-input v-model="toUpdateJobLevel.name" style="width: 201px; margin-left: 8px" size="small"></el-input>
</div>
<div style="margin-top: 15px">
<el-tag>職稱等級</el-tag>
<el-select size="small" style="margin-left: 8px" v-model="toUpdateJobLevel.titlelevel" placeholder="請選擇">
<el-option
v-for="item in titlelevels"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click=updateJobLevel>確 定</el-button>
</span>
</el-dialog>
添加點擊事件
<template slot-scope="scope">
<el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
當(dāng)點擊編輯的時候應(yīng)該彈出對話框 ，添加這個dialogVisible 變量，默認(rèn)是關(guān)閉的
點擊編輯彈框，給編輯點擊事件的函數(shù)里dialogVisible 變量
賦值true 彈框 
定義toUpdateJobLevel保存 Jl 原數(shù)據(jù)
點擊編輯拷貝原來數(shù)據(jù)到toUpdateJobLevel
輸入框和選擇框輸入數(shù)據(jù)，確認(rèn)觸發(fā)點擊事件
updateJobLevel(){
this.putRequest("/system/basic/joblevel/",this.toUpdateJobLevel).then(resp=>{
if(resp){
this.JobLevelAll();
this.dialogVisible=false
}
})
},
這樣做的原因是因為要是直接用那個Jl數(shù)據(jù)會出現(xiàn)一些問題：會出現(xiàn)表格和彈框數(shù)據(jù)輸入，表格也會變，然后就是彈框數(shù)據(jù)，取消的時候數(shù)據(jù)還是彈框之前輸入取消的數(shù)據(jù)，導(dǎo)致表格的數(shù)據(jù)需要刷新才能恢復(fù)之前的數(shù)據(jù)。
具體執(zhí)行流程:
用戶點擊編輯彈修出改框
把原來數(shù)據(jù)拷貝到toUpdateJobLevel
如果用戶點擊確認(rèn)，把數(shù)據(jù)傳給服務(wù)器，重新查詢數(shù)據(jù)展示到頁面
否則用戶點擊了取消，展示還是原來的數(shù)據(jù)
啟用標(biāo)簽和按鈕
在表格里進行添加是否啟用的標(biāo)簽
<el-table-column
label="是否啟用">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.enabled">已啟用</el-tag>
<el-tag type="danger" v-else>未啟用</el-tag>
</template>
</el-table-column>
在變量對象里進行添加字段
對話框里進行添加
<div style="margin-top: 8px">
<el-tag>是否啟用</el-tag>
<el-switch
style="margin-left: 8px"
v-model="toUpdateJobLevel.enabled"
active-text="啟用"
inactive-text="禁用">
</el-switch>
</div>
職稱批量刪除實現(xiàn)
后端代碼實現(xiàn)
JobLevelController
@DeleteMapping("/")
public RespBean deleteJobLevels(Integer[] ids){
if(jobLevelService.deleteJobLevels(ids)==ids.length){
return RespBean.ok("刪除成功") ;
}
return RespBean.err("刪除失敗");
}
JobLevelService
public int deleteJobLevels(Integer[] ids) {
return jObLevelMapper.deleteJobLevels(ids);
}
JObLevelMapper
int deleteJobLevels( @Param("ids") Integer[] ids);
JobLevelMapper,xml
<delete id="deleteJobLevels" >
delete from joblevel
where id in
<foreach collection="ids" item="id" separator="," open="(" close=")">
#{id}
</foreach>;
</delete>
批量刪除前后端對接
添加一個批量刪除按鈕
添加一個點擊事件
文章來源：http://www.zghlxwxcb.cn/news/detail-660639.html
添加多選框
selection-change 當(dāng)選擇項發(fā)生變化時會觸發(fā)該事件
文章來源地址http://www.zghlxwxcb.cn/news/detail-660639.html
到了這里，關(guān)于SpringBoot 微人事 職稱管理模塊（十三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
