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.后台可以更改日期格式:
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:
4.测试:测试类
TestDepartmentService:
public class TestDepartmentService extends BaseTest {
TestRoleService:
public class TestRoleService extends BaseTest {
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(角色--权限 :中间表)
修改: