Browse Source

feat(vben5): 增强用户信息

- 用户Dto增加 `accessFailedCount` 字段
- 增加用户详情标签页
- 用户列表增加邮件验证标签
- 用户列表增加手机号验证标签
pull/1240/head
colin 9 months ago
parent
commit
33726c7866
  1. 42
      apps/vben5/packages/@abp/identity/src/components/users/UserModal.vue
  2. 35
      apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
  3. 2
      apps/vben5/packages/@abp/identity/src/types/users.ts

42
apps/vben5/packages/@abp/identity/src/components/users/UserModal.vue

@ -11,9 +11,12 @@ import { useAccess } from '@vben/access';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { useSettings } from '@abp/core'; import { formatToDateTime, useSettings } from '@abp/core';
import { import {
Checkbox, Checkbox,
Descriptions,
DescriptionsItem,
Empty,
Form, Form,
Input, Input,
InputPassword, InputPassword,
@ -263,10 +266,7 @@ async function onLoadOuChildren(node: EventDataNode) {
> >
<Input v-model:value="formModel.phoneNumber" /> <Input v-model:value="formModel.phoneNumber" />
</FormItem> </FormItem>
<FormItem <FormItem :label="$t('AbpIdentity.DisplayName:LockoutEnabled')">
:label="$t('AbpIdentity.DisplayName:LockoutEnabled')"
:label-col="{ span: 10 }"
>
<Checkbox v-model:checked="formModel.lockoutEnabled"> <Checkbox v-model:checked="formModel.lockoutEnabled">
{{ $t('AbpIdentity.DisplayName:LockoutEnabled') }} {{ $t('AbpIdentity.DisplayName:LockoutEnabled') }}
</Checkbox> </Checkbox>
@ -285,7 +285,7 @@ async function onLoadOuChildren(node: EventDataNode) {
width: '47%', width: '47%',
height: '338px', height: '338px',
}" }"
:render="(item) => item.title" :render="(item: any) => item.title"
:titles="[ :titles="[
$t('AbpOpenIddict.Assigned'), $t('AbpOpenIddict.Assigned'),
$t('AbpOpenIddict.Available'), $t('AbpOpenIddict.Available'),
@ -300,6 +300,7 @@ async function onLoadOuChildren(node: EventDataNode) {
:tab="$t('AbpIdentity.OrganizationUnits')" :tab="$t('AbpIdentity.OrganizationUnits')"
> >
<Tree <Tree
v-if="organizationUnits.length > 0"
:checked-keys="checkedOuKeys" :checked-keys="checkedOuKeys"
:load-data="onLoadOuChildren" :load-data="onLoadOuChildren"
:loaded-keys="loadedOuKeys" :loaded-keys="loadedOuKeys"
@ -309,6 +310,35 @@ async function onLoadOuChildren(node: EventDataNode) {
checkable checkable
disabled disabled
/> />
<Empty v-else />
</TabPane>
<!-- 详细信息 -->
<TabPane
v-if="formModel.id"
key="details"
:tab="$t('AbpIdentity.Details')"
>
<Descriptions :column="1" bordered size="small">
<DescriptionsItem :label="$t('AbpIdentity.CreationTime')">
<span>{{ formatToDateTime(formModel.creationTime) }}</span>
</DescriptionsItem>
<DescriptionsItem :label="$t('AbpIdentity.ModificationTime')">
<span>{{
formatToDateTime(formModel.lastModificationTime)
}}</span>
</DescriptionsItem>
<DescriptionsItem :label="$t('AbpIdentity.PasswordUpdateTime')">
<span>{{
formatToDateTime(formModel.lastPasswordChangeTime)
}}</span>
</DescriptionsItem>
<DescriptionsItem :label="$t('AbpIdentity.FailedAccessCount')">
<span>{{ formModel.accessFailedCount }}</span>
</DescriptionsItem>
<DescriptionsItem :label="$t('AbpIdentity.LockoutEndTime')">
<span>{{ formatToDateTime(formModel.lockoutEnd) }}</span>
</DescriptionsItem>
</Descriptions>
</TabPane> </TabPane>
</Tabs> </Tabs>
</Form> </Form>

35
apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue

@ -26,7 +26,7 @@ import {
PlusOutlined, PlusOutlined,
UnlockOutlined, UnlockOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue'; import { Button, Dropdown, Menu, message, Modal, Tag } from 'ant-design-vue';
import { useUsersApi } from '../../api/useUsersApi'; import { useUsersApi } from '../../api/useUsersApi';
import { import {
@ -104,13 +104,20 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
title: $t('AbpIdentity.DisplayName:UserName'), title: $t('AbpIdentity.DisplayName:UserName'),
}, },
{ {
align: 'left',
field: 'email', field: 'email',
minWidth: '120px', minWidth: '120px',
slots: { default: 'email' },
title: $t('AbpIdentity.DisplayName:Email'), title: $t('AbpIdentity.DisplayName:Email'),
}, },
{ field: 'surname', title: $t('AbpIdentity.DisplayName:Surname') }, { field: 'surname', title: $t('AbpIdentity.DisplayName:Surname') },
{ field: 'name', title: $t('AbpIdentity.DisplayName:Name') }, { field: 'name', title: $t('AbpIdentity.DisplayName:Name') },
{ field: 'phoneNumber', title: $t('AbpIdentity.DisplayName:PhoneNumber') }, {
align: 'left',
field: 'phoneNumber',
slots: { default: 'phoneNumber' },
title: $t('AbpIdentity.DisplayName:PhoneNumber'),
},
{ {
field: 'lockoutEnd', field: 'lockoutEnd',
formatter: ({ cellValue }) => { formatter: ({ cellValue }) => {
@ -295,6 +302,30 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
</div> </div>
</div> </div>
</template> </template>
<template #email="{ row }">
<div class="flex flex-row">
<Tag v-if="row.emailConfirmed" color="success">
{{ $t('abp.account.settings.security.verified') }}
</Tag>
<Tag v-else color="warning">
{{ $t('abp.account.settings.security.unVerified') }}
</Tag>
<span>{{ row.email }}</span>
</div>
</template>
<template #phoneNumber="{ row }">
<div class="flex flex-row">
<div v-if="row.phoneNumber">
<Tag v-if="row.phoneNumberConfirmed" color="success">
{{ $t('abp.account.settings.security.verified') }}
</Tag>
<Tag v-else color="warning">
{{ $t('abp.account.settings.security.unVerified') }}
</Tag>
</div>
<span>{{ row.phoneNumber }}</span>
</div>
</template>
<template #action="{ row }"> <template #action="{ row }">
<div class="flex flex-row"> <div class="flex flex-row">
<div class="basis-1/3"> <div class="basis-1/3">

2
apps/vben5/packages/@abp/identity/src/types/users.ts

@ -49,6 +49,8 @@ interface IdentityUserDto
IHasExtraProperties, IHasExtraProperties,
IUser { IUser {
[key: string]: any; [key: string]: any;
/** 访问失败次数 */
accessFailedCount?: number;
/** 邮箱已验证 */ /** 邮箱已验证 */
emailConfirmed: boolean; emailConfirmed: boolean;
/** 已激活的用户 */ /** 已激活的用户 */

Loading…
Cancel
Save