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