feat: 将注册radio,checkbox,select,area搬到v2

src/components/NiceForm/components/AreaSelect/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Row, Select, Col } from 'antd';
+
+const { Option } = Select;
+
+import { PublicApi } from '@/services/api';
+
+const AreaSelect = (props: any) => {
+    const { mutators } = props;
+    const { ...rest } = props.props["x-component-props"] || {};
+
+
+    /** 省列表 */
+    const [province, setProvince] = useState<any>([]);
+    const [provinceCode, setProvinceCode] = useState<any>('');
+    /** 市列表 */
+    const [city, setCity] = useState<any>([]);
+    const [cityCode, setCityCode] = useState<any>('');
+    /** 区列表 */
+    const [area, setArea] = useState<any>([]);
+    const [areaCode, setAreaCode] = useState<any>('');
+    /** 结果 */
+    const [result, setResult] = useState<any>({
+        provinceCode: '',
+        // province: '',
+        cityCode: '',
+        // city: '',
+        areaCode: '',
+        // area: '',
+    });
+    const [lock, setLock] = useState<boolean>(false);
+
+
+    useEffect(() => {
+        manageProvince().then(data => {
+            setProvince(data)
+        })
+    }, [])
+
+    useEffect(() => {
+        if (lock) {
+            let _index = 0;
+            for (let key in result) {
+                if (!result[key]) {
+                    _index++;
+                }
+            }
+            mutators.change(_index === 0 ? result : undefined);
+        }
+    }, [result, lock])
+
+    /** 获取所有地区 */
+    const manageProvince = () => {
+        return new Promise(resolve => {
+            PublicApi.getMemberAreaProvince().then(res => {
+                if (res.code === 1000) {
+                    resolve(res.data);
+                }
+            })
+        })
+    }
+
+    /** 选择下拉得内容 */
+    const handProvince = async (val: any, num: number) => {
+        let _item: any = {};
+        if (num === 1) {
+            for (let i = 0; i < province.length; i++) {
+                if (province[i].code === val) {
+                    _item = province[i];
+                    PublicApi.getMemberAreaCity({ code: val }).then((res: any) => {
+                        if (res.code === 1000) {
+                            setCity([...res.data]);
+                        }
+                    })
+                    break;
+                }
+            }
+            setProvinceCode(val);
+            setResult({
+                provinceCode: val,
+                // province: _item.name,
+                cityCode: '',
+                // city: '',
+                areaCode: '',
+                // area: '',
+            });
+            setArea([]);
+            setCityCode('');
+            setAreaCode('');
+        } else if (num === 2) {
+            for (let i = 0; i < city.length; i++) {
+                if (city[i].code === val) {
+                    _item = city[i];
+                    PublicApi.getMemberAreaDistrict({ code: val }).then((res: any) => {
+                        if (res.code === 1000) {
+                            setArea([...res.data]);
+                        }
+                    })
+                    break;
+                }
+            }
+            setCityCode(val);
+            setResult({
+                provinceCode: provinceCode,
+                // province: provinceCode.name,
+                cityCode: val,
+                // city: _item.name,
+                areaCode: '',
+                // area: '',
+            });
+            setAreaCode('');
+        } else {
+            for (let i = 0; i < area.length; i++) {
+                if (area[i].code === val) {
+                    _item = area[i];
+                    setAreaCode(_item);
+                    setResult({
+                        provinceCode: provinceCode,
+                        // province: provinceCode.name,
+                        cityCode: cityCode,
+                        // city: cityCode.name,
+                        areaCode: val,
+                        // area: _item.name,
+                    });
+                    break;
+                }
+            }
+        }
+        setLock(true)
+    }
+
+    return (
+        <Row gutter={10} style={{ width: '100%' }}>
+            <Col span={8}>
+                <Select
+                    onChange={(value) => {
+                        handProvince(value, 1)
+                    }}
+                    value={provinceCode || undefined}
+                    placeholder='请选择省'
+                    {...rest}
+                >
+                    {province && province.map(items => <Option key={`${items.code}_province`} value={items.code}>{items.name}</Option>)}
+                </Select>
+            </Col>
+            <Col span={8}>
+                <Select
+                    onChange={(value) => {
+                        handProvince(value, 2)
+                    }}
+                    value={cityCode || undefined}
+                    placeholder='请选择市'
+                    {...rest}
+                >
+                    {city && city.map(items => <Option key={`${items.code}_province`} value={items.code}>{items.name}</Option>)}
+                </Select>
+            </Col>
+            <Col span={8}>
+                <Select
+                    onChange={(value) => {
+                        handProvince(value, 3)
+                    }}
+                    value={areaCode || undefined}
+                    placeholder='请选择区'
+                    {...rest}
+                >
+                    {area && area.map(items => <Option key={`${items.code}_area`} value={items.code}>{items.name}</Option>)}
+                </Select>
+            </Col>
+        </Row>
+    )
+}
+
+
+AreaSelect.isFieldComponent = true;
+
+export default AreaSelect;
\ No newline at end of file

src/components/NiceForm/components/CheckboxGroup/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Checkbox } from 'antd';
+
+const CheckboxGroup = (props: any) => {
+  const { value, schema, form, path, mutators, editable } = props;
+  const { placeholder, dataSource = [], ...rest } = props.props["x-component-props"] || {};
+  return (
+    <Checkbox.Group
+      disabled={!editable}
+      options={dataSource}
+      defaultValue={value}
+      onChange={e => mutators.change(e)}
+      {...rest} />
+  );
+}
+
+CheckboxGroup.isFieldComponent = true;
+
+
+export default CheckboxGroup;

src/components/NiceForm/components/CustomRadioGroup/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Radio } from 'antd';
+
+const CustomRadioGroup = (props: any, state: any) => {
+  const { value, schema, form, path, mutators, editable } = props;
+  const { placeholder, dataSource = [], layout, ...rest } = props.props["x-component-props"] || {};
+  const [val, setVal] = useState(value ? value[0] : undefined);
+    useEffect(() => {
+        mutators.change(val ? [val] : undefined)
+    }, [val])
+  return (
+    <Radio.Group
+      className={layout === 'column' ? 'identityRadio' : ''}
+      optionType={layout === 'column' ? 'button' : 'default'}
+      disabled={!editable}
+      options={dataSource}
+      onChange={e => { setVal(e.target.value) }}
+      value={val}
+      {...rest} />
+  );
+}
+
+CustomRadioGroup.isFieldComponent = true;
+
+export default CustomRadioGroup;

src/components/NiceForm/components/CustomSelect/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Select, Row, Col } from 'antd';
+const { Option } = Select;
+
+const CustomSelect = (props: any) => {
+    const { value, schema, form, path, mutators, editable } = props;
+    const { placeholder, dataSource = [], ...rest } = props.props["x-component-props"] || {};
+    const [val, setVal] = useState(value ? value[0] : undefined);
+    useEffect(() => {
+        mutators.change(val ? [val] : undefined)
+    }, [val])
+    return (
+        <Select
+            value={val}
+            placeholder={placeholder}
+            onChange={e => { setVal(e) }}
+            disabled={!editable}
+            options={dataSource}
+            {...rest}
+        />
+    )
+}
+
+CustomSelect.isFieldComponent = true;
+
+
+export default CustomSelect;
\ No newline at end of file

src/components/NiceForm/index.tsx

@@ -32,6 +32,10 @@ import VirtualChildren from './components/VirtualChildren';
 import SmilingFace from './components/SmilingFace';
 import SliderValidate from './components/SliderValidate';
 import AntUpload from './components/AntUpload';
+import AreaSelect from './components/AreaSelect';
+import CustomSelect from './components/CustomSelect';
+import CheckboxGroup from './components/CheckboxGroup';
+import CustomRadioGroup from './components/CustomRadioGroup';
 import { useLinkComponentProps } from './linkages/linkComponentProps';
 import Loading from '../Loading';
 import MultAddress from './components/MultAddress';
@@ -121,6 +125,10 @@ export const componentExport = {
   CustomAddress,
   CustomCascader,
   FixUpload,
+  AreaSelect,
+  CustomSelect,
+  CheckboxGroup,
+  CustomRadioGroup,
 }
 const NiceForm: React.FC<NiceFormProps> = props => {
   const { children, components, effects, expressionScope, loading = false, ...reset } = props;

src/utils/index.tsx

@@ -4,6 +4,8 @@ import deepClone from 'clone'
 import { ISchema } from '@formily/antd';
 import { UPLOAD_TYPE } from '@/constants';
 import queryString from 'query-string'
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd'
 
 function isArray(arr: any) {
   return Array.isArray(arr)
@@ -256,6 +258,15 @@ export const findTreeKeys = (arr: any[], keyword?: ReactText) => {
   return results
 }
 
+// 判断生成带有tooltips的title
+const returnRemarkTitle = (item: any) => {
+  if (item.fieldRemark) {
+    return <Tooltip title={item.fieldRemark}>{item.fieldLocalName || item.fieldCNName}<QuestionCircleOutlined style={{ color: '#909399', marginLeft: 5 }} /></Tooltip>
+  } else {
+    return item.fieldLocalName || item.fieldCNName
+  }
+}
+
 // 转化object 成schema
 export const transFormSchema = (data: any[]): ISchema => {
   return {
@@ -316,9 +327,77 @@ export const getFieldType = (field) => {
         span: 2
       },
       required: field.fieldEmpty === 0,
-      title: field.fieldCNName,
+      title: returnRemarkTitle(field),
       "x-component-props": {
-        showDesc: false
+        showDesc: false,
+        ...field.attr
+      }
+    }
+  } else if (field.fieldType === 'radio') {
+    return {
+      "x-component": 'CustomRadioGroup',
+      type: 'string',
+      required: field.fieldEmpty === 0,
+      title: returnRemarkTitle(field),
+      "x-mega-props": {
+        span: 2
+      },
+      "x-component-props": {
+        size: 'large',
+        layout: '',
+        dataSource: field.fieldEnum,
+        ...field.attr
+      },
+    }
+  } else if (field.fieldType === 'checkbox') {
+    return {
+      type: 'string',
+      "x-component": 'CheckboxGroup',
+      required: field.fieldEmpty === 0,
+      title: returnRemarkTitle(field),
+      "x-mega-props": {
+        span: 2
+      },
+      "x-component-props": {
+        size: 'large',
+        dataSource: field.fieldEnum,
+        ...field.attr
+      }
+    }
+  } else if (field.fieldType === 'select') {
+    return {
+      'x-component': 'CustomSelect',
+      type: 'string',
+      title: returnRemarkTitle(field),
+      required: field.fieldEmpty === 0,
+      "x-mega-props": {
+        span: 1
+      },
+      'x-component-props': {
+        size: 'large',
+        placeholder: `请选择${field.fieldLocalName}`,
+        dataSource: field.fieldEnum,
+        ...field.attr
+      }
+    }
+  } else if (field.fieldType === 'area') {
+    return {
+      'x-component': 'AreaSelect',
+      type: 'string',
+      title: returnRemarkTitle(field),
+      required: field.fieldEmpty === 0,
+      "x-mega-props": {
+        span: 2
+      },
+      "x-rules": field?.ruleEnum ? [
+        {
+          message: field.msg,
+          pattern: eval(field.pattern)
+        }
+      ] : [],
+      'x-component-props': {
+        size: 'large',
+        ...field.attr
       }
     }
   } else {
@@ -329,16 +408,19 @@ export const getFieldType = (field) => {
       },
       "x-component": "CustomInput",
       required: field.fieldEmpty === 0,
-      "x-rules": field.checkRules.map(v => ({
-          message: v.msg,
-          pattern: eval(v.rulePattern)
-        })),
+      "x-rules": field?.ruleEnum ? [
+        {
+          message: field.msg,
+          pattern: eval(field.pattern)
+        }
+      ] : [],
       // .concat([{ required: field.fieldEmpty === 0 }, { max: field.fieldLength }]),
       maxLength: field.fieldLength,
       "x-component-props": {
         help: field.fieldRemark,
-        placeholder: `请输入${field.fieldCNName}`,
-        size: 'large'
+        placeholder: `请输入${field.fieldLocalName || field.fieldCNName}`,
+        size: 'large',
+        ...field.attr
       }
     }
   }