2.0.0项目初始化

94fadcf7 · yuwei · b6ade232 · 94fadcf7 · 94fadcf7 · 94fadcf7
Commit 94fadcf7 authored May 25, 2020 by yuwei
30 changed files
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/DeptController.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/DeptController.java
@@ -60,8 +60,8 @@ public class DeptController extends BaseController {
    @ApiImplicitParam(name = "dept", value = "部门详细实体dept", required = true, dataType = "DeptDto")
    @PostMapping()
    public R saveDept(@RequestBody @Validated({ValidationGroups.Insert.class}) DeptDto dept) {
-        deptService.saveDept(dept);
+        DeptEntity deptEntity = deptService.saveDept(dept);
-        return R.ok();
+        return R.ok().setData(deptMapper.toVO(deptEntity));
    }
    @ApiOperation(value = "更新部门详细信息", notes = "根据url的id来指定更新对象，并根据传过来的dept信息来更新部门详细信息")
@@ -71,8 +71,8 @@ public class DeptController extends BaseController {
    })
    @PutMapping("/{id}")
    public R updateDept(@PathVariable String id, @RequestBody @Validated({ValidationGroups.Update.class}) DeptDto dept) {
-        deptService.updateDept(dept);
+        DeptEntity deptEntity = deptService.updateDept(dept);
-        return R.ok();
+        return R.ok().setData(deptMapper.toVO(deptEntity));
    }
    @ApiOperation(value = "删除部门", notes = "根据url的id来指定删除对象")

--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/PostController.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/PostController.java
@@ -71,8 +71,8 @@ public class PostController extends BaseController {
    @ApiImplicitParam(name = "post", value = "岗位详细实体post", required = true, dataType = "PostDto")
    @PostMapping()
    public R savePost(@RequestBody @Validated({ValidationGroups.Insert.class}) PostDto post) {
-        postService.savePost(post);
+        PostEntity postEntity = postService.savePost(post);
-        return R.ok();
+        return R.ok().setData(postMapper.toVO(postEntity));
    }
    @ApiOperation(value = "更新岗位详细信息", notes = "根据url的id来指定更新对象，并根据传过来的post信息来更新岗位详细信息")
@@ -82,8 +82,8 @@ public class PostController extends BaseController {
    })
    @PutMapping("/{id}")
    public R updatePost(@PathVariable String id, @RequestBody @Validated({ValidationGroups.Update.class}) PostDto post) {
-        postService.updatePost(post);
+        PostEntity postEntity = postService.updatePost(post);
-        return R.ok();
+        return R.ok().setData(postMapper.toVO(postEntity));
    }
    @ApiOperation(value = "删除岗位", notes = "根据url的id来指定删除对象")
@@ -93,5 +93,13 @@ public class PostController extends BaseController {
        postService.deletePostById(id);
        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) {
+        postService.deletePostBatch(ids);
+        return R.ok();
+    }
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/RoleController.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/controller/RoleController.java
@@ -71,8 +71,8 @@ public class RoleController extends BaseController {
    @ApiImplicitParam(name = "role", value = "角色详细实体role", required = true, dataType = "RoleDto")
    @PostMapping()
    public R saveRole(@RequestBody @Validated({ValidationGroups.Insert.class}) RoleDto role) {
-        roleService.saveRole(role);
+        RoleEntity roleEntity = roleService.saveRole(role);
-        return R.ok();
+        return R.ok().setData(roleMapper.toVO(roleEntity));
    }
    @ApiOperation(value = "更新角色详细信息", notes = "根据url的id来指定更新对象，并根据传过来的role信息来更新角色详细信息")
@@ -82,8 +82,8 @@ public class RoleController extends BaseController {
    })
    @PutMapping("/{id}")
    public R updateRole(@PathVariable String id, @RequestBody @Validated({ValidationGroups.Update.class}) RoleDto role) {
-        roleService.updateRole(role);
+        RoleEntity roleEntity = roleService.updateRole(role);
-        return R.ok();
+        return R.ok().setData(roleMapper.toVO(roleEntity));
    }
    @ApiOperation(value = "删除角色", notes = "根据url的id来指定删除对象")
@@ -93,5 +93,13 @@ public class RoleController extends BaseController {
        roleService.deleteRoleById(id);
        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) {
+        roleService.deleteRoleBatch(ids);
+        return R.ok();
+    }
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/dao/RoleDeptDao.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/dao/RoleDeptDao.java
@@ -22,4 +22,9 @@ public interface RoleDeptDao extends BaseDao<RoleDeptEntity> {
    @Delete("delete from sys_role_dept where role_id = #{id}")
    void deleteByRoleId(String id);
+    @Delete("<script>" +
+            "delete from sys_role_dept where role_id in <foreach collection='list' item='id' open='(' separator=',' close=')'>#{id}</foreach>" +
+            "</script>")
+    void deleteByRoleIds(List<String> ids);
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/dao/RoleMenuDao.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/dao/RoleMenuDao.java
@@ -22,4 +22,9 @@ public interface RoleMenuDao extends BaseDao<RoleMenuEntity> {
    @Delete("delete from sys_role_menu where role_id = #{id}")
    void deleteByRoleId(String id);
+    @Delete("<script>" +
+            "delete from sys_role_menu where role_id in <foreach collection='list' item='id' open='(' separator=',' close=')'>#{id}</foreach>" +
+            "</script>")
+    void deleteByRoleIds(List<String> ids);
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/DeptService.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/DeptService.java
@@ -14,9 +14,9 @@ import cn.datax.service.system.api.entity.DeptEntity;
 */
 public interface DeptService extends BaseService<DeptEntity> {
-    void saveDept(DeptDto dept);
+    DeptEntity saveDept(DeptDto dept);
-    void updateDept(DeptDto dept);
+    DeptEntity updateDept(DeptDto dept);
    void deleteDeptById(String id);
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/PostService.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/PostService.java
@@ -4,6 +4,8 @@ import cn.datax.service.system.api.dto.PostDto;
 import cn.datax.service.system.api.entity.PostEntity;
 import cn.datax.common.base.BaseService;
+import java.util.List;
 /**
 * <p>
 *  服务类
@@ -14,9 +16,11 @@ import cn.datax.common.base.BaseService;
 */
 public interface PostService extends BaseService<PostEntity> {
-    void savePost(PostDto post);
+    PostEntity savePost(PostDto post);
-    void updatePost(PostDto post);
+    PostEntity updatePost(PostDto post);
    void deletePostById(String id);
+    void deletePostBatch(List<String> ids);
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/RoleService.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/RoleService.java
@@ -4,6 +4,8 @@ import cn.datax.common.base.BaseService;
 import cn.datax.service.system.api.dto.RoleDto;
 import cn.datax.service.system.api.entity.RoleEntity;
+import java.util.List;
 /**
 * <p>
 *  服务类
@@ -14,10 +16,11 @@ import cn.datax.service.system.api.entity.RoleEntity;
 */
 public interface RoleService extends BaseService<RoleEntity> {
-    void saveRole(RoleDto role);
+    RoleEntity saveRole(RoleDto role);
-    void updateRole(RoleDto role);
+    RoleEntity updateRole(RoleDto role);
    void deleteRoleById(String id);
+    void deleteRoleBatch(List<String> ids);
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/DeptServiceImpl.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/DeptServiceImpl.java
@@ -40,7 +40,7 @@ public class DeptServiceImpl extends BaseServiceImpl<DeptDao, DeptEntity> implem
    @Override
    @Transactional(rollbackFor = Exception.class)
-    public void saveDept(DeptDto deptDto) {
+    public DeptEntity saveDept(DeptDto deptDto) {
        DeptEntity dept = deptMapper.toEntity(deptDto);
        int n = deptDao.selectCount(Wrappers.<DeptEntity>lambdaQuery().eq(DeptEntity::getDeptName, dept.getDeptName()));
        if(n > 0){
@@ -48,6 +48,7 @@ public class DeptServiceImpl extends BaseServiceImpl<DeptDao, DeptEntity> implem
        }
        deptDao.insert(dept);
        insertBatchRelation(dept);
+        return dept;
    }
    private void insertBatchRelation(DeptEntity dept) {
@@ -69,12 +70,13 @@ public class DeptServiceImpl extends BaseServiceImpl<DeptDao, DeptEntity> implem
    @Override
    @Transactional(rollbackFor = Exception.class)
-    public void updateDept(DeptDto deptDto) {
+    public DeptEntity updateDept(DeptDto deptDto) {
        DeptEntity dept = deptMapper.toEntity(deptDto);
        deptDao.updateById(dept);
        deptRelationDao.delete(Wrappers.<DeptRelationEntity>lambdaQuery()
                .eq(DeptRelationEntity::getAncestor, dept.getId()));
        insertBatchRelation(dept);
+        return dept;
    }
    @Override

--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/PostServiceImpl.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/PostServiceImpl.java
@@ -13,6 +13,8 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
+import java.util.List;
 /**
 * <p>
 *  服务实现类
@@ -32,20 +34,22 @@ public class PostServiceImpl extends BaseServiceImpl<PostDao, PostEntity> implem
    @Override
    @Transactional(rollbackFor = Exception.class)
-    public void savePost(PostDto postDto) {
+    public PostEntity savePost(PostDto postDto) {
        PostEntity post = postMapper.toEntity(postDto);
        int n = postDao.selectCount(Wrappers.<PostEntity>lambdaQuery().eq(PostEntity::getPostName, post.getPostName()));
        if(n > 0){
            throw new DataException("该岗位名已存在");
        }
        postDao.insert(post);
+        return post;
    }
    @Override
    @Transactional(rollbackFor = Exception.class)
-    public void updatePost(PostDto postDto) {
+    public PostEntity updatePost(PostDto postDto) {
        PostEntity post = postMapper.toEntity(postDto);
        postDao.updateById(post);
+        return post;
    }
    @Override
@@ -53,4 +57,10 @@ public class PostServiceImpl extends BaseServiceImpl<PostDao, PostEntity> implem
    public void deletePostById(String id) {
        postDao.deleteById(id);
    }
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void deletePostBatch(List<String> ids) {
+        postDao.deleteBatchIds(ids);
+    }
 }
--- a/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/RoleServiceImpl.java
+++ b/datax-modules/system-service-parent/system-service/src/main/java/cn/datax/service/system/service/impl/RoleServiceImpl.java
@@ -44,7 +44,7 @@ public class RoleServiceImpl extends BaseServiceImpl<RoleDao, RoleEntity> implem
    @Override
    @Transactional(rollbackFor = Exception.class)
-    public void saveRole(RoleDto roleDto) {
+    public RoleEntity saveRole(RoleDto roleDto) {
        RoleEntity role = roleMapper.toEntity(roleDto);
        int n = roleDao.selectCount(Wrappers.<RoleEntity>lambdaQuery().eq(RoleEntity::getRoleName, role.getRoleName()));
        if(n > 0){
@@ -57,6 +57,7 @@ public class RoleServiceImpl extends BaseServiceImpl<RoleDao, RoleEntity> implem
        if(CollUtil.isNotEmpty(roleDto.getDeptList())){
            insertBatchDept(roleDto.getDeptList(), role.getId());
        }
+        return role;
    }
    private void insertBatchMenu(List<String> menus, String roleId) {
@@ -83,7 +84,7 @@ public class RoleServiceImpl extends BaseServiceImpl<RoleDao, RoleEntity> implem
    @Override
    @Transactional(rollbackFor = Exception.class)
-    public void updateRole(RoleDto roleDto) {
+    public RoleEntity updateRole(RoleDto roleDto) {
        RoleEntity role = roleMapper.toEntity(roleDto);
        roleDao.updateById(role);
        roleMenuDao.delete(Wrappers.<RoleMenuEntity>lambdaQuery()
@@ -96,6 +97,7 @@ public class RoleServiceImpl extends BaseServiceImpl<RoleDao, RoleEntity> implem
        if(CollUtil.isNotEmpty(roleDto.getDeptList())){
            insertBatchDept(roleDto.getDeptList(), role.getId());
        }
+        return role;
    }
    @Override
@@ -106,4 +108,11 @@ public class RoleServiceImpl extends BaseServiceImpl<RoleDao, RoleEntity> implem
        roleDao.deleteById(id);
    }
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void deleteRoleBatch(List<String> ids) {
+        roleMenuDao.deleteByRoleIds(ids);
+        roleDeptDao.deleteByRoleIds(ids);
+        roleDao.deleteBatchIds(ids);
+    }
 }
--- a/datax-ui/src/api/system/dept.js
+++ b/datax-ui/src/api/system/dept.js
 import request from '@/utils/request'
-export function listDept () {
+export function listDept (data) {
  return request({
    url: '/system/depts/list',
+    method: 'get',
+    params: data
+  })
+}
+export function getDept (id) {
+  return request({
+    url: '/system/depts/' + id,
    method: 'get'
  })
 }
+export function delDept (id) {
+  return request({
+    url: '/system/depts/' + id,
+    method: 'delete'
+  })
+}
+export function delDepts (ids) {
+  return request({
+    url: '/system/depts/batch/' + ids,
+    method: 'delete'
+  })
+}
+export function addDept (data) {
+  return request({
+    url: '/system/depts',
+    method: 'post',
+    data: data
+  })
+}
+export function updateDept (data) {
+  return request({
+    url: '/system/depts/' + data.id,
+    method: 'put',
+    data: data
+  })
+}
--- a/datax-ui/src/api/system/post.js
+++ b/datax-ui/src/api/system/post.js
@@ -22,6 +22,13 @@ export function delPost (id) {
  })
 }
+export function delPosts (ids) {
+  return request({
+    url: '/system/posts/batch/' + ids,
+    method: 'delete'
+  })
+}
 export function addPost (data) {
  return request({
    url: '/system/posts',

--- a/datax-ui/src/api/system/role.js
+++ b/datax-ui/src/api/system/role.js
@@ -7,3 +7,40 @@ export function listRole (data) {
    params: data
  })
 }
+export function getRole (id) {
+  return request({
+    url: '/system/roles/' + id,
+    method: 'get'
+  })
+}
+export function delRole (id) {
+  return request({
+    url: '/system/roles/' + id,
+    method: 'delete'
+  })
+}
+export function delRoles (ids) {
+  return request({
+    url: '/system/roles/batch/' + ids,
+    method: 'delete'
+  })
+}
+export function addRole (data) {
+  return request({
+    url: '/system/roles',
+    method: 'post',
+    data: data
+  })
+}
+export function updateRole (data) {
+  return request({
+    url: '/system/roles/' + data.id,
+    method: 'put',
+    data: data
+  })
+}
--- a/datax-ui/src/views/system/dept/DeptAdd.vue
+++ b/datax-ui/src/views/system/dept/DeptAdd.vue
+<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="deptOptions" placeholder="请选择上级部门" />
+              </el-form-item>
+              <el-form-item label="部门名称" prop="deptName">
+                <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+              </el-form-item>
+              <el-form-item label="部门编码" prop="deptNo">
+                <el-input v-model="form.deptNo" placeholder="请输入部门编码" />
+              </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 { addDept } from '@/api/system/dept'
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+export default {
+  name: 'DeptAdd',
+  components: { Treeselect },
+  props: {
+    parentId: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      bodyHeight: document.body.offsetHeight - 130 + 'px',
+      title: '部门新增',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {
+        status: '1',
+        parentId: '0'
+      },
+      // 表单校验
+      rules: {
+        parentId: [
+          { required: true, message: "上级部门不能为空", trigger: "blur" }
+        ],
+        deptName: [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ],
+        deptNo: [
+          { required: true, message: "部门编码不能为空", trigger: "blur" }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 部门树选项
+      deptOptions: []
+    }
+  },
+  created () {
+    console.log('parentId:' + this.parentId)
+    this.getDicts("sys_common_status").then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          addDept(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>
--- a/datax-ui/src/views/system/dept/DeptDetail.vue
+++ b/datax-ui/src/views/system/dept/DeptDetail.vue
+<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="deptOptions" />
+            </el-form-item>
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="form.deptName" />
+            </el-form-item>
+            <el-form-item label="部门编码" prop="deptNo">
+              <el-input v-model="form.deptNo" />
+            </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 { getDept } from '@/api/system/dept'
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+export default {
+  name: 'DeptDetail',
+  components: { Treeselect },
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      bodyHeight: document.body.offsetHeight - 130 + 'px',
+      title: '部门详情',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 状态数据字典
+      statusOptions: [],
+      // 部门树选项
+      deptOptions: []
+    }
+  },
+  created () {
+    console.log('id:' + this.id)
+    this.getDicts("sys_common_status").then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDept(this.id)
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    getDept: function(id) {
+      getDept(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>
--- a/datax-ui/src/views/system/dept/DeptEdit.vue
+++ b/datax-ui/src/views/system/dept/DeptEdit.vue
+<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="deptOptions" placeholder="请选择上级部门" />
+            </el-form-item>
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+            </el-form-item>
+            <el-form-item label="部门编码" prop="deptNo">
+              <el-input v-model="form.deptNo" placeholder="请输入部门编码" />
+            </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 { getDept, updateDept } from '@/api/system/dept'
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+export default {
+  name: 'DeptEdit',
+  components: { Treeselect },
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      bodyHeight: document.body.offsetHeight - 130 + 'px',
+      title: '部门编辑',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        parentId: [
+          { required: true, message: "上级部门不能为空", trigger: "blur" }
+        ],
+        deptName: [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ],
+        deptNo: [
+          { required: true, message: "部门编码不能为空", trigger: "blur" }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 部门树选项
+      deptOptions: []
+    }
+  },
+  created () {
+    console.log('id:' + this.id)
+    this.getDicts("sys_common_status").then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDept(this.id)
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    getDept: function(id) {
+      getDept(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+        }
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateDept(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>
--- a/datax-ui/src/views/system/dept/DeptForm.vue
+++ b/datax-ui/src/views/system/dept/DeptForm.vue
-<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: 'DeptForm',
-  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>
--- a/datax-ui/src/views/system/dept/DeptList.vue
+++ b/datax-ui/src/views/system/dept/DeptList.vue
@@ -80,6 +80,13 @@
            <el-button
              size="mini"
              type="text"
+              icon="el-icon-plus"
+              @click="handleAdd(scope.row)"
+              v-hasPerm="['system:dept:add']"
+            >新增</el-button>
+            <el-button
+              size="mini"
+              type="text"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.row)"
              v-hasPerm="['system:dept:edit']"
@@ -87,6 +94,13 @@
            <el-button
              size="mini"
              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+              v-hasPerm="['system:dept:edit']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPerm="['system:dept:remove']"
@@ -113,6 +127,7 @@ export default {
      // 表格头
      tableColumns: [
        { prop: 'deptName', label: '部门名称', show: true },
+        { prop: 'deptNo', label: '部门编码', show: true },
        {
          prop: 'status',
          label: '状态',
@@ -168,12 +183,34 @@ export default {
      this.getList()
    },
    /** 新增按钮操作 */
-    handleAdd () {
+    handleAdd (row) {
-      this.$emit('showForm', undefined)
+      if (row != undefined) {
+        this.showOptions.parentId = row.id;
+      }
+      this.showOptions.id = undefined
+      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.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.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) {
@@ -187,10 +224,10 @@ export default {
    },
    statusFormatter (row, column, cellValue, index) {
      const status = row.status
-      if (status === 0) {
+      if (status === "0") {
        return <el-tag type="success">禁用</el-tag>
      } else {
-        return <el-tag type="success">正常</el-tag>
+        return <el-tag type="success">启用</el-tag>
      }
    }
  }

--- a/datax-ui/src/views/system/dept/index.vue
+++ b/datax-ui/src/views/system/dept/index.vue
 <template>
  <div class="app-container">
    <transition name="el-zoom-in-center">
-      <dept-list v-if="isShowList" @showForm="showForm"></dept-list>
+      <dept-list v-if="options.showList" @showCard="showCard"></dept-list>
    </transition>
    <transition name="el-zoom-in-top">
-      <dept-form v-if="isShowForm" :id="id" @showList="showList"></dept-form>
+      <dept-add v-if="options.showAdd" :parentId="options.parentId" @showCard="showCard"></dept-add>
+    </transition>
+    <transition name="el-zoom-in-top">
+      <dept-edit v-if="options.showEdit" :id="options.id" @showCard="showCard"></dept-edit>
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <dept-detail v-if="options.showDetail" :id="options.id" @showCard="showCard"></dept-detail>
    </transition>
  </div>
 </template>
 <script>
 import DeptList from './DeptList'
-import DeptForm from './DeptForm'
+import DeptAdd from './DeptAdd'
+import DeptEdit from './DeptEdit'
+import DeptDetail from './DeptDetail'
 export default {
  name: 'Dept',
-  components: { DeptList, DeptForm },
+  components: { DeptList, DeptAdd, DeptEdit, DeptDetail },
  data () {
    return {
-      id: undefined,
+      options: {
-      isShowList: true,
+        id: undefined,
-      isShowForm: false
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
    }
  },
  methods: {
-    showList () {
+    showCard (data) {
-      this.isShowList = true
+      Object.assign(this.options, data);
-      this.isShowForm = false
-    },
-    showForm (id) {
-      this.id = id
-      this.isShowList = false
-      this.isShowForm = true
    }
  }
 }

--- a/datax-ui/src/views/system/post/PostAdd.vue
+++ b/datax-ui/src/views/system/post/PostAdd.vue
@@ -12,7 +12,7 @@
              <el-form-item label="岗位名称" prop="postName">
                <el-input v-model="form.postName" placeholder="请输入岗位名称" />
              </el-form-item>
-              <el-form-item label="岗位状态" prop="status">
+              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio
                    v-for="dict in statusOptions"
@@ -77,6 +77,13 @@ export default {
        if (valid) {
          addPost(this.form).then(response => {
            if (response.success) {
+              this.$message.success("保存成功")
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error("保存失败")
            }
          })
        }

--- a/datax-ui/src/views/system/post/PostDetail.vue
+++ b/datax-ui/src/views/system/post/PostDetail.vue
@@ -7,12 +7,12 @@
              <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">
+          <el-form ref="form" :model="form" label-width="80px" disabled>
            <el-form-item label="岗位名称" prop="postName">
-              <el-input v-model="form.postName" readonly />
+              <el-input v-model="form.postName" />
            </el-form-item>
            <el-form-item label="岗位状态" prop="status">
-              <el-radio-group v-model="form.status" disabled>
+              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in statusOptions"
                  :key="dict.id"
@@ -21,7 +21,7 @@
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
-              <el-input v-model="form.remark" type="textarea" readonly />
+              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
          </el-form>
        </el-card>
@@ -32,7 +32,7 @@
 import { getPost } from '@/api/system/post'
 export default {
-  name: 'PostAdd',
+  name: 'PostDetail',
  props: {
    id: {
      type: String,

--- a/datax-ui/src/views/system/post/PostEdit.vue
+++ b/datax-ui/src/views/system/post/PostEdit.vue
@@ -33,7 +33,7 @@
 import { getPost, updatePost } from '@/api/system/post'
 export default {
-  name: 'PostAdd',
+  name: 'PostEdit',
  props: {
    id: {
      type: String,
@@ -91,6 +91,13 @@ export default {
        if (valid) {
          updatePost(this.form).then(response => {
            if (response.success) {
+              this.$message.success("保存成功")
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error("保存失败")
            }
          })
        }

--- a/datax-ui/src/views/system/post/PostList.vue
+++ b/datax-ui/src/views/system/post/PostList.vue
@@ -322,10 +322,10 @@ export default {
    },
    statusFormatter (row, column, cellValue, index) {
      const status = row.status
-      if (status === 0) {
+      if (status === "0") {
        return <el-tag type="success">禁用</el-tag>
      } else {
-        return <el-tag type="success">正常</el-tag>
+        return <el-tag type="success">启用</el-tag>
      }
    }
  }

--- a/datax-ui/src/views/system/role/RoleAdd.vue
+++ b/datax-ui/src/views/system/role/RoleAdd.vue
+<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="postName">
+                <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+              </el-form-item>
+              <el-form-item label="角色编码" prop="roleCode">
+                <el-input v-model="form.roleCode" placeholder="请输入角色编码" />
+              </el-form-item>
+              <el-form-item label="数据范围" prop="dataScope">
+                <el-radio-group v-model="form.dataScope">
+                  <el-radio
+                    v-for="dict in dataScopeOptions"
+                    :key="dict.id"
+                    :label="dict.itemText"
+                  >{{dict.itemValue}}</el-radio>
+                </el-radio-group>
+              </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 { addRole } from '@/api/system/role'
+export default {
+  name: 'RoleAdd',
+  data () {
+    return {
+      bodyHeight: document.body.offsetHeight - 130 + 'px',
+      title: '角色新增',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {
+        status: '1',
+        dataScope: '1',
+        // 资源id数组
+        menuList: [],
+        // 数据范围为自定义时数据权限id数组
+        deptList: []
+      },
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        roleCode: [
+          { required: true, message: "角色编码不能为空", trigger: "blur" }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 数据范围数据字典
+      dataScopeOptions: [],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: []
+    }
+  },
+  created () {
+    this.getDicts("sys_common_status").then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDicts("sys_data_scope").then(response => {
+      if (response.success) {
+        this.dataScopeOptions = response.data
+      }
+    })
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          addRole(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>
--- a/datax-ui/src/views/system/role/RoleDetail.vue
+++ b/datax-ui/src/views/system/role/RoleDetail.vue
+<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="postName">
+              <el-input v-model="form.roleName" />
+            </el-form-item>
+            <el-form-item label="角色编码" prop="roleCode">
+              <el-input v-model="form.roleCode" />
+            </el-form-item>
+            <el-form-item label="数据范围" prop="dataScope">
+              <el-radio-group v-model="form.dataScope">
+                <el-radio
+                  v-for="dict in dataScopeOptions"
+                  :key="dict.id"
+                  :label="dict.itemText"
+                >{{dict.itemValue}}</el-radio>
+              </el-radio-group>
+            </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 { getRole } from '@/api/system/role'
+export default {
+  name: 'RoleDetail',
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      bodyHeight: document.body.offsetHeight - 130 + 'px',
+      title: '角色详情',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 状态数据字典
+      statusOptions: [],
+      // 数据范围数据字典
+      dataScopeOptions: [],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: []
+    }
+  },
+  created () {
+    console.log('id:' + this.id)
+    this.getDicts("sys_common_status").then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDicts("sys_data_scope").then(response => {
+      if (response.success) {
+        this.dataScopeOptions = response.data
+      }
+    })
+    this.getRole(this.id)
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    getRole: function(id) {
+      getRole(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>
--- a/datax-ui/src/views/system/role/RoleEdit.vue
+++ b/datax-ui/src/views/system/role/RoleEdit.vue
+<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="postName">
+              <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item label="角色编码" prop="roleCode">
+              <el-input v-model="form.roleCode" placeholder="请输入角色编码" />
+            </el-form-item>
+            <el-form-item label="数据范围" prop="dataScope">
+              <el-radio-group v-model="form.dataScope">
+                <el-radio
+                  v-for="dict in dataScopeOptions"
+                  :key="dict.id"
+                  :label="dict.itemText"
+                >{{dict.itemValue}}</el-radio>
+              </el-radio-group>
+            </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 { getRole, updateRole } from '@/api/system/role'
+export default {
+  name: 'RoleEdit',
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      bodyHeight: document.body.offsetHeight - 130 + 'px',
+      title: '角色编辑',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        roleCode: [
+          { required: true, message: "角色编码不能为空", trigger: "blur" }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 数据范围数据字典
+      dataScopeOptions: [],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: []
+    }
+  },
+  created () {
+    console.log('id:' + this.id)
+    this.getDicts("sys_common_status").then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDicts("sys_data_scope").then(response => {
+      if (response.success) {
+        this.dataScopeOptions = response.data
+      }
+    })
+    this.getRole(this.id)
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    getRole: function(id) {
+      getRole(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+        }
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateRole(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>
--- a/datax-ui/src/views/system/role/RoleForm.vue
+++ b/datax-ui/src/views/system/role/RoleForm.vue
-<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: 'RoleForm',
-  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>
--- a/datax-ui/src/views/system/role/RoleList.vue
+++ b/datax-ui/src/views/system/role/RoleList.vue
@@ -36,6 +36,14 @@
              v-hasPerm="['system:role:edit']"
            >修改</el-button>
            <el-button
+              type="info"
+              icon="el-icon-view"
+              size="mini"
+              :disabled="single"
+              @click="handleDetail"
+              v-hasPerm="['system:role:edit']"
+            >详情</el-button>
+            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
@@ -123,6 +131,13 @@
            <el-button
              size="mini"
              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+              v-hasPerm="['system:role:edit']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPerm="['system:role:remove']"
@@ -136,8 +151,8 @@
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
-        :current-page="queryParams.pageNum"
+        :current-page.sync="queryParams.pageNum"
-        :page-size="queryParams.pageSize"
+        :page-size.sync="queryParams.pageSize"
        :total="total"
      ></el-pagination>
    </el-card>
@@ -153,6 +168,14 @@ export default {
    return {
      bodyHeight: document.body.offsetHeight - 130 + 'px',
      tableHeight: document.body.offsetHeight - 230 + 'px',
+      // 展示切换
+      showOptions: {
+        id: undefined,
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
      // 遮罩层
      loading: true,
      // 选中数组
@@ -161,8 +184,6 @@ export default {
      single: true,
      // 非多个禁用
      multiple: true,
-      // 总条数
-      total: 0,
      // 表格头
      tableColumns: [
        { prop: 'roleCode', label: '角色编码', show: true },
@@ -186,11 +207,13 @@ export default {
      tableSize: 'medium',
      // 角色表格数据
      roleList: [],
+      // 总数据条数
+      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
-        roleName: ''
+        postName: ''
      }
    }
  },
@@ -203,10 +226,12 @@ export default {
    getList () {
      this.loading = true
      listRole(this.queryParams).then(response => {
-        const { data } = response
-        this.roleList = data.data
-        this.total = data.totalPage
        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.roleList = data.data
+          this.total = data.total
+        }
      })
    },
    initCols () {
@@ -238,7 +263,7 @@ export default {
    handleRefresh () {
      this.getList()
    },
-    // 多选框选中数据
+    /** 多选框选中数据 */
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
@@ -246,11 +271,30 @@ export default {
    },
    /** 新增按钮操作 */
    handleAdd () {
-      this.$emit('showForm', undefined)
+      this.showOptions.id = undefined
+      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.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.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) {
@@ -270,13 +314,7 @@ export default {
          type: 'warning'
        })
      }
-      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+      this.$message.warning('不支持批量删除')
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-      }).catch(() => {
-      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
@@ -291,7 +329,7 @@ export default {
    },
    dataScopeFormatter (row, column, cellValue, index) {
      const dataScope = row.dataScope
-      if (dataScope === 1) {
+      if (dataScope === "1") {
        return '全部'
      } else if (dataScope === 2) {
        return '自定义'
@@ -305,10 +343,10 @@ export default {
    },
    statusFormatter (row, column, cellValue, index) {
      const status = row.status
-      if (status === 0) {
+      if (status === "0") {
        return <el-tag type="success">禁用</el-tag>
      } else {
-        return <el-tag type="success">正常</el-tag>
+        return <el-tag type="success">启用</el-tag>
      }
    }
  }

--- a/datax-ui/src/views/system/role/index.vue
+++ b/datax-ui/src/views/system/role/index.vue
 <template>
  <div class="app-container">
    <transition name="el-zoom-in-center">
-      <role-list v-if="isShowList" @showForm="showForm"></role-list>
+      <role-list v-if="options.showList" @showCard="showCard"></role-list>
    </transition>
    <transition name="el-zoom-in-top">
-      <role-form v-if="isShowForm" :id="id" @showList="showList"></role-form>
+      <role-add v-if="options.showAdd" @showCard="showCard"></role-add>
+    </transition>
+    <transition name="el-zoom-in-top">
+      <role-edit v-if="options.showEdit" :id="options.id" @showCard="showCard"></role-edit>
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <role-detail v-if="options.showDetail" :id="options.id" @showCard="showCard"></role-detail>
    </transition>
  </div>
 </template>
 <script>
 import RoleList from './RoleList'
-import RoleForm from './RoleForm'
+import RoleAdd from './RoleAdd'
+import RoleEdit from './RoleEdit'
+import RoleDetail from './RoleDetail'
 export default {
  name: 'Role',
-  components: { RoleList, RoleForm },
+  components: { RoleList, RoleAdd, RoleEdit, RoleDetail },
  data () {
    return {
-      id: undefined,
+      options: {
-      isShowList: true,
+        id: undefined,
-      isShowForm: false
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
    }
  },
  methods: {
-    showList () {
+    showCard (data) {
-      this.isShowList = true
+      Object.assign(this.options, data);
-      this.isShowForm = false
-    },
-    showForm (id) {
-      this.id = id
-      this.isShowList = false
-      this.isShowForm = true
    }
  }
 }