进入Home页面后，左侧导航侧栏分为：员工资料、人事管理、薪资管理、统计管理、系统管理。
在系统管理：基础信息设置、系统管理、操作日志管理、数据库管理…
在基础信息设置（sysBasic.vue）：部门管理(JobleveMana)、职位管理(PostMana)、职称管理、奖罚管理、权限组。
一、基础信息设置
实现目标：
1、定义组件
当一个页面里面有多个选项，可以通过elment组件的标签页来实现。
2、引入组件
在SysBasic.vue下：
在src/components/sys/basic/进行组件开发，写好以后，
通过import引入进来，
</>… 引入到此位置。
components，然后变成组件
- SysBasic.vue
<template>
<div> <!-- activeName= 当打开页面时，要激活的是哪个页面。对应的是下面的name-->
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="部门管理" name="DepMana"><DepMana></DepMana></el-tab-pane>
<el-tab-pane label="职位管理" name="PosMana"><PosMana></PosMana></el-tab-pane>
<el-tab-pane label="职称管理" name="JoblevelMana"><JoblevelMana></JoblevelMana></el-tab-pane>
<el-tab-pane label="奖惩规则" name="EcMana"><EcMana></EcMana></el-tab-pane>
<el-tab-pane label="权限组" name="PermissMana"><PermissMana></PermissMana></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
/* 在src/components/sys/basic/进行组件开发，写好以后，
通过import引入进来，
<DepMana></>... 引入到此位置。
components，然后变成组件——》 */
import DepMana from '../../components/sys/basic/DepMana'
import EcMana from '../../components/sys/basic/EcMana'
import JoblevelMana from '../../components/sys/basic/JoblevelMana'
import PermissMana from '../../components/sys/basic/PermissMana'
import PosMana from '../../components/sys/basic/PosMana'
export default {
name: "SysBasic",
data() {
return {
activeName: 'DepMana'
}
},
components:{
DepMana,
EcMana,
JoblevelMana,
PermissMana,
PosMana
}
}
</script>
<style scoped>
</style>
二、职位管理：
- 职位管理——页面设计（组件编写）
PosMana.vue：
通过PostMana页面的编写页面具体设计，然后在SysBasic.vue里面进行引入，通过export default{ return} 进行展示出去。
<div>
<el-input
size="small"
class="addPosInput"
placeholder="添加职位..."
suffix-icon="el-icon-plus"
@keydown.enter.native="addPosition"
v-model="pos.name">
</el-input> <!-- @click 当点击添加，则触发添加状态 -->
<el-button size="small" icon="el-icon-plus" type="primary" @click="addPosition">添加</el-button>
</div>
<el-button size="small" style="margin-top: 8px" type="danger" :disabled="this.multipleSelection.length==0"
@click="deleteMany">批量删除
</el-button>
<el-dialog
title="编辑职位"
:visible.sync="dialogVisible"
width="30%">
<div>
<el-tag>职位名称</el-tag>
<el-input v-model="updatePos.name" size="small" class="updatePosInput"></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>
<script>
export default {
name: "PosMana",
data() {}，
mounted() {}，
/*vue的生命周期，当一打开时，就运行初始化。
那么需要在mouted里面调用初始化
*/
methods: {
addPosition() {
if (this.pos.name) { //查看添加的名字是否为空
this.postRequest('/system/basic/joblevel/add', this.pos).then(resp => {
if (resp) {
this.initPositions();
this.pos.name = '';
}
})
} else {
this.$message.error('职位名称不能为空！');
}
},
}
三、职称管理
<template>
<div>
<div>
<el-input size="small" v-model="jl.name" placeholder="添加职称等级..." prefix-icon="el-icon-plus"
style="width: 300px"></el-input>
<el-select size="small" v-model="jl.titleLevel" placeholder="职称等级"
style="margin-left: 6px;margin-right: 6px">
<el-option
v-for="item in titleLevels"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-button size="small" type="primary" icon="el-icon-plus" @click="addJobLevel">添加</el-button>
</div>
<div style="margin-top: 10px">
<el-table
:data="jls"
stripe
border
size="small"
@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="150">
</el-table-column>
<el-table-column
prop="titleLevel"
label="职称等级"
width="150">
</el-table-column>
<el-table-column
prop="createDate"
label="创建日期"
width="150">
</el-table-column>
<el-table-column
prop="enabled"
label="是否启用"
width="150">
<template slot-scope="scope">
<el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
<el-tag v-else type="danger">未启用</el-tag>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="small" @click="showEditView(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button size="small" style="margin-top: 10px" :disabled="this.multipleSelection.length==0" type="danger" @click="deleteMany">批量删除</el-button>
</div>
<el-dialog
title="编辑职称"
:visible.sync="dialogVisible"
width="30%">
<table>
<tr>
<td>
<el-tag>职称名称</el-tag>
</td>
<td>
<el-input v-model="updateJl.name" size="small" style="margin-left: 6px"></el-input>
</td>
</tr>
<tr>
<td>
<el-tag>职称等级</el-tag>
</td>
<td>
<el-select size="small" v-model="updateJl.titleLevel" placeholder="职称等级"
style="margin-left: 6px;margin-right: 6px">
<el-option
v-for="item in titleLevels"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>
<el-tag>是否启用</el-tag>
</td>
<td>
<el-switch
style="margin-left: 6px"
v-model="updateJl.enabled"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="已启用"
inactive-text="未启用">
</el-switch>
</td>
</tr>
</table>
<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>
</template>
<script>
export default {
name: "JoblevelMana",
data() {
return {
jl: {
name: '',
titleLevel: ''
},
updateJl: {
name: '',
titleLevel: '',
enabled: false
},
titleLevels: [
'正高级',
'副高级',
'中级',
'初级',
'员级'
],
jls: [],
dialogVisible: false,
multipleSelection: []
}
},
mounted() {
this.initJls();
},
methods: {
deleteMany(){
this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条职称, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = '?';
this.multipleSelection.forEach(item => {
ids += 'ids=' + item.id + '&';
});
this.deleteRequest('/system/basic/joblevel/delete/ids' + ids).then(resp => {
if (resp) {
this.initJls();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
handleSelectionChange(val){
this.multipleSelection = val;
},
doUpdate() {
this.putRequest('/system/basic/joblevel/update', this.updateJl).then(resp => {
if (resp) {
this.initJls();
this.dialogVisible = false;
}
})
},
showEditView(data) {
Object.assign(this.updateJl, data);
this.updateJl.createDate = '';
this.dialogVisible = true;
},
deleteHandler(data) {
this.$confirm('此操作将永久删除[' + data.name + ']职称, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/joblevel/delete' + data.id).then(resp => {
if (resp) {
this.initJls();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
addJobLevel() {
if (this.jl.name && this.jl.titleLevel) {
this.postRequest('/system/basic/joblevel/add', this.jl).then(resp => {
if (resp) {
this.initJls();
}
})
} else {
this.$message.error('字段不能为空！');
}
},
initJls() {
this.getRequest('/system/basic/joblevel/list').then(resp => {
if (resp) {
this.jls = resp;
this.jl.name = '';
this.jl.titleLevel = '';
}
})
}
}
}
</script>
<style scoped>
</style>
四、部门管理
<template>
<div style="width: 500px">
<el-input
placeholder="请输入部门名称进行搜索..."
prefix-icon="el-icon-search"
v-model="filterText">
</el-input>
<el-tree
:data="deps"
:props="defaultProps"
:filter-node-method="filterNode"
:expand-on-click-node="false"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }"
style="display: flex;justify-content: space-between;width: 100%">
<span>{{ data.name }}</span>
<span>
<el-button
type="primary"
size="mini"
class="depBtn"
@click="() => showAddDep(data)">
添加部门
</el-button>
<el-button
type="danger"
size="mini"
class="depBtn"
@click="() => deleteDep(data)">
删除部门
</el-button>
</span>
</span>
</el-tree>
<el-dialog
title="添加部门"
:visible.sync="dialogVisible"
width="30%">
<div>
<table>
<tr>
<td>
<el-tag>上级部门</el-tag>
</td>
<td>{{pname}}</td>
</tr>
<tr>
<td>
<el-tag>部门名称</el-tag>
</td>
<td>
<el-input v-model="dep.name" placeholder="请输入部门名称..."></el-input>
</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="doAddDep">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "DepMana",
data() {
return {
filterText: '',
deps: [],
defaultProps: {
children: 'children',
label: 'name'
},
dialogVisible: false,
dep: {
name: '',
parentId: -1
},
pname: ''
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
mounted() {
this.initDeps();
},
methods: {
initDep() {
this.dep = {
name: '',
parentId: -1
}
this.pname = '';
},
addDep2Deps(deps, dep) {
for (let i = 0; i < deps.length; i++) {
let d = deps[i];
if (d.id == dep.parentId) {
d.children = d.children.concat(dep);
if (d.children.length > 0) {
d.isParent = true;
}
return;
} else {
this.addDep2Deps(d.children, dep);
}
}
},
doAddDep() {
this.postRequest('/system/basic/department/', this.dep).then(resp => {
if (resp) {
this.addDep2Deps(this.deps, resp.obj);
this.dialogVisible = false;
this.initDep();
}
})
},
showAddDep(data) {
this.dep.parentId = data.id;
this.pname = data.name;
this.dialogVisible = true;
},
removeDepFromDeps(p, deps, id) {
for (let i = 0; i < deps.length; i++) {
let d = deps[i];
if (d.id == id) {
deps.splice(i, 1);
if (deps.length == 0) {
p.isParent = false;
}
return;
} else {
this.removeDepFromDeps(d, d.children, id);
}
}
},
deleteDep(data) {
if (data.isParent) {
this.$message.error('父部门删除失败！');
} else {
this.$confirm('此操作将永久删除该[' + data.name + ']部门, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/department/' + data.id).then(resp => {
if (resp) {
this.removeDepFromDeps(null, this.deps, data.id);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
initDeps() {
this.getRequest('/system/basic/department/').then(resp => {
if (resp) {
this.deps = resp;
}
})
},
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
}
}
}
</script>
<style>
.depBtn {
padding: 2px;
}
</style>
五、权限组
用来更新和展示角色所拥有的不同菜单的角色。
由于后端用了，spring权限的框架，对应的是角色。 在添加时需要大写的“ROLE_”开头，所以input输入框，不仅仅是输入框。所以开发人员默认添加输入框，这样用户仅需要写数据即可。
树节点的选择
<template>
<div>
<div class="permissManaTool">
<el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
<template slot="prepend">ROLE_</template>
<!--template 需要填写，但是不用用户填写。是默认填写好的。 -->
</el-input>
<el-input size="small" v-model="role.nameZh" placeholder="请输入角色中文名"
@keydown.enter.native="doAddRole">
</el-input>
<!-- icon 是图标-->
<el-button size="small" type="primary" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
</div>
<!-- 折叠面板： -->
<div class="permissManaMain">
<el-collapse v-model="activeName" accordion @change="change">
<!-- for循环，从r到index，循环到roles -->
<el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
<!-- 卡片列表-->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>可访问资源</span>
<el-button style="float: right; padding: 3px 0;color: #ff0000" type="text"
icon="el-icon-delete" @click="doDeleteRole(r)"></el-button>
</div>
<!-- 树形列表, 展示所有菜单，菜单有子菜单... 。 -->
<!--
data:树形所展示的数据
props:别名
-->
<div>
<el-tree show-checkbox
:data="allMenus"
:props="defaultProps"
ref="tree"
:key="index"
:default-checked-keys="selectedMenus"
node-key="id">
</el-tree>
<div style="display: flex;justify-content: flex-end">
<el-button size="mini" @click="cancelUpdate">取消修改</el-button>
<el-button size="mini" type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
</div>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
name: "PermissMana",
data() {
return {
role: {
name: '',
nameZh: ''
},
roles: [], //调用以后就有了值，那么需要展示出来 <el-collapse-item
allMenus: [],// 树形菜单，所展示的数据
defaultProps: {
children: 'children',
label: 'name'
},
selectedMenus: [],
activeName: -1
}
},
mounted() {
// 当一点进来页面，就调用所以信息列表的方法
this.initRoles();
},
methods: {
doDeleteRole(role) {
this.$confirm('此操作将永久删除[' + role.namezh + ']角色, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/permission/delete' + role.id).then(resp => {
if (resp) {
this.initRoles();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
doAddRole() {
if (this.role.name && this.role.nameZh) {
this.postRequest('/system/basic/permission/add', this.role).then(resp => {
if (resp) {
this.initRoles();
this.role.name = '';
this.role.nameZh = '';
}
})
} else {
this.$message.error('所有字段不能为空！');
}
},
cancelUpdate() {
this.activeName = -1;
},
doUpdate(rid, index) {
let tree = this.$refs.tree[index];
let selectedKeys = tree.getCheckedKeys(true);
let url = '/system/basic/permission/update/=' + rid;
selectedKeys.forEach(key => {
url += '&mids=' + key;
});
this.putRequest(url).then(resp => {
if (resp) {
this.activeName = -1;
}
})
},
change(rid) {
if (rid) {
this.initAllMenus();
//this.initSelectedMenus(rid);
}
},
/* initSelectedMenus(rid) {
this.getRequest('/system/basic/permission/mid' + rid).then(resp => {
if (resp) {
this.selectedMenus = resp;
}
})
}, */
initAllMenus() {
this.getRequest('/system/basic/permission/menus').then(resp => {
if (resp) {
this.allMenus = resp;
}
})
},
initRoles() { // 获取角色列表
this.getRequest('/system/basic/permission/list').then(resp => {
if (resp) {
this.roles = resp;
}
})
}
}
}
</script>
<style>
.permissManaTool {
display: flex; /* 变成一行 */
justify-content: flex-start;
}
.permissManaTool .el-input {
width: 300px;
margin-right: 6px;
}
.permissManaMain {
margin-top: 10px;
width: 700px;
}
</style>
六、部门管理：
1、整体：
先是搜索，然后是树形展示
<template>
<div style="width: 500px">
<!-- el-icon-serch图标搜索样式 -->
<el-input
placeholder="请输入部门名称进行搜索..."
prefix-icon="el-icon-search"
v-model="filterText">
</el-input>
<!-- v-model 就是搜索框输入的值 -->
<el-tree
:data="deps"
:props="defaultProps"
:filter-node-method="filterNode"
:expand-on-click-node="false"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }"
style="display: flex;justify-content: space-between;width: 100%">
<span>{{ data.name }}</span>
<span>
<el-button
type="primary"
size="mini"
class="depBtn"
@click="() => showAddDep(data)">
添加部门
</el-button>
<el-button
type="danger"
size="mini"
class="depBtn"
@click="() => deleteDep(data)">
删除部门
</el-button>
</span>
</span>
</el-tree>
<el-dialog
title="添加部门"
:visible.sync="dialogVisible"
width="30%">
<div>
<table>
<tr>
<td>
<el-tag>上级部门</el-tag>
</td>
<td>{{pname}}</td>
</tr>
<tr>
<td>
<el-tag>部门名称</el-tag>
</td>
<td>
<el-input v-model="dep.name" placeholder="请输入部门名称..."></el-input>
</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="doAddDep">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "DepMana",
data() {
return {
filterText: '',
deps: [],
defaultProps: {
children: 'children',
label: 'name'
},
dialogVisible: false,
dep: {
name: '',
parentId: -1
},
pname: ''
}
},
watch: {
filterText(val) {
/* 通过搜索框传过来的值，调用filter方法 */
this.$refs.tree.filter(val);
}
},
mounted() {
this.initDeps();
},
methods: {
initDep() {
this.dep = {
name: '',
parentId: -1
}
this.pname = '';
},
addDep2Deps(deps, dep) {
for (let i = 0; i < deps.length; i++) {
let d = deps[i];
if (d.id == dep.parentId) {
d.children = d.children.concat(dep);
if (d.children.length > 0) {
d.isParent = true;
}
return;
} else {
this.addDep2Deps(d.children, dep);
}
}
},
doAddDep() {
this.postRequest('/system/basic/department/add', this.dep).then(resp => {
if (resp) {
this.addDep2Deps(this.deps, resp.obj);
this.dialogVisible = false;
this.initDep();
}
})
},
showAddDep(data) {
this.dep.parentId = data.id;
this.pname = data.name;
this.dialogVisible = true;
},
removeDepFromDeps(p, deps, id) {
for (let i = 0; i < deps.length; i++) {
let d = deps[i];
if (d.id == id) {
deps.splice(i, 1);
if (deps.length == 0) {
p.isParent = false;
}
return;
} else {
this.removeDepFromDeps(d, d.children, id);
}
}
},
deleteDep(data) {
if (data.isParent) {
this.$message.error('父部门删除失败！');
} else {
this.$confirm('此操作将永久删除该[' + data.name + ']部门, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/department/delete' + data.id).then(resp => {
if (resp) {
this.removeDepFromDeps(null, this.deps, data.id);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
initDeps() {
this.getRequest('/system/basic/department/list').then(resp => {
if (resp) {
this.deps = resp;
}
})
},
filterNode(value, data) {
/*
在哪个目录就是得到那个目录位置，判断搜索的值在不在，
有值是 true, 而true 是展示。
判断包含这个值。 watch就是监控值得变化（就是输入框绑定的值）
*/
if (!value) return true;
return data.name.indexOf(value) !== -1;
}
}
}
</script>
<style>
.depBtn {
padding: 2px;
}
</style>
2、前端的搜索功能：
<el-input
placeholder="请输入部门名称进行搜索..."
prefix-icon="el-icon-search"
v-model="filterText">
</el-input>
<!-- v-model 就是搜索框输入的值 -->
watch: {
filterText(val) {
/* 通过搜索框传过来的值，调用filter方法 */
this.$refs.tree.filter(val);
}
},
filterNode(value, data) {
/*
在哪个目录就是得到那个目录位置，判断搜索的值在不在，
有值是 true, 而true 是展示。
判断包含这个值。 watch就是监控值得变化（就是输入框绑定的值）
*/
if (!value) return true;
return data.name.indexOf(value) !== -1;
}
3、添加和删除部门
<span class="custom-tree-node" slot-scope="{ node, data }"
style="display: flex;justify-content: space-between;width: 100%">
<span>{{ data.name }}</span>
<span>
<el-button
type="primary"
size="mini"
class="depBtn"
@click="() => showAddDep(data)">
添加部门
</el-button>
<el-button
type="danger"
size="mini"
class="depBtn"
@click="() => deleteDep(data)">
删除部门
</el-button>
</span>
</span>
------
doAddDep() {
this.postRequest('/system/basic/department/add', this.dep).then(resp => {
if (resp) {
this.addDep2Deps(this.deps, resp.obj);
this.dialogVisible = false;
this.initDep();
}
})
},
deleteDep(data) {
if (data.isParent) {
this.$message.error('父部门删除失败！');
} else {
this.$confirm('此操作将永久删除该[' + data.name + ']部门, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/department/delete' + data.id).then(resp => {
if (resp) {
this.removeDepFromDeps(null, this.deps, data.id);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
removeDepFromDeps(p, deps, id) {
for (let i = 0; i < deps.length; i++) {
let d = deps[i];
if (d.id == id) {
deps.splice(i, 1);
if (deps.length == 0) {
p.isParent = false;
}
return;
} else {
this.removeDepFromDeps(d, d.children, id);
}
}
},
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
