重写register页面使用schema渲染

config/base.config.json

-{"userRegister":{"useType":{"memberType":[{"id":1,"typeName":"企业会员"},{"id":3,"typeName":"渠道企业会员"},{"id":4,"typeName":"渠道个人会员"},{"id":2,"typeName":"个人会员"}],"businessType":[{"id":1,"typeName":"采购"},{"id":39,"typeName":"供货"},{"id":40,"typeName":"供货商消费者"},{"id":41,"typeName":"供货商消费者渠道会员"}]}},"web":{"shopInfo":[]},"global":{"siteId":502,"siteUrl":"http://localhost:4396","logo":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/4db4e7c5424c471c968ab540bce027f31597319423082.png","countryList":[{"name":"简体中文-ZH","key":"zh-CN","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en-US","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}]}}
+{"userRegister":{"useType":{"memberType":[{"id":1,"typeName":"企业会员"},{"id":3,"typeName":"渠道企业会员"},{"id":4,"typeName":"渠道个人会员"},{"id":2,"typeName":"个人会员"}],"businessType":[{"id":1,"typeName":"采购"},{"id":39,"typeName":"供货"},{"id":48,"typeName":"采购消费个人"},{"id":49,"typeName":"采购提供企业"},{"id":51,"typeName":"采购消费企业"},{"id":52,"typeName":"供货提供个人"},{"id":53,"typeName":"供货消费企业"},{"id":54,"typeName":"供货消费个人"},{"id":55,"typeName":"hcx供货"},{"id":56,"typeName":"hcx采购"}]}},"web":{"shopInfo":[{"id":402,"name":"测试企业商城web","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/4bb5b6c5a20e4bf1b3b1359e25b3e1b91597740370348.jpg","describe":"555","state":1,"url":"www.baidu.com"},{"id":403,"name":"测试积分商城小程序","type":2,"environment":3,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/7fc59fc15cec4c7b9eb1f141060b54251597740417073.png","describe":null,"state":1,"url":"www.baidu.com"}]},"global":{"siteId":502,"siteUrl":"http://localhost:4396","logo":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/4db4e7c5424c471c968ab540bce027f31597319423082.png","countryList":[{"name":"简体中文-ZH","key":"zh-CN","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en-US","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}]}}

src/components/NiceForm/components/CustomRadio.tsx

+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

@@ -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/index.tsx

@@ -19,6 +19,7 @@ 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 { Checkbox } from '@formily/antd-components';
 
@@ -84,6 +85,7 @@ const NiceForm: React.FC<NiceFormProps> = props => {
     CustomStatus,
     CustomAddArray,
     CustomSlider,
+    CustomRadio,
     Search,
     CustomInputSearch,
     Submit,
@@ -96,7 +98,7 @@ const NiceForm: React.FC<NiceFormProps> = props => {
     CircleBox,
     SchemaFormButtonGroup,
     FlexBox,
-    Phone
+    Phone,
   };
 
   const defineComponents = Object.assign(customComponents, components);

src/components/UploadImage/index.tsx

@@ -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>
+      {
+        showDesc && 
         <div className={styles.size_require}>
           <p>支持JPG/PNG/JPEG， <br />最大不超过 {fileMaxSize}K， <br />尺寸：{size}</p>
         </div>
+      }
     </div>
   )
 })

src/constants/index.ts

@@ -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/config/global.d.ts

@@ -17,8 +17,19 @@ export interface UserRegister {
 	useType: UseType;
 }
 
+export interface ShopInfo {
+	id: number;
+	name: string;
+	type: number;
+	environment: number;
+	logoUrl: string;
+	describe: string;
+	state: number;
+	url: string;
+}
+
 export interface Web {
-	shopInfo: any[];
+	shopInfo: ShopInfo[];
 }
 
 export interface CountryList {

src/pages/user/components/LoginWrap.tsx

@@ -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/schema/index.ts

 import { ISchema } from '@formily/antd';
 import { PATTERN_MAPS } from '@/constants/regExp';
+import { GlobalConfig } from '@/global/config';
 
-export const registerStep1Schema: ISchema = {
+export const registerStep0Schema: ISchema = {
   type: 'object',
   properties: {
     REGISTER_STEP: {
@@ -98,17 +99,70 @@ export const registerStep1Schema: ISchema = {
   }
 }
 
-export const registerStep2Schma: ISchema = {
+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: {
-        demo: {
-          type: 'string'
+            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
                 }
+              })
             },
-      visible: false
           }
         }
+      },
+    }
+  }
+}
+
+export default {
+  schema0: registerStep0Schema,
+  schema1: registerStep1Schema
 }
\ No newline at end of file

src/utils/index.ts → src/utils/index.tsx

-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,