进入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-inputsize="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-dialogtitle="编辑职位":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-optionv-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"stripebordersize="small"@selection-change="handleSelectionChange"style="width: 70%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="id"label="编号"width="55"></el-table-column><el-table-columnprop="name"label="职称名称"width="150"></el-table-column><el-table-columnprop="titleLevel"label="职称等级"width="150"></el-table-column><el-table-columnprop="createDate"label="创建日期"width="150"></el-table-column><el-table-columnprop="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-columnlabel="操作"><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-dialogtitle="编辑职称":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-optionv-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-switchstyle="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-inputplaceholder="请输入部门名称进行搜索..."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-buttontype="primary"size="mini"class="depBtn"@click="() => showAddDep(data)">添加部门</el-button><el-buttontype="danger"size="mini"class="depBtn"@click="() => deleteDep(data)">删除部门</el-button></span></span></el-tree><el-dialogtitle="添加部门":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-itemallMenus: [],// 树形菜单，所展示的数据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-inputplaceholder="请输入部门名称进行搜索..."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-buttontype="primary"size="mini"class="depBtn"@click="() => showAddDep(data)">添加部门</el-button><el-buttontype="danger"size="mini"class="depBtn"@click="() => deleteDep(data)">删除部门</el-button></span></span></el-tree><el-dialogtitle="添加部门":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-inputplaceholder="请输入部门名称进行搜索..."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-buttontype="primary"size="mini"class="depBtn"@click="() => showAddDep(data)">添加部门</el-button><el-buttontype="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);}}},