0.1 新单词

original美 /ə'rɪdʒənl/最初的

0.2 关于elementui语法的一点总结

1.this.$refs....

this.$refs.tree.getCheckedKeys());

this,代表在当前vue里，$refs代表一个引用（可以把它近似看成一个包名），tree就是我们的el-tree的ref,可以理解为该控件的一个对象，然后我们可以通过对象调用方法。 2.this.$http....

this,代表在当前vue里，$http代表引用一个路径

0.3 关于使用elementui遇到的日期格式问题的一点总结

1.前台可以更改日期格式：

let para = Object.assign({}, this.addForm);
para.createtime = (!para.createtime || para.createtime == '') ? '' : util.formatDate.format(new Date(para.createtime), 'yyyy-MM-dd hh:mm:ss');

2.后台可以更改日期格式：

    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    public Date getCreatetime() {
        return createtime;
    }
    
    //可更改前台查询页面的日期格式(毫秒数 转换成 日期格式)
    @JsonFormat(timezone = "GMT+8",pattern = "yyyy-MM-dd HH:mm:ss")
    public void setCreatetime(Date createtime) {
        this.createtime = createtime;
    }

1. 关联

注意：在使用1对多 或者 多对多 查询的时候，如果要使用分页，不使用嵌套结果，使用嵌套查询，因为他要合并，在分页的时候，合并起来会出现问题

1.1 多对一

通过部门表，高级查询：部门经理、部门领导的部门、租户(多个部门 --> 一个部门经理)(多个部门 --> 一个上级部门)(多个部门 --> 一个租户)

    <sql id="whereSql">
        <where>
            <if test="keywords != null and keywords != ''">
                 and  d.name like concat('%',#{keywords},'%')
            </if>
        </where>
    </sql>
    
    
    <select id="queryData" parameterType="DepartmentQuery" resultMap="DepartmentMap">
        select d.id ,
        d.name,
        e.id eid,
        e.username username,
        p.id pid,
        p.name pname,
        t.id tid,
        t.companyName
        from t_department d
        left join t_employee e on d.manager_id = e.id
        left join t_department p on d.parent_id = p.id
        left join t_tenant t on d.tenant_id = t.id
        <include refid="whereSql"></include>
        limit #{start},#{pageSize}
    </select>
​
    <resultMap id="DepartmentMap" type="Department">
        <id property="id" column="id"></id>
        <result property="name" column="name"></result>
        <!-- 多对一-->
        <association property="manager" javaType="Employee">
            <id property="id" column="eid"></id>
            <result property="username" column="username"></result>
        </association>
        <association property="parent" javaType="Department">
            <id property="id" column="pid"></id>
            <result property="name" column="pname"></result>
        </association>
        <association property="tenant" javaType="Tenant">
            <id property="id" column="tid"></id>
            <result property="companyName" column="companyName"></result>
        </association>
    </resultMap>

1.2 一对多

通过部门表，查询子级部门(一个上级部门 --> 对应多个子部门)

    <!-- 一对多查询-->
    <select id="loadDepartmentTree" parameterType="DepartmentQuery" resultMap="DepartmentTreeMap">
        select p.id,p.name , c.id cid,c.name cname from
        t_department p
        join t_department c on p.id = c.parent_id
        order by p.id
​
    </select>
    <resultMap id="DepartmentTreeMap" type="Department">
        <id property="id" column="id"></id>
        <result property="name" column="name"></result>
        <collection property="children" ofType="Department">
            <id column="cid" property="id"></id>
            <result property="name" column="cname"></result>
        </collection>
    </resultMap>    
  

1.3 多对多

多对多：可以转换成：一对多，使用嵌套查询

多个角色 --> 多个权限

注：做列表：把集合使用formatter转换一下

<sql id="whereSql">
    <where>
        <if test="keywords != null and  keywords != ''">
             and r.name like concat('%',#{keywords},'%')
        </if>
    </where>
</sql>
<select id="queryCount" parameterType="RoleQuery" resultType="long">
    select count(*) from t_role
    <include refid="whereSql"></include>
</select>
​
<select id="queryData" parameterType="RoleQuery" resultMap="RoleMap">
    select
    distinct
    r.id ,
    r.name,
    r.sn
     from t_role r
     left join t_role_permission rp on r.id = rp.role_id
    <include refid="whereSql"/>
    limit #{start},#{pageSize}
</select>
​
<resultMap id="RoleMap" type="Role">
    <id property="id" column="id"></id>
    <result property="name" column="name"></result>
    <result property="sn" column="sn"></result>
    <collection property="permissions" ofType="Permission"  column="id" select="queryPermissionsByRoleid" >
     
    </collection>
</resultMap>
​
<select id="queryPermissionsByRoleid" parameterType="long" resultMap="PermissionMap">
    select p.id pid,p.name pname, p.sn psn
     from t_role_permission rp
     join t_permission p on p.id = rp.permission_id
     where rp.role_id = #{id}
</select>
​
<resultMap id="PermissionMap" type="Permission">
    <id property="id" column="pid"></id>
    <result property="name" column="pname" ></result>
    <result property="sn"  column="psn"></result>
</resultMap>

2.常用控件

2.4 下拉框

1.下拉框前端代码：

<el-form-item label="部门经理" prop="manager">
    <el-select v-model="department.managerId" placeholder="请选择"  @change="change()">
        <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.username"
                :value="item.id">
            <span style="float: left">{{ item.id }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.username }}</span>
        </el-option>
    </el-select>
</el-form-item>

2.新增时，需要把属性的值封装到对象里面去

//备份 表单里面数据 备分一份给para变量
let para = Object.assign({}, this.department);
//定义一个对象
let manager = {
id:para.managerId
}
​
//封装产生
para.manager = manager;

2.2 穿梭框

2.2.1 elementui版本升级

注：需要升级elementui的版本到最新版

（1）修改package.json的elementui版本

（2）执行npm install命令

（3）main.js 修改 样式

/* 做穿梭框 升级 elmentui，引入样式*/
import 'element-ui/lib/theme-chalk/index.css';
/* 原来的样式  */
/*import 'element-ui/lib/theme-default/index.css'*/

（4）弹出的不行 在dialog里面添加该属性

:visible.sync="departmentFormVisible"
//注：departmentFormVisible和另一个属性：v-model="editFormVisible"，中的属性相同

2.2.2 穿梭框实例：角色与权限

2.2.2.1.前端：

1.template：

<el-transfer v-model="selectedPermissions" :data="allPermissions" :titles="titles"          :props="{
        key: 'id',
        label: 'name'
    }"  @change="handleChange">
</el-transfer>

2.全局参数：

selectedPermissions:[],
allPermissions:[{"id":1,"name":"添加员工"},{"id":2,"name":"修改员工"},{"id":3,"name":"删除员工"}],
titles:['所有权限', '已选权限'],

2.2.2.2 后台(批量保存中间表代码部分)

1.domian层

Role：

    //角色信息
    private Long id;
    private String name;
    private String sn;
​
    // 把每一行(角色id-权限id)的Map封装到所有行(全部角色id-权限id的对应)的List里面去
    public List<Map> getRolePermission(){
        List rolePermissionList = new ArrayList();
        for (Permission permission : permissions) {
            Map rolePermission = new HashMap();
            rolePermission.put("roleId", this.id);
            rolePermission.put("permissionId",permission.getId() );
            rolePermissionList.add(rolePermission);
        }
​
        return rolePermissionList;
    }
​
    //权限
    List<Permission> permissions = new ArrayList<>();

2.mapper层

都是在操作中间表

RoleMapper：

public interface RoleMapper extends BaseMapper<Role> {
    //新增角色
    void addRolePermssion(List<Map> rolePermissionList);
    //删除角色
    void deleteRolePermssion(Serializable roleId);
}

RoleMapper.xml：

    <!-- 擦入中间表 -->
    <!-- 参数 arrayList list List ArrayList -->
    <insert id="addRolePermssion" parameterType="arrayList">
        insert into t_role_permission(role_id,permission_id) values
        <foreach collection="list" item="item" separator=",">
            (#{item.roleId},#{item.permissionId})
        </foreach>
    </insert>
    
    <!-- 删除中间表 -->
    <delete id="deleteRolePermssion" parameterType="long">
        delete from t_role_permission where role_id=#{id}
    </delete>

3.service层

RoleServiceImpl：

@Service
public class RoleServiceImpl extends BaseServiceImpl<Role> implements IRoleService {
​
    @Autowired
    private RoleMapper roleMapper;
​
    @Override
    public void save(Role role) {
       //保存t_role这个表
        roleMapper.save(role);
​
        //保存中间表 t_role_permission insert into(role_id,permisison_id)values(#{roleId},#{permissionId})
        /**
        * 方案一：
        *   List<Permission> permissions = role.getPermissions();
        *   循环权限 permissionid ，roleid
        *  方案二：
        *      批量插入
        *      参数怎么传递过去 -->定义对象 RolePermission
        *         insert into(role_id,permisison_id)values(#{roleId},#{permissionId}),(#{roleId},#{permissionId})
        *      使用
        *      ArrayList<Map> list = new ArrayList();
        *      for(Permssion permssion : permissions)
        *      Map mp = new HashMap();
        *      mp.put("roleId",1);
        *      mp.put("permssionId",permssion.getId());
        *      list.add(mp)
        *
        *
        */
        List<Map> rolePermissionList = role.getRolePermission();
        roleMapper.addRolePermssion(rolePermissionList);
​
    }
​
    @Override
    public void delete(Serializable id) {
        //删除角色
        roleMapper.delete(id);
        //删除中间表
        roleMapper.deleteRolePermssion(id);
    }
​
    @Override
    public void update(Role role) {
        roleMapper.update(role);
        //修改中间表
        roleMapper.deleteRolePermssion(role.getId());
        roleMapper.addRolePermssion(role.getRolePermission());
    }
}
​

4.测试：测试类

TestDepartmentService：

public class TestDepartmentService extends  BaseTest {
​
    @Autowired
    private IDepartmentService departmentService;
​
    @Test
    public void testName() throws Exception{
        List<Department> departments = departmentService.loadDepartmentTree(new DepartmentQuery());
​
        for (Department department : departments) {
            System.out.println(department);
​
            System.out.println("--------------"+department.getChildren());
        }
    }
}

TestRoleService：

public class TestRoleService extends  BaseTest {
​
    @Autowired
    private IRoleService roleService;
​
    @Test
    public void testName() throws Exception {
        Role role = new Role();
        role.setName("test1");
        role.setSn("test1");
​
        List<Permission> permisisons = new ArrayList();
        permisisons.add(new Permission(1L));
        permisisons.add(new Permission(2L));
        permisisons.add(new Permission(3L));
        permisisons.add(new Permission(4L));
​
        role.setPermissions(permisisons);
​
        roleService.save(role);
​
    }
​
    @Test
    public void testDeleteRole() throws Exception{
        roleService.delete(7L);
    }
}
​

2.3 针对多方保存和删除：总结

2.3.1 保存

例如 角色的保存(涉及t_role这个表 一个t_role_permssion这个表)

（1）t_role的按照普通的方式保存

（2）t_role_permssion表保存

方式一 循环一条一条插入

方式二 批量插入

传递的值 -- 创建一个RolePermssion对象

使用List<Map>的方式 传递 -- 第二种

2.3.2 删除

删除：

先删除role(角色表)这个表，再删除t_role_permission(角色--权限 ：中间表)

修改：

先修改role这个表 删除t_role_permission 在添加中间表信息