【微人事项目笔记】9、职位管理前端页面开发
程序员文章站
2022-05-18 18:35:57
...
整体效果如下,
1、创建SysBasic.vue
参考element-ui
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="部门管理" name="first"><SysBasicDepManager></SysBasicDepManager></el-tab-pane>
<el-tab-pane label="职位管理" name="second"><SysBasicPosManager></SysBasicPosManager></el-tab-pane>
<el-tab-pane label="职称管理" name="third"><SysBasicJobLevelManager></SysBasicJobLevelManager></el-tab-pane>
<el-tab-pane label="奖惩规则" name="third2"><SysBasicEcManager></SysBasicEcManager></el-tab-pane>
<el-tab-pane label="权限组" name="fourth"><SysBasicPermissManager></SysBasicPermissManager></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import SysBasicDepManager from "../components/SysBasicDepManager";
import SysBasicPosManager from "../components/SysBasicPosManager";
import SysBasicEcManager from "../components/SysBasicEcManager";
import SysBasicJobLevelManager from "../components/SysBasicJobLevelManager";
import SysBasicPermissManager from "../components/SysBasicPermissManager";
export default {
name: "SysBasic",
data() {
return{
activeName:'first'
}
},
components:{
SysBasicDepManager,
SysBasicPosManager,
SysBasicEcManager,
SysBasicJobLevelManager,
SysBasicPermissManager
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
}
</script>
<style scoped>
</style>
2、创建SysBasicPosManager.vue组件
<template>
<div>
<div style="margin-bottom: 10px;display: flex">
<el-input
size="small"
style="width: 300px;margin-right: 8px"
placeholder="添加职位..."
prefix-icon="el-icon-plus"
v-model="pos.name">
</el-input>
<el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
</div>
<div>
<el-table
:data="positions"
stripe
border
size="small"
style="width: 600px"
@selection-change="handleSelectionChange">
<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"
label="创建时间">
</el-table-column>
<el-table-column label="操作">
<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>
<el-button style="display:flex; margin-top: 8px" size="small" type="danger"
@click="deleteManySelection" :disabled="multipleSelection.length==0">批量删除</el-button>
</div>
<el-dialog
title="修改职位"
:visible.sync="dialogVisible"
width="30%">
<div>
<el-tag>职位名称</el-tag>
<el-input class="updataPosInput" 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>
</template>
<script>
export default {
name: "SysBasicPosManager",
data() {
return {
pos: {
name: ''
},
positions: [],
dialogVisible:false,
updatePos:{
name:''
},
multipleSelection:[]
}
},
methods: {
deleteManySelection() {
this.$confirm('此操作将执行批量删除,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = '?';
this.multipleSelection.forEach(item=>{
ids += 'ids=' + item.id + '&'
});
this.deleteRequest("/system/basic/pos/delManyPositionByIds/" + ids).then(resp => {
if (resp.obj) {
this.initPositions();
let opsNames = ' ';
if (resp.obj instanceof Array && resp.obj.length > 0) {
resp.obj.forEach(idx=>{
this.multipleSelection.forEach(item=>{
if (idx == item.id) {
opsNames += item.name + ' '
}
});
});
this.$message.error("职位"+ opsNames + "与其他表有关联")
}
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
doUpdate() {
this.postRequest("/system/basic/pos/savePosition",this.updatePos).then(resp=>{
if (resp) {
this.initPositions()
this.updatePos.name = ''
this.dialogVisible = false
}
})
},
handleEdit(index, data){
// this.updatePos = data
Object.assign(this.updatePos, data)
this.dialogVisible = true
},
handleDelete(index, data) {
this.$confirm('此操作将删除【' + data.name + '】, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest("/system/basic/pos/delPositionById?id=" + data.id).then(resp => {
if (resp.obj) {
this.initPositions()
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
},
addPosition() {
if (this.pos.name) {
this.postRequest("/system/basic/pos/savePosition", this.pos).then(resp => {
if (resp) {
this.initPositions()
this.pos.name = ''
}
})
} else {
this.$message.error("职位名称不能为空!")
}
},
initPositions() {
this.getRequest("/system/basic/pos/queryAllPositions").then(resp => {
if (resp && resp.obj) {
this.positions = resp.obj
}
})
}
},
mounted() {
this.initPositions()
}
}
</script>
<style scoped>
.updataPosInput{
width: 200px;
margin-left: 8px;
}
</style>