add user menu manage view

aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/AppPlatformHttpApiHostModule.cs

@@ -46,7 +46,7 @@ using Volo.Abp.SettingManagement.EntityFrameworkCore;
 using Volo.Abp.TenantManagement.EntityFrameworkCore;
 using Volo.Abp.Threading;
 using Volo.Abp.VirtualFileSystem;
-using Volo.Abp.Http.Client.IdentityModel;
+using Volo.Abp.Http.Client.IdentityModel.Web;
 
 namespace LINGYUN.Platform
 {
@@ -57,7 +57,7 @@ namespace LINGYUN.Platform
         typeof(PlatformHttpApiModule),
         typeof(PlatformEntityFrameworkCoreModule),
         typeof(AbpIdentityHttpApiClientModule),
-        typeof(AbpHttpClientIdentityModelModule),
+        typeof(AbpHttpClientIdentityModelWebModule),
         typeof(AbpAspNetCoreMultiTenancyModule),
         typeof(AbpFeatureManagementEntityFrameworkCoreModule),
         typeof(AbpAuditLoggingEntityFrameworkCoreModule),

aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/LINGYUN.Platform.HttpApi.Host.csproj

@@ -41,7 +41,7 @@
     <PackageReference Include="Volo.Abp.Autofac" Version="3.3.0" />
     <PackageReference Include="Volo.Abp.BlobStoring.FileSystem" Version="3.3.0" />
 	<PackageReference Include="Volo.Abp.Identity.HttpApi.Client" Version="3.3.0" />
-	<PackageReference Include="Volo.Abp.Http.Client.IdentityModel" Version="3.3.0" />
+	<PackageReference Include="Volo.Abp.Http.Client.IdentityModel.Web" Version="3.3.0" />
     <PackageReference Include="Volo.Abp.EntityFrameworkCore.MySQL" Version="3.3.0" />
     <PackageReference Include="Volo.Abp.AuditLogging.EntityFrameworkCore" Version="3.3.0" />
     <PackageReference Include="Volo.Abp.FeatureManagement.EntityFrameworkCore" Version="3.3.0" />

vueJs/src/api/menu.ts

@@ -29,8 +29,13 @@ export default class MenuService {
     return ApiService.Get<ListResultDto<Menu>>(_url, serviceUrl)
   }
 
-  public static getRoleMenuList(payload: GetRoleMenu) {
+  public static getRoleMenuList(role: string, platformType: PlatformType) {
-    const _url = sourceUrl + '/by-role?' + urlStringify(payload)
+    const _url = sourceUrl + `/by-role/${role}/${platformType}`
+    return ApiService.Get<ListResultDto<Menu>>(_url, serviceUrl)
+  }
+
+  public static getUserMenuList(userId: string, platformType: PlatformType) {
+    const _url = sourceUrl + `/by-user/${userId}/${platformType}`
     return ApiService.Get<ListResultDto<Menu>>(_url, serviceUrl)
   }
 
@@ -52,6 +57,11 @@ export default class MenuService {
     const _url = sourceUrl + '/by-role'
     return ApiService.Put<void>(_url, payload,serviceUrl)
   }
+
+  public static setUserMenu(payload: UserMenu) {
+    const _url = sourceUrl + '/by-user'
+    return ApiService.Put<void>(_url, payload,serviceUrl)
+  }
 }
 
 export class MenuCreateOrUpdate {
@@ -84,11 +94,6 @@ export class GetAllMenu implements ISortedResultRequest {
   platformType?: PlatformType
 }
 
-export class GetRoleMenu {
-  role!: string
-  platformType!: PlatformType
-}
-
 export class GetMenuByPaged extends PagedAndSortedResultRequestDto {
   filter = ''
   reverse = false
@@ -111,3 +116,8 @@ export class RoleMenu {
   roleName!: string
   menuIds = new Array<string>()
 }
+
+export class UserMenu {
+  userId!: string
+  menuIds = new Array<string>()
+}

vueJs/src/layout/components/TagsView/index.vue

@@ -18,7 +18,7 @@
         @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
         @contextmenu.prevent.native="openMenu(tag, $event)"
       >
-        {{ $t('route.' + tag.meta.title) }}
+        {{ routeTitle(tag) }}
         <span
           v-if="!isAffix(tag)"
           class="el-icon-close"
@@ -80,6 +80,15 @@ export default class extends Vue {
     return PermissionModule.routes
   }
 
+  get routeTitle() {
+    return (route: any) => {
+      if (route.meta.displayName) {
+        return route.meta.displayName
+      }
+      return this.$t('route.' + route.meta.title)
+    }
+  }
+
   @Watch('$route')
   private onRouteChange() {
     this.addTags()

vueJs/src/views/admin/roles/components/ManageRoleMenuDialog.vue

@@ -2,6 +2,7 @@
   <el-dialog
     v-el-draggable-dialog
     width="800px"
+    :title="$t('AppPlatform.Menu:Manage')"
     :visible="showDialog"
     custom-class="modal-form"
     :close-on-click-modal="false"
@@ -72,9 +73,9 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
-import MenuService, { Menu, GetAllMenu, GetRoleMenu, RoleMenu } from '@/api/menu'
+import MenuService, { Menu, GetAllMenu, RoleMenu } from '@/api/menu'
 import { generateTree } from '@/utils'
-import { PlatformTypes } from '@/api/layout'
+import { PlatformType, PlatformTypes } from '@/api/layout'
 import { Tree } from 'element-ui'
 
 @Component({
@@ -90,7 +91,6 @@ export default class ManageRoleMenuDialog extends Vue {
   private menus = new Array<Menu>()
   private roleMenuIds = new Array<string>()
   private getMenuQuery = new GetAllMenu()
-  private getRoleMenuQuery = new GetRoleMenu()
   private platformTypes = PlatformTypes
   private confirmButtonBusy = false
   private menuProps = {
@@ -110,9 +110,9 @@ export default class ManageRoleMenuDialog extends Vue {
     this.handleGetRoleMenus()
   }
 
-  private onPlatformTypeChanged(value: any) {
+  private onPlatformTypeChanged() {
-    this.getRoleMenuQuery.platformType = value
     this.handleGetMenus()
+    this.handleGetRoleMenus()
   }
 
   private handleGetMenus() {
@@ -125,9 +125,8 @@ export default class ManageRoleMenuDialog extends Vue {
 
   private handleGetRoleMenus() {
     if (this.showDialog && this.roleName) {
-      this.getRoleMenuQuery.role = this.roleName
       MenuService
-        .getRoleMenuList(this.getRoleMenuQuery)
+        .getRoleMenuList(this.roleName, this.getMenuQuery.platformType || PlatformType.None)
         .then(res => {
           this.roleMenuIds = res.items.map(item => item.id)
         })

vueJs/src/views/admin/users/components/ManageUserMenuDialog.vue

@@ -0,0 +1,172 @@
+<template>
+  <el-dialog
+    v-el-draggable-dialog
+    width="800px"
+    :title="$t('AppPlatform.Menu:Manage')"
+    :visible="showDialog"
+    custom-class="modal-form"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    @close="onFormClosed"
+  >
+    <el-form>
+      <el-card>
+        <el-form-item
+          label-width="120px"
+          :label="$t('AppPlatform.DisplayName:PlatformType')"
+        >
+          <el-select
+            v-model="getMenuQuery.platformType"
+            style="width: 100%;"
+            class="filter-item"
+            clearable
+            :placeholder="$t('pleaseSelectBy', {name: $t('AppPlatform.DisplayName:PlatformType')})"
+            @change="onPlatformTypeChanged"
+          >
+            <el-option
+              v-for="item in platformTypes"
+              :key="item.key"
+              :label="item.key"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label-width="120px"
+          :label="$t('AppPlatform.DisplayName:Menus')"
+        >
+          <el-tree
+            ref="userMenuTree"
+            show-checkbox
+            :check-strictly="true"
+            node-key="id"
+            :data="menus"
+            :props="menuProps"
+            :default-checked-keys="userMenuIds"
+          />
+        </el-form-item>
+      </el-card>
+      <el-form-item>
+        <el-button
+          class="cancel"
+          type="info"
+          style="width:100px"
+          @click="onFormClosed"
+        >
+          {{ $t('AbpUi.Cancel') }}
+        </el-button>
+        <el-button
+          class="confirm"
+          type="primary"
+          style="width:100px"
+          icon="el-icon-check"
+          :loading="confirmButtonBusy"
+          @click="onSave"
+        >
+          {{ confirmButtonTitle }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import MenuService, { Menu, GetAllMenu, UserMenu } from '@/api/menu'
+import { generateTree } from '@/utils'
+import { PlatformType, PlatformTypes } from '@/api/layout'
+import { Tree } from 'element-ui'
+
+@Component({
+  name: 'ManageUserMenuDialog'
+})
+export default class ManageUserMenuDialog extends Vue {
+  @Prop({ default: false })
+  private showDialog!: boolean
+
+  @Prop({ default: '' })
+  private userId!: string
+
+  private menus = new Array<Menu>()
+  private userMenuIds = new Array<string>()
+  private getMenuQuery = new GetAllMenu()
+  private platformTypes = PlatformTypes
+  private confirmButtonBusy = false
+  private menuProps = {
+    children: 'children',
+    label: 'displayName'
+  }
+
+  get confirmButtonTitle() {
+    if (this.confirmButtonBusy) {
+      return this.$t('AbpUi.SavingWithThreeDot')
+    }
+    return this.$t('AbpUi.Save')
+  }
+
+  @Watch('showDialog', { immediate: true })
+  private onShowDialogChanged() {
+    this.handleGetUserMenus()
+  }
+
+  private onPlatformTypeChanged() {
+    this.handleGetMenus()
+    this.handleGetUserMenus()
+  }
+
+  private handleGetMenus() {
+    MenuService
+      .getAll(this.getMenuQuery)
+      .then(res => {
+        this.menus = generateTree(res.items)
+      })
+  }
+
+  private handleGetUserMenus() {
+    if (this.showDialog && this.userId) {
+      MenuService
+        .getUserMenuList(this.userId, this.getMenuQuery.platformType || PlatformType.None)
+        .then(res => {
+          this.userMenuIds = res.items.map(item => item.id)
+        })
+    } else {
+      this.userMenuIds.length = 0
+    }
+  }
+
+  private onSave() {
+    const userMenuTree = this.$refs.userMenuTree as Tree
+    const userMenu = new UserMenu()
+    userMenu.userId = this.userId
+    userMenu.menuIds = userMenuTree.getCheckedKeys()
+    MenuService
+      .setUserMenu(userMenu)
+      .then(() => {
+        this.$message.success(this.$t('successful').toString())
+        this.onFormClosed()
+      })
+  }
+
+  private onFormClosed() {
+    this.$nextTick(() => {
+      const tree = this.$refs.userMenuTree as Tree
+      tree.setCheckedKeys([])
+    })
+    this.$emit('closed')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.confirm {
+  position: absolute;
+  margin-top: 10px;
+  right: 0px;
+}
+.cancel {
+  position: absolute;
+  margin-top: 10px;
+  right: 120px;
+}
+</style>

vueJs/src/views/admin/users/index.vue

@@ -116,10 +116,19 @@
       <el-table-column
         :label="$t('AbpIdentity.Actions')"
         align="center"
-        width="120px"
+        width="250px"
-        fixed="right"
+        min-width="250px"
       >
         <template slot-scope="{row}">
+          <el-button
+            :disabled="!checkPermission(['AbpIdentity.Users.Update'])"
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="handleShowUserDialog(row.id)"
+          >
+            {{ $t('AbpIdentity.Edit') }}
+          </el-button>
           <el-dropdown
             class="options"
             @command="handleCommand"
@@ -127,17 +136,11 @@
             <el-button
               v-permission="['AbpIdentity.Users']"
               size="mini"
-              type="primary"
+              type="info"
             >
               {{ $t('AbpIdentity.Actions') }}<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                :command="{key: 'edit', row}"
-                :disabled="!checkPermission(['AbpIdentity.Users.Update'])"
-              >
-                {{ $t('AbpIdentity.Edit') }}
-              </el-dropdown-item>
               <el-dropdown-item
                 :command="{key: 'permission', row}"
                 :disabled="!checkPermission(['AbpIdentity.Users.ManagePermissions'])"
@@ -156,6 +159,12 @@
               >
                 {{ $t('AbpIdentity.ManageClaim') }}
               </el-dropdown-item>
+              <el-dropdown-item
+                :command="{key: 'menu', row}"
+                :disabled="!checkPermission(['Platform.Menu.ManageUsers'])"
+              >
+                {{ $t('AppPlatform.Menu:Manage') }}
+              </el-dropdown-item>
               <el-dropdown-item
                 divided
                 :command="{key: 'delete', row}"
@@ -189,6 +198,12 @@
       @closed="onClaimDialogClosed"
     />
 
+    <manage-user-menu-dialog
+      :show-dialog="showManageUserMenuDialog"
+      :user-id="editUserId"
+      @closed="showManageUserMenuDialog=false"
+    />
+
     <permission-form
       provider-name="U"
       :provider-key="editUserId"
@@ -207,6 +222,7 @@ import Component, { mixins } from 'vue-class-component'
 import UserApiService, { User, UsersGetPagedDto } from '@/api/users'
 import Pagination from '@/components/Pagination/index.vue'
 import PermissionForm from '@/components/PermissionForm/index.vue'
+import ManageUserMenuDialog from './components/ManageUserMenuDialog.vue'
 import UserCreateOrUpdateForm from './components/UserCreateOrUpdateForm.vue'
 import UserClaimCreateOrUpdateForm from './components/UserClaimCreateOrUpdateForm.vue'
 import { dateFormat, abpPagerFormat } from '@/utils'
@@ -217,6 +233,7 @@ import { checkPermission } from '@/utils/permission'
   components: {
     Pagination,
     PermissionForm,
+    ManageUserMenuDialog,
     UserCreateOrUpdateForm,
     UserClaimCreateOrUpdateForm
   },
@@ -238,6 +255,7 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
   private showUserDialog = false
   private showClaimDialog = false
   private showPermissionDialog = false
+  private showManageUserMenuDialog = false
 
   get allowedEditPermission() {
     return this.editUserId !== UserModule.id && checkPermission(['AbpIdentity.Users.ManagePermissions'])
@@ -302,12 +320,13 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
   /** 响应更多操作命令 */
   private handleCommand(command: any) {
     switch (command.key) {
-      case 'edit' :
-        this.handleShowUserDialog(command.row.id)
-        break
       case 'claim' :
         this.handleShowCliamDialog(command.row)
         break
+      case 'menu' :
+        this.editUserId = command.row.id
+        this.showManageUserMenuDialog = true
+        break
       case 'permission' :
         this.handleShowPermissionDialog(command.row.id)
         break

vueJs/src/views/container/menus/components/CreateOrUpdateMenuDialog.vue

@@ -187,8 +187,7 @@ import MenuService, {
   MenuCreateOrUpdate
 } from '@/api/menu'
 import DataService, { Data, DataItem } from '@/api/data-dictionary'
-import LayoutService, { Layout, GetLayoutByPaged } from '@/api/layout'
+import LayoutService, { Layout } from '@/api/layout'
-import { abpPagerFormat } from '@/utils/index'
 
 import MenuMetaInput from './MenuMetaInput.vue'
 
@@ -234,10 +233,6 @@ export default class CreateOrUpdateMenuDialog extends Vue {
   private bindData = new Data()
   private layouts = new Array<Layout>()
   private layoutId = ''
-  private layoutPage = 1
-  private layoutTotal = 0
-  private layoutEnd = false
-  private layoutQuery = new GetLayoutByPaged()
 
   @Watch('showDialog')
   private onShowDialogChanged() {
@@ -249,19 +244,11 @@ export default class CreateOrUpdateMenuDialog extends Vue {
   }
 
   private handleGetLayouts() {
-    if (!this.isEdit && !this.layoutEnd) {
+    if (!this.isEdit) {
-      this.layoutQuery.skipCount = abpPagerFormat(this.layoutPage, this.layoutQuery.maxResultCount)
       LayoutService
-        .getList(this.layoutQuery)
+        .getAllList()
         .then(res => {
-          this.layouts.push(...res.items)
+          this.layouts = res.items
-          this.layoutTotal = res.totalCount
-          if (res.items.length === 0 ||
-              res.items.length < this.layoutQuery.maxResultCount) {
-            this.layoutEnd = true
-          } else {
-            this.layoutPage += 1
-          }
         })
     }
   }