Skip to content

J
jinfa-platform
Commit 312cac1d authored by 前端-许佳敏's avatar 前端-许佳敏
Browse files
Options

merge

parents bb787a4a eb1b0669
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 174 deletions
src/components/NiceForm/components/CustomRadio.tsx 0 → 100644
View file @ 312cac1d
import React from 'react';
import { Radio, Tooltip } from 'antd';
const CustomCheckbox = props => {
const { layout } = props
return (
<Radio.Group value={props.value} onChange={props.onChange} className={layout === 'column' ? 'identityRadio' : 'businessRadio'} name={props.name}>
{
props.dataSource && props.dataSource.map((v, i) => <Tooltip title={v.label} placement='leftTop' key={v.value + i}><Radio.Button value={v.value} >{v.label}</Radio.Button></Tooltip>)
}
</Radio.Group>
)
}
export default CustomCheckbox
\ No newline at end of file
src/components/NiceForm/components/CustomUpload.tsx
View file @ 312cac1d
......@@ -3,12 +3,14 @@ import UploadImage from "@/components/UploadImage"
const CustomUpload = (props) => {
const { mutators } = props
const uploadProps = props.props['x-component-props'] || {}
return <UploadImage
imgUrl={props.value}
onChange={data => {
// 这里能拿到change后的data值
mutators.change(data)
}}
{...uploadProps}
/>
}
......
src/components/NiceForm/components/Phone.tsx 0 → 100644
View file @ 312cac1d
import React from 'react'
import { Row, Input, Col, Button } from 'antd';
import useCountDown from '@/utils/hooks';
const Phone = (props) => {
const {text, isActive, start} = useCountDown({
maxTime: 60,
minTime: 0,
initText: '获取验证码',
onEnd: () => {},
decayRate: 1,
delay: 1 * 1000
})
const { value } = props
return (
<Row style={{width: '100%'}}>
<Col flex={1}>
<Input
value={value || ''}
onChange={e => props.mutators.change(e.target.value)}
{...props.props['x-component-props']}
/>
</Col>
<Col style={{marginLeft: 8}}>
<Button disabled={isActive} style={{minWidth: 110, marginLeft: 8}} size='large' onClick={start}>{text}</Button>
</Col>
</Row>
)
}
Phone.defaultProps = {}
Phone.isFieldComponent = true;
export default Phone
\ No newline at end of file
src/components/NiceForm/index.tsx
View file @ 312cac1d
......@@ -18,8 +18,10 @@ import CustomRegistryPhone from './components/CustomRegistryPhone';
import CustomRelevance from './components/CustomRelevance';
import Children from './components/Children';
import CircleBox from './components/CircleBox';
import Phone from './components/Phone';
import CustomRadio from './components/CustomRadio';
import './index.less'
import { Input } from '@formily/antd-components';
import { Checkbox } from '@formily/antd-components';
export interface NiceFormProps extends IAntdSchemaFormProps {}
......@@ -78,10 +80,12 @@ const schemaLayout = createControllerBox("schemaLayout", (_props) => {
const NiceForm: React.FC<NiceFormProps> = props => {
const { children, components, ...reset } = props;
const customComponents = {
CheckboxSingle: Checkbox,
CustomUpload,
CustomStatus,
CustomAddArray,
CustomSlider,
CustomRadio,
Search,
CustomInputSearch,
Submit,
......@@ -93,7 +97,8 @@ const NiceForm: React.FC<NiceFormProps> = props => {
Children,
CircleBox,
SchemaFormButtonGroup,
FlexBox
FlexBox,
Phone,
};
const defineComponents = Object.assign(customComponents, components);
......
src/components/UploadImage/index.tsx
View file @ 312cac1d
......@@ -4,6 +4,7 @@ import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
import cx from 'classnames'
import styles from './index.less'
import { UPLOAD_TYPE } from '@/constants'
interface UploadImagePorpsType {
imgUrl: string;
......@@ -12,10 +13,11 @@ interface UploadImagePorpsType {
disabled?: boolean;
large?: boolean;
fileMaxSize?: number;
showDesc?: boolean
}
const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
const { imgUrl, onChange, size = "386x256", disabled = false, large = false, fileMaxSize = 200 } = props
const { imgUrl, onChange, showDesc = true, size = "386x256", disabled = false, large = false, fileMaxSize = 200 } = props
const [loading, setLoading] = useState<boolean>(false)
const beforeUpload = (file: UploadFile) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
......@@ -34,7 +36,7 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
action: '/api/file/file/upload',
headers: {},
data: {
fileType: 1
fileType: UPLOAD_TYPE
},
disabled: loading || disabled,
showUploadList: false,
......@@ -72,9 +74,12 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
}
</div>}
</Upload>
<div className={styles.size_require}>
<p>支持JPG/PNG/JPEG， <br />最大不超过 {fileMaxSize}K， <br />尺寸：{size}</p>
</div>
{
showDesc &&
<div className={styles.size_require}>
<p>支持JPG/PNG/JPEG， <br />最大不超过 {fileMaxSize}K， <br />尺寸：{size}</p>
</div>
}
</div>
)
})
......
src/constants/index.ts
View file @ 312cac1d
......@@ -9,7 +9,8 @@ export const MALL_TYPE = {
}
// 本地环境跳过权限校验
export const isDev = process.env.NODE_ENV === "development"
// export const isDev = process.env.NODE_ENV === "development"
export const isDev = false
export const Environment_Status = {
0: "所有",
......
src/global/styles/reset.less
View file @ 312cac1d
@import './mixins/layout.less';
#root {
// 去除input type为number时的箭头
.ant-input-number-handler-wrap {
display: none;
}
.common_checkbox {
&:hover,
......
src/pages/user/components/LoginWrap.tsx
View file @ 312cac1d
......@@ -85,7 +85,7 @@ const LoginWrap: React.FC = () => {
</Form.Item>)
}
<Form.Item>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
<Button type='primary' size='large' htmlType='submit' block>登录</Button>
</Form.Item>
</Form>
}
......
src/pages/user/register.tsx
View file @ 312cac1d
......@@ -5,47 +5,24 @@ import {
QuestionCircleOutlined
} from '@ant-design/icons';
import styles from './index.less'
import './index.less'
import globalStyles from '@/global/styles/global.less'
import cx from 'classnames'
import { FormPage } from 'god'
import { IFormControllers, IFormButtonTypes } from 'god/dist/src/form-page'
import { Link, history } from 'umi'
import im_success from '../../../mockStatic/im_success.png'
import { FormStep, FormBlock, Input, Password, Checkbox, setup } from '@formily/antd-components'
import SchemaForm, { Field, FormMegaLayout, FormButtonGroup, createFormActions, FormEffectHooks } from '@formily/antd';
import useCountDown from '@/utils/hooks';
import { GlobalConfig } from '@/global/config';
import { omit } from '@/utils';
import { omit, transFormSchema } from '@/utils';
import { PATTERN_MAPS } from '@/constants/regExp';
import { PublicApi } from '@/services/api';
const { TextArea } = Input;
const Step = Steps.Step
import NiceForm from '@/components/NiceForm';
import schemas from './schema';
const { onFieldValueChange$ } = FormEffectHooks
const formItemLayout = {
labelCol: {
span: 2,
order: 2
},
wrapperCol: {
span: 22,
order: 1
},
};
let formCache: any = {}
const CustomCheckbox = props => {
const { layout } = props
return (
<Radio.Group value={props.value} onChange={props.onChange} className={layout === 'column' ? 'identityRadio' : 'businessRadio'} name={props.name}>
{
props.dataSource && props.dataSource.map((v, i) => <Tooltip title={v.label} placement='leftTop' key={v.value + i}><Radio.Button value={v.value} >{v.label}</Radio.Button></Tooltip>)
}
</Radio.Group>
)
}
const CustomInput = props => {
const { help, ...restProps } = props
......@@ -87,7 +64,8 @@ let timeChange: any; // 定时器
const actions = createFormActions()
const UserRegistry = () => {
const [current, setCurrent] = useState(0)
const [current, setCurrent] = useState(1)
const [subStep, setSubStep] = useState(false)
const stepList = [
{ title: '填写信息', key: 'message', name: 'message' },
{ title: '完善资料', key: 'over', name: 'over' },
......@@ -95,21 +73,18 @@ const UserRegistry = () => {
{ title: '注册成功', key: 'success', name: 'success' },
]
const [registerDetail, setRegisterDetail] = useState<any>([])
const handleJumpLogin = () => {
history.push('/user/login')
}
const [time, setTime] = useState(5); // timer
// useEffect(() => {
// clearInterval(timeChange)
// handleRegisterTypeList()
// }, [])
const [asyncSchema, setAsyncSchema] = useState(() => {
return schemas[`schema${current}`]
})
useEffect(() => {
console.log(current)
setAsyncSchema(schemas[`schema${current}`])
if(current === 3) runTimerJump()
}, [current])
}, [current, actions])
useEffect(() => {
if(time === 0){
clearInterval(timeChange)
......@@ -169,18 +144,6 @@ const UserRegistry = () => {
setCurrent(current + 1)
})
}
const mapMemberType = GlobalConfig.userRegister.useType.memberType.map(v => {
return {
value: v.id,
label: v.typeName
}
})
const mapServerType = GlobalConfig.userRegister.useType.businessType.map(v => {
return {
value: v.id,
label: v.typeName
}
})
const nextStepAction = () => {
actions.submit().then(data => {
......@@ -193,8 +156,8 @@ const UserRegistry = () => {
}).then(res => {
const { data } = res
// 动态渲染第三步
setRegisterDetail(data)
setCurrent(current + 1)
setAsyncSchema(transFormSchema(data))
setSubStep(true)
})
})
}
......@@ -213,131 +176,49 @@ const UserRegistry = () => {
})
})
}
return (
<div className={cx(styles.register, globalStyles.lingxiBusinessContent1024)}>
<h3>欢迎您注册数商云账号</h3>
<div className={cx(styles.registerBox, globalStyles.lingxiBusinessMarginContent)}>
<div>
<SchemaForm
name='registerForm'
actions={actions}
components={{
Input,
Password,
CheckboxSingle: Checkbox,
CustomRadio: CustomCheckbox,
CustomInput
}}
effects={() => {
useLinkageValidateEffects()
}}
onValidateFailed={valid => console.log(valid)}
>
<FormStep
dataSource={stepList}
className={styles.stepWrap}
size='small'
current={current}
>
</FormStep>
<FormMegaLayout className={styles.registerForm} name='message' visible={current === 0}>
<Field name="phone" x-rules={{required: true, pattern: PATTERN_MAPS.phone}} x-component-props={{placeholder: '请输入你的手机号码', size: 'large'}} x-props={{addonBefore: <div className={styles.formBefore}>+86</div>}} x-component="Input" />
<Field name="smsCode" x-rules={{required: true, pattern: PATTERN_MAPS.smsCode}} x-component-props={{ size: 'large', style: {width: 220}}} x-props={{addonAfter: <Button disabled={isActive} style={{minWidth: 110, marginLeft: 8}} size='large' onClick={start}>{text}</Button>}} x-component="Input" />
<Field name="password" x-rules={{required: true, pattern: PATTERN_MAPS.password}} x-component-props={{ placeholder: '设置你的登录密码', size: 'large'}} x-component="Password" />
<Field name="confirmPassword" x-rules={{required: true}} x-component-props={{ placeholder: '请再次输入你的登录密码',size: 'large'}} x-component="Password" />
<Field name="email" x-rules={{message: '请输入正确的邮箱', pattern: PATTERN_MAPS.email}} x-component-props={{ placeholder: '请输入你的邮箱（选填）',size: 'large', type: 'email'}} x-component="Input" />
<Field name="isRead" x-rules={{message: '请勾选', required: true}} x-component-props={{
children:<span style={{fontSize: 12}}>阅读并同意<span className='commonPickColor'>《会员服务协议》《法律条款》《隐私政策》</span></span>
}} x-component="CheckBoxSingle" />
</FormMegaLayout>
<FormMegaLayout name='over' className={styles.formBoxStep2}>
<FormBlock className={styles['mr_t-40']} name='memberType' visible={current === 1} title={<span className={styles.commonPanelTitle}>请选择你的身份</span>}>
<Field
name="typeId"
x-rules={{required: true}}
x-component-props={{layout: 'column'}}
x-component='CustomRadio' enum={mapMemberType}>
</Field>
</FormBlock>
<FormBlock className={styles['mr_t-40']} name='serviceType' visible={current === 1} title={<span className={styles.commonPanelTitle}>请选择您要开展的业务</span>}>
<Field name="businessTypeId" x-rules={{required: true}} x-component-props={{layout: 'rows'}} x-component='CustomRadio' enum={mapServerType}></Field>
</FormBlock>
{/* 注册主体类型， 为多输入框 */}
<Field name='detail' type='object'>
{
registerDetail.map(v => {
return (
<FormBlock className={styles['mr_t-40']} visible={current === 2} key={v.groupName} title={<span className={styles.commonPanelTitle}>{v.groupName}</span>}>
<FormMegaLayout columns={2} grid autoRow size='large' className={styles['mr_t-24']}>
{
v.elements.map(field => {
// 字段类型暂时为null, 所以固定为input
switch(field.fieldType) {
case 'upload': return (
<Field
x-mega-props={{span: 1}}
name={field.fieldName}
key={field.fieldName}
title={field.fieldCNName}
x-component-props={{
name: 'file',
listType: 'text',
actions: "/api/file/file/upload",
data: {
fileType: 1
},
showUploadList: false,
}}
x-component='Upload'
>
</Field>
)
default : return (
<Field
x-mega-props={{span: 1}}
name={field.fieldName}
key={field.fieldName}
required={field.fieldEmpty === 0}
x-rules={field.checkRules.map(v => {
return {
message: v.msg,
pattern: v.rulePattern
}
})}
maxLength={field.fieldLength}
x-component-props={{ help: field.fieldRemark, placeholder: `请输入${field.fieldCNName}`, size: 'large'}}
x-component='CustomInput'
>
</Field>
)
}
})
}
</FormMegaLayout>
</FormBlock>
)
})
}
</Field>
</FormMegaLayout>
</SchemaForm>
<div className={styles.registerForm}>
<Steps current={current} className={styles.stepWrap} size='small'>
{ stepList.map(v => <Steps.Step title={v.title} key={v.key}></Steps.Step>) }
</Steps>
<NiceForm
id='registerForm'
schema={asyncSchema}
actions={actions}
components={{
CustomInput
}}
effects={() => {
useLinkageValidateEffects()
}}
expressionScope={{
current: false,
phoneBefore: <div className={styles.formBefore}>+86</div>,
smsCodeAfter: <Button disabled={isActive} style={{minWidth: 110, marginLeft: 8}} size='large' onClick={start}>{text}</Button>,
checkBoxChildren: <span style={{fontSize: 12}}>阅读并同意<span className='commonPickColor'>《会员服务协议》《法律条款》《隐私政策》</span></span>,
memberTypeTitle: <span className={styles.commonPanelTitle}>请选择您的身份</span>,
businessTypeTitle: <span className={styles.commonPanelTitle}>请选择您要开展的业务</span>,
}}
/>
<div className={styles.registerForm}>
{
current === 0 &&
<Button type='primary' className={styles.continueButton} onClick={handleActionBtn}>同意协议并注册</Button>
}
{
current === 1 &&
current === 1 && !subStep &&
<Button type='primary' className={styles.continueButton} onClick={nextStepAction}>下一步：继续完善</Button>
}
{
current === 2 &&
current === 1 && subStep &&
<Button type='primary' className={styles.continueButton} onClick={submitForm}>提交注册资料</Button>
}
</div>
{
current === 3 &&
current === 2 &&
<div className={styles.formBoxStep3}>
<img src={im_success} alt="待审核"/>
<h2>您的注册资料已经提交成功，请等待平台审核</h2>
......@@ -352,11 +233,6 @@ const UserRegistry = () => {
</p>
</div>
}
<Row justify='center' align='middle'>
已有平台账号？<Button type='link' onClick={handleJumpLogin}>去登陆</Button>
</Row>
</div>
</div>
</div>
)
......
src/pages/user/schema/index.ts 0 → 100644
View file @ 312cac1d
import { ISchema } from '@formily/antd';
import { PATTERN_MAPS } from '@/constants/regExp';
import { GlobalConfig } from '@/global/config';
export const registerStep0Schema: ISchema = {
type: 'object',
properties: {
REGISTER_STEP: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
className: 'registerForm',
full: true
},
properties: {
phone: {
type: 'string',
required: true,
"x-rules": [
{
pattern: PATTERN_MAPS.phone,
message: '请填写手机号'
}
],
"x-component-props": {
placeholder: '请输入您的手机号码',
size: 'large'
},
"x-props": {
addonBefore: "{{phoneBefore}}"
}
},
smsCode: {
type: 'string',
"x-component": 'Phone',
required: true,
"x-rules": [
{
pattern: PATTERN_MAPS.smsCode,
message: '请输入正确的6位验证码'
}
],
"x-component-props": {
size: 'large',
}
},
password: {
type: 'password',
required: true,
"x-rules": [
{
pattern: PATTERN_MAPS.password,
message: '请输入正确的密码'
}
],
"x-component-props": {
placeholder: '请设置你的登录密码',
size: 'large',
}
},
confirmPassword: {
type: 'password',
required: true,
"x-rules": [
{
pattern: PATTERN_MAPS.password,
message: '请输入正确的密码'
}
],
"x-component-props": {
placeholder: '请再次输入你的登录密码',
size: 'large',
}
},
email: {
type: 'string',
"x-rules": [
{
pattern: PATTERN_MAPS.email,
message: '请输入正确的邮箱'
}
],
"x-component-props": {
placeholder: '请输入你的邮箱（选填）',
size: 'large',
type: 'email'
}
},
isRead: {
required: true,
"x-component": 'CheckboxSingle',
"x-component-props": {
children: "{{checkBoxChildren}}"
}
}
}
},
}
}
export const registerStep1Schema: ISchema = {
type: 'object',
properties: {
REGISTER_STEP: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
className: 'formBoxStep2'
},
properties: {
BLOCK_LAYOUT1: {
type: 'object',
"x-component": 'block',
"x-component-props": {
title: "{{memberTypeTitle}}",
className: 'mr_t-40'
},
properties: {
typeId: {
type: 'string',
required: true,
"x-component": 'CustomRadio',
"x-component-props": {
layout: 'column'
},
enum: GlobalConfig.userRegister.useType.memberType.map(v => {
return {
value: v.id,
label: v.typeName
}
})
},
}
},
BLOCK_LAYOUT2: {
type: 'object',
"x-component": 'block',
"x-component-props": {
title: "{{businessTypeTitle}}",
className: 'mr_t-40'
},
properties: {
businessTypeId: {
type: 'string',
required: true,
"x-component": 'CustomRadio',
"x-component-props": {
layout: 'row'
},
enum: GlobalConfig.userRegister.useType.businessType.map(v => {
return {
value: v.id,
label: v.typeName
}
})
},
}
}
},
}
}
}
export default {
schema0: registerStep0Schema,
schema1: registerStep1Schema
}
\ No newline at end of file
src/services/index.ts~2a51756929cf7da4655efbc6177a581462b486b2
View file @ 312cac1d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/utils/index.ts → src/utils/index.tsx
View file @ 312cac1d
import { ReactText } from 'react';
import React, { ReactText } from 'react';
import moment from 'moment';
import deepClone from 'clone'
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
function isArray(arr: any) {
return Array.isArray(arr)
......@@ -239,6 +241,95 @@ export const findTreeKeys = (arr: any[], keyword?: ReactText) => {
return results
}
// 转化object 成schema
export const transFormSchema = (data: any[]): ISchema => {
return {
type: 'object',
properties: {
'MEGA_LAYOUT2': {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
className: 'formBoxStep2'
},
properties: {
detail: {
type: 'object',
properties: data.reduce((prev, next, index) => {
prev[`NO_SUBMIT_BLOCK${index}`] = {
type: 'object',
"x-component": 'block',
"x-component-props": {
className: 'mr_t-40',
title: <span className={'commonPanelTitle'}>{next.groupName}</span>
},
properties: {
[`NO_SUBMIT_BLOCK_MEGA${index}`]: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
columns: 2,
grid: true,
autoRow: true,
size: 'large',
className: 'mr_t-24'
},
properties: next.elements.reduce((subP, subN, subI) => {
subP[subN.fieldName] = getFieldType(subN)
return subP
}, {})
}
}
}
return prev
}, {})
}
}
}
}
}
}
// 获取字段类型，改为schema可识别的
export const getFieldType = (field) => {
if (field.fieldType === 'upload') {
return {
type: 'string',
"x-component": "CustomUpload",
"x-mega-props": {
span: 2
},
required: field.fieldEmpty === 0,
title: field.fieldCNName,
"x-component-props": {
showDesc: false
}
}
} else {
return {
type: 'string',
"x-mega-props": {
span: 1
},
"x-component": "CustomInput",
required: field.fieldEmpty === 0,
"x-rules": field.checkRules.map(v => {
return {
message: v.msg,
pattern: v.rulePattern
}
}),
maxLength: field.fieldLength,
"x-component-props": {
help: field.fieldRemark,
placeholder: `请输入${field.fieldCNName}`,
size: 'large'
}
}
}
}
export default {
isArray,
isObject,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment