diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Dto/OrganizationUnitMoveDto.cs b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Dto/OrganizationUnitMoveDto.cs
index 7b63634e6..0ef51015d 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Dto/OrganizationUnitMoveDto.cs
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Dto/OrganizationUnitMoveDto.cs
@@ -1,13 +1,9 @@
 using System;
-using System.ComponentModel.DataAnnotations;
-using Volo.Abp.Application.Dtos;
 
 namespace LINGYUN.Abp.Identity
 {
-    public class OrganizationUnitMoveDto : IEntityDto<Guid>
+    public class OrganizationUnitMoveDto
     {
-        [Required]
-        public Guid Id { get; set; }
         public Guid? ParentId { get; set; }
     }
 }
diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IOrganizationUnitAppService.cs b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IOrganizationUnitAppService.cs
index ae17cb285..d03e2d337 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IOrganizationUnitAppService.cs
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IOrganizationUnitAppService.cs
@@ -14,9 +14,9 @@ namespace LINGYUN.Abp.Identity
                         OrganizationUnitCreateDto,
                         OrganizationUnitUpdateDto>
     {
-        Task<OrganizationUnitDto> GetLastChildOrNullAsync([Required] Guid parentId);
+        Task<OrganizationUnitDto> GetLastChildOrNullAsync(Guid? parentId);
 
-        Task MoveAsync(OrganizationUnitMoveDto input);
+        Task MoveAsync(Guid id, OrganizationUnitMoveDto input);
 
         Task<ListResultDto<OrganizationUnitDto>> FindChildrenAsync(OrganizationUnitGetChildrenDto input);
 
diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application/LINGYUN/Abp/Identity/OrganizationUnitAppService.cs b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application/LINGYUN/Abp/Identity/OrganizationUnitAppService.cs
index 1ad5300d3..e23eaf86d 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application/LINGYUN/Abp/Identity/OrganizationUnitAppService.cs
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application/LINGYUN/Abp/Identity/OrganizationUnitAppService.cs
@@ -73,7 +73,7 @@ namespace LINGYUN.Abp.Identity
             return ObjectMapper.Map<OrganizationUnit, OrganizationUnitDto>(origanizationUnit);
         }
 
-        public virtual async Task<OrganizationUnitDto> GetLastChildOrNullAsync(Guid parentId)
+        public virtual async Task<OrganizationUnitDto> GetLastChildOrNullAsync(Guid? parentId)
         {
             var origanizationUnitLastChildren = await OrganizationUnitManager.GetLastChildOrNullAsync(parentId);
 
@@ -114,9 +114,9 @@ namespace LINGYUN.Abp.Identity
         }
 
         [Authorize(IdentityPermissions.OrganizationUnits.Update)]
-        public virtual async Task MoveAsync(OrganizationUnitMoveDto input)
+        public virtual async Task MoveAsync(Guid id, OrganizationUnitMoveDto input)
         {
-            await OrganizationUnitManager.MoveAsync(input.Id, input.ParentId);
+            await OrganizationUnitManager.MoveAsync(id, input.ParentId);
         }
 
         [Authorize(IdentityPermissions.OrganizationUnits.Update)]
diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/IOrganizationUnitController.cs b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/OrganizationUnitController.cs
similarity index 89%
rename from aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/IOrganizationUnitController.cs
rename to aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/OrganizationUnitController.cs
index 87804b7fa..536223d6c 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/IOrganizationUnitController.cs
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/OrganizationUnitController.cs
@@ -1,8 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using System;
-using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
-using System.Text;
 using System.Threading.Tasks;
 using Volo.Abp;
 using Volo.Abp.Application.Dtos;
@@ -13,13 +11,13 @@ namespace LINGYUN.Abp.Identity
 {
     [RemoteService(Name = IdentityRemoteServiceConsts.RemoteServiceName)]
     [Area("identity")]
-    [ControllerName("organization-unit")]
-    [Route("api/identity/organization-unit")]
-    public class IOrganizationUnitController : AbpController, IOrganizationUnitAppService
+    [ControllerName("organization-units")]
+    [Route("api/identity/organization-units")]
+    public class OrganizationUnitController : AbpController, IOrganizationUnitAppService
     {
         protected IOrganizationUnitAppService OrganizationUnitAppService { get; }
 
-        public IOrganizationUnitController(
+        public OrganizationUnitController(
             IOrganizationUnitAppService organizationUnitAppService)
         {
             OrganizationUnitAppService = organizationUnitAppService;
@@ -68,7 +66,7 @@ namespace LINGYUN.Abp.Identity
 
         [HttpGet]
         [Route("last-children")]
-        public virtual async Task<OrganizationUnitDto> GetLastChildOrNullAsync([Required] Guid parentId)
+        public virtual async Task<OrganizationUnitDto> GetLastChildOrNullAsync(Guid? parentId)
         {
             return await OrganizationUnitAppService.GetLastChildOrNullAsync(parentId);
         }
@@ -95,9 +93,9 @@ namespace LINGYUN.Abp.Identity
 
         [HttpPut]
         [Route("{id}/move")]
-        public virtual async Task MoveAsync(OrganizationUnitMoveDto input)
+        public virtual async Task MoveAsync(Guid id, OrganizationUnitMoveDto input)
         {
-            await OrganizationUnitAppService.MoveAsync(input);
+            await OrganizationUnitAppService.MoveAsync(id, input);
         }
 
         [HttpDelete]
diff --git a/vueJs/src/api/organizationunit.ts b/vueJs/src/api/organizationunit.ts
new file mode 100644
index 000000000..1890f8538
--- /dev/null
+++ b/vueJs/src/api/organizationunit.ts
@@ -0,0 +1,229 @@
+import ApiService from './serviceBase'
+import { pagerFormat } from '@/utils/index'
+import { AuditedEntityDto, PagedResultDto, PagedAndSortedResultRequestDto, ListResultDto } from './types'
+import { RoleDto } from './roles'
+import { UserDataDto } from './users'
+
+/** 远程服务地址 */
+const serviceUrl = process.env.VUE_APP_BASE_API
+
+export default class OrganizationUnitService {
+  /**
+   * 创建组织机构
+   * @param payload 类型为 OrganizationUnitCreate 的对象
+   * @returns 返回类型为 OrganizationUnit 的对象
+   */
+  public static createOrganizationUnit(payload: OrganizationUnitCreate) {
+    const _url = '/api/identity/organization-units'
+    return ApiService.Post<OrganizationUnit>(_url, payload, serviceUrl)
+  }
+
+  /**
+   * 查询组织机构列表
+   * @param payload 分页查询对象
+   * @returns 返回类型为 OrganizationUnit 的对象列表
+   */
+  public static getOrganizationUnits(payload: OrganizationUnitGetByPaged) {
+    let _url = '/api/identity/organization-units'
+    _url += '?filter=' + payload.filter
+    _url += '&sorting=' + payload.sorting
+    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    _url += '&maxResultCount=' + payload.maxResultCount
+    return ApiService.Get<PagedResultDto<OrganizationUnit>>(_url, serviceUrl)
+  }
+
+  /**
+   * 查询组织机构
+   * @param id 主键标识
+   * @returns 返回类型为 OrganizationUnit 的对象
+   */
+  public static getOrganizationUnit(id: string) {
+    let _url = '/api/identity/organization-units/'
+    _url += '?id=' + id
+    return ApiService.Get<OrganizationUnit>(_url, serviceUrl)
+  }
+
+  /**
+   * 变更组织机构
+   * @param payload 类型为 OrganizationUnitUpdate 的对象
+   * @returns 返回类型为 OrganizationUnit 的对象
+   */
+  public static updateOrganizationUnit(payload: OrganizationUnitUpdate) {
+    const _url = '/api/identity/organization-units'
+    return ApiService.Put<OrganizationUnit>(_url, payload, serviceUrl)
+  }
+
+  /**
+   * 查询组织机构下属列表
+   * @param id 主键标识
+   * @param recursive 是否查询所有子级
+   * @returns 返回类型为 OrganizationUnit 的对象列表
+   */
+  public static findOrganizationUnitChildren(id: string, recursive: boolean | undefined) {
+    let _url = 'api/identity/organization-units/find-children'
+    _url += '?id=' + id
+    if (recursive !== undefined) {
+      _url += '&recursive=' + recursive
+    }
+    return ApiService.Get<ListResultDto<OrganizationUnit>>(_url, serviceUrl)
+  }
+
+  /**
+   * 查询指定节点的最后一个组织机构
+   * @param parentId 父级节点标识
+   * @returns 返回类型为 OrganizationUnit 的对象
+   */
+  public static findOrganizationUnitLastChildren(parentId: string | undefined) {
+    let _url = 'api/identity/organization-units/last-children'
+    if (parentId !== undefined) {
+      _url += '?parentId=' + parentId
+    }
+    return ApiService.Get<OrganizationUnit>(_url, serviceUrl)
+  }
+
+  /**
+   * 移动组织机构
+   * @param id 主键标识
+   * @param parentId 移动到的父节点标识
+   */
+  public static moveOrganizationUnit(id: string, parentId: string | undefined) {
+    let _url = 'api/identity/organization-units/' + id + '/move'
+    _url += '?id=' + id
+    return ApiService.Put<OrganizationUnit>(_url, { parentId: parentId }, serviceUrl)
+  }
+
+  /**
+   * 删除组织机构
+   * @param id 主键标识
+   */
+  public static deleteOrganizationUnit(id: string) {
+    const _url = 'api/identity/organization-units/' + id
+    return ApiService.Delete(_url, serviceUrl)
+  }
+
+  /**
+   * 获取组织机构角色列表
+   * @param payload 类型为 OrganizationUnitGetRoleByPaged 的对象
+   * @returns 返回类型为 RoleDto 的对象列表
+   */
+  public static organizationUnitGetRoles(payload: OrganizationUnitGetRoleByPaged) {
+    let _url = '/api/identity/organization-units/management-roles'
+    _url += '?id=' + payload.id
+    _url += '&filter=' + payload.filter
+    _url += '&sorting=' + payload.sorting
+    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    _url += '&maxResultCount=' + payload.maxResultCount
+    return ApiService.Get<PagedResultDto<RoleDto>>(_url, serviceUrl)
+  }
+
+  /**
+   * 增加角色
+   * @param payload 类型为 OrganizationUnitAddRole 的对象
+   */
+  public static organizationUnitAddRole(payload: OrganizationUnitAddRole) {
+    const _url = '/api/identity/organization-units/management-roles'
+    return ApiService.Post<void>(_url, payload, serviceUrl)
+  }
+
+  /**
+   * 删除角色
+   * @param id 主键标识
+   * @param roleId 角色标识
+   */
+  public static organizationUnitRemoveRole(id: string, roleId: string) {
+    let _url = '/api/identity/organization-units/management-roles'
+    _url += '?id=' + id
+    _url += '&roleId=' + roleId
+    return ApiService.Delete(_url, serviceUrl)
+  }
+
+  /**
+   * 获取组织机构用户列表
+   * @param payload 类型为 OrganizationUnitGetRoleByPaged 的对象
+   * @returns 返回类型为 RoleDto 的对象列表
+   */
+  public static organizationUnitGetUsers(id: string) {
+    let _url = '/api/identity/organization-units/management-users'
+    _url += '?id=' + id
+    return ApiService.Get<ListResultDto<UserDataDto>>(_url, serviceUrl)
+  }
+
+  /**
+   * 增加用户
+   * @param payload 类型为 OrganizationUnitAddUser 的对象
+   */
+  public static organizationUnitAddUser(payload: OrganizationUnitAddUser) {
+    const _url = '/api/identity/organization-units/management-users'
+    return ApiService.Post<void>(_url, payload, serviceUrl)
+  }
+
+  /**
+   * 删除角色
+   * @param id 主键标识
+   * @param roleId 角色标识
+   */
+  public static organizationUnitRemoveUser(id: string, userId: string) {
+    let _url = '/api/identity/organization-units/management-users'
+    _url += '?id=' + id
+    _url += '&userId=' + userId
+    return ApiService.Delete(_url, serviceUrl)
+  }
+}
+
+/** 组织机构 */
+export class OrganizationUnit extends AuditedEntityDto {
+  /** 标识 */
+  id!: string
+  /** 父节点标识 */
+  parentId?: string
+  /** 编号 */
+  code!: string
+  /** 显示名称 */
+  displayName!: string
+}
+
+/** 组织机构分页查询对象 */
+export class OrganizationUnitGetByPaged extends PagedAndSortedResultRequestDto {
+  /** 过滤字符 */
+  filter!: string
+}
+
+/** 组织机构角色分页查询对象 */
+export class OrganizationUnitGetRoleByPaged extends PagedAndSortedResultRequestDto {
+  /** 主键标识 */
+  id!: string
+  /** 过滤字符 */
+  filter!: string
+}
+
+/** 组织机构创建对象 */
+export class OrganizationUnitCreate {
+  /** 显示名称 */
+  displayName!: string
+  /** 父节点标识 */
+  parentId?: string
+}
+
+/** 组织机构变更对象 */
+export class OrganizationUnitUpdate {
+  /** 标识 */
+  id!: string
+  /** 显示名称 */
+  displayName!: string
+}
+
+/** 组织机构增加部门对象 */
+export class OrganizationUnitAddRole {
+  /** 标识 */
+  id!: string
+  /** 部门标识 */
+  roleId!: string
+}
+
+/** 组织机构增加用户对象 */
+export class OrganizationUnitAddUser {
+  /** 标识 */
+  id!: string
+  /** 用户标识 */
+  userId!: string
+}
diff --git a/vueJs/src/lang/en.ts b/vueJs/src/lang/en.ts
index 68f8c4927..7c7d002bb 100644
--- a/vueJs/src/lang/en.ts
+++ b/vueJs/src/lang/en.ts
@@ -77,7 +77,8 @@ export default {
     identityServer: 'identity server',
     clients: 'clients',
     apiresources: 'api resources',
-    identityresources: 'id resources'
+    identityresources: 'id resources',
+    organizationUnit: 'organization unit'
   },
   navbar: {
     logOut: 'Log Out',
@@ -209,7 +210,7 @@ export default {
     passwordSecurity: 'security',
     systemSetting: 'system',
     userAccount: 'user account',
-    mailing: "mailing"
+    mailing: 'mailing'
   },
   task: {
     title: 'task'
diff --git a/vueJs/src/lang/zh.ts b/vueJs/src/lang/zh.ts
index ceac1578f..7ecdd356d 100644
--- a/vueJs/src/lang/zh.ts
+++ b/vueJs/src/lang/zh.ts
@@ -77,7 +77,8 @@ export default {
     identityServer: '身份认证服务器',
     clients: '客户端管理',
     apiresources: 'Api资源管理',
-    identityresources: '身份资源管理'
+    identityresources: '身份资源管理',
+    organizationUnit: '组织机构管理'
   },
   navbar: {
     logOut: '退出登录',
@@ -209,7 +210,7 @@ export default {
     passwordSecurity: '密码安全',
     systemSetting: '系统配置',
     userAccount: '用户账户',
-    mailing: "邮件配置"
+    mailing: '邮件配置'
   },
   task: {
     title: '任务管理'
diff --git a/vueJs/src/router/modules/admin.ts b/vueJs/src/router/modules/admin.ts
index c12e7a889..3c969a189 100644
--- a/vueJs/src/router/modules/admin.ts
+++ b/vueJs/src/router/modules/admin.ts
@@ -50,6 +50,16 @@ const adminRouter: RouteConfig = {
         icon: 'tenants',
         roles: ['AbpTenantManagement.Tenants']
       }
+    },
+    {
+      path: 'organization-unit',
+      component: () => import('@/views/admin/organization-unit/index.vue'),
+      name: 'organization-unit',
+      meta: {
+        title: 'organizationUnit',
+        icon: 'tenants',
+        roles: ['AbpIdentity.OrganizationUnits']
+      }
     }
   ]
 }
diff --git a/vueJs/src/views/admin/organization-unit/components/EditOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/EditOrganizationUint.vue
new file mode 100644
index 000000000..11a0d9f8d
--- /dev/null
+++ b/vueJs/src/views/admin/organization-unit/components/EditOrganizationUint.vue
@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <div
+        slot="header"
+        class="clearfix"
+      >
+        <span>组织机构</span>
+      </div>
+      <div>
+        <el-tree
+          ref="organizationUnitTree"
+          node-key="id"
+          :props="organizationProps"
+          :load="loadOrganizationUnit"
+          lazy
+          draggable
+          highlight-current
+          :allow-drag="handleAllowDrag"
+          :allow-drop="handleAllowDrop"
+          @node-drop="handleNodeDroped"
+          @node-click="handleNodeClick"
+        >
+          <span
+            slot-scope="{node, data}"
+            class="custom-tree-node"
+          >
+            <span>{{ node.label }}</span>
+            <el-dropdown @command="handleChangeOrganizationUint">
+              <span class="el-dropdown-link">
+                操作方法
+                <i class="el-icon-arrow-down el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="{key: 'append', node: node, data: data}">新增机构</el-dropdown-item>
+                <el-dropdown-item :command="{key: 'remove', node: node, data: data}">删除机构</el-dropdown-item>
+
+                <el-dropdown-item :command="{key: 'add-user', node: node, data: data}">添加用户</el-dropdown-item>
+                <el-dropdown-item :command="{key: 'add-role', node: node, data: data}">添加角色</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
+        </el-tree>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import OrganizationUnitService, { OrganizationUnitCreate } from '@/api/organizationunit'
+
+class OrganizationUnitTree {
+  id?: string
+  parentId?: string
+  code!: string
+  displayName!: string
+  isLeaf!: boolean
+  children?: OrganizationUnitTree[]
+
+  constructor() {
+    this.isLeaf = false
+    this.children = new Array<OrganizationUnitTree>()
+  }
+}
+
+@Component({
+  name: 'EditOrganizationUint',
+  data() {
+    return {
+      organizationProps: {
+        label: 'displayName',
+        isLeaf: 'isLeaf',
+        children: 'children'
+      }
+    }
+  }
+})
+export default class extends Vue {
+  private async loadOrganizationUnit(node: any, resolve: any) {
+    if (node.level === 0) {
+      const rootOrganizationUnit = new OrganizationUnitTree()
+      rootOrganizationUnit.id = undefined
+      rootOrganizationUnit.parentId = undefined
+      rootOrganizationUnit.code = 'root'
+      rootOrganizationUnit.displayName = '组织机构'
+      return resolve([rootOrganizationUnit])
+    }
+    if (node.data.id === undefined) {
+      const result = await OrganizationUnitService.findOrganizationUnitLastChildren(node.data.id)
+      if (result) {
+        const organizationUnit = new OrganizationUnitTree()
+        organizationUnit.id = result.id
+        organizationUnit.parentId = result.parentId
+        organizationUnit.code = result.code
+        organizationUnit.displayName = result.displayName
+        const children = node.data.children as OrganizationUnitTree[]
+        if (!children.every(x => x.id === result.id)) {
+          children.push(organizationUnit)
+        }
+        return resolve([organizationUnit])
+      }
+    } else {
+      const result = await OrganizationUnitService.findOrganizationUnitChildren(node.data.id, undefined)
+      if (result.items.length !== 0) {
+        const organizationUnits = new Array<OrganizationUnitTree>()
+        result.items.map((item) => {
+          const organizationUnit = new OrganizationUnitTree()
+          organizationUnit.id = item.id
+          organizationUnit.parentId = item.parentId
+          organizationUnit.code = item.code
+          organizationUnit.displayName = item.displayName
+          organizationUnits.push(organizationUnit)
+          const children = node.data.children as OrganizationUnitTree[]
+          if (!children.every(x => x.id === item.id)) {
+            children.push(organizationUnit)
+          }
+        })
+        return resolve(organizationUnits)
+      }
+    }
+    return resolve([])
+  }
+
+  private handleChangeOrganizationUint(command: { key: string, node: any, data: any}) {
+    switch (command.key) {
+      case 'append' :
+        this.handleAppendOrganizationUnit(command.node, command.data)
+        break
+      case 'remove' :
+        this.handleRemoveOrganizationUnit(command.node, command.data)
+        break
+      case 'add-user' :
+        this.handleOrganizationUnitUserAdd(command.data)
+        break
+      case 'add-role' :
+        this.handleOrganizationUnitRoleAdd(command.data)
+        break
+      default: break
+    }
+  }
+
+  private handleAppendOrganizationUnit(node: any, data: any) {
+    this.$prompt('请输入组织机构名称',
+      '新增组织机构', {
+        showInput: true,
+        inputValidator: (val) => {
+          return !(!val || val.length === 0)
+        },
+        inputErrorMessage: '组织机构名称不能为空',
+        inputPlaceholder: '请输入机构名称'
+      }).then((val: any) => {
+      const organizationUnit = new OrganizationUnitCreate()
+      organizationUnit.parentId = data.id
+      organizationUnit.displayName = val.value
+      OrganizationUnitService.createOrganizationUnit(organizationUnit).then(res => {
+        const organizationUnit = new OrganizationUnitTree()
+        organizationUnit.id = res.id
+        organizationUnit.parentId = res.parentId
+        organizationUnit.code = res.code
+        organizationUnit.displayName = res.displayName
+        data.children.push(organizationUnit)
+      })
+    })
+  }
+
+  private handleRemoveOrganizationUnit(node: any, data: any) {
+    this.$confirm('删除组织机构',
+      '是否要删除组织机构 ' + data.displayName, {
+        callback: (action) => {
+          if (action === 'confirm') {
+            OrganizationUnitService.deleteOrganizationUnit(data.id).then(() => {
+              this.$message.success('组织机构 ' + data.displayName + ' 已删除')
+              const parent = node.parent
+              const children = parent.data.children as OrganizationUnitTree[]
+              const index = children.findIndex(d => d.id === data.id)
+              children.splice(index, 1)
+              parent.childNodes.splice(index, 1)
+            })
+          }
+        }
+      })
+  }
+
+  private handleOrganizationUnitUserAdd(data: any) {
+    console.log(data)
+  }
+
+  private handleOrganizationUnitRoleAdd(data: any) {
+    console.log(data)
+  }
+
+  private handleAllowDrag(draggingNode: any) {
+    return draggingNode.data.parentId !== undefined && draggingNode.data.parentId !== null
+  }
+
+  private handleAllowDrop(draggingNode: any, dropNode: any) {
+    return dropNode.code !== 'root'
+  }
+
+  private handleNodeDroped(draggingNode: any, dropNode: any) {
+    OrganizationUnitService.moveOrganizationUnit(draggingNode.data.id, dropNode.data.id).then(res => {
+      const organizationUnit = new OrganizationUnitTree()
+      organizationUnit.id = res.id
+      organizationUnit.parentId = res.parentId
+      organizationUnit.code = res.code
+      organizationUnit.displayName = res.displayName
+    })
+  }
+
+  private handleNodeClick(data: any) {
+    if (data.id !== undefined) {
+      this.$emit('onOrganizationUnitChecked', data.id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
diff --git a/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
new file mode 100644
index 000000000..5c4e6501d
--- /dev/null
+++ b/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-table
+      row-key="id"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+      :data="organizationUnitRoles"
+    >
+      <el-table-column
+        :label="$t('roles.name')"
+        prop="name"
+        sortable
+        width="350px"
+        min-width="350px"
+        align="center"
+      >
+        <template slot-scope="{row}">
+          <span>{{ row.name }}</span>
+
+          <el-tag
+            v-if="row.isDefault"
+            type="success"
+          >
+            {{ $t('roles.isDefault') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('roles.isPublic')"
+        prop="isPublic"
+        width="200px"
+        align="center"
+      >
+        <template slot-scope="{row}">
+          <el-tag
+            :type="row.isPublic ? 'success' : 'warning'"
+          >
+            {{ row.isPublic ? $t('roles.isPublic') : $t('roles.isPrivate') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('roles.type')"
+        prop="isStatic"
+        width="200px"
+        align="center"
+      >
+        <template slot-scope="{row}">
+          <el-tag
+            :type="row.isStatic ? 'info' : 'success'"
+          >
+            {{ row.isStatic ? $t('roles.system') : $t('roles.custom') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="organizationUnitRoleCount>0"
+      :total="organizationUnitRoleCount"
+      :page.sync="organizationUnitRoleFilter.skipCount"
+      :limit.sync="organizationUnitRoleFilter.maxResultCount"
+      @pagination="handleGetOrganizationUnitRoles"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
+import OrganizationUnitService, { OrganizationUnitGetRoleByPaged } from '@/api/organizationunit'
+import { RoleDto } from '@/api/roles'
+import Pagination from '@/components/Pagination/index.vue'
+
+@Component({
+  name: 'RoleOrganizationUint',
+  components: {
+    Pagination
+  }
+})
+export default class extends Vue {
+  @Prop({ default: '' })
+  private organizationUnitId?: string
+
+  private organizationUnitRoleFilter: OrganizationUnitGetRoleByPaged
+  private organizationUnitRoleCount: number
+  private organizationUnitRoles: RoleDto[]
+
+  constructor() {
+    super()
+    this.organizationUnitRoleCount = 0
+    this.organizationUnitRoles = new Array<RoleDto>()
+    this.organizationUnitRoleFilter = new OrganizationUnitGetRoleByPaged()
+  }
+
+  @Watch('organizationUnitId', { immediate: true })
+  private onOrganizationUnitIdChanged() {
+    this.organizationUnitRoles = new Array<RoleDto>()
+    if (this.organizationUnitId) {
+      this.handleGetOrganizationUnitRoles()
+    }
+  }
+
+  private handleGetOrganizationUnitRoles() {
+    if (this.organizationUnitId) {
+      this.organizationUnitRoleFilter.id = this.organizationUnitId
+      OrganizationUnitService.organizationUnitGetRoles(this.organizationUnitRoleFilter).then(res => {
+        this.organizationUnitRoles = res.items
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
new file mode 100644
index 000000000..ca6893072
--- /dev/null
+++ b/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-table
+    row-key="id"
+    border
+    fit
+    highlight-current-row
+    style="width: 100%;"
+    :data="organizationUnitUsers"
+  >
+    <el-table-column
+      :label="$t('users.userName')"
+      prop="userName"
+      sortable
+      width="110px"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <span>{{ row.userName }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('users.name')"
+      prop="name"
+      width="110px"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <span>{{ row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('users.email')"
+      prop="email"
+      sortable
+      min-width="180"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <span>{{ row.email }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('users.phoneNumber')"
+      prop="phoneNumber"
+      width="140px"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <span>{{ row.phoneNumber }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('users.lockoutEnd')"
+      prop="lockoutEnd"
+      sortable
+      width="140px"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <span>{{ row.lockoutEnd | dateTimeFilter }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('users.creationTime')"
+      prop="creationTime"
+      sortable
+      width="140px"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <span>{{ row.creationTime | dateTimeFilter }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('global.operaActions')"
+      align="center"
+      width="200px"
+      min-width="200px"
+      fixed="right"
+    >
+      <template slot-scope="{row}">
+        <el-button
+          :disabled="!checkPermission(['AbpIdentity.OrganizationUnits.ManageUsers'])"
+          size="mini"
+          type="primary"
+          @click="handleRemoveUser(row)"
+        >
+          {{ $t('users.deleteUser') }}
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
+import { UserDataDto } from '@/api/users'
+import OrganizationUnitService from '@/api/organizationunit'
+
+@Component({
+  name: 'UserOrganizationUint'
+})
+export default class extends Vue {
+  @Prop({ default: '' })
+  private organizationUnitId?: string
+
+  private organizationUnitUsers: UserDataDto[]
+
+  constructor() {
+    super()
+    this.organizationUnitUsers = new Array<UserDataDto>()
+  }
+
+  @Watch('organizationUnitId', { immediate: true })
+  private onOrganizationUnitIdChanged() {
+    this.organizationUnitUsers = new Array<UserDataDto>()
+    if (this.organizationUnitId) {
+      OrganizationUnitService.organizationUnitGetUsers(this.organizationUnitId).then(res => {
+        this.organizationUnitUsers = res.items
+      })
+    }
+  }
+
+  private handleRemoveUser(row: any) {
+    if (this.organizationUnitId) {
+      OrganizationUnitService.organizationUnitRemoveUser(this.organizationUnitId, row.id).then(() => {
+        this.$message.success('用户 ' + row.name + ' 已从机构移除!')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/vueJs/src/views/admin/organization-unit/index.vue b/vueJs/src/views/admin/organization-unit/index.vue
new file mode 100644
index 000000000..417adad1e
--- /dev/null
+++ b/vueJs/src/views/admin/organization-unit/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <el-row>
+      <el-col
+        :span="8"
+      >
+        <edit-organization-uint
+          @onOrganizationUnitChecked="handleOrganizationUnitChecked"
+        />
+      </el-col>
+      <el-col :span="16">
+        <el-card>
+          <div
+            slot="header"
+          >
+            <span>机构成员</span>
+          </div>
+          <div>
+            <el-tabs>
+              <el-tab-pane label="角色列表">
+                <role-organization-uint :organization-unit-id="checkedOrganizationUintId" />
+              </el-tab-pane>
+              <el-tab-pane label="用户列表">
+                <user-organization-uint :organization-unit-id="checkedOrganizationUintId" />
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import EditOrganizationUint from './components/EditOrganizationUint.vue'
+import UserOrganizationUint from './components/UserOrganizationUint.vue'
+import RoleOrganizationUint from './components/RoleOrganizationUint.vue'
+
+@Component({
+  name: 'OrganizationUint',
+  components: {
+    EditOrganizationUint,
+    UserOrganizationUint,
+    RoleOrganizationUint
+  }
+})
+export default class extends Vue {
+  private checkedOrganizationUintId?: string = ''
+
+  private handleOrganizationUnitChecked(id: string) {
+    this.checkedOrganizationUintId = id
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/vueJs/src/views/admin/roles/index.vue b/vueJs/src/views/admin/roles/index.vue
index ca3b80be9..eff81a0f0 100644
--- a/vueJs/src/views/admin/roles/index.vue
+++ b/vueJs/src/views/admin/roles/index.vue
@@ -274,7 +274,7 @@ export default class extends Vue {
 
   /** 设置默认角色 */
   private handleSetDefaultRole(role: RoleDto, setDefault: boolean) {
-    console.log('handleSetDefaultRole:' + role.id)
+    // console.log('handleSetDefaultRole:' + role.id)
     const setDefaultRoleDto = new UpdateRoleDto()
     setDefaultRoleDto.name = role.name
     setDefaultRoleDto.isDefault = setDefault