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 在添加中间表信息