import React , { useState , forwardRef , useImperativeHandle , useMemo , } from 'react' ; import { Form , Input , Button , message } from 'antd' ; import LinCheckbox from '@/components/base/lin-checkbox/LinCheckbox' ; import Admin from '@/lin/models/admin' ; import User from '@/lin/models/user' ; import useAwait from '@/hooks/base/useAwait' ; import useFirstMountState from '@/hooks/base/useFirstMountState' ; import { MAX_SUCCESS_CODE } from '@/config/global' ; import { IAdminUserItem , IResponseWithoutData } from '@/types/model' ; import './style/user-info.scss' ; interface IProps { pageType : string ; data ? : IAdminUserItem ; } const addLayout = { labelCol : { span : 3 } , wrapperCol : { span : 21 } } ; const modalLayout = { labelCol : { span : 4 } , wrapperCol : { span : 19 } } ; const buttonLayout = { wrapperCol : { offset : 3 } } ; function UserInfo ( { pageType , data = { } as IAdminUserItem } , ref ) { const [ submitting , setSubmitting ] = useState ( false ) ; const [ form ] = Form . useForm ( ) ; const isFirstMount = useFirstMountState ( ) ; const isAddPage = pageType === 'add' ; const isInfoPage = pageType === 'info' ; const isPwdPage = pageType === 'password' ; const formLayout = isAddPage ? addLayout : modalLayout ; let fieldNames , submitFunc ; if ( pageType === 'add' ) { fieldNames = isFirstMount ? [ ] : Object . keys ( form . getFieldsValue ( ) ) ; submitFunc = submitAdd ; } else if ( pageType === 'info' ) { fieldNames = [ 'username' , 'email' , 'group_ids' ] ; submitFunc = submitInfo ; } else if ( pageType === 'password' ) { fieldNames = [ 'password' , 'confirm_password' ] ; submitFunc = submitPassword ; } const [ groups ] = useAwait ( Admin . getAllGroups ) ; useImperativeHandle ( ref , ( ) => ( { onSubmit , onReset } ) ) ; /**
     * 适用不同场景的重置方法
     */ function onReset ( ) { if ( fieldNames === null ) { form . resetFields ( ) ; } else { form . resetFields ( fieldNames ) ; } } param { * } submitType param { * } finalFunc async function onSubmit ( finalFunc ? ) { form . validateFields ( fieldNames ) . then ( async ( values ) => { setSubmitting ( true ) ; const success = await submitFunc ( values ) ; finalFunc && finalFunc ( success ) ; } ) . catch ( errorInfo => { const errMsg = isAddPage ? '请将信息填写完整' : '请填写正确的信息' ; message . error ( errMsg ) ; finalFunc && finalFunc ( false ) ; } ) ; } async function submitAdd ( fields ) { let res ; try { res = await User . register ( fields ) ; } catch ( e ) { console . log ( e ) ; if ( e && e . data && e . data . code === 10073 ) { message . error ( e . data . message ) ; } else { message . error ( '新增用户失败' ) ; } setSubmitting ( false ) ; return false ; } const success = res ? res . code < MAX_SUCCESS_CODE : false ; if ( success ) { message . success ( `${ res . message }` ) ; onReset ( ) ; } else { message . error ( `${ res . message }` ) ; } setSubmitting ( false ) ; return success ; } async function submitInfo ( fields ) { const { email , group_ids } = fields ; if ( email === data . email && group_ids . sort ( ) . toString ( ) === data . group_ids . sort ( ) . toString ( ) ) { return true ; } let res ; try { res = await Admin . updateOneUser ( email , group_ids , data . id ) ; } catch ( e ) { console . log ( e ) ; setSubmitting ( false ) ; return false ; } const success = res . code < MAX_SUCCESS_CODE ; if ( success ) { message . success ( `${ res . message }` ) ; } else { message . error ( `${ res . message }` ) ; } setSubmitting ( false ) ; return success ; } async function submitPassword ( fields ) { const { password , confirm_password } = fields ; if ( password === '' && confirm_password === '' ) { return true ; } let res ; try { res = await Admin . changePassword ( password , confirm_password , data . id ) ; } catch ( e ) { console . log ( e ) ; setSubmitting ( false ) ; return false ; } const success = res . code < MAX_SUCCESS_CODE ; if ( success ) { message . success ( `${ res . message }` ) ; } else { message . error ( `${ res . message }` ) ; } setSubmitting ( false ) ; return success ; } const rules = useMemo ( ( ) => ( { username : [ { required : true , message : '用户名不能为空' } ] , email : [ { pattern : /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/ , message : '请输入正确的邮箱地址或者不填' } , ] , password : [ { required : true , message : '请输入密码' } , { min : 6 , message : '密码长度不能少于6位数' } , ] , confirm_password : [ { required : true , message : '请再次输入密码' } , { validator : ( rule , value ) => { if ( value === form . getFieldValue ( 'password' ) ) { return Promise . resolve ( ) ; } return Promise . reject ( '两次输入密码不一致!' ) ; } } , ] } ) , [ form ] ) ; const initialValues = useMemo ( ( ) => { const infoValues = isPwdPage ? { } : { username : isInfoPage ? data . username : null , email : isInfoPage ? data . email : null } ; const groupValues = { group_ids : isInfoPage ? data . group_ids . map ( item => item . id ) : [ ] } ; return Object . assign ( infoValues , groupValues ) ; } , [ ] ) ; return ( < div className = 'user-info-container' > < Form form = { form } initialValues = { initialValues } colon = { false } { ... formLayout } > < Form . Item name = 'username' label = '用户名' validateTrigger = 'onBlur' rules = { rules . username } required r - if = { ! isPwdPage } > < Input disabled = { isInfoPage } /> < /Form.Item> < Form . Item name = 'email' label = '邮箱' validateTrigger = 'onBlur' rules = { rules . email } r - if = { ! isPwdPage } > < Input disabled = { isInfoPage } /> < /Form.Item> < Form . Item name = 'password' label = '密码' validateTrigger = 'onBlur' rules = { rules . password } required r - if = { ! isInfoPage } > < Input . Password /> < /Form.Item> < Form . Item name = 'confirm_password' label = '确认密码' validateTrigger = 'onBlur' rules = { rules . confirm_password } dependencies = { [ 'password' ] } required r - if = { ! isInfoPage } > < Input . Password /> < /Form.Item> < Form . Item label = '选择分组' r - if = { ! isPwdPage } > < LinCheckbox name = 'group_ids' options = { groups } form = { form } itemValueKey = 'id' itemNameKey = 'name' checkGroupClassName = 'checkbox-group' checkItemClassName = 'checkbox-item' / > < /Form.Item> < Form . Item r - if = { isAddPage } { ... buttonLayout } > < Button type = 'primary' loading = { submitting } onClick = { ( ) => onSubmit ( ) } style = { { marginRight : 10 } } > 确 定 < /Button> < Button onClick = { onReset } > 重 置 < /Button> < /Form.Item> < /Form> < /div>); } export default forwardRef ( UserInfo ) ;