2.0.0项目初始化

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);
-        return R.ok();
+        DeptEntity deptEntity = deptService.saveDept(dept);
+        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);
-        return R.ok();
+        DeptEntity deptEntity = deptService.updateDept(dept);
+        return R.ok().setData(deptMapper.toVO(deptEntity));
     }
 
     @ApiOperation(value = "删除部门", notes = "根据url的id来指定删除对象")

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);
-        return R.ok();
+        PostEntity postEntity = postService.savePost(post);
+        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);
-        return R.ok();
+        PostEntity postEntity = postService.updatePost(post);
+        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();
+    }
 }
 

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);
-        return R.ok();
+        RoleEntity roleEntity = roleService.saveRole(role);
+        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);
-        return R.ok();
+        RoleEntity roleEntity = roleService.updateRole(role);
+        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();
+    }
 }
 

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);
 }

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);
 }

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);
 }

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);
 }

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);
 }

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

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);
+    }
 }

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);
+    }
 }

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
+  })
+}

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',

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
+  })
+}

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>

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>

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>

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>

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 () {
-      this.$emit('showForm', undefined)
+    handleAdd (row) {
+      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>
       }
     }
   }

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,
-      isShowList: true,
-      isShowForm: false
+      options: {
+        id: undefined,
+        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/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("保存失败")
             }
           })
         }

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,

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("保存失败")
             }
           })
         }

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>
       }
     }
   }

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>

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>

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>

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>

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"
-        :page-size="queryParams.pageSize"
+        :current-page.sync="queryParams.pageNum"
+        :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('选中数据将被永久删除, 是否继续？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-      }).catch(() => {
-      })
+      this.$message.warning('不支持批量删除')
     },
     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>
       }
     }
   }

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,
-      isShowList: true,
-      isShowForm: false
+      options: {
+        id: undefined,
+        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);
     }
   }
 }