标签：25 return 管理 dep 部门 parentId department data id
前端页面设计
DepMana.vue
<template>
<div style="width: 500px;">
<el-input
placeholder="输入部门名称进行搜索"
prefix-icon="el-icon-search"
v-model="filterText">
</el-input>
<el-tree
style="margin-top: 10px"
:data="deps"
:props="defaultProps"
//是否在点击节点时展开或收缩节点，默认为true，false为只有点击箭头图标才有效。
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree">
<span class="custom-tree-node" style="display: flex;justify-content: space-between;width: 100%" slot-scope="{ node, data }">
<span>{{ data.name }}</span>
<span>
<el-button
type="primary"
size="mini"
class="depBtn"
@click="() => showAddDepView(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>
<div>
<el-tag style="margin-bottom: 8px;margin-right: 8px">上级部门</el-tag>
<span>{{pname}}</span>
</div>
<div>
<el-tag style="margin-right: 8px">部门名称</el-tag>
<el-input v-model="dep.name" size="small" placeholder="请输入部门名称..." style="width: 70%"></el-input>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="doAddDep">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "DepMana",
data(){
return{
filterText:'',
deps:[],
dialogVisible:false,
dep:{
name:'',
parentId:-1,
},
pname:'',
defaultProps: {
children: 'children',
label: 'name'
}
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
mounted(){
this.initDeps();
},
methods: {
removeDep2Deps(deps,id){
for (let i = 0; i <deps.length; i++) {
let d=deps[i];
if (d.id == id) {
deps.splice(i,1);
return;
}else {
this.removeDep2Deps(d.children,id);
}
}
},
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);
return;
}else {
this.addDep2Deps(d.children,dep);
}
}
},
initDep(){
this.dep={
name:'',
parentId:-1,
};
this.pname=''
},
doAddDep(){
this.postRequest("/system/basic/department/",this.dep).then(resp=>{
if (resp) {
this.addDep2Deps(this.deps,resp.obj);
this.initDep();
this.dialogVisible=false;
}
})
},
deleteDep(data){
if (data.parent) {
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.removeDep2Deps(this.deps,data.id);
this.initDep();
this.dialogVisible=false;
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
showAddDepView(data){
this.pname=data.name;
this.dep.parentId=data.id;
this.dialogVisible=true;
},
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>
搜索功能详解
在部门管理页面有搜索功能，可以快速定位到自己想要找的部门，filterText受到watch监控，当你在输入框打字时，就会调用watch里的filterText方法，val即你输入的字符，然后执行tree里面filterNode方法。
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
}
value指输入的字符，data则是传入的JSON数据，如果value不存在或者为空，当前data保留，即部门树全部展开
如果value有值，查看data中的name包含value的下标是否等于-1，等于-1返回true，当前data保留，否则剔除。
后端端口设计
model/Department 添加result和children
private Integer result;
private List<Department> children;
Controller
@RestController
@RequestMapping("/system/basic/department")
public class DepartmentController {
@Autowired
DepartmentService departmentService;
@GetMapping("/")
public List<Department> getAllDepartments(){
return departmentService.getAllDepartments();
}
@PostMapping("/")
public RespBean addDep(@RequestBody Department dep){
departmentService.addDep(dep);
if (dep.getResult()==1){
return RespBean.ok("添加成功",dep);
}
return RespBean.error("添加失败");
}
@DeleteMapping("/{id}")
public RespBean deleteDepById(@PathVariable Integer id){
Department dep=new Department();
dep.setId(id);
departmentService.deleteDepById(dep);
//对应下面的deleteDep返回的result
if (dep.getResult()==-2){
return RespBean.error("该部门下有子部门，删除失败");
}else if (dep.getResult()==-1){
return RespBean.error("该部门下有员工，删除失败");
}else if (dep.getResult()==1){
return RespBean.ok("删除成功");
}
return RespBean.error("删除失败");
}
}
Service
DepartmentService
@Service
public class DepartmentService {
@Autowired
DepartmentMapper departmentMapper;
public List<Department> getAllDepartments() {
return departmentMapper.getAllDepartmentsByParentId(-1);
}
public void addDep(Department dep) {
dep.setEnabled(true);
departmentMapper.addDep(dep);
}
public void deleteDepById(Department dep) {
departmentMapper.deleteDepById(dep);
}
}
Mapper
void addDep(Department dep);
void deleteDepById(Department dep);
XML
<resultMap id="DepartmentWithChildren" type="org.javaboy.vhr.model.Department" extends="BaseResultMap" >
<collection property="children" ofType="org.javaboy.vhr.model.Department"
select="org.javaboy.vhr.mapper.DepartmentMapper.getAllDepartmentsByParentId" column="id"/>
</resultMap>
<select id="deleteDepById" statementType="CALLABLE">
//调用存储过程deleteDep
call deleteDep(#{id ,mode=IN,jdbcType=INTEGER},#{result,mode=OUT,jdbcType=INTEGER})
</select>
<select id="addDep" statementType="CALLABLE">
call addDep(#{name,mode=IN,jdbcType=VARCHAR},#{parentId,mode=IN,jdbcType=INTEGER},
#{enabled,mode=IN,jdbcType=BOOLEAN},#{result,mode=OUT,jdbcType=INTEGER},#{id,mode=OUT,jdbcType=INTEGER})
</select>
<select id="getAllDepartmentsByParentId" resultMap="DepartmentWithChildren">
select * from department where parentId=#{pid}
</select>
存储过程解析
两个存储过程在我们当初导入SQL脚本的时候已经建好了，我们来分析一下。
addDep
//创建addDep存储过程，三个输入参数depName、parentId、enabled，两个输出参数result、result2
CREATE DEFINER=`root`@`localhost` PROCEDURE `addDep`(in depName varchar(32),in parentId int,in enabled boolean,out result int,out result2 int)
begin
//声明两个参数
declare did int;
declare pDepPath varchar(64);
//把三个输入参数插入到department表中
insert into department set name=depName,parentId=parentId,enabled=enabled;
//把刚才插入操作受影响的行数赋值给result，为1则表示插入成功，0表示失败
select row_count() into result;
//把department表中新添加的一行的id赋值给did
select last_insert_id() into did;
set result2=did;
select depPath into pDepPath from department where id=parentId;
//更新depPath为pDepPath.did
update department set depPath=concat(pDepPath,'.',did) where id=did;
//设置isParent为true
update department set isParent=true where id=parentId;
end
deleteDep
CREATE DEFINER=`root`@`localhost` PROCEDURE `deleteDep`(in did int,out result int)
begin
declare ecount int;
declare pid int;
declare pcount int;
declare a int;
//创建a表，从department表中选择行插入到a表中 条件：id等于did且没有子部门
select count(*) into a from department where id=did and isParent=false;
//没有行被选中 说明有子部门，删除失败
if a=0 then set result=-2;
else
//a表中有数据，继续在employee表中查找员工并放入ecount中
select count(*) into ecount from employee where departmentId=did;
//大于零说明有员工，删除失败
if ecount>0 then set result=-1;
else
// 把parentId传给pid
select parentId into pid from department where id=did;
delete from department where id=did and isParent=false;
//删除的行数为1
select row_count() into result;
select count(*) into pcount from department where parentId=pid;
//如果没有子部门，isParent设置为false
if pcount=0 then update department set isParent=false where id=pid;
end if;
end if;
end if;
end
标签：25,return,管理,dep,部门,parentId,department,data,id 来源： https://www.cnblogs.com/qiuwenli/p/13460401.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。