cKey
5 years ago
13 changed files with 806 additions and 24 deletions
@ -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; } |
|||
} |
|||
} |
|||
|
|||
@ -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 |
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue