cKey
5 years ago
11 changed files with 609 additions and 121 deletions
Binary file not shown.
@ -0,0 +1,297 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-el-draggable-dialog |
|||
width="800px" |
|||
:visible="showDialog" |
|||
:title="$t('AbpIdentity.ManageClaim')" |
|||
custom-class="modal-form" |
|||
:show-close="false" |
|||
:close-on-click-modal="true" |
|||
:close-on-press-escape="true" |
|||
@close="onFormClosed(false)" |
|||
> |
|||
<el-form |
|||
ref="roleClaimForm" |
|||
:model="editRoleClaim" |
|||
label-width="120px" |
|||
:rules="roleClaimRules" |
|||
> |
|||
<el-form-item |
|||
prop="claimType" |
|||
:label="$t('AbpIdentity.DisplayName:ClaimType')" |
|||
> |
|||
<el-select |
|||
v-model="editRoleClaim.claimType" |
|||
style="width: 100%" |
|||
@change="onClaimTypeChanged" |
|||
> |
|||
<el-option |
|||
v-for="claim in claimTypes" |
|||
:key="claim.id" |
|||
:label="claim.name" |
|||
:value="claim.name" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="claimValue" |
|||
:label="$t('AbpIdentity.DisplayName:ClaimValue')" |
|||
> |
|||
<el-input |
|||
v-if="hasStringValueType(editRoleClaim.claimType)" |
|||
v-model="editRoleClaim.claimValue" |
|||
type="text" |
|||
/> |
|||
<el-input |
|||
v-else-if="hasIntegerValueType(editRoleClaim.claimType)" |
|||
v-model="editRoleClaim.claimValue" |
|||
type="number" |
|||
/> |
|||
<el-switch |
|||
v-else-if="hasBooleanValueType(editRoleClaim.claimType)" |
|||
v-model="editRoleClaim.claimValue" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="hasDateTimeValueType(editRoleClaim.claimType)" |
|||
v-model="editRoleClaim.claimValue" |
|||
type="datetime" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
style="text-align: center;" |
|||
label-width="0px" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
style="width:180px" |
|||
@click="onSave" |
|||
> |
|||
{{ $t('AbpIdentity.AddClaim') }} |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
row-key="id" |
|||
:data="roleClaims" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
style="width: 100%;" |
|||
> |
|||
<el-table-column |
|||
:label="$t('AbpIdentity.DisplayName:ClaimType')" |
|||
prop="claimType" |
|||
sortable |
|||
width="150px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.claimType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('AbpIdentity.DisplayName:ClaimValue')" |
|||
prop="claimValue" |
|||
sortable |
|||
min-width="100%" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ claimValue(row.claimType, row.claimValue) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('operaActions')" |
|||
align="center" |
|||
width="150px" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<el-button |
|||
:disabled="!checkPermission(['AbpIdentity.Roles.ManageClaims'])" |
|||
size="mini" |
|||
type="danger" |
|||
@click="handleDeleteUserClaim(row)" |
|||
> |
|||
{{ $t('AbpIdentity.DeleteClaim') }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { dateFormat } from '@/utils/index' |
|||
import { checkPermission } from '@/utils/permission' |
|||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|||
import RoleApiService, { RoleClaim, RoleClaimCreateOrUpdate, RoleClaimDelete } from '@/api/roles' |
|||
import ClaimTypeApiService, { IdentityClaimType, IdentityClaimValueType } from '@/api/cliam-type' |
|||
import { Form } from 'element-ui' |
|||
|
|||
@Component({ |
|||
name: 'RoleClaimCreateOrUpdateForm', |
|||
methods: { |
|||
checkPermission |
|||
} |
|||
}) |
|||
export default class UserClaimCreateOrUpdateForm extends Vue { |
|||
@Prop({ default: '' }) |
|||
private roleId!: string |
|||
|
|||
@Prop({ default: false }) |
|||
private showDialog!: boolean |
|||
|
|||
private editRoleClaim = new RoleClaimCreateOrUpdate() |
|||
private roleClaims = new Array<RoleClaim>() |
|||
private claimTypes = new Array<IdentityClaimType>() |
|||
|
|||
private roleClaimRules = {} |
|||
|
|||
get cliamType() { |
|||
return (claimName: string) => { |
|||
const claimIndex = this.claimTypes.findIndex(cliam => cliam.name === claimName) |
|||
if (claimIndex >= 0) { |
|||
return this.claimTypes[claimIndex].valueType |
|||
} |
|||
return IdentityClaimValueType.String |
|||
} |
|||
} |
|||
|
|||
get claimValue() { |
|||
return (type: string, value: string) => { |
|||
const valueType = this.cliamType(type) |
|||
switch (valueType) { |
|||
case IdentityClaimValueType.Int : |
|||
case IdentityClaimValueType.String : |
|||
return value |
|||
case IdentityClaimValueType.Boolean : |
|||
return value.toLowerCase() === 'true' |
|||
case IdentityClaimValueType.DateTime : |
|||
return dateFormat(new Date(value), 'YYYY-mm-dd HH:MM:SS') |
|||
} |
|||
} |
|||
} |
|||
|
|||
get hasStringValueType() { |
|||
return (claimName: string) => { |
|||
return this.cliamType(claimName) === IdentityClaimValueType.String |
|||
} |
|||
} |
|||
|
|||
get hasBooleanValueType() { |
|||
return (claimName: string) => { |
|||
return this.cliamType(claimName) === IdentityClaimValueType.Boolean |
|||
} |
|||
} |
|||
|
|||
get hasDateTimeValueType() { |
|||
return (claimName: string) => { |
|||
return this.cliamType(claimName) === IdentityClaimValueType.DateTime |
|||
} |
|||
} |
|||
|
|||
get hasIntegerValueType() { |
|||
return (claimName: string) => { |
|||
return this.cliamType(claimName) === IdentityClaimValueType.Int |
|||
} |
|||
} |
|||
|
|||
@Watch('roleId') |
|||
private onUserIdChanged() { |
|||
this.handleGetRoleClaims() |
|||
} |
|||
|
|||
@Watch('showDialog', { immediate: true }) |
|||
private onShowDialogChanged() { |
|||
this.handleGetRoleClaims() |
|||
} |
|||
|
|||
mounted() { |
|||
this.handleGetClaimTypes() |
|||
this.handleGetRoleClaims() |
|||
this.roleClaimRules = { |
|||
claimType: [ |
|||
{ required: true, message: this.l('pleaseSelectBy', { key: this.l('AbpIdentity.DisplayName:ClaimType') }), trigger: 'blur' } |
|||
], |
|||
claimValue: [ |
|||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('AbpIdentity.DisplayName:ClaimValue') }), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
|
|||
private handleGetClaimTypes() { |
|||
ClaimTypeApiService.getActivedClaimTypes().then(res => { |
|||
this.claimTypes = res.items |
|||
}) |
|||
} |
|||
|
|||
private handleGetRoleClaims() { |
|||
if (this.showDialog && this.roleId) { |
|||
RoleApiService.getRoleClaims(this.roleId).then(res => { |
|||
this.roleClaims = res.items |
|||
}) |
|||
} |
|||
} |
|||
|
|||
private handleDeleteUserClaim(claim: RoleClaim) { |
|||
this.$confirm(this.l('AbpIdentity.DeleteClaim'), |
|||
this.l('AbpUi.AreYouSure'), { |
|||
callback: (action) => { |
|||
if (action === 'confirm') { |
|||
const deleteClaim = new RoleClaimDelete() |
|||
deleteClaim.claimType = claim.claimType |
|||
deleteClaim.claimValue = claim.claimValue |
|||
RoleApiService.deleteRoleClaim(this.roleId, deleteClaim).then(() => { |
|||
this.$message.success(this.l('global.successful')) |
|||
const claimIndex = this.roleClaims.findIndex(uc => uc.id === claim.id) |
|||
this.roleClaims.splice(claimIndex, 1) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// TODO: 可以简化为一个组件,通过组件来实现用户/客户端等的声明类型 |
|||
private onClaimTypeChanged() { |
|||
const valueType = this.cliamType(this.editRoleClaim.claimType) |
|||
switch (valueType) { |
|||
case IdentityClaimValueType.Int : |
|||
this.editRoleClaim.claimValue = '0' |
|||
break |
|||
case IdentityClaimValueType.String : |
|||
this.editRoleClaim.claimValue = '' |
|||
break |
|||
case IdentityClaimValueType.Boolean : |
|||
this.editRoleClaim.claimValue = 'false' |
|||
break |
|||
case IdentityClaimValueType.DateTime : |
|||
this.editRoleClaim.claimValue = '' |
|||
break |
|||
} |
|||
} |
|||
|
|||
private onSave() { |
|||
const roleClaimForm = this.$refs.roleClaimForm as Form |
|||
roleClaimForm.validate(valid => { |
|||
if (valid) { |
|||
RoleApiService.addRoleClaim(this.roleId, this.editRoleClaim).then(() => { |
|||
this.$message.success(this.$t('global.successful').toString()) |
|||
roleClaimForm.resetFields() |
|||
this.handleGetRoleClaims() |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
private onFormClosed(changed: boolean) { |
|||
const roleClaimForm = this.$refs.roleClaimForm as Form |
|||
roleClaimForm.resetFields() |
|||
this.$emit('closed', changed) |
|||
} |
|||
|
|||
private l(name: string, values?: any[] | { [key: string]: any }) { |
|||
return this.$t(name, values).toString() |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-el-draggable-dialog |
|||
width="800px" |
|||
:visible="showDialog" |
|||
:title="$t('AbpIdentity.NewRole')" |
|||
custom-class="modal-form" |
|||
:show-close="false" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
@close="onFormClosed(false)" |
|||
> |
|||
<el-form |
|||
ref="roleCreateForm" |
|||
label-width="120px" |
|||
:model="createRole" |
|||
> |
|||
<el-form-item |
|||
prop="name" |
|||
:label="$t('AbpIdentity.RoleName')" |
|||
> |
|||
<el-input |
|||
v-model="createRole.name" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="isDefault" |
|||
:label="$t('AbpIdentity.DisplayName:IsDefault')" |
|||
> |
|||
<el-switch |
|||
v-model="createRole.isDefault" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="isPublic" |
|||
:label="$t('AbpIdentity.DisplayName:IsPublic')" |
|||
> |
|||
<el-switch |
|||
v-model="createRole.isPublic" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button |
|||
class="cancel" |
|||
style="width:100px" |
|||
@click="onFormClosed(false)" |
|||
> |
|||
{{ $t('global.cancel') }} |
|||
</el-button> |
|||
<el-button |
|||
class="confirm" |
|||
type="primary" |
|||
style="width:100px" |
|||
@click="onSave" |
|||
> |
|||
{{ $t('global.confirm') }} |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Form } from 'element-ui' |
|||
import { Component, Vue, Prop } from 'vue-property-decorator' |
|||
import RoleApiService, { CreateRoleDto } from '@/api/roles' |
|||
|
|||
@Component({ |
|||
name: 'RoleCreateForm' |
|||
}) |
|||
export default class RoleCreateForm extends Vue { |
|||
@Prop({ default: false }) |
|||
private showDialog!: boolean |
|||
|
|||
private createRole = new CreateRoleDto() |
|||
|
|||
private onFormClosed(changed: boolean) { |
|||
const roleCreateForm = this.$refs.roleCreateForm as Form |
|||
roleCreateForm.resetFields() |
|||
this.$emit('closed', changed) |
|||
} |
|||
|
|||
private onSave() { |
|||
const roleCreateForm = this.$refs.roleCreateForm as Form |
|||
roleCreateForm.validate(valid => { |
|||
if (valid) { |
|||
RoleApiService.createRole(this.createRole).then(res => { |
|||
const message = this.$t('roles.createRoleSuccess', { name: res.name }).toString() |
|||
this.$message.success(message) |
|||
this.onFormClosed(true) |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.confirm { |
|||
position: absolute; |
|||
right: 10px; |
|||
} |
|||
.cancel { |
|||
position: absolute; |
|||
right: 120px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue