FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize user management page

Browse Source
This commit is contained in:
Fat Snake
2023-11-29 11:31:12 +08:00
parent 1c7668c751
commit 926ae6bef8
1 changed files with 85 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/system/User.tsx
View File

@@ -595,14 +595,17 @@ const User: React.FC = () => {
> >
<AntdInput allowClear /> <AntdInput allowClear />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item {!isDrawerEdit ? (
hidden={isDrawerEdit} <>
name={'password'} <AntdForm.Item
label={'密码'} name={'password'}
rules={[{ whitespace: false }]} label={'密码'}
> rules={[{ required: true, whitespace: false }]}
<AntdInput.Password allowClear /> >
</AntdForm.Item> <AntdInput.Password allowClear />
</AntdForm.Item>
</>
) : undefined}
<AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}> <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
<AntdInput allowClear /> <AntdInput allowClear />
</AntdForm.Item> </AntdForm.Item>
@@ -613,66 +616,80 @@ const User: React.FC = () => {
> >
<AntdInput type={'email'} allowClear /> <AntdInput type={'email'} allowClear />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'roleIds'} label={'角色'}> {formValues?.id !== '0' ? (
<AntdSelect <>
mode={'multiple'} <AntdForm.Item name={'roleIds'} label={'角色'}>
allowClear <AntdSelect
showSearch mode={'multiple'}
filterOption={filterOption} allowClear
options={roleData.map((value) => ({ showSearch
value: value.id, filterOption={filterOption}
label: `${value.name}${!value.enable ? '(已禁用)' : ''}` options={roleData.map((value) => ({
}))} value: value.id,
/> label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
</AntdForm.Item> }))}
<AntdForm.Item name={'groupIds'} label={'用户组'}> />
<AntdSelect </AntdForm.Item>
mode={'multiple'} <AntdForm.Item name={'groupIds'} label={'用户组'}>
allowClear <AntdSelect
showSearch mode={'multiple'}
filterOption={filterOption} allowClear
options={groupData.map((value) => ({ showSearch
value: value.id, filterOption={filterOption}
label: `${value.name}${!value.enable ? '(已禁用)' : ''}` options={groupData.map((value) => ({
}))} value: value.id,
/> label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
</AntdForm.Item> }))}
<AntdForm.Item />
valuePropName={'checked'} </AntdForm.Item>
name={'locking'} <AntdForm.Item
label={'锁定'} valuePropName={'checked'}
rules={[{ required: true, type: 'boolean' }]} name={'locking'}
> label={'锁定'}
<AntdSwitch /> rules={[{ required: true, type: 'boolean' }]}
</AntdForm.Item> >
<AntdForm.Item <AntdSwitch />
name={'expiration'} </AntdForm.Item>
label={'过期时间'} <AntdForm.Item
getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})} name={'expiration'}
getValueFromEvent={(date: dayjs.Dayjs | null) => label={'过期时间'}
date ? dayjsToUtc(date) : undefined getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
} getValueFromEvent={(date: dayjs.Dayjs | null) =>
> date ? dayjsToUtc(date) : undefined
<AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} /> }
</AntdForm.Item> >
<AntdForm.Item <AntdDatePicker
name={'credentialsExpiration'} showTime
label={'认证过期时间'} allowClear
getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})} changeOnBlur
getValueFromEvent={(date: dayjs.Dayjs | null) => style={{ width: '100%' }}
date ? dayjsToUtc(date) : undefined />
} </AntdForm.Item>
> <AntdForm.Item
<AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} /> name={'credentialsExpiration'}
</AntdForm.Item> label={'认证过期时间'}
<AntdForm.Item getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
valuePropName={'checked'} getValueFromEvent={(date: dayjs.Dayjs | null) =>
name={'enable'} date ? dayjsToUtc(date) : undefined
label={'启用'} }
rules={[{ required: true, type: 'boolean' }]} >
> <AntdDatePicker
<AntdSwitch /> showTime
</AntdForm.Item> allowClear
changeOnBlur
style={{ width: '100%' }}
/>
</AntdForm.Item>
<AntdForm.Item
valuePropName={'checked'}
name={'enable'}
label={'启用'}
rules={[{ required: true, type: 'boolean' }]}
>
<AntdSwitch />
</AntdForm.Item>
</>
) : undefined}
</AntdForm> </AntdForm>
) )