Fixed abp framework pagination calculation

aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application.Contracts/LINGYUN/Abp/Identity/IOrganizationUnitAppService.cs

@@ -22,6 +22,8 @@ namespace LINGYUN.Abp.Identity
 
         Task<ListResultDto<OrganizationUnitDto>> FindChildrenAsync(OrganizationUnitGetChildrenDto input);
 
+        Task<ListResultDto<string>> GetRoleNamesAsync(Guid id);
+
         Task<PagedResultDto<IdentityRoleDto>> GetRolesAsync(OrganizationUnitGetRoleByPagedDto input);
 
         Task<ListResultDto<IdentityUserDto>> GetUsersAsync(OrganizationUnitGetUserDto input);

aspnet-core/modules/identity/LINGYUN.Abp.Identity.Application/LINGYUN/Abp/Identity/OrganizationUnitAppService.cs

@@ -98,6 +98,13 @@ namespace LINGYUN.Abp.Identity
                 ObjectMapper.Map<List<OrganizationUnit>, List<OrganizationUnitDto>>(origanizationUnits));
         }
 
+        [Authorize(IdentityPermissions.OrganizationUnits.ManageRoles)]
+        public virtual async Task<ListResultDto<string>> GetRoleNamesAsync(Guid id)
+        {
+            var inOrignizationUnitRoleNames = await UserRepository.GetRoleNamesInOrganizationUnitAsync(id);
+            return new ListResultDto<string>(inOrignizationUnitRoleNames);
+        }
+
         [Authorize(IdentityPermissions.OrganizationUnits.ManageRoles)]
         public virtual async Task<PagedResultDto<IdentityRoleDto>> GetRolesAsync(OrganizationUnitGetRoleByPagedDto input)
         {

aspnet-core/modules/identity/LINGYUN.Abp.Identity.HttpApi/LINGYUN/Abp/Identity/OrganizationUnitController.cs

@@ -84,6 +84,13 @@ namespace LINGYUN.Abp.Identity
             return await OrganizationUnitAppService.GetListAsync(input);
         }
 
+        [HttpGet]
+        [Route("management-roles/{id}")]
+        public virtual async Task<ListResultDto<string>> GetRoleNamesAsync(Guid id)
+        {
+            return await OrganizationUnitAppService.GetRoleNamesAsync(id);
+        }
+
         [HttpGet]
         [Route("management-roles")]
         public virtual async Task<PagedResultDto<IdentityRoleDto>> GetRolesAsync(OrganizationUnitGetRoleByPagedDto input)

vueJs/src/api/apiresources.ts

@@ -23,7 +23,9 @@ export default class ApiResourceService {
     let _url = '/api/IdentityServer/ApiResources'
     _url += '?filter=' + payload.filter
     _url += '&sorting=' + payload.sorting
-    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    // abp设计原因,需要前端计算分页
+    _url += '&skipCount=' + pagerFormat(payload.skipCount) * payload.maxResultCount
+    // _url += '&skipCount=' + pagerFormat(payload.skipCount)
     _url += '&maxResultCount=' + payload.maxResultCount
     return ApiService.Get<PagedResultDto<ApiResource>>(_url, serviceUrl)
   }

vueJs/src/api/clients.ts

@@ -15,7 +15,8 @@ export default class ClientService {
     let _url = '/api/IdentityServer/Clients'
     _url += '?filter=' + payload.filter
     _url += '&sorting=' + payload.sorting
-    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    // 因为abp设计的原因, 需要前端组合页面
+    _url += '&skipCount=' + pagerFormat(payload.skipCount) * payload.maxResultCount
     _url += '&maxResultCount=' + payload.maxResultCount
     return ApiService.Get<PagedResultDto<Client>>(_url, serviceUrl)
   }

vueJs/src/api/identityresources.ts

@@ -27,7 +27,9 @@ export default class IdentityResourceService {
     let _url = '/api/IdentityServer/IdentityResources'
     _url += '?filter=' + payload.filter
     _url += '&sorting=' + payload.sorting
-    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    // abp设计原因,需要前端计算分页
+    _url += '&skipCount=' + pagerFormat(payload.skipCount) * payload.maxResultCount
+    // _url += '&skipCount=' + pagerFormat(payload.skipCount)
     _url += '&maxResultCount=' + payload.maxResultCount
     return ApiService.Get<PagedResultDto<IdentityResource>>(_url, serviceUrl)
   }

vueJs/src/api/organizationunit.ts

@@ -120,7 +120,9 @@ export default class OrganizationUnitService {
     _url += '?id=' + payload.id
     _url += '&filter=' + payload.filter
     _url += '&sorting=' + payload.sorting
-    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    // abp设计原因,需要前端计算分页
+    _url += '&skipCount=' + pagerFormat(payload.skipCount) * payload.maxResultCount
+    // _url += '&skipCount=' + pagerFormat(payload.skipCount)
     _url += '&maxResultCount=' + payload.maxResultCount
     return ApiService.Get<PagedResultDto<RoleDto>>(_url, serviceUrl)
   }

vueJs/src/api/roles.ts

@@ -1,13 +1,24 @@
+import { pagerFormat } from '@/utils/index'
 import ApiService from './serviceBase'
-import { ListResultDto } from './types'
+import { ListResultDto, PagedAndSortedResultRequestDto, PagedResultDto } from './types'
 
 const IdentityServiceUrl = process.env.VUE_APP_BASE_API
 
 export default class RoleService {
-  public static getRoles() {
+  public static getAllRoles() {
     return ApiService.Get<ListResultDto<RoleDto>>('/api/identity/roles', IdentityServiceUrl)
   }
 
+  public static getRoles(payload: RoleGetPagedDto) {
+    let _url = '/api/identity/roles'
+    // 因为abp设计的原因, 需要前端组合页面
+    _url += '?skipCount=' + pagerFormat(payload.skipCount) * payload.maxResultCount
+    _url += '&maxResultCount=' + payload.maxResultCount
+    _url += '&sorting=' + payload.sorting
+    _url += '&filter=' + payload.filter
+    return ApiService.Get<PagedResultDto<RoleDto>>(_url, IdentityServiceUrl)
+  }
+
   public static getRoleById(id: string) {
     let _url = '/api/identity/roles/'
     _url += id
@@ -43,6 +54,10 @@ export class RoleDto extends RoleBaseDto {
   concurrencyStamp?: string
 }
 
+export class RoleGetPagedDto extends PagedAndSortedResultRequestDto {
+  filter?: string
+}
+
 export class CreateRoleDto extends RoleBaseDto {
   constructor() {
     super()

vueJs/src/api/tenant.ts

@@ -21,7 +21,8 @@ export default class TenantService {
     let _url = '/api/multi-tenancy/tenants'
     _url += '?filter=' + payload.filter
     _url += '&sorting=' + payload.sorting
-    _url += '&skipCount=' + pagerFormat(payload.skipCount)
+    // 因为abp设计的原因, 需要前端组合页面
+    _url += '&skipCount=' + pagerFormat(payload.skipCount) * payload.maxResultCount
     _url += '&maxResultCount=' + payload.maxResultCount
     return ApiService.Get<PagedResultDto<TenantDto>>(_url, serviceUrl)
   }

vueJs/src/api/users.ts

@@ -10,7 +10,8 @@ export default class UserApiService {
 
   public static getUsers(input: UsersGetPagedDto) {
     let _url = '/api/identity/users'
-    _url += '?skipCount=' + pagerFormat(input.skipCount)
+    // 因为abp设计的原因, 需要前端组合页面
+    _url += '?skipCount=' + pagerFormat(input.skipCount) * input.maxResultCount
     _url += '&maxResultCount=' + input.maxResultCount
     if (input.sorting) {
       _url += '&sorting=' + input.sorting

vueJs/src/components/MarkdownEditor/index.vue

@@ -74,10 +74,8 @@ export default class extends Vue {
   private initEditor() {
     const editorElement = document.getElementById(this.id)
     if (!editorElement) return
-    this.markdownEditor = new TuiEditor({
+    this.editorOptions.el = editorElement
-      el: editorElement,
+    this.markdownEditor = new TuiEditor(this.editorOptions)
-      ...this.editorOptions
-    })
     if (this.value) {
       this.markdownEditor.setValue(this.value)
     }

vueJs/src/views/admin/components/RoleReference.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="role-reference-pane">
+    <el-table
+      ref="roleTable"
+      v-loading="userLoading"
+      row-key="id"
+      :data="userList"
+      border
+      fit
+      highlight-current-row
+      max-height="250px"
+      @row-click="onRowClick"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { dateFormat } from '@/utils'
+import { Component, Vue } from 'vue-property-decorator'
+import RoleAppService, { RoleGetPagedDto } from '@/api/roles'
+
+@Component({
+  name: 'RoleReference',
+  filters: {
+    dateTimeFilter(datetime: string) {
+      const date = new Date(datetime)
+      return dateFormat(date, 'YYYY-mm-dd HH:MM')
+    }
+  }
+})
+export default class extends Vue {
+  private roleQueryFilter = new RoleGetPagedDto()
+
+  private hanldGetRoles() {
+    // TODO 待完成
+    RoleAppService.getRoles(this.roleQueryFilter).then(res => {
+      console.log(res)
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

vueJs/src/views/admin/components/UserReference.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="user-reference-pane">
+    <el-form>
+      <el-form-item>
+        <el-button
+          class="confirm"
+          type="primary"
+          style="width:100px"
+        >
+          {{ $t('global.confirm') }}
+        </el-button>
+        <el-button
+          class="cancel"
+          style="width:100px"
+        >
+          {{ $t('global.cancel') }}
+        </el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-table
+          ref="userTable"
+          v-loading="userLoading"
+          row-key="id"
+          :data="userList"
+          border
+          fit
+          highlight-current-row
+          max-height="250px"
+          @row-click="onRowClick"
+        >
+          <el-table-column
+            type="selection"
+            width="50"
+            align="center"
+          />
+          <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>
+
+        <pagination
+          v-show="userCount>0"
+          :total="userCount"
+          :page.sync="userQueryFilter.skipCount"
+          :limit.sync="userQueryFilter.maxResultCount"
+          @pagination="handleGetUserList"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { dateFormat } from '@/utils'
+import { Component, Vue } from 'vue-property-decorator'
+import Pagination from '@/components/Pagination/index.vue'
+import UserAppService, { UsersGetPagedDto, UserDataDto } from '@/api/users'
+
+@Component({
+  name: 'UserReference',
+  components: {
+    Pagination
+  },
+  filters: {
+    dateTimeFilter(datetime: string) {
+      const date = new Date(datetime)
+      return dateFormat(date, 'YYYY-mm-dd HH:MM')
+    }
+  }
+})
+export default class extends Vue {
+  private userCount = 0
+  private userLoading = false
+  private userList = new Array<UserDataDto>()
+  private userQueryFilter = new UsersGetPagedDto()
+
+  mounted() {
+    this.handleGetUserList()
+    // 滚动延迟加载
+    // const userTable = this.$refs.userTable as any
+    // userTable.bodyWrapper.addEventListener('scroll', (res: any) => this.onTableScrollChanged(res), true)
+  }
+
+  private handleGetUserList() {
+    this.userLoading = true
+    UserAppService.getUsers(this.userQueryFilter).then(res => {
+      this.userList = res.items
+      this.userCount = res.totalCount
+      this.userLoading = false
+    })
+  }
+
+  private onRowClick(row: any) {
+    const table = this.$refs.userTable as any
+    table.toggleRowSelection(row)
+  }
+
+  private onTableScrollChanged(dom: any) {
+    console.log(dom)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-reference-pane .user-table {
+  width: 100%;
+  cursor: pointer;
+}
+.confirm {
+  position: relative;
+}
+.cancel {
+  position: relative;
+}
+</style>

vueJs/src/views/admin/organization-unit/components/EditOrganizationUint.vue

@@ -43,12 +43,24 @@
         </el-tree>
       </div>
     </el-card>
+
+    <el-dialog
+      :visible.sync="showUserReferenceDialog"
+      title="用户列表"
+      :show-close="false"
+      @closed="onUserReferenceDialogClosed"
+    >
+      <user-reference
+        ref="userReference"
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { ListResultDto } from '@/api/types'
+import UserReference from '../../components/UserReference.vue'
 import OrganizationUnitService, { OrganizationUnitCreate, OrganizationUnit } from '@/api/organizationunit'
 
 class OrganizationUnitTree {
@@ -67,6 +79,9 @@ class OrganizationUnitTree {
 
 @Component({
   name: 'EditOrganizationUint',
+  components: {
+    UserReference
+  },
   data() {
     return {
       organizationProps: {
@@ -78,6 +93,7 @@ class OrganizationUnitTree {
   }
 })
 export default class extends Vue {
+  private showUserReferenceDialog = false
   private async loadOrganizationUnit(node: any, resolve: any) {
     if (node.level === 0) {
       const rootOrganizationUnit = new OrganizationUnitTree()
@@ -153,7 +169,7 @@ export default class extends Vue {
         organizationUnit.displayName = res.displayName
         data.children.push(organizationUnit)
       })
-    })
+    }).catch(_ => _)
   }
 
   private handleRemoveOrganizationUnit(node: any, data: any) {
@@ -176,6 +192,11 @@ export default class extends Vue {
 
   private handleOrganizationUnitUserAdd(data: any) {
     console.log(data)
+    this.showUserReferenceDialog = true
+  }
+
+  private onUserReferenceDialogClosed() {
+    this.showUserReferenceDialog = false
   }
 
   private handleOrganizationUnitRoleAdd(data: any) {

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

@@ -134,6 +134,14 @@
       </el-table-column>
     </el-table>
 
+    <pagination
+      v-show="roleCount>0"
+      :total="roleCount"
+      :page.sync="roleQueryFilter.skipCount"
+      :limit.sync="roleQueryFilter.maxResultCount"
+      @pagination="handleGetRoles"
+    />
+
     <el-dialog
       :visible="hasLoadPermission"
       custom-class="profile"
@@ -163,22 +171,26 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import RoleService, { CreateRoleDto, RoleDto, UpdateRoleDto } from '@/api/roles'
+import RoleService, { CreateRoleDto, RoleDto, UpdateRoleDto, RoleGetPagedDto } from '@/api/roles'
 import { checkPermission } from '@/utils/permission'
 import { IPermission } from '@/api/types'
+import Pagination from '@/components/Pagination/index.vue'
 import PermissionService, { PermissionDto, UpdatePermissionsDto } from '@/api/permission'
 import PermissionTree from '@/components/PermissionTree/index.vue'
 
 @Component({
   name: 'RoleList',
   components: {
-    PermissionTree
+    PermissionTree,
+    Pagination
   },
   methods: {
     checkPermission
   }
 })
 export default class extends Vue {
+  private roleCount: number
+  private roleQueryFilter: RoleGetPagedDto
   private roleList: RoleDto[]
   private roleListLoading: boolean
   /** 是否加载角色权限 */
@@ -192,10 +204,12 @@ export default class extends Vue {
 
   constructor() {
     super()
+    this.roleCount = 0
     this.roleListLoading = false
     this.hasLoadPermission = false
     this.rolePermissionChanged = false
     this.rolePermission = new PermissionDto()
+    this.roleQueryFilter = new RoleGetPagedDto()
     this.roleList = new Array<RoleDto>()
     this.editRolePermissions = new Array<IPermission>()
   }
@@ -207,8 +221,9 @@ export default class extends Vue {
   /** 获取角色权限列表 */
   private handleGetRoles() {
     this.roleListLoading = true
-    RoleService.getRoles().then(data => {
+    RoleService.getRoles(this.roleQueryFilter).then(res => {
-      this.roleList = data.items
+      this.roleList = res.items
+      this.roleCount = res.totalCount
       this.roleListLoading = false
     })
   }

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

@@ -242,7 +242,7 @@ export default class extends Vue {
   }
 
   private handleGetRoles() {
-    RoleService.getRoles().then(data => {
+    RoleService.getAllRoles().then(data => {
       const roles = data.items.map((item: IRoleData) => {
         return {
           key: item.name,