From 2cbaec64a5699a63bef89fc7b431ddd5b47e5856 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Fri, 16 Oct 2020 09:46:55 +0800
Subject: [PATCH] add role claim management view

---
 .../IdentityPermissionDefinitionProvider.cs   |   4 +-
 .../LINGYUN/Abp/Identity/Localization/en.json |   5 +-
 .../Abp/Identity/Localization/zh-Hans.json    |   5 +-
 .../LINGYUN.ApiGateway.Host/event-bus-cap.db  | Bin 32768 -> 32768 bytes
 vueJs/src/api/roles.ts                        |  37 +++
 .../RoleClaimCreateOrUpdateForm.vue           | 297 ++++++++++++++++++
 .../admin/roles/components/RoleCreateForm.vue | 107 +++++++
 .../admin/roles/components/RoleEditForm.vue   | 165 ++++++----
 vueJs/src/views/admin/roles/index.vue         |  91 +++---
 .../UserClaimCreateOrUpdateForm.vue           |  16 +-
 vueJs/src/views/admin/users/index.vue         |   3 +-
 11 files changed, 609 insertions(+), 121 deletions(-)
 create mode 100644 vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue
 create mode 100644 vueJs/src/views/admin/roles/components/RoleCreateForm.vue

diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IdentityPermissionDefinitionProvider.cs b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IdentityPermissionDefinitionProvider.cs
index d2ce5ddde..cf8641777 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IdentityPermissionDefinitionProvider.cs
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IdentityPermissionDefinitionProvider.cs
@@ -30,8 +30,8 @@ namespace LINGYUN.Abp.Identity
                 origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.Create, L("Permission:Create"));
                 origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.Update, L("Permission:Edit"));
                 origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.Delete, L("Permission:Delete"));
-                origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.ManageRoles, L("Permission:ChangeRoles"));
-                origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.ManageUsers, L("Permission:ChangeUsers"));
+                origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.ManageRoles, L("Permission:ManageRoles"));
+                origanizationUnitPermission.AddChild(IdentityPermissions.OrganizationUnits.ManageUsers, L("Permission:ManageUsers"));
 
                 var identityClaimType = identityGroup.AddPermission(IdentityPermissions.IdentityClaimType.Default, L("Permission:IdentityClaimTypeManagement"), MultiTenancySides.Host);
                 identityClaimType.AddChild(IdentityPermissions.IdentityClaimType.Create, L("Permission:Create"), MultiTenancySides.Host);
diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/en.json b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/en.json
index 646b6c6df..b0331e51f 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/en.json
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/en.json
@@ -2,8 +2,8 @@
   "culture": "en",
   "texts": {
     "Permission:OrganizationUnitManagement": "Organization unit management",
-    "Permission:ChangeRoles": "Change roles",
-    "Permission:ChangeUsers": "Change users",
+    "Permission:ManageRoles": "Management roles",
+    "Permission:ManageUsers": "Management users",
     "Permission:ManageClaims": "Management claims",
     "Permission:ManageOrganizationUnits": "Management organization units",
     "Permission:IdentityClaimTypeManagement": "Management claim types",
@@ -13,6 +13,7 @@
     "DisplayName:ClaimType": "Type",
     "DisplayName:ClaimValue": "Value",
     "ClaimSubject": "Claim - {0}",
+    "RoleSubject": "Role - {0}",
     "AddClaim": "Add claim",
     "UpdateClaim": "Update claim",
     "DeleteClaim": "Delete claim",
diff --git a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/zh-Hans.json b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/zh-Hans.json
index 88f98cbe6..7436021f5 100644
--- a/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/zh-Hans.json
+++ b/aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/Localization/zh-Hans.json
@@ -2,8 +2,8 @@
   "culture": "zh-Hans",
   "texts": {
     "Permission:OrganizationUnitManagement": "组织机构管理",
-    "Permission:ChangeRoles": "更改角色",
-    "Permission:ChangeUsers": "更改用户",
+    "Permission:ManageRoles": "管理角色",
+    "Permission:ManageUsers": "管理用户",
     "Permission:ManageClaims": "管理声明",
     "Permission:ManageOrganizationUnits": "管理组织机构",
     "Permission:IdentityClaimTypeManagement": "管理声明类型",
@@ -13,6 +13,7 @@
     "DisplayName:ClaimType": "声明类型",
     "DisplayName:ClaimValue": "声明值",
     "ClaimSubject": "声明 - {0}",
+    "RoleSubject": "角色 - {0}",
     "AddClaim": "添加声明",
     "UpdateClaim": "变更声明",
     "DeleteClaim": "删除声明",
diff --git a/aspnet-core/services/apigateway/LINGYUN.ApiGateway.Host/event-bus-cap.db b/aspnet-core/services/apigateway/LINGYUN.ApiGateway.Host/event-bus-cap.db
index 2d77eb6438ff9f8877b16a3bc013aad67683a1df..1ec0f22f14c88081ef3f1510b0de7d1adb16b876 100644
GIT binary patch
delta 259
zcmZo@U}|V!njp;>JW<A(F?eIb5`F<zmNo|7E!-KLGHe%F+L#<RHYzY}HW3P95^M2b
z<zW+SWHxMz<ZyPD7jm0t9#yI^xiPv;z|7Ln*wVnz(A?70*wDz#WO8G8&EyF(ESzQv
zmR3d<R>r227sN<oQC1ZyW@w;mXcl4sRi|feZfs&=Xf}Cah3aI1XhlP?v;th(!otYN
z*wo0#zzC=fh|FP9W_myum|GefO+FJQx%r`(GAAD^{{aU6FZ|E>Z}FeyKd@OyVI4m=
Q4>KDh)a9E`>zf7u0O@T*h5!Hn

delta 92
zcmV-i0HgnafC7Mk0+1U4QIQ-&0a3AFqz@1T2GIZwv<qkn90t(@iUL5ffgl32G!jw*
yvxZbl0<+N;GYJj^56u7%^bh9`+7HbSrn3?tt`7?U002M|FXJ9E`k=GRFEvp8gdEZU

diff --git a/vueJs/src/api/roles.ts b/vueJs/src/api/roles.ts
index c4911af75..a69cb931b 100644
--- a/vueJs/src/api/roles.ts
+++ b/vueJs/src/api/roles.ts
@@ -50,6 +50,28 @@ export default class RoleService {
     _url += id
     return ApiService.Delete(_url, IdentityServiceUrl)
   }
+
+  public static getRoleClaims(roleId: string) {
+    const _url = '/api/identity/roles/claims/' + roleId
+    return ApiService.Get<ListResultDto<RoleClaim>>(_url, IdentityServiceUrl)
+  }
+
+  public static addRoleClaim(roleId: string, payload: RoleClaimCreateOrUpdate) {
+    const _url = '/api/identity/roles/claims/' + roleId
+    return ApiService.Post<void>(_url, payload, IdentityServiceUrl)
+  }
+
+  public static updateRoleClaim(roleId: string, payload: RoleClaimCreateOrUpdate) {
+    const _url = '/api/identity/roles/claims/' + roleId
+    return ApiService.Put<void>(_url, payload, IdentityServiceUrl)
+  }
+
+  public static deleteRoleClaim(roleId: string, payload: RoleClaimDelete) {
+    let _url = '/api/identity/roles/claims/' + roleId
+    _url += '?claimType=' + payload.claimType
+    _url += '&claimValue=' + payload.claimValue
+    return ApiService.Delete(_url, IdentityServiceUrl)
+  }
 }
 
 export class RoleBaseDto {
@@ -73,6 +95,7 @@ export class CreateRoleDto extends RoleBaseDto {
     super()
     this.isDefault = false
     this.isPublic = true
+    this.name = ''
   }
 }
 
@@ -89,3 +112,17 @@ export class UpdateRoleDto extends RoleBaseDto {
 export class ChangeRoleOrganizationUnitDto {
   organizationUnitIds = new Array<string>()
 }
+
+export class RoleClaimCreateOrUpdate {
+  claimType = ''
+  claimValue = ''
+}
+
+export class RoleClaimDelete {
+  claimType = ''
+  claimValue = ''
+}
+
+export class RoleClaim extends RoleClaimCreateOrUpdate {
+  id!: string
+}
diff --git a/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue b/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue
new file mode 100644
index 000000000..48b638471
--- /dev/null
+++ b/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue
@@ -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>
diff --git a/vueJs/src/views/admin/roles/components/RoleCreateForm.vue b/vueJs/src/views/admin/roles/components/RoleCreateForm.vue
new file mode 100644
index 000000000..f19e471d3
--- /dev/null
+++ b/vueJs/src/views/admin/roles/components/RoleCreateForm.vue
@@ -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>
diff --git a/vueJs/src/views/admin/roles/components/RoleEditForm.vue b/vueJs/src/views/admin/roles/components/RoleEditForm.vue
index e6cac092d..14e94161c 100644
--- a/vueJs/src/views/admin/roles/components/RoleEditForm.vue
+++ b/vueJs/src/views/admin/roles/components/RoleEditForm.vue
@@ -1,67 +1,79 @@
 <template>
-  <el-form
-    ref="formEditRole"
-    label-width="110px"
-    :model="role"
-    :rules="roleRules"
+  <el-dialog
+    v-el-draggable-dialog
+    width="800px"
+    :visible="showDialog"
+    :title="$t('AbpIdentity.RoleSubject', {0: role.name})"
+    custom-class="modal-form"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="onFormClosed(false)"
   >
-    <el-tabs v-model="roleTabItem">
-      <el-tab-pane
-        :label="$t('roles.basic')"
-        name="basic"
-      >
-        <el-form-item
-          prop="name"
-          :label="$t('roles.name')"
+    <el-form
+      ref="roleEditForm"
+      label-width="110px"
+      :model="role"
+      :rules="roleRules"
+    >
+      <el-tabs v-model="roleTabItem">
+        <el-tab-pane
+          :label="$t('roles.basic')"
+          name="basic"
         >
-          <el-input
-            v-model="role.name"
-            :disabled="role.isStatic"
-            :placeholder="$t('global.pleaseInputBy', {key: $t('roles.name')})"
+          <el-form-item
+            prop="name"
+            :label="$t('roles.name')"
+          >
+            <el-input
+              v-model="role.name"
+              :disabled="role.isStatic"
+              :placeholder="$t('global.pleaseInputBy', {key: $t('roles.name')})"
+            />
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane
+          :label="$t('roles.organizationUnits')"
+          name="organizationUnits"
+        >
+          <organization-unit-tree
+            :checked-organization-units="roleOrganizationUnits"
+            @onOrganizationUnitsChanged="onOrganizationUnitsChanged"
+          />
+        </el-tab-pane>
+        <el-tab-pane
+          v-if="rolePermissionLoaded"
+          :label="$t('roles.permission')"
+          name="permissions"
+        >
+          <permission-tree
+            ref="permissionTree"
+            :expanded="false"
+            :readonly="!checkPermission(['AbpIdentity.Roles.ManagePermissions'])"
+            :permission="rolePermission"
+            @onPermissionChanged="onPermissionChanged"
           />
-        </el-form-item>
-      </el-tab-pane>
-      <el-tab-pane
-        :label="$t('roles.organizationUnits')"
-        name="organizationUnits"
-      >
-        <organization-unit-tree
-          :checked-organization-units="roleOrganizationUnits"
-          @onOrganizationUnitsChanged="onOrganizationUnitsChanged"
-        />
-      </el-tab-pane>
-      <el-tab-pane
-        v-if="rolePermissionLoaded"
-        :label="$t('roles.permission')"
-        name="permissions"
-      >
-        <permission-tree
-          ref="permissionTree"
-          :expanded="false"
-          :readonly="!checkPermission(['AbpIdentity.Roles.ManagePermissions'])"
-          :permission="rolePermission"
-          @onPermissionChanged="onPermissionChanged"
-        />
-      </el-tab-pane>
-    </el-tabs>
-    <el-form-item>
-      <el-button
-        class="cancel"
-        style="width:100px"
-        @click="onCancel"
-      >
-        {{ $t('global.cancel') }}
-      </el-button>
-      <el-button
-        class="confirm"
-        type="primary"
-        style="width:100px"
-        @click="onConfirm"
-      >
-        {{ $t('global.confirm') }}
-      </el-button>
-    </el-form-item>
-  </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <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">
@@ -73,6 +85,7 @@ import PermissionTree from '@/components/PermissionTree/index.vue'
 import OrganizationUnitTree from '@/components/OrganizationUnitTree/index.vue'
 import PermissionService, { PermissionDto, UpdatePermissionsDto } from '@/api/permission'
 import { ChangeUserOrganizationUnitDto } from '@/api/users'
+import { Form } from 'element-ui'
 
 @Component({
   name: 'RoleEditForm',
@@ -88,6 +101,9 @@ export default class extends Vue {
   @Prop({ default: '' })
   private roleId!: string
 
+  @Prop({ default: false })
+  private showDialog!: boolean
+
   private roleTabItem = 'basic'
   private role = new RoleDto()
   /** 是否加载用户权限 */
@@ -109,17 +125,26 @@ export default class extends Vue {
     ]
   }
 
-  @Watch('roleId', { immediate: true })
+  @Watch('roleId')
   private onRoleIdChanged() {
-    if (this.roleId) {
+    this.handleGetRole()
+  }
+
+  @Watch('showDialog', { immediate: true })
+  private onShowDialogChanged() {
+    this.handleGetRole()
+  }
+
+  private handleGetRole() {
+    if (this.showDialog && this.roleId) {
       RoleService.getRoleById(this.roleId).then(role => {
         this.role = role
         this.handledGetRoleOrganizationUnits(role.id)
         this.handleGetRolePermissions(role.name)
       })
+      this.roleOrganizationUnitChanged = false
+      this.roleOrganizationUnits = new Array<string>()
     }
-    this.roleOrganizationUnitChanged = false
-    this.roleOrganizationUnits = new Array<string>()
   }
 
   private handledGetRoleOrganizationUnits(roleId: string) {
@@ -145,7 +170,7 @@ export default class extends Vue {
     this.editRolePermissions = permissions
   }
 
-  private onConfirm() {
+  private onSave() {
     const frmRole = this.$refs.formEditRole as any
     frmRole.validate(async(valid: boolean) => {
       if (valid) {
@@ -166,16 +191,18 @@ export default class extends Vue {
         }
         RoleService.updateRole(this.roleId, roleUpdateDto).then(role => {
           this.$message.success(this.l('roles.updateRoleSuccess', { name: role.name }))
-          this.onCancel()
+          this.onFormClosed(true)
         })
       }
     })
   }
 
-  private onCancel() {
-    this.rolePermissionLoaded = false
+  private onFormClosed(changed: boolean) {
     this.roleTabItem = 'basic'
-    this.$emit('onClosed')
+    this.rolePermissionLoaded = false
+    const roleEditForm = this.$refs.roleEditForm as Form
+    roleEditForm.resetFields()
+    this.$emit('closed', changed)
   }
 
   private l(name: string, values?: any[] | { [key: string]: any }) {
diff --git a/vueJs/src/views/admin/roles/index.vue b/vueJs/src/views/admin/roles/index.vue
index d72e1664b..749908bb7 100644
--- a/vueJs/src/views/admin/roles/index.vue
+++ b/vueJs/src/views/admin/roles/index.vue
@@ -114,9 +114,15 @@
               {{ $t('roles.otherOpera') }}<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                :command="{key: 'claim', row}"
+                :disabled="!checkPermission(['AbpIdentity.Roles.ManageClaims'])"
+              >
+                {{ $t('AbpIdentity.ManageClaim') }}
+              </el-dropdown-item>
               <el-dropdown-item
                 :command="row.isDefault ? {key: 'unDefault', row} : {key: 'default', row}"
-                :disabled="!checkPermission(['AbpIdentity.Roles.Update'])"
+                :disabled="row.isStatic || !checkPermission(['AbpIdentity.Roles.Update'])"
               >
                 {{ row.isDefault ? $t('roles.unSetDefault') : $t('roles.setDefault') }}
               </el-dropdown-item>
@@ -141,17 +147,22 @@
       @pagination="refreshPagedData"
     />
 
-    <el-dialog
-      :visible="showEditDialog"
-      custom-class="profile"
-      title="编辑角色"
-      :show-close="false"
-    >
-      <role-edit-form
-        :role-id="editRoleId"
-        @onClosed="onEditRoleFormClosed"
-      />
-    </el-dialog>
+    <role-edit-form
+      :show-dialog="showEditDialog"
+      :role-id="editRoleId"
+      @closed="onEditRoleFormClosed"
+    />
+
+    <role-create-form
+      :show-dialog="showCreateDialog"
+      @closed="onCreateDialogClosed"
+    />
+
+    <role-claim-create-or-update-form
+      :show-dialog="showClaimDialog"
+      :role-id="editRoleId"
+      @closed="onClaimDialogClosed"
+    />
   </div>
 </template>
 
@@ -159,18 +170,22 @@
 import { abpPagerFormat } from '@/utils'
 import DataListMiXin from '@/mixins/DataListMiXin'
 import Component, { mixins } from 'vue-class-component'
-import RoleService, { CreateRoleDto, RoleDto, UpdateRoleDto, RoleGetPagedDto } from '@/api/roles'
+import RoleService, { RoleDto, UpdateRoleDto, RoleGetPagedDto } from '@/api/roles'
 import { checkPermission } from '@/utils/permission'
 import Pagination from '@/components/Pagination/index.vue'
 import PermissionTree from '@/components/PermissionTree/index.vue'
 import RoleEditForm from './components/RoleEditForm.vue'
+import RoleCreateForm from './components/RoleCreateForm.vue'
+import RoleClaimCreateOrUpdateForm from './components/RoleClaimCreateOrUpdateForm.vue'
 
 @Component({
   name: 'RoleList',
   components: {
     PermissionTree,
     Pagination,
-    RoleEditForm
+    RoleEditForm,
+    RoleCreateForm,
+    RoleClaimCreateOrUpdateForm
   },
   methods: {
     checkPermission
@@ -179,6 +194,8 @@ import RoleEditForm from './components/RoleEditForm.vue'
 export default class extends mixins(DataListMiXin) {
   private showEditDialog = false
   private editRoleId = ''
+  private showClaimDialog = false
+  private showCreateDialog = false
 
   public dataFilter = new RoleGetPagedDto()
 
@@ -198,13 +215,15 @@ export default class extends mixins(DataListMiXin) {
   /** 响应角色行操作事件 */
   private handleCommand(command: {key: string, row: RoleDto}) {
     switch (command.key) {
+      case 'claim' :
+        this.handleShowCliamDialog(command.row)
+        break
       case 'default' :
         this.handleSetDefaultRole(command.row, true)
         break
       case 'unDefault' :
         this.handleSetDefaultRole(command.row, false)
         break
-
       case 'delete' :
         this.handleDeleteRole(command.row)
         break
@@ -214,25 +233,7 @@ export default class extends mixins(DataListMiXin) {
 
   /** 新建角色 */
   private handleCreateRole() {
-    this.$prompt(this.$t('roles.pleaseInputRoleName').toString(),
-      this.$t('roles.createRole').toString(), {
-        showInput: true,
-        inputValidator: (val) => {
-          return !(!val || val.length === 0)
-        },
-        inputErrorMessage: this.$t('roles.roleNameIsRequired').toString(),
-        inputPlaceholder: this.$t('roles.pleaseInputRoleName').toString()
-      }).then((val: any) => {
-      const createRoleDto = new CreateRoleDto()
-      createRoleDto.name = val.value
-      createRoleDto.isDefault = false
-      createRoleDto.isPublic = true
-      RoleService.createRole(createRoleDto).then(role => {
-        const message = this.$t('roles.createRoleSuccess', { name: role.name }).toString()
-        this.$message.success(message)
-        this.refreshPagedData()
-      })
-    })
+    this.showCreateDialog = true
   }
 
   private handleEditRole(role: RoleDto) {
@@ -240,6 +241,22 @@ export default class extends mixins(DataListMiXin) {
     this.showEditDialog = true
   }
 
+  private handleShowCliamDialog(row: RoleDto) {
+    this.editRoleId = row.id
+    this.showClaimDialog = true
+  }
+
+  private onClaimDialogClosed() {
+    this.showClaimDialog = false
+  }
+
+  private onCreateDialogClosed(changed: boolean) {
+    this.showCreateDialog = false
+    if (changed) {
+      this.refreshPagedData()
+    }
+  }
+
   /** 设置默认角色 */
   private handleSetDefaultRole(role: RoleDto, setDefault: boolean) {
     // console.log('handleSetDefaultRole:' + role.id)
@@ -268,9 +285,11 @@ export default class extends mixins(DataListMiXin) {
       })
   }
 
-  private onEditRoleFormClosed() {
-    this.editRoleId = ''
+  private onEditRoleFormClosed(changed: boolean) {
     this.showEditDialog = false
+    if (changed) {
+      this.refreshPagedData()
+    }
   }
 }
 </script>
diff --git a/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue b/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue
index 1b0a807ba..d975501ec 100644
--- a/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue
+++ b/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue
@@ -3,7 +3,7 @@
     v-el-draggable-dialog
     width="800px"
     :visible="showDialog"
-    :title="title"
+    :title="$t('AbpIdentity.ManageClaim')"
     custom-class="modal-form"
     :show-close="false"
     :close-on-click-modal="true"
@@ -139,9 +139,6 @@ export default class UserClaimCreateOrUpdateForm extends Vue {
   @Prop({ default: '' })
   private userId!: string
 
-  @Prop({ default: '' })
-  private title!: string
-
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -202,9 +199,12 @@ export default class UserClaimCreateOrUpdateForm extends Vue {
 
   @Watch('userId')
   private onUserIdChanged() {
-    if (this.userId && this.showDialog) {
-      this.handleGetUserClaims()
-    }
+    this.handleGetUserClaims()
+  }
+
+  @Watch('showDialog', { immediate: true })
+  private onShowDialogChanged() {
+    this.handleGetUserClaims()
   }
 
   mounted() {
@@ -227,7 +227,7 @@ export default class UserClaimCreateOrUpdateForm extends Vue {
   }
 
   private handleGetUserClaims() {
-    if (this.userId) {
+    if (this.userId && this.showDialog) {
       UserService.getUserClaims(this.userId).then(res => {
         this.userClaims = res.items
       })
diff --git a/vueJs/src/views/admin/users/index.vue b/vueJs/src/views/admin/users/index.vue
index b8f254bd2..a48e8c534 100644
--- a/vueJs/src/views/admin/users/index.vue
+++ b/vueJs/src/views/admin/users/index.vue
@@ -134,7 +134,7 @@
                 :command="{key: 'claim', row}"
                 :disabled="!checkPermission(['AbpIdentity.Users.ManageClaims'])"
               >
-                管理声明
+                {{ $t('AbpIdentity.ManageClaim') }}
               </el-dropdown-item>
               <el-dropdown-item
                 :command="{key: 'lock', row}"
@@ -191,7 +191,6 @@
     <user-claim-create-or-update-form
       :show-dialog="showClaimDialog"
       :user-id="editUser.id"
-      :title="$t('AbpIdentity.ClaimSubject', {0: editUser.name})"
       @closed="onClaimDialogClosed"
     />
   </div>