Skip to content

D
datax-cloud
Commit ba79ac97 by yuwei
Options

2.0.0项目初始化

parent 68d6246f
Showing with 1859 additions and 206 deletions
datax-modules/system-service-parent/system-service-api/src/main/java/cn/datax/service/system/api/dto/MenuDto.java
......@@ -27,7 +27,7 @@ public class MenuDto implements Serializable {
@NotBlank(message = "资源名称不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
private String menuName;
@ApiModelProperty(value = "对应路由path")
@ApiModelProperty(value = "对应路由地址path")
private String menuPath;
@ApiModelProperty(value = "对应路由组件component")
......@@ -39,10 +39,10 @@ public class MenuDto implements Serializable {
@ApiModelProperty(value = "权限标识")
private String menuPerms;
@ApiModelProperty(value = "图标")
@ApiModelProperty(value = "资源图标")
private String menuIcon;
@ApiModelProperty(value = "类型")
@ApiModelProperty(value = "资源类型")
@NotNull(message = "类型不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
private String menuType;
......
datax-modules/system-service-parent/system-service-api/src/main/java/cn/datax/service/system/api/dto/UserDto.java
......@@ -22,17 +22,17 @@ public class UserDto implements Serializable {
@NotBlank(message = "主键ID不能为空", groups = {ValidationGroups.Update.class})
private String id;
@ApiModelProperty(value = "用户名")
@NotBlank(message = "用户名不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
@Length(min=3, max = 12, message="用户名长度必须位于{min}-{max}之间")
@ApiModelProperty(value = "用户名称")
@NotBlank(message = "用户名称不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
@Length(min=3, max = 12, message="用户名称长度必须位于{min}-{max}之间")
private String username;
@ApiModelProperty(value = "昵称")
@NotBlank(message = "昵称不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
@ApiModelProperty(value = "用户昵称")
@NotBlank(message = "用户昵称不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
private String nickname;
@ApiModelProperty(value = "密码")
@NotBlank(message = "密码不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
@ApiModelProperty(value = "用户密码")
@NotBlank(message = "用户密码不能为空", groups = {ValidationGroups.Insert.class, ValidationGroups.Update.class})
private String password;
@ApiModelProperty(value = "电子邮箱")
......
datax-modules/system-service-parent/system-service-api/src/main/java/cn/datax/service/system/api/entity/MenuEntity.java
......@@ -33,7 +33,7 @@ public class MenuEntity extends BaseEntity {
private String menuName;
/**
* 对应路由path
* 对应路由地址path
*/
private String menuPath;
......@@ -53,12 +53,12 @@ public class MenuEntity extends BaseEntity {
private String menuPerms;
/**
* 图标
* 资源图标
*/
private String menuIcon;
/**
* 类型（0模块，1菜单，2按钮）
* 资源类型（0模块，1菜单，2按钮）
*/
private String menuType;
......
datax-modules/system-service-parent/system-service-api/src/main/java/cn/datax/service/system/api/entity/UserEntity.java
......@@ -27,17 +27,17 @@ public class UserEntity extends BaseEntity {
private static final long serialVersionUID=1L;
/**
* 用户名
* 用户名称
*/
private String username;
/**
* 昵称
* 用户昵称
*/
private String nickname;
/**
* 密码
* 用户密码
*/
private String password;
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/MenuController.java
......@@ -60,8 +60,8 @@ public class MenuController extends BaseController {
@ApiImplicitParam(name = "menu", value = "资源详细实体menu", required = true, dataType = "MenuDto")
@PostMapping()
public R saveMenu(@RequestBody @Validated({ValidationGroups.Insert.class}) MenuDto menu) {
menuService.saveMenu(menu);
return R.ok();
MenuEntity menuEntity = menuService.saveMenu(menu);
return R.ok().setData(menuMapper.toVO(menuEntity));
}
@ApiOperation(value = "更新资源详细信息", notes = "根据url的id来指定更新对象，并根据传过来的menu信息来更新资源详细信息")
......@@ -71,8 +71,8 @@ public class MenuController extends BaseController {
})
@PutMapping("/{id}")
public R updateMenu(@PathVariable String id, @RequestBody @Validated({ValidationGroups.Update.class}) MenuDto menu) {
menuService.updateMenu(menu);
return R.ok();
MenuEntity menuEntity = menuService.updateMenu(menu);
return R.ok().setData(menuMapper.toVO(menuEntity));
}
@ApiOperation(value = "删除资源", notes = "根据url的id来指定删除对象")
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/PostController.java
......@@ -12,6 +12,7 @@ import cn.datax.service.system.service.PostService;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
......@@ -53,6 +54,14 @@ public class PostController extends BaseController {
return R.ok().setData(postMapper.toVO(postEntity));
}
@ApiOperation(value = "获取岗位列表", notes = "")
@GetMapping("/list")
public R getPostList() {
List<PostEntity> list = postService.list(Wrappers.emptyWrapper());
List<PostVo> collect = list.stream().map(postMapper::toVO).collect(Collectors.toList());
return R.ok().setData(collect);
}
@ApiOperation(value = "岗位分页查询", notes = "")
@ApiImplicitParams({
@ApiImplicitParam(name = "postQuery", value = "查询实体postQuery", required = true, dataTypeClass = PostQuery.class)
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/RoleController.java
......@@ -12,6 +12,7 @@ import cn.datax.service.system.service.RoleService;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
......@@ -53,6 +54,14 @@ public class RoleController extends BaseController {
return R.ok().setData(roleMapper.toVO(roleEntity));
}
@ApiOperation(value = "获取角色列表", notes = "")
@GetMapping("/list")
public R getPostList() {
List<RoleEntity> list = roleService.list(Wrappers.emptyWrapper());
List<RoleVo> collect = list.stream().map(roleMapper::toVO).collect(Collectors.toList());
return R.ok().setData(collect);
}
@ApiOperation(value = "角色分页查询", notes = "")
@ApiImplicitParams({
@ApiImplicitParam(name = "roleQuery", value = "查询实体roleQuery", required = true, dataTypeClass = RoleQuery.class)
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/UserController.java
......@@ -86,8 +86,8 @@ public class UserController extends BaseController {
@ApiImplicitParam(name = "user", value = "用户详细实体user", required = true, dataTypeClass = UserDto.class)
@PostMapping()
public R saveUser(@RequestBody @Validated({ValidationGroups.Insert.class}) UserDto user) {
userService.saveUser(user);
return R.ok();
UserEntity userEntity = userService.saveUser(user);
return R.ok().setData(userMapper.toVO(userEntity));
}
@ApiOperation(value = "更新用户详细信息", notes = "根据url的id来指定更新对象，并根据传过来的user信息来更新用户详细信息")
......@@ -97,8 +97,8 @@ public class UserController extends BaseController {
})
@PutMapping("/{id}")
public R updateUser(@PathVariable String id, @RequestBody @Validated({ValidationGroups.Update.class}) UserDto user) {
userService.updateUser(user);
return R.ok();
UserEntity userEntity = userService.updateUser(user);
return R.ok().setData(userMapper.toVO(userEntity));
}
@ApiOperation(value = "更新用户密码", notes = "根据url的id来指定更新对象，并根据传过来的user信息来更新用户密码")
......@@ -120,6 +120,14 @@ public class UserController extends BaseController {
return R.ok();
}
@ApiOperation(value = "批量删除用户", notes = "根据url的ids来批量删除对象")
@ApiImplicitParam(name = "ids", value = "用户ID集合", required = true, dataType = "List", paramType = "path")
@DeleteMapping("/batch/{ids}")
public R deletePostBatch(@PathVariable List<String> ids) {
userService.deleteUserBatch(ids);
return R.ok();
}
@GetMapping("/{id}/route")
public R getUserRouteById(@PathVariable String id) {
Map<String, Object> result = userService.getRouteById(id);
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/dao/UserPostDao.java
......@@ -22,4 +22,9 @@ public interface UserPostDao extends BaseDao<UserPostEntity> {
@Delete("delete from sys_user_post where user_id = #{id}")
void deleteByUserId(String id);
@Delete("<script>" +
"delete from sys_user_post where user_id in <foreach collection='list' item='id' open='(' separator=',' close=')'>#{id}</foreach>" +
"</script>")
void deleteByUserIds(List<String> ids);
}
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/dao/UserRoleDao.java
......@@ -22,4 +22,9 @@ public interface UserRoleDao extends BaseDao<UserRoleEntity> {
@Delete("delete from sys_user_role where user_id = #{id}")
void deleteByUserId(String id);
@Delete("<script>" +
"delete from sys_user_role where user_id in <foreach collection='list' item='id' open='(' separator=',' close=')'>#{id}</foreach>" +
"</script>")
void deleteByUserIds(List<String> ids);
}
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/MenuService.java
......@@ -14,9 +14,9 @@ import cn.datax.common.base.BaseService;
*/
public interface MenuService extends BaseService<MenuEntity> {
void saveMenu(MenuDto menu);
MenuEntity saveMenu(MenuDto menu);
void updateMenu(MenuDto menu);
MenuEntity updateMenu(MenuDto menu);
void deleteMenuById(String id);
}
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/UserService.java
......@@ -7,10 +7,9 @@ import cn.datax.service.system.api.dto.UserPasswordDto;
import cn.datax.service.system.api.entity.UserEntity;
import cn.datax.service.system.api.vo.UserInfo;
import com.baomidou.mybatisplus.core.conditions.Wrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import java.util.List;
import java.util.Map;
/**
......@@ -23,12 +22,14 @@ import java.util.Map;
*/
public interface UserService extends BaseService<UserEntity> {
void saveUser(UserDto user);
UserEntity saveUser(UserDto user);
void updateUser(UserDto user);
UserEntity updateUser(UserDto user);
void deleteUserById(String id);
void deleteUserBatch(List<String> ids);
void updateUserPassword(UserPasswordDto user);
UserInfo getUserByUsername(String username);
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/MenuServiceImpl.java
......@@ -32,16 +32,18 @@ public class MenuServiceImpl extends BaseServiceImpl<MenuDao, MenuEntity> implem
@Override
@Transactional(rollbackFor = Exception.class)
public void saveMenu(MenuDto menuDto) {
public MenuEntity saveMenu(MenuDto menuDto) {
MenuEntity menu = menuMapper.toEntity(menuDto);
menuDao.insert(menu);
return menu;
}
@Override
@Transactional(rollbackFor = Exception.class)
public void updateMenu(MenuDto menuDto) {
public MenuEntity updateMenu(MenuDto menuDto) {
MenuEntity menu = menuMapper.toEntity(menuDto);
menuDao.updateById(menu);
return menu;
}
@Override
......
datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/UserServiceImpl.java
......@@ -55,7 +55,7 @@ public class UserServiceImpl extends BaseServiceImpl<UserDao, UserEntity> implem
@Override
@Transactional(rollbackFor = Exception.class)
public void saveUser(UserDto userDto) {
public UserEntity saveUser(UserDto userDto) {
UserEntity user = userMapper.toEntity(userDto);
int n = userDao.selectCount(Wrappers.<UserEntity>lambdaQuery().eq(UserEntity::getUsername, user.getUsername()));
if(n > 0){
......@@ -70,6 +70,7 @@ public class UserServiceImpl extends BaseServiceImpl<UserDao, UserEntity> implem
if(CollUtil.isNotEmpty(userDto.getPostList())){
insertBatchPost(userDto.getPostList(), user.getId());
}
return user;
}
private void insertBatchPost(List<String> posts, String userId) {
......@@ -96,7 +97,7 @@ public class UserServiceImpl extends BaseServiceImpl<UserDao, UserEntity> implem
@Override
@Transactional(rollbackFor = Exception.class)
public void updateUser(UserDto userDto) {
public UserEntity updateUser(UserDto userDto) {
UserEntity user = userMapper.toEntity(userDto);
userDao.updateById(user);
userRoleDao.delete(Wrappers.<UserRoleEntity>lambdaQuery()
......@@ -109,6 +110,7 @@ public class UserServiceImpl extends BaseServiceImpl<UserDao, UserEntity> implem
if(CollUtil.isNotEmpty(userDto.getPostList())){
insertBatchPost(userDto.getPostList(), user.getId());
}
return user;
}
@Override
......@@ -121,6 +123,14 @@ public class UserServiceImpl extends BaseServiceImpl<UserDao, UserEntity> implem
@Override
@Transactional(rollbackFor = Exception.class)
public void deleteUserBatch(List<String> ids) {
userRoleDao.deleteByUserIds(ids);
userPostDao.deleteByUserIds(ids);
userDao.deleteBatchIds(ids);
}
@Override
@Transactional(rollbackFor = Exception.class)
public void updateUserPassword(UserPasswordDto userPasswordDto) {
UserEntity userEntity = userDao.selectById(userPasswordDto.getId());
if(!StrUtil.equals(userEntity.getPassword(), new BCryptPasswordEncoder().encode(userPasswordDto.getOldPassword()))){
......
datax-modules/system-service-parent/system-service/src/main/resources/mapper/MenuMapper.xml
......@@ -17,6 +17,7 @@
<result column="menu_perms" property="menuPerms" />
<result column="menu_icon" property="menuIcon" />
<result column="menu_type" property="menuType" />
<result column="menu_code" property="menuCode" />
<result column="menu_sort" property="menuSort" />
<result column="status" property="status" />
<result column="remark" property="remark" />
......@@ -29,7 +30,7 @@
create_time,
update_by,
update_time,
parent_id, menu_name, menu_path, menu_component, menu_redirect, menu_perms, menu_icon, menu_type, menu_sort, status, remark
parent_id, menu_name, menu_path, menu_component, menu_redirect, menu_perms, menu_icon, menu_type, menu_code, menu_sort, status, remark
</sql>
<sql id="Menu_Column_List">
......@@ -39,7 +40,7 @@
${alias}.update_by,
${alias}.update_time,
${alias}.parent_id, ${alias}.menu_name, ${alias}.menu_path, ${alias}.menu_component, ${alias}.menu_redirect, ${alias}.menu_perms,
${alias}.menu_icon, ${alias}.menu_type, ${alias}.menu_sort, ${alias}.status, ${alias}.remark
${alias}.menu_icon, ${alias}.menu_type, ${alias}.menu_code, ${alias}.menu_sort, ${alias}.status, ${alias}.remark
</sql>
<select id="selectMenuByRoleIds" parameterType="java.util.List" resultMap="BaseResultMap">
......
datax-ui/src/api/system/menu.js
import request from '@/utils/request'
export function listMenu () {
export function listMenu (data) {
return request({
url: '/system/menus/list',
method: 'get',
params: data
})
}
export function getMenu (id) {
return request({
url: '/system/menus/' + id,
method: 'get'
})
}
export function delMenu (id) {
return request({
url: '/system/menus/' + id,
method: 'delete'
})
}
export function delMenus (ids) {
return request({
url: '/system/menus/batch/' + ids,
method: 'delete'
})
}
export function addMenu (data) {
return request({
url: '/system/menus',
method: 'post',
data: data
})
}
export function updateMenu (data) {
return request({
url: '/system/menus/' + data.id,
method: 'put',
data: data
})
}
datax-ui/src/api/system/post.js
import request from '@/utils/request'
export function listPost (data) {
export function pagePost (data) {
return request({
url: '/system/posts/page',
method: 'get',
......@@ -8,6 +8,14 @@ export function listPost (data) {
})
}
export function listPost (data) {
return request({
url: '/system/posts/list',
method: 'get',
params: data
})
}
export function getPost (id) {
return request({
url: '/system/posts/' + id,
......
datax-ui/src/api/system/role.js
import request from '@/utils/request'
export function listRole (data) {
export function pageRole (data) {
return request({
url: '/system/roles/page',
method: 'get',
......@@ -8,6 +8,14 @@ export function listRole (data) {
})
}
export function listRole (data) {
return request({
url: '/system/roles/list',
method: 'get',
params: data
})
}
export function getRole (id) {
return request({
url: '/system/roles/' + id,
......
datax-ui/src/api/system/user.js
......@@ -32,10 +32,47 @@ export function logout (token) {
})
}
export function listUser (data) {
export function pageUser (data) {
return request({
url: '/system/users/page',
method: 'get',
params: data
})
}
export function getUser (id) {
return request({
url: '/system/users/' + id,
method: 'get'
})
}
export function delUser (id) {
return request({
url: '/system/users/' + id,
method: 'delete'
})
}
export function delUsers (ids) {
return request({
url: '/system/users/batch/' + ids,
method: 'delete'
})
}
export function addUser (data) {
return request({
url: '/system/users',
method: 'post',
data: data
})
}
export function updateUser (data) {
return request({
url: '/system/users/' + data.id,
method: 'put',
data: data
})
}
datax-ui/src/views/system/dept/DeptAdd.vue
......@@ -10,7 +10,7 @@
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级部门" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" placeholder="请选择上级部门" />
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="请选择上级部门" />
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
......@@ -36,7 +36,8 @@
</template>
<script>
import { addDept } from '@/api/system/dept'
import { addDept, listDept } from '@/api/system/dept'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
......@@ -93,11 +94,38 @@ export default {
this.statusOptions = response.data
}
})
this.getDeptTreeSelect()
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getDeptTreeSelect: function() {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = []
const dept = { id: '0', deptName: '主类目', children: [] }
dept.children = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
this.deptOptions.push(dept)
}
})
},
/** 转换部门数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
......
datax-ui/src/views/system/dept/DeptDetail.vue
......@@ -9,7 +9,7 @@
</div>
<el-form ref="form" :model="form" label-width="80px" disabled>
<el-form-item label="上级部门" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" />
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" />
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" />
......@@ -35,7 +35,8 @@
</template>
<script>
import { getDept } from '@/api/system/dept'
import { getDept, listDept } from '@/api/system/dept'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
......@@ -71,18 +72,45 @@ export default {
}
},
created () {
console.log('data:' + JSON.stringify(this.data))
console.log('id:' + this.data.id)
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDeptTreeSelect()
this.getDept(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getDeptTreeSelect: function() {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = []
const dept = { id: '0', deptName: '主类目', children: [] }
dept.children = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
this.deptOptions.push(dept)
}
})
},
/** 转换部门数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
/** 获取详情 */
getDept: function(id) {
getDept(id).then(response => {
......
datax-ui/src/views/system/dept/DeptEdit.vue
......@@ -10,7 +10,7 @@
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级部门" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" placeholder="请选择上级部门" />
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="请选择上级部门" />
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
......@@ -36,7 +36,8 @@
</template>
<script>
import { getDept, updateDept } from '@/api/system/dept'
import { getDept, listDept, updateDept } from '@/api/system/dept'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
......@@ -84,18 +85,45 @@ export default {
}
},
created () {
console.log('data:' + JSON.stringify(this.data))
console.log('id:' + this.data.id)
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDeptTreeSelect()
this.getDept(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getDeptTreeSelect: function() {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = []
const dept = { id: '0', deptName: '主类目', children: [] }
dept.children = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
this.deptOptions.push(dept)
}
})
},
/** 转换部门数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
/** 获取详情 */
getDept: function(id) {
getDept(id).then(response => {
......
datax-ui/src/views/system/menu/MenuAdd.vue 0 → 100644
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm">保存</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" placeholder="请选择上级资源" />
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入资源名称" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="路由地址" prop="menuPath" v-if="form.menuType !== '2'">
<el-input v-model="form.menuPath" placeholder="请输入对应路由地址path" />
</el-form-item>
<el-form-item label="路由组件" prop="menuComponent" v-if="form.menuType !== '2'">
<el-input v-model="form.menuComponent" placeholder="请输入对应路由组件component" />
</el-form-item>
<el-form-item label="默认跳转地址" prop="menuRedirect" v-if="form.menuType === '0'">
<el-input v-model="form.menuRedirect" placeholder="请输入对应路由默认跳转地址redirect" />
</el-form-item>
<el-form-item label="权限标识" prop="menuPerms" v-if="form.menuType === '2'">
<el-input v-model="form.menuPerms" placeholder="请输入权限标识" />
</el-form-item>
<el-form-item label="资源图标" prop="menuIcon" v-if="form.menuType !== '2'">
<el-input v-model="form.menuIcon" placeholder="请输入资源图标" />
</el-form-item>
<el-form-item label="资源编码" prop="menuCode" v-if="form.menuType !== '2'">
<el-input v-model="form.menuCode" placeholder="请输入资源编码" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { addMenu, listMenu } from '@/api/system/menu'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: 'MenuAdd',
components: { Treeselect },
props: {
data: {
type: Object,
default: function() {
return {}
}
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '资源新增',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 表单参数
form: {
status: '1',
parentId: '0',
menuType: '0'
},
// 表单校验
rules: {
parentId: [
{ required: true, message: "上级资源不能为空", trigger: "blur" }
],
menuName: [
{ required: true, message: "资源名称不能为空", trigger: "blur" }
],
menuSort: [
{ required: true, message: "资源排序不能为空", trigger: "blur" }
]
},
// 状态数据字典
statusOptions: [],
// 类型数据字典
menuTypeOptions: [],
// 资源树选项
menuOptions: []
}
},
created () {
console.log('data:' + JSON.stringify(this.data))
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDicts("sys_menu_type").then(response => {
if (response.success) {
this.menuTypeOptions = response.data
}
})
this.getMenuTreeSelect()
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getMenuTreeSelect: function() {
listMenu().then(response => {
if (response.success) {
const { data } = response
this.menuOptions = []
const menu = { id: '0', menuName: '主类目', children: [] }
menu.children = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
this.menuOptions.push(menu)
}
})
},
/** 转换资源数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.menuName,
children: node.children
}
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
addMenu(this.form).then(response => {
if (response.success) {
this.$message.success("保存成功")
setTimeout(() => {
// 2秒后跳转列表页
this.$emit('showCard', this.showOptions)
}, 2000)
} else {
this.$message.error("保存失败")
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/menu/MenuDetail.vue 0 → 100644
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" label-width="80px" disabled>
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" />
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="路由地址" prop="menuPath" v-if="form.menuType !== '2'">
<el-input v-model="form.menuPath" />
</el-form-item>
<el-form-item label="路由组件" prop="menuComponent" v-if="form.menuType !== '2'">
<el-input v-model="form.menuComponent" />
</el-form-item>
<el-form-item label="默认跳转地址" prop="menuRedirect" v-if="form.menuType === '0'">
<el-input v-model="form.menuRedirect" />
</el-form-item>
<el-form-item label="权限标识" prop="menuPerms" v-if="form.menuType === '2'">
<el-input v-model="form.menuPerms" />
</el-form-item>
<el-form-item label="资源图标" prop="menuIcon" v-if="form.menuType !== '2'">
<el-input v-model="form.menuIcon" />
</el-form-item>
<el-form-item label="资源编码" prop="menuCode" v-if="form.menuType !== '2'">
<el-input v-model="form.menuCode" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" />
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { getMenu, listMenu } from '@/api/system/menu'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: 'MenuDetail',
components: { Treeselect },
props: {
data: {
type: Object,
default: function() {
return {}
}
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '资源详情',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 表单参数
form: {},
// 状态数据字典
statusOptions: [],
// 类型数据字典
menuTypeOptions: [],
// 资源树选项
menuOptions: []
}
},
created () {
console.log('id:' + this.data.id)
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDicts("sys_menu_type").then(response => {
if (response.success) {
this.menuTypeOptions = response.data
}
})
this.getMenuTreeSelect()
this.getMenu(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getMenuTreeSelect: function() {
listMenu().then(response => {
if (response.success) {
const { data } = response
this.menuOptions = []
const menu = { id: '0', menuName: '主类目', children: [] }
menu.children = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
this.menuOptions.push(menu)
}
})
},
/** 转换资源数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.menuName,
children: node.children
}
},
/** 获取详情 */
getMenu: function(id) {
getMenu(id).then(response => {
if (response.success) {
this.form = response.data
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/menu/MenuEdit.vue 0 → 100644
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm">保存</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" placeholder="请选择上级资源" />
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入资源名称" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="路由地址" prop="menuPath" v-if="form.menuType !== '2'">
<el-input v-model="form.menuPath" placeholder="请输入对应路由地址path" />
</el-form-item>
<el-form-item label="路由组件" prop="menuComponent" v-if="form.menuType !== '2'">
<el-input v-model="form.menuComponent" placeholder="请输入对应路由组件component" />
</el-form-item>
<el-form-item label="默认跳转地址" prop="menuRedirect" v-if="form.menuType === '0'">
<el-input v-model="form.menuRedirect" placeholder="请输入对应路由默认跳转地址redirect" />
</el-form-item>
<el-form-item label="权限标识" prop="menuPerms" v-if="form.menuType === '2'">
<el-input v-model="form.menuPerms" placeholder="请输入权限标识" />
</el-form-item>
<el-form-item label="资源图标" prop="menuIcon" v-if="form.menuType !== '2'">
<el-input v-model="form.menuIcon" placeholder="请输入资源图标" />
</el-form-item>
<el-form-item label="资源编码" prop="menuCode" v-if="form.menuType !== '2'">
<el-input v-model="form.menuCode" placeholder="请输入资源编码" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { getMenu, listMenu, updateMenu } from '@/api/system/menu'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: 'MenuEdit',
components: { Treeselect },
props: {
data: {
type: Object,
default: function() {
return {}
}
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '资源编辑',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 表单参数
form: {},
// 表单校验
rules: {
parentId: [
{ required: true, message: "上级资源不能为空", trigger: "blur" }
],
menuName: [
{ required: true, message: "资源名称不能为空", trigger: "blur" }
],
menuSort: [
{ required: true, message: "资源排序不能为空", trigger: "blur" }
]
},
// 状态数据字典
statusOptions: [],
// 类型数据字典
menuTypeOptions: [],
// 资源树选项
menuOptions: []
}
},
created () {
console.log('id:' + this.data.id)
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDicts("sys_menu_type").then(response => {
if (response.success) {
this.menuTypeOptions = response.data
}
})
this.getMenuTreeSelect()
this.getMenu(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getMenuTreeSelect: function() {
listMenu().then(response => {
if (response.success) {
const { data } = response
this.menuOptions = []
const menu = { id: '0', menuName: '主类目', children: [] }
menu.children = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
this.menuOptions.push(menu)
}
})
},
/** 转换资源数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.menuName,
children: node.children
}
},
/** 获取详情 */
getMenu: function(id) {
getMenu(id).then(response => {
if (response.success) {
this.form = response.data
}
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
updateMenu(this.form).then(response => {
if (response.success) {
this.$message.success("保存成功")
setTimeout(() => {
// 2秒后跳转列表页
this.$emit('showCard', this.showOptions)
}, 2000)
} else {
this.$message.error("保存失败")
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/menu/MenuForm.vue deleted 100644 → 0
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="showList">返回列表</el-button>
</div>
111
</el-card>
</div>
</template>
<script>
export default {
name: 'MenuForm',
props: {
id: {
type: String,
default: undefined
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '资源'
}
},
created () {
if (this.id) {
this.title = '修改资源'
} else {
this.title = '新增资源'
}
},
methods: {
showList () {
this.$emit('showList')
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/menu/MenuList.vue
......@@ -79,6 +79,13 @@
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPerm="['system:menu:add']"
>新增</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
v-hasPerm="['system:menu:edit']"
......@@ -86,6 +93,13 @@
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPerm="['system:menu:edit']"
>详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPerm="['system:menu:remove']"
......@@ -107,6 +121,14 @@ export default {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
tableHeight: document.body.offsetHeight - 230 + 'px',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 遮罩层
loading: true,
// 表格头
......@@ -118,6 +140,7 @@ export default {
show: true,
formatter: this.menuIconFormatter
},
{ prop: 'menuCode', label: '资源编码', show: true },
{ prop: 'menuPerms', label: '权限标识', show: true },
{ prop: 'menuPath', label: '资源路由地址', show: true },
{ prop: 'menuComponent', label: '资源组件路径', show: true },
......@@ -182,12 +205,34 @@ export default {
this.getList()
},
/** 新增按钮操作 */
handleAdd () {
this.$emit('showForm', undefined)
handleAdd (row) {
this.showOptions.data = {}
if (row != undefined) {
this.showOptions.data.parentId = row.id;
}
this.showOptions.showList = false
this.showOptions.showAdd = true
this.showOptions.showEdit = false
this.showOptions.showDetail = false
this.$emit('showCard', this.showOptions)
},
/** 修改按钮操作 */
handleEdit (row) {
this.$emit('showForm', row.id)
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
this.showOptions.showEdit = true
this.showOptions.showDetail = false
this.$emit('showCard', this.showOptions)
},
/** 详情按钮操作 */
handleDetail (row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
this.showOptions.showEdit = false
this.showOptions.showDetail = true
this.$emit('showCard', this.showOptions)
},
/** 删除按钮操作 */
handleDelete (row) {
......@@ -207,18 +252,18 @@ export default {
},
menuTypeFormatter (row, column, cellValue, index) {
const menuType = row.menuType
if (menuType === 0) {
if (menuType === '0') {
return <el-tag type="primary">目录</el-tag>
} else if (menuType === 1) {
} else if (menuType === '1') {
return <el-tag type="warning">菜单</el-tag>
} else if (menuType === 2) {
} else if (menuType === '2') {
return <el-tag type="info">按钮</el-tag>
}
},
statusFormatter (row, column, cellValue, index) {
const status = row.status
if (status === 0) {
return <el-tag type="success">禁用</el-tag>
if (status === '0') {
return <el-tag type="warning">禁用</el-tag>
} else {
return <el-tag type="success">正常</el-tag>
}
......
datax-ui/src/views/system/menu/index.vue
<template>
<div class="app-container">
<transition name="el-zoom-in-center">
<menu-list v-if="isShowList" @showForm="showForm"></menu-list>
<menu-list v-if="options.showList" @showCard="showCard"></menu-list>
</transition>
<transition name="el-zoom-in-top">
<menu-form v-if="isShowForm" :id="id" @showList="showList"></menu-form>
<menu-add v-if="options.showAdd" :data="options.data" @showCard="showCard"></menu-add>
</transition>
<transition name="el-zoom-in-top">
<menu-edit v-if="options.showEdit" :data="options.data" @showCard="showCard"></menu-edit>
</transition>
<transition name="el-zoom-in-bottom">
<menu-detail v-if="options.showDetail" :data="options.data" @showCard="showCard"></menu-detail>
</transition>
</div>
</template>
<script>
import MenuList from './MenuList'
import MenuForm from './MenuForm'
import MenuAdd from "./MenuAdd"
import MenuEdit from "./MenuEdit"
import MenuDetail from "./MenuDetail"
export default {
name: 'Menu',
components: { MenuList, MenuForm },
components: { MenuList, MenuAdd, MenuEdit, MenuDetail },
data () {
return {
id: undefined,
isShowList: true,
isShowForm: false
options: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
}
}
},
methods: {
showList () {
this.isShowList = true
this.isShowForm = false
},
showForm (id) {
this.id = id
this.isShowList = false
this.isShowForm = true
showCard (data) {
Object.assign(this.options, data);
}
}
}
......
datax-ui/src/views/system/post/PostList.vue
......@@ -160,7 +160,7 @@
</template>
<script>
import { listPost } from '@/api/system/post'
import { pagePost } from '@/api/system/post'
export default {
name: 'PostList',
......@@ -218,7 +218,7 @@ export default {
/** 查询岗位列表 */
getList () {
this.loading = true
listPost(this.queryParams).then(response => {
pagePost(this.queryParams).then(response => {
this.loading = false
if (response.success) {
const { data } = response
......
datax-ui/src/views/system/role/RoleAdd.vue
......@@ -18,6 +18,14 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="菜单权限">
<el-tree
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
empty-text="加载中，请稍后"
:props="menuDefaultProps"
></el-tree>
</el-form-item>
</el-col>
<el-col :span="12">
......@@ -32,6 +40,15 @@
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope === '2'">
<el-tree
:data="deptOptions"
show-checkbox
default-expand-all
ref="dept"
node-key="id"
empty-text="加载中，请稍后"
:props="deptDefaultProps"
></el-tree>
</el-form-item>
</el-col>
</el-row>
......@@ -54,6 +71,9 @@
<script>
import { addRole } from '@/api/system/role'
import { listMenu } from '@/api/system/menu'
import { listDept } from '@/api/system/dept'
import { construct } from '@/utils/json-tree'
export default {
name: 'RoleAdd',
......@@ -102,7 +122,15 @@ export default {
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: []
deptOptions: [],
menuDefaultProps: {
children: "children",
label: "menuName"
},
deptDefaultProps: {
children: "children",
label: "deptName"
}
}
},
created () {
......@@ -116,15 +144,63 @@ export default {
this.dataScopeOptions = response.data
}
})
this.getMenuTree()
this.getDeptTree()
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
/** 查询菜单树结构 */
getMenuTree () {
listMenu().then(response => {
if (response.success) {
const { data } = response
this.menuOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
/** 查询部门树结构 */
getDeptTree () {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
// 所有菜单节点数据
getMenuAllCheckedKeys () {
// 目前被选中的菜单节点
let checkedKeys = this.$refs.menu.getHalfCheckedKeys()
// 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
// 所有部门节点数据
getDeptAllCheckedKeys () {
// 目前被选中的部门节点
let checkedKeys = this.$refs.dept.getHalfCheckedKeys()
// 半选中的部门节点
let halfCheckedKeys = this.$refs.dept.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.menuList = this.getMenuAllCheckedKeys()
this.form.deptList = this.getDeptAllCheckedKeys()
addRole(this.form).then(response => {
if (response.success) {
this.$message.success("保存成功")
......
datax-ui/src/views/system/role/RoleDetail.vue
......@@ -17,6 +17,14 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="菜单权限">
<el-tree
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
empty-text="加载中，请稍后"
:props="menuDefaultProps"
></el-tree>
</el-form-item>
</el-col>
<el-col :span="12">
......@@ -31,6 +39,15 @@
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope === '2'">
<el-tree
:data="deptOptions"
show-checkbox
default-expand-all
ref="dept"
node-key="id"
empty-text="加载中，请稍后"
:props="deptDefaultProps"
></el-tree>
</el-form-item>
</el-col>
</el-row>
......@@ -53,6 +70,9 @@
<script>
import { getRole } from '@/api/system/role'
import { listMenu } from '@/api/system/menu'
import { listDept } from '@/api/system/dept'
import { construct } from '@/utils/json-tree'
export default {
name: 'RoleDetail',
......@@ -85,7 +105,15 @@ export default {
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: []
deptOptions: [],
menuDefaultProps: {
children: "children",
label: "menuName"
},
deptDefaultProps: {
children: "children",
label: "deptName"
}
}
},
created () {
......@@ -100,17 +128,67 @@ export default {
this.dataScopeOptions = response.data
}
})
this.getMenuTree()
this.getDeptTree()
this.getRole(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
/** 查询菜单树结构 */
getMenuTree () {
listMenu().then(response => {
if (response.success) {
const { data } = response
this.menuOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
/** 查询部门树结构 */
getDeptTree () {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
// 所有菜单节点数据
getMenuAllCheckedKeys () {
// 目前被选中的菜单节点
let checkedKeys = this.$refs.menu.getHalfCheckedKeys()
// 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
// 所有部门节点数据
getDeptAllCheckedKeys () {
// 目前被选中的部门节点
let checkedKeys = this.$refs.dept.getHalfCheckedKeys()
// 半选中的部门节点
let halfCheckedKeys = this.$refs.dept.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
/** 获取详情 */
getRole: function(id) {
getRole(id).then(response => {
if (response.success) {
this.form = response.data
let menuCheckedKeys = response.data.menus.map(menu => menu.id)
let deptCheckedKeys = response.data.depts.map(dept => dept.id)
this.$refs.menu.setCheckedKeys(menuCheckedKeys)
this.$refs.dept.setCheckedKeys(deptCheckedKeys)
}
})
}
......
datax-ui/src/views/system/role/RoleEdit.vue
......@@ -18,6 +18,14 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="菜单权限">
<el-tree
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
empty-text="加载中，请稍后"
:props="menuDefaultProps"
></el-tree>
</el-form-item>
</el-col>
<el-col :span="12">
......@@ -32,6 +40,15 @@
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope === '2'">
<el-tree
:data="deptOptions"
show-checkbox
default-expand-all
ref="dept"
node-key="id"
empty-text="加载中，请稍后"
:props="deptDefaultProps"
></el-tree>
</el-form-item>
</el-col>
</el-row>
......@@ -54,6 +71,9 @@
<script>
import { getRole, updateRole } from '@/api/system/role'
import { listMenu } from '@/api/system/menu'
import { listDept } from '@/api/system/dept'
import { construct } from '@/utils/json-tree'
export default {
name: 'RoleEdit',
......@@ -95,7 +115,15 @@ export default {
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: []
deptOptions: [],
menuDefaultProps: {
children: "children",
label: "menuName"
},
deptDefaultProps: {
children: "children",
label: "deptName"
}
}
},
created () {
......@@ -110,17 +138,67 @@ export default {
this.dataScopeOptions = response.data
}
})
this.getMenuTree()
this.getDeptTree()
this.getRole(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
/** 查询菜单树结构 */
getMenuTree () {
listMenu().then(response => {
if (response.success) {
const { data } = response
this.menuOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
/** 查询部门树结构 */
getDeptTree () {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
// 所有菜单节点数据
getMenuAllCheckedKeys () {
// 目前被选中的菜单节点
let checkedKeys = this.$refs.menu.getHalfCheckedKeys()
// 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
// 所有部门节点数据
getDeptAllCheckedKeys () {
// 目前被选中的部门节点
let checkedKeys = this.$refs.dept.getHalfCheckedKeys()
// 半选中的部门节点
let halfCheckedKeys = this.$refs.dept.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
/** 获取详情 */
getRole: function(id) {
getRole(id).then(response => {
if (response.success) {
this.form = response.data
let menuCheckedKeys = response.data.menus.map(menu => menu.id)
let deptCheckedKeys = response.data.depts.map(dept => dept.id)
this.$refs.menu.setCheckedKeys(menuCheckedKeys)
this.$refs.dept.setCheckedKeys(deptCheckedKeys)
}
})
},
......@@ -128,6 +206,8 @@ export default {
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.menuList = this.getMenuAllCheckedKeys()
this.form.deptList = this.getDeptAllCheckedKeys()
updateRole(this.form).then(response => {
if (response.success) {
this.$message.success("保存成功")
......
datax-ui/src/views/system/role/RoleList.vue
......@@ -160,7 +160,7 @@
</template>
<script>
import { listRole } from '@/api/system/role'
import { pageRole } from '@/api/system/role'
export default {
name: 'RoleList',
......@@ -225,7 +225,7 @@ export default {
/** 查询角色列表 */
getList () {
this.loading = true
listRole(this.queryParams).then(response => {
pageRole(this.queryParams).then(response => {
this.loading = false
if (response.success) {
const { data } = response
......
datax-ui/src/views/system/user/UserAdd.vue 0 → 100644
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm">保存</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名称" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入用户昵称" />
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" />
</el-form-item>
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入电子邮箱" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-input v-model="form.birthday" placeholder="请输入出生日期" />
</el-form-item>
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="请选择归属部门" />
</el-form-item>
<el-form-item label="岗位">
<el-select v-model="form.roleList" multiple placeholder="请选择岗位">
<el-option
v-for="item in postOptions"
:key="item.id"
:label="item.postName"
:value="item.id"
:disabled="item.status === '0'"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.postList" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.roleName"
:value="item.id"
:disabled="item.status === '0'"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { addUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
import { listPost } from '@/api/system/post'
import { listRole } from '@/api/system/role'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: 'UserAdd',
components: { Treeselect },
props: {
data: {
type: Object,
default: function() {
return {}
}
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '用户新增',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 表单参数
form: {
status: '1',
deptId: '',
roleList: [],
postList: []
},
// 表单校验
rules: {
username: [
{ required: true, message: "用户名称不能为空", trigger: "blur" }
],
nickname: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "电子邮箱不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的电子邮箱",
trigger: ["blur", "change"]
}
],
phone: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
],
deptId: [
{ required: true, message: "归属部门不能为空", trigger: "blur" }
]
},
// 状态数据字典
statusOptions: [],
// 部门树选项
deptOptions: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: []
}
},
created () {
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDeptTreeSelect()
this.getPostList()
this.getRoleList()
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getDeptTreeSelect: function() {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
/** 转换部门数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
getPostList () {
listPost().then(response => {
if (response.success) {
this.postOptions = response.data
}
})
},
getRoleList () {
listRole().then(response => {
if (response.success) {
this.roleOptions = response.data
}
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
addUser(this.form).then(response => {
if (response.success) {
this.$message.success("保存成功")
setTimeout(() => {
// 2秒后跳转列表页
this.$emit('showCard', this.showOptions)
}, 2000)
} else {
this.$message.error("保存失败")
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/user/UserDetail.vue 0 → 100644
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" label-width="80px" disabled>
<el-form-item label="用户名称" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入用户昵称" />
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" />
</el-form-item>
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入电子邮箱" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-input v-model="form.birthday" placeholder="请输入出生日期" />
</el-form-item>
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="请选择归属部门" />
</el-form-item>
<el-form-item label="岗位">
<el-select v-model="form.roleList" multiple placeholder="请选择岗位">
<el-option
v-for="item in postOptions"
:key="item.id"
:label="item.postName"
:value="item.id"
:disabled="item.status === '0'"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.postList" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.roleName"
:value="item.id"
:disabled="item.status === '0'"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { getUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
import { listPost } from '@/api/system/post'
import { listRole } from '@/api/system/role'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: 'UserDetail',
components: { Treeselect },
props: {
data: {
type: Object,
default: function() {
return {}
}
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '用户详情',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 表单参数
form: {},
// 状态数据字典
statusOptions: [],
// 部门树选项
deptOptions: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: []
}
},
created () {
console.log('id:' + this.data.id)
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDeptTreeSelect()
this.getPostList()
this.getRoleList()
this.getUser(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getDeptTreeSelect: function() {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
/** 转换部门数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
getPostList () {
listPost().then(response => {
if (response.success) {
this.postOptions = response.data
}
})
},
getRoleList () {
listRole().then(response => {
if (response.success) {
this.roleOptions = response.data
}
})
},
/** 获取详情 */
getUser: function(id) {
getUser(id).then(response => {
if (response.success) {
this.form = response.data
this.form.roleList = response.data.roles.map(role => role.id)
this.form.postList = response.data.posts.map(post => post.id)
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/user/UserEdit.vue 0 → 100644
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm">保存</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名称" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入用户昵称" />
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" />
</el-form-item>
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入电子邮箱" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-input v-model="form.birthday" placeholder="请输入出生日期" />
</el-form-item>
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="请选择归属部门" />
</el-form-item>
<el-form-item label="岗位">
<el-select v-model="form.roleList" multiple placeholder="请选择岗位">
<el-option
v-for="item in postOptions"
:key="item.id"
:label="item.postName"
:value="item.id"
:disabled="item.status === '0'"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.postList" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.roleName"
:value="item.id"
:disabled="item.status === '0'"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { getUser, updateUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
import { listPost } from '@/api/system/post'
import { listRole } from '@/api/system/role'
import { construct } from '@/utils/json-tree'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: 'UserEdit',
components: { Treeselect },
props: {
data: {
type: Object,
default: function() {
return {}
}
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '用户编辑',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 表单参数
form: {},
// 表单校验
rules: {
username: [
{ required: true, message: "用户名称不能为空", trigger: "blur" }
],
nickname: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "电子邮箱不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的电子邮箱",
trigger: ["blur", "change"]
}
],
phone: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
],
deptId: [
{ required: true, message: "归属部门不能为空", trigger: "blur" }
]
},
// 状态数据字典
statusOptions: [],
// 部门树选项
deptOptions: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: []
}
},
created () {
console.log('id:' + this.data.id)
this.getDicts("sys_common_status").then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getDeptTreeSelect()
this.getPostList()
this.getRoleList()
this.getUser(this.data.id)
},
methods: {
showCard () {
this.$emit('showCard', this.showOptions)
},
getDeptTreeSelect: function() {
listDept().then(response => {
if (response.success) {
const { data } = response
this.deptOptions = construct(data, {
id: 'id',
pid: 'parentId',
children: 'children'
})
}
})
},
/** 转换部门数据结构 */
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
getPostList () {
listPost().then(response => {
if (response.success) {
this.postOptions = response.data
}
})
},
getRoleList () {
listRole().then(response => {
if (response.success) {
this.roleOptions = response.data
}
})
},
/** 获取详情 */
getUser: function(id) {
getUser(id).then(response => {
if (response.success) {
this.form = response.data
this.form.roleList = response.data.roles.map(role => role.id)
this.form.postList = response.data.posts.map(post => post.id)
}
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUser(this.form).then(response => {
if (response.success) {
this.$message.success("保存成功")
setTimeout(() => {
// 2秒后跳转列表页
this.$emit('showCard', this.showOptions)
}, 2000)
} else {
this.$message.error("保存失败")
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/user/UserForm.vue deleted 100644 → 0
<template>
<div>
<el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="showList">返回列表</el-button>
</div>
111
</el-card>
</div>
</template>
<script>
export default {
name: 'UserForm',
props: {
id: {
type: String,
default: undefined
}
},
data () {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
title: '用户'
}
},
created () {
if (this.id) {
this.title = '修改用户'
} else {
this.title = '新增用户'
}
},
methods: {
showList () {
this.$emit('showList')
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/user/UserList.vue
......@@ -65,6 +65,14 @@
v-hasPerm="['system:user:edit']"
>修改</el-button>
<el-button
type="info"
icon="el-icon-view"
size="mini"
:disabled="single"
@click="handleDetail"
v-hasPerm="['system:user:edit']"
>详情</el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
......@@ -155,6 +163,13 @@
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPerm="['system:user:edit']"
>详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPerm="['system:user:remove']"
......@@ -168,8 +183,8 @@
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.pageNum"
:page-size="queryParams.pageSize"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:total="total"
></el-pagination>
</el-card>
......@@ -192,6 +207,14 @@ export default {
return {
bodyHeight: document.body.offsetHeight - 130 + 'px',
tableHeight: document.body.offsetHeight - 230 + 'px',
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 遮罩层
loading: true,
// 选中数组
......@@ -200,8 +223,6 @@ export default {
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 表格头
tableColumns: [
{ prop: 'username', label: '用户名称', show: true },
......@@ -209,7 +230,7 @@ export default {
{ prop: 'email', label: '电子邮箱', show: true },
{ prop: 'phone', label: '手机号码', show: true },
{
prop: 'depts',
prop: 'dept',
label: '所属部门',
show: true,
formatter: this.deptFormatter
......@@ -239,6 +260,8 @@ export default {
tableSize: 'medium',
// 用户表格数据
userList: [],
// 总数据条数
total: 0,
// 查询参数
queryParams: {
pageNum: 1,
......@@ -285,10 +308,12 @@ export default {
getList () {
this.loading = true
listUser(this.queryParams).then(response => {
const { data } = response
this.userList = data.data
this.total = data.totalPage
this.loading = false
if (response.success) {
const { data } = response
this.userList = data.data
this.total = data.total
}
})
},
/** 查询部门列表 */
......@@ -331,7 +356,7 @@ export default {
handleRefresh () {
this.getList()
},
// 多选框选中数据
/** 多选框选中数据 */
handleSelectionChange (selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
......@@ -339,11 +364,30 @@ export default {
},
/** 新增按钮操作 */
handleAdd () {
this.$emit('showForm', undefined)
this.showOptions.data = {}
this.showOptions.showList = false
this.showOptions.showAdd = true
this.showOptions.showEdit = false
this.showOptions.showDetail = false
this.$emit('showCard', this.showOptions)
},
/** 修改按钮操作 */
handleEdit (row) {
this.$emit('showForm', row.id)
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
this.showOptions.showEdit = true
this.showOptions.showDetail = false
this.$emit('showCard', this.showOptions)
},
/** 详情按钮操作 */
handleDetail (row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
this.showOptions.showEdit = false
this.showOptions.showDetail = true
this.$emit('showCard', this.showOptions)
},
/** 删除按钮操作 */
handleDelete (row) {
......@@ -363,13 +407,7 @@ export default {
type: 'warning'
})
}
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
})
this.$message.warning('不支持批量删除')
},
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
......@@ -386,7 +424,7 @@ export default {
this.advanced = !this.advanced
},
deptFormatter (row, column, cellValue, index) {
return row.depts.map(item => item.deptName).join(',')
return row.dept.deptName
},
roleFormatter (row, column, cellValue, index) {
return row.roles.map(item => item.roleName).join(',')
......@@ -395,11 +433,12 @@ export default {
return row.posts.map(item => item.postName).join(',')
},
statusFormatter (row, column, cellValue, index) {
const status = row.status
if (status === 0) {
return <el-tag type="success">禁用</el-tag>
let status = row.status
let status_dictText = row.status_dictText
if (status === '0') {
return <el-tag type="warning">{status_dictText}</el-tag>
} else {
return <el-tag type="success">正常</el-tag>
return <el-tag type="success">{status_dictText}</el-tag>
}
},
handleCreated (ztreeObj) {
......
datax-ui/src/views/system/user/index.vue
<template>
<div class="app-container">
<transition name="el-zoom-in-center">
<user-list v-if="isShowList" @showForm="showForm"></user-list>
<user-list v-if="options.showList" @showCard="showCard"></user-list>
</transition>
<transition name="el-zoom-in-top">
<user-form v-if="isShowForm" :id="id" @showList="showList"></user-form>
<user-add v-if="options.showAdd" :data="options.data" @showCard="showCard"></user-add>
</transition>
<transition name="el-zoom-in-top">
<user-edit v-if="options.showEdit" :data="options.data" @showCard="showCard"></user-edit>
</transition>
<transition name="el-zoom-in-bottom">
<user-detail v-if="options.showDetail" :data="options.data" @showCard="showCard"></user-detail>
</transition>
</div>
</template>
<script>
import UserList from './UserList'
import UserForm from './UserForm'
import UserAdd from "./UserAdd"
import UserEdit from "./UserEdit"
import UserDetail from "./UserDetail"
export default {
name: 'User',
components: { UserList, UserForm },
components: { UserList, UserAdd, UserEdit, UserDetail },
data () {
return {
id: undefined,
isShowList: true,
isShowForm: false
options: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
}
}
},
methods: {
showList () {
this.isShowList = true
this.isShowForm = false
},
showForm (id) {
this.id = id
this.isShowList = false
this.isShowForm = true
showCard (data) {
Object.assign(this.options, data);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment