部门治理的实现

1. API设计说明

部门业务后盾API分层架构及调用关系如图

2. 客户端实现

2.1 新建部门治理模板

在src/components/views 下新建目录 dept-control/index.vue
这里须要用到树形表格 所以引入 vxe-table
官方网站
装置胜利之后咱们抉择这个表格进行数据渲染

• template局部

<template>
 <div>
 <vxe-toolbar :refresh="{query: reload}" export print custom>
 <template v-slot:buttons>
 <vxe-button @click="insertEvent">新增</vxe-button>
 <vxe-button @click="saveEvent">保留</vxe-button>
 </template>
 </vxe-toolbar>
 <vxe-table
 resizable
 show-overflow export-config keep-source ref="xTree"
 row-id="id"
 :loading="loading"
 :tree-config="treeConfig"
 :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
 :data="tableData">
 <vxe-table-column type="checkbox" width="60"></vxe-table-column>
 <vxe-table-column field="id" title="Id"></vxe-table-column>
 <vxe-table-column field="name" title="名称" tree-node></vxe-table-column>
 <vxe-table-column field="parentName" title="下级机构"></vxe-table-column>
 <vxe-table-column field="sort" title="排序号"></vxe-table-column>
 </vxe-table>
 </div>
</template>

• script局部

2.2 配置axios获取dept数据

在src/api/article.js中 减少如下代码

export function getDeptList() {
 return request({
 url: 'http://localhost:8843/dept/doFindObjects',
 method:'post'
 })
}

2.3 配置路由

在 src/router/index.js 文件
新增路由对象

{ path: '/deptControl',
 component: Layout,
 redirect: 'dept-control/index',
 children: [
 { path: 'index',
 component: () => import('@/views/dept-control/index'),
 name: 'DeptControl',
 meta: { title: '部门治理', icon: 'table', noCache: true }
 } ]}

3.服务端实现

公共数据处理类 JsonResult

在springbootApplication main办法类所在的目录下新建目录(以下称根目录！！！) 新建目录 common/vo/JsonResult.java
写入如下代码

package com.tsuki.common.vo;
import lombok.Data;
import java.io.Serializable;
@Data
public class JsonResult implements Serializable {
 public static final long serialVersionUID = 1L;
 private int state = 1; //status code,1 for SUCCESS,0 fro ERROR
 private String message = "ok"; //status message;
 private Object data; //the correct data;
 private int code=20000;//status code for vue-element-admin
 /**Constructors*/ 
 public JsonResult(){}
 /**
 * set the message that expect {@code JsonResult} to return
 * @param message the message
 */ public JsonResult(String message){
 this.message=message;
 }
 /**
 * usually executed when need to package a object to {@code JsonResult}
 * @param data the object
 */
 public JsonResult(Object data){
 this.data = data;
 }
 /**
 * usually executed when an exception is encountered * @param t {@code java.lang.Throwable}
 * For example :
 *                if(!correct){ *                  new JsonResult(Throwable t); *                } */ 
 public JsonResult(Throwable t){
 this.code=20001;
 this.state=0;
 this.message = t.getMessage();
 }
}

3.1 创立pojo对象

在springbootApplication main办法类所在的目录下新建目录(以下称根目录！！！) 新建目录 pojo/Dept.java
写入如下代码

@Data
public class Dept implements Serializable {
 private static final long serialVersionUID = 6997118400003373008L;
 private Integer id;
 private String name;
 private Integer parentId;
 private Integer sort;
 private String note;
 private Date createdTime;
 private Date modifiedTime;
 private String createdUser;
 private String modifiedUser;
 private List<Dept> childDept; //子部门
 private String parentName;
}

其中 @Data是Lombok插件提供的注解 作用是主动构建 get set 和toString()等办法

3.2 Dao局部

在根目录下新建目录 dao/DeptDao.java
写入如下代码

List<Dept> findObjects();

3.3 Mapper局部

在src/main/resources/下新建目录 mappers/sys/DeptMapper.xml
写入如下代码 其中 namespace部门自定义成本人的包构造

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.tsuki.dao.DeptDao">

 <resultMap id="Dept" type="com.tsuki.pojo.Dept">
    <id property="id" column="id"/>
    <result property="name" column="name"/>
    <result property="sort" column="sort"/>
    <collection property="childDept" javaType="list" ofType="com.tsuki.pojo.Dept">
        <id property="id" column="cid"/>
        <result property="name" column="cname"/>
        <result property="parentName" column="parentName"/>
        <result property="sort" column="csort"/>
    </collection>
 </resultMap>
 <select id="findObjects" resultMap="Dept">
    select child.id cid,child.name cname,parent.name parentName,child.sort csort,
           parent.id,parent.name,parent.sort
           from sys_depts child
           left join sys_depts parent on
           child.parentId=parent.id
    </select>
</mapper>

3.4 Service局部

在根目录下新建service/DeptService.java
写入一下代码

package com.tsuki.service;
import com.tsuki.common.bo.PageObject;
import com.tsuki.pojo.Dept;
import java.util.List;
public interface DeptService {
/**
 * 查问所有记录
 * @return {@link Dept}
 */
List<Dept> findObjects();
}

并在其目录下创立实现类impl/DeptServiceImpl.java

3.5 Controller局部

在根目录下新建 controller/DeptController.java

package com.tsuki.controller;
import com.tsuki.common.vo.JsonResult;
import com.tsuki.pojo.Dept;
import com.tsuki.service.DeptService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("dept")
@CrossOrigin
public class DeptController {
 @Autowired
 private DeptService deptService;

 @RequestMapping("doFindObjects")
 public JsonResult doFindObjects(String name){
 try {
 return new JsonResult(deptService.findObjects());
 }catch (Throwable e){
 return new JsonResult(e);
 }
 } 
}