完善会员模块页面

config/router.tsx

@@ -74,16 +74,28 @@ const router = [
             component: '@/pages/member/memberPrSubmit/auditPrSubmit',
           },
           {
-            path: '/memberAbility/manage/memberPr',
-            name: 'memberPr',
-            component: '@/pages/member/memberPr/index',
+            path: '/memberAbility/manage/memberPr1',
+            name: 'memberPr1',
+            component: '@/pages/member/memberPr1/index',
           },
           {
-            path: '/memberAbility/manage/auditPr',
-            name: 'memberPr',
+            path: '/memberAbility/manage/auditPr1',
+            name: 'memberPr1',
             hideInMenu: true,
             hidePageHeader: true,
-            component: '@/pages/member/memberPr/auditPr',
+            component: '@/pages/member/memberPr1/auditPr1',
+          },
+          {
+            path: '/memberAbility/manage/memberPr2',
+            name: 'memberPr2',
+            component: '@/pages/member/memberPr2/index',
+          },
+          {
+            path: '/memberAbility/manage/auditPr2',
+            name: 'memberPr2',
+            hideInMenu: true,
+            hidePageHeader: true,
+            component: '@/pages/member/memberPr2/auditPr2',
           },
           {
             path: '/memberAbility/manage/memberPrConfirm',

package.json

@@ -23,14 +23,14 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@ant-design/pro-layout": "^5.0.12",
-    "@formily/antd": "^1.2.8",
-    "@formily/antd-components": "^1.2.8",
+    "@formily/antd": "1.2.10",
+    "@formily/antd-components": "1.2.10",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
     "braft-editor": "^2.3.9",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
-    "god": "0.1.15",
+    "god": "0.1.17",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/app.tsx

@@ -7,7 +7,9 @@ import '@/global/styles/reset.less'; // 重置antd样式
 import '@/global/styles/global.less'; // 导入全局样式
 // 默认引入所有的ant样式， 不引入css因为无法做到变量覆盖
 import 'antd/dist/antd.less';
+import { setup } from '@formily/antd-components';
 
+setup();
 let extraRoutes: never[] = [];
 
 /**

src/components/NiceForm/components/CardCheckBox.tsx

+import React from 'react'
+import { Row, Col } from 'antd';
+import styled from 'styled-components'
+import { findItemAndDelete } from '@/utils'
+import cx from 'classnames'
+
+const RowStyleLayout = styled(props => <div {...props} />)`
+  .card-checkbox {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .card-checkbox-item {
+    width: 320px;
+    height: 48px;
+    margin-right: 32px;
+    margin-bottom: 16px;
+    border:1px solid rgba(235,236,240,1);
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .card-checkbox-item.active {
+    border-color: #00B382;
+    position: relative;
+  }
+  .card-checkbox-item.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-right: 6px solid #00B382;
+    border-bottom: 6px solid #00B382;
+  }
+  .card-logo {
+    display: block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  .card-logo.default {
+    background: #669EDE;
+    text-align: center;
+    line-height: 32px;
+    color: #fff;
+    font-size: 12px;
+  }
+  .card-checkbox-title {
+    font-size: 14px;
+    color: #42526E;
+  }
+`
+
+const CardCheckBox = (props) => {
+  const { dataSource = [] } = props.props['x-component-props']
+  const value: number[] = props.value || []
+
+  const handleChange = (id) => {
+    if (value.includes(id)) {
+      const newValue = findItemAndDelete(value, id)
+      props.mutators.change(newValue)
+    } else {
+      props.mutators.change([...value, id])
+    }
+  }
+
+  const isChecked = (id) => {
+    return value.includes(id)
+  }
+  return (
+    <RowStyleLayout>
+      <Row className='card-checkbox'>
+        {
+          dataSource.map((v, i) => {
+            return (
+              <Col key={v.id} className={cx('card-checkbox-item', isChecked(v.id) ? 'active' : '')} onClick={() => handleChange(v.id)}>
+                { v.logo ? <img className='card-logo' src={v.logo}/> : <div className='card-logo default'>logo</div> }
+                <span className='card-checkbox-title'>{v.title}</span>
+              </Col>
+            )
+          })
+        }
+      </Row>
+    </RowStyleLayout>
+  )
+}
+
+CardCheckBox.defaultProps = {}
+
+CardCheckBox.isFieldComponent = true;
+
+export default CardCheckBox
\ No newline at end of file

src/components/NiceForm/components/CustomAddArray.tsx

+import React from 'react'
+import styled from 'styled-components'
+import { toArr } from '@formily/shared';
+import { SchemaField, FormPath } from '@formily/antd';
+import { Button } from 'antd';
+
+// 由于自增列表里 无法进行mega布局， 所以只能在该组件下 重写样式
+const RowStyleLayout = styled(props => <div {...props} />)`
+  .ant-btn {
+    margin-right: 16px;
+  }
+  .ant-form-item {
+    display: inline-flex;
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+  > .ant-form-item {
+    margin-bottom: 20px;
+    margin-right: 20px;
+  }
+  > .ant-form-item:last-child {
+    margin-right: 0;
+  }
+  .ant-form-item-control {
+    max-width: none;
+  }
+`
+
+// 自增组件
+const CustomAddArray = (props) => {
+  const { value, schema, className, editable, path, mutators } = props
+  const componentProps = schema.getExtendsComponentProps() || {}
+  const onAdd = () => mutators.push(schema.items.getEmptyValue())
+  const onRemove = index => mutators.remove(index)
+
+  return <div>
+    { toArr(value).map((item, index, arr) => {
+      return <RowStyleLayout {...componentProps} key={index}>
+            <SchemaField path={FormPath.parse(path).concat(index)} onlyRenderProperties/>
+            <Button onClick={onAdd.bind(null, index)} type='primary'>+</Button>
+            { index !==  0 && <Button onClick={onRemove.bind(null, index)}>-</Button>}
+      </RowStyleLayout>
+    }) }
+  </div>
+}
+
+CustomAddArray.isFieldComponent = true
+
+export default CustomAddArray

src/components/NiceForm/components/CustomRegistryPhone.tsx

+import React from 'react';
+import { Row, Col, Select, Input } from 'antd';
+import styled from 'styled-components';
+import { findItemAndDelete } from '@/utils';
+import cx from 'classnames';
+
+const { Option } = Select;
+
+const RowStyleLayout = styled(props => <div {...props} />)``;
+
+const registryPhone = (props: any) => {
+  const { dataSource = [], selectPh, inputPh } = props.props[
+    'x-component-props'
+  ];
+  const defaultValue: any = props.props.default || {};
+  const value: any = props.value || {};
+
+  const handleChange = (type, e) => {
+    if (type === 'select') {
+      props.mutators.change({ ...value, phone: e });
+    } else {
+      e.persist();
+      props.mutators.change({ ...value, countryCode: e.target.value });
+    }
+  };
+
+  return (
+    <Row>
+      <Col span={8}>
+        <Select
+          value={defaultValue.countryCode}
+          onChange={val => handleChange('select', val)}
+          placeholder={selectPh}
+        >
+          {dataSource.map((v, i) => {
+            return (
+              <Option key={v.text} value={v.id}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img
+                    style={{
+                      width: '24px',
+                      height: '17px',
+                      marginRight: '8px',
+                    }}
+                    src={v.url}
+                  />
+                  {v.text}
+                </div>
+              </Option>
+            );
+          })}
+        </Select>
+      </Col>
+      <Col span={15} offset={1}>
+        <Input
+          defaultValue={defaultValue.phone}
+          placeholder={inputPh}
+          maxLength={11}
+          onChange={e => handleChange('input', e)}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+registryPhone.defaultProps = {};
+
+registryPhone.isFieldComponent = true;
+
+export default registryPhone;

src/components/NiceForm/components/CustomSlider.tsx

+import React from 'react'
+import { Slider, Input, Space } from 'antd'
+
+const CustomSlider = (props) => {
+  const value = props.value || 0
+  const max = props.props['x-component-props']?.max || 0
+  return (
+    <div style={{width: '100%'}}>
+      <Slider
+        value={value}
+        onChange={e => props.mutators.change(e)}
+        {...props.props['x-component-props']}></Slider>
+      <Space>
+        <Input type='number' disabled max={max} value={props.value} onChange={e => props.mutators.change(e.target.value)} addonAfter='尺'/>
+        { max && <span>还剩：{max - value}尺</span> }
+      </Space>
+    </div>
+  )
+}
+
+CustomSlider.defaultProps = {}
+
+CustomSlider.isFieldComponent = true;
+
+export default CustomSlider
\ No newline at end of file

src/components/NiceForm/components/CustomStatus.tsx

+import React from 'react';
+import { Space } from 'antd';
+
+const CustomStatus = props => {
+  console.log(props);
+  return (
+    <>
+      <Space>
+        <span
+          className={
+            props.value === 1 ? 'commonStatusValid' : 'commonStatusInvalid'
+          }
+        ></span>
+        <span>{props.value === 1 ? '有效' : '无效'}</span>
+      </Space>
+    </>
+  );
+};
+
+export default CustomStatus;

src/components/NiceForm/components/CustomUpload.tsx

+import React from 'react'
+import UploadImage from "@/components/UploadImage"
+
+const CustomUpload = (props) => {
+  const { mutators } = props
+  return <UploadImage
+    imgUrl={props.value}
+    onChange={data => {
+      // 这里能拿到change后的data值
+      mutators.change(data)
+    }}
+  />
+}
+
+CustomUpload.isFieldComponent = true
+
+export default CustomUpload
\ No newline at end of file

src/components/NiceForm/components/MultTable.tsx

+import React, { useState } from 'react'
+import { Input, Space, Button, Table } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+
+const MultTable = (props) => {
+  const { columns } = props.props['x-component-props']
+  const value = props.value || []
+  return (
+    <div style={{width: '100%'}}>
+      <Button block icon={<PlusOutlined/>} type='dashed'>选择指定会员</Button>
+      <Table
+        rowKey='id'
+        columns={columns}
+        dataSource={value}
+      />
+    </div>
+  )
+}
+
+MultTable.defaultProps = {}
+
+MultTable.isFieldComponent = true;
+
+export default MultTable
\ No newline at end of file

src/components/NiceForm/components/Search.tsx

+import React, { useState } from 'react'
+import { Input, Space, Button } from 'antd'
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
+import { useFieldState, FormPath } from '@formily/antd'
+import { FORM_FILTER_PATH } from '@/formSchema/const'
+
+export interface SearchProps {
+  value: string,
+  mutators: any,
+  props: any
+}
+
+const Search = (props) => {
+  console.log(props)
+  const [state, setState] = useFieldState({
+    filterSearch: false
+  })
+
+  const changeFilterVisible = () => {
+    if (state.filterSearch) {
+      props.form.reset({
+        // 清除FILTER_PARAMS下所有字段
+        selector: `*.${FORM_FILTER_PATH}.*`
+      })
+    }
+    setState({
+      filterSearch: !state.filterSearch
+    })
+  }
+  return (
+    <Space size={20} style={{justifyContent: 'flex-end', width: '100%'}}>
+      <Input.Search
+        value={props.value || ''}
+        onChange={e => props.mutators.change(e.target.value)}
+        onSearch={(_,e) => {
+          e.preventDefault()
+          props.form.submit()
+        }}
+        {...props.props['x-component-props']}
+      />
+      <Button onClick={changeFilterVisible}>高级筛选{state.filterSearch ? <CaretUpOutlined /> : <CaretDownOutlined />}</Button> 
+      <Button onClick={() => props.form.reset()}>重置</Button>     
+    </Space>
+  )
+}
+
+Search.defaultProps = {}
+
+Search.isFieldComponent = true;
+
+export default Search
\ No newline at end of file

src/components/NiceForm/components/Submit.tsx

+import React, { useState } from 'react'
+import { Input, Space, Button } from 'antd'
+
+const Submit = (props) => {
+  return (
+    <Button htmlType='submit' type='primary'>查询</Button>
+  )
+}
+
+Submit.defaultProps = {}
+
+Submit.isFieldComponent = true;
+
+export default Submit
\ No newline at end of file

src/components/NiceForm/components/Text.tsx

+import React from 'react'
+
+const Text = (props) => {
+  return (
+    <span {...props.props['x-component-props']}>{props.value}</span>
+  )
+}
+
+Text.defaultProps = {}
+
+Text.isFieldComponent = true;
+
+export default Text
\ No newline at end of file

src/components/NiceForm/index.tsx

+import React from 'react';
+import SchemaForm, {
+  IAntdSchemaFormProps,
+  createFormActions,
+  FormPath,
+  SchemaField,
+} from '@formily/antd';
+import { Button, Space } from 'antd';
+import CustomUpload from './components/CustomUpload';
+import CustomStatus from './components/CustomStatus';
+import CustomAddArray from './components/CustomAddArray';
+import CustomSlider from './components/CustomSlider';
+import Search from './components/Search';
+import Submit from './components/Submit';
+import Text from './components/Text';
+import CardCheckBox from './components/CardCheckBox';
+import MultTable from './components/MultTable';
+import CustomRegistryPhone from './components/CustomRegistryPhone';
+
+export interface NiceFormProps extends IAntdSchemaFormProps {}
+
+const NiceForm: React.FC<NiceFormProps> = props => {
+  const { children, components, ...reset } = props;
+  const customComponents = {
+    CustomUpload,
+    CustomStatus,
+    CustomAddArray,
+    CustomSlider,
+    Search,
+    Submit,
+    Text,
+    CardCheckBox,
+    MultTable,
+    CustomRegistryPhone,
+  };
+
+  const defineComponents = Object.assign(customComponents, components);
+
+  return (
+    <SchemaForm colon={false} components={defineComponents} {...reset}>
+      {children}
+    </SchemaForm>
+  );
+};
+
+NiceForm.defaultProps = {};
+
+export default NiceForm;

src/components/ReturnEle/index.tsx

+import React, { Component } from 'react'
+import {
+  ArrowLeftOutlined
+} from '@ant-design/icons'
+
+interface IProps {
+  description?: string;
+  logoSrc?: string;
+}
+
+const ReutrnEle:React.FC<IProps> = (props) => {
+  const { description, logoSrc } = props
+
+  return <>
+    <span style={{fontSize:15,color:'#6B778CFF'}}><ArrowLeftOutlined /> {logoSrc?<img src={logoSrc} style={{width:48,height:48,margin:'0 0 0 14px'}}/>:description}</span>
+  </>
+}
+
+export default ReutrnEle 
\ No newline at end of file

src/components/UploadImage/index.less

+.upload_image_wrap {
+  display: flex;
+  align-items: center;
+
+  .size_require {
+    color: #97A0AF;
+  }
+
+  .upload_btn {
+
+    width: 104px;
+    height: 104px;
+    display: flex;
+    margin-right: 24px;
+    align-items: center;
+    justify-content: center;
+    color: #6B778C;
+    flex-direction: column;
+    background: rgba(250, 251, 252, 1);
+    border-radius: 2px;
+    border: 1px solid rgba(223, 225, 230, 1);
+    cursor: pointer;
+    overflow: hidden;
+
+    &.isAdd {
+      border: 1px dashed rgba(223, 225, 230, 1);
+    }
+
+    &>img {
+      height: 100%;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+
+    &>p {
+      margin-top: 12px;
+    }
+  }
+}
\ No newline at end of file

src/components/UploadImage/index.tsx

+import React, { useState, Fragment, forwardRef } from 'react'
+import { Upload, message } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
+import cx from 'classnames'
+import styles from './index.less'
+
+interface UploadImagePorpsType {
+  imgUrl: string;
+  size?: string;
+  onChange: Function;
+  disabled?: boolean;
+}
+
+const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
+  const { imgUrl, onChange, size = "386x256", disabled = false } = 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';
+    if (!isJpgOrPng) {
+      message.error('仅支持上传JPEG/JPG/PNG文件!');
+    }
+    const isLt200k = file.size / 1024 < 200;
+    if (!isLt200k) {
+      message.error('上传图片不超过200K!');
+    }
+    return isJpgOrPng && isLt200k;
+  }
+
+  const uploadProps = {
+    name: 'file',
+    action: '/api/file/file/upload',
+    headers: {},
+    data: {
+      fileType: 1
+    },
+    disabled: loading || disabled,
+    showUploadList: false,
+    onChange(info: UploadChangeParam) {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return;
+      }
+      if (info.file.status === 'done') {
+        // 图片回显
+        const { code, data } = info.file.response
+        if (code === 1000) {
+          console.log('upload success')
+          onChange(data)
+        }
+        setLoading(false)
+      }
+    },
+    beforeUpload
+  };
+
+  const uploadButton = (
+    <Fragment>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <p>上传图片</p>
+    </Fragment>
+  );
+
+  return (
+    <div className={styles.upload_image_wrap}>
+      <Upload {...uploadProps}>
+        {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "")}>
+          {
+            imgUrl ? <img src={imgUrl} /> : uploadButton
+          }
+        </div>}
+      </Upload>
+      <div className={styles.size_require}>
+        <p>支持JPG/PNG/JPEG， <br />最大不超过 200K， <br />尺寸：{size}</p>
+      </div>
+    </div>
+  )
+})
+
+export default UploadImage

src/formSchema/const/index.ts

+export const FORM_FILTER_PATH = 'FORM_FILTER_PATH'
\ No newline at end of file

src/formSchema/effects/useFilterSearch.ts

+import { useValueLinkageEffect, ISchemaFormActions, ISchemaFormAsyncActions } from "@formily/antd"
+
+/**
+ * @param origin 触发联动的字段路径
+ * @param target 关联的字段路径
+ */
+export const useStateFilterSearchLinkageEffect = (context, actions: ISchemaFormActions | ISchemaFormAsyncActions, origin: string, target: string) => {
+  const { setFieldState, reset } = actions
+  context('onFieldChange', origin).subscribe(state => {
+    setFieldState(target, fieldState => {
+      fieldState.visible = state.filterSearch
+    })
+  })
+}
\ No newline at end of file

src/formSchema/effects/usePublicSelect.ts

+import { createFormActions, FormEffectHooks } from '@formily/antd'
+import { useLinkageUtils } from '@/utils/formEffectUtils'
+
+/**
+ * 定义表单副作用的集合
+ */
+const { onFieldValueChange$ } = FormEffectHooks
+
+export const usePublicSelectEffects = context => {
+  const linkage = useLinkageUtils()
+  onFieldValueChange$('select').subscribe(({ value }) => {
+    linkage.visible(value)
+  })
+}
\ No newline at end of file

src/locales/zh-CN/menu.ts

@@ -50,8 +50,10 @@ export default {
   'menu.memberAbility.memberMaintain': '会员维护',
   'menu.memberAbility.memberPrSubmit': '待提交审核',
   'menu.memberAbility.auditPrSubmit': '待提交审核详情',
-  'menu.memberAbility.memberPr': '待审核',
-  'menu.memberAbility.auditPr': '待审核详情',
+  'menu.memberAbility.memberPr1': '待审核（一级）',
+  'menu.memberAbility.memberPr2': '待审核（二级）',
+  'menu.memberAbility.auditPr1': '待审核详情（一级）',
+  'menu.memberAbility.auditPr2': '待审核详情（二级）',
   'menu.memberAbility.memberPrConfirm': '待确认审核',
   'menu.memberAbility.auditPrComfirm': '待确认审核详情',
   'menu.memberAbility.memberUpgradeRule': '会员升级规则',

src/pages/member/components/auditDetail.tsx

-import React, { ReactNode, useRef, useState } from 'react';
+import React, { ReactNode, useRef, useState, useEffect } from 'react';
 import { history } from 'umi';
 import { StopOutlined, CheckSquareOutlined } from '@ant-design/icons';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
@@ -17,12 +17,14 @@ import {
 import { StandardTable } from 'god';
 import { ColumnType } from 'antd/lib/table/interface';
 import style from './index.less';
+import { PublicApi } from '@/services/api';
 
 const { TabPane } = Tabs;
 const { Step } = Steps;
 
 interface ItemProps {
   auditType: string;
+  routeParams: any;
 }
 
 const data = [
@@ -37,7 +39,7 @@ const data = [
   },
 ];
 
-const auditDetail: React.FC<ItemProps> = props => {
+const auditDetail: React.FC<ItemProps> = (props: any) => {
   const ref = useRef({});
   const [fActived, setfActived] = useState('1');
   const [lActived, setlActived] = useState('1');
@@ -278,6 +280,13 @@ const auditDetail: React.FC<ItemProps> = props => {
     },
   ];
 
+  useEffect(() => {
+    PublicApi.getMemberValidateCommitDetail({
+      memberId: props.routeParams.memberId,
+      validateId: props.routeParams.validateId,
+    }).then(res => {});
+  });
+
   // 模拟请求
   const fetchData = (params: any) => {
     return new Promise((resolve, reject) => {

src/pages/member/memberMaintain/addMember.tsx

 import React, { useState, useEffect, useRef, ReactNode } from 'react';
 import { history } from 'umi';
-import { Tabs, Badge, Button, Card, Row, Col, message } from 'antd';
+import { Tabs, Badge, Button, Card, Row, Col, message, Upload } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { ContainerOutlined } from '@ant-design/icons';
-import { Form, FormItem, createFormActions } from '@formily/antd';
-import { Select, Input, Upload } from '@formily/antd-components';
+import {
+  ContainerOutlined,
+  PlusOutlined,
+  SaveOutlined,
+} from '@ant-design/icons';
+import { createFormActions } from '@formily/antd';
 import { StandardTable } from 'god';
 import { ColumnType } from 'antd/lib/table/interface';
+import {
+  IFormFilter,
+  IButtonFilter,
+} from 'god/dist/src/standard-table/TableController';
+import ReutrnEle from '@/components/ReturnEle';
+import styles from './index.less';
+import NiceForm from '@/components/NiceForm';
+import { initDetailSchema } from './schema';
+
 import style from './index.less';
 import { PublicApi } from '@/services/api';
 
 const { TabPane } = Tabs;
 
-const actions = createFormActions();
+const addSchemaAction = createFormActions();
 
 const addMember: React.FC<any> = props => {
   const ref = useRef({});
-  const [actived, setActived] = useState('-1');
-  const [editable, setEditable] = useState(
-    props.location.query.type != 'check',
-  );
   const selectList: any = [
     {
       label: '',
@@ -30,15 +38,10 @@ const addMember: React.FC<any> = props => {
       // )
       value: '1',
     },
-    { label: '', value: '2' },
-    { label: '', value: '3' },
-    { label: '', value: '4' },
-    { label: '', value: '5' },
   ];
 
   /* 会员类型、会员角色、会员等级、注册手机号选项 */
   const [memberItems, setMemberItems] = useState<any>({});
-  const [loading, setLoading] = useState(false);
 
   const data = [
     {
@@ -146,181 +149,34 @@ const addMember: React.FC<any> = props => {
     return isJpgOrPng && isLt2M;
   };
 
-  const handleChange = (items: any, file: any) => {
-    for (let elem of file) {
-      elem.url = elem.data;
-    }
-  };
-
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回" />}
       title={
-        <>
-          <div className={style.headerTop}>
-            <span>返回</span>
-            <span>
-              {props.location.query.type === 'add'
-                ? '新建会员'
-                : props.location.query.type === 'change'
-                ? '编辑会员'
-                : '查看会员'}
-            </span>
-          </div>
-        </>
-      }
-      extra={
-        <>
-          <Button
-            className={style.saveBtn}
-            icon={<ContainerOutlined />}
-            onClick={() => actions.submit()}
-          >
-            保存
-          </Button>
-        </>
+        props.location.query.type === 'add'
+          ? '新建会员'
+          : props.location.query.type === 'change'
+          ? '编辑会员'
+          : '查看会员'
       }
+      extra={[
+        <Button
+          key="1"
+          type="primary"
+          icon={<SaveOutlined />}
+          onClick={() => addSchemaAction.submit()}
+        >
+          保存
+        </Button>,
+      ]}
     >
       <Card>
-        <Form
-          editable={editable}
-          labelCol={3}
-          wrapperCol={10}
-          labelAlign="left"
-          actions={actions}
-        >
-          <Tabs
-            tabBarGutter={30}
-            activeKey={actived}
-            onChange={activeKey => setActived(activeKey)}
-          >
-            <TabPane
-              tab={
-                // <Badge count={tabCount['1']} offset={[10, 0]}>
-                '基本信息'
-                // </Badge>
-              }
-              key="-1"
-            >
-              <FormItem
-                label="会员类型"
-                name="memberTypes"
-                dataSource={memberItems.memberTypes}
-                rules={[{ required: true, message: '请选择会员类型!' }]}
-                component={Select}
-              />
-              <FormItem
-                label="会员角色"
-                name="memberRoles"
-                dataSource={memberItems.memberRoles}
-                rules={[{ required: true, message: '请选择会员角色!' }]}
-                component={Select}
-              />
-              <FormItem
-                label="会员等级"
-                name="memberLevels"
-                dataSource={memberItems.memberLevels}
-                rules={[{ required: true, message: '请选择会员等级!' }]}
-                component={Select}
-              />
-              <FormItem
-                label={
-                  <>
-                    <span className={style.required}>*</span>
-                    注册手机号
-                  </>
-                }
-                name="registry"
-              >
-                <Row gutter={10}>
-                  <Col span={6}>
-                    <FormItem
-                      itemStyle={{ marginBottom: 0 }}
-                      name="country"
-                      dataSource={memberItems.countryCodes}
-                      rules={[{ required: true, message: '请选择会员角色!' }]}
-                      component={Select}
-                    />
-                  </Col>
-                  <Col span={18}>
-                    <FormItem
-                      name="phoneMobile"
-                      itemStyle={{ marginBottom: 0 }}
-                      rules={[{ required: true, message: '请选择会员角色!' }]}
-                      component={Input}
-                    />
-                  </Col>
-                </Row>
-              </FormItem>
-              <FormItem
-                label="注册邮箱"
-                name="memberEmail"
-                itemStyle={{ marginBottom: 0 }}
-                component={Input}
-              />
-            </TabPane>
-            {memberItems.groups &&
-              memberItems.groups.map((item: any, index: number) => {
-                return (
-                  <TabPane
-                    tab={
-                      // <Badge count={tabCount['1']} offset={[10, 0]}>
-                      item.groupName
-                      // </Badge>
-                    }
-                    key={index}
-                  >
-                    {item.elements.map((items: any, indexs: number) => {
-                      return (
-                        <div key={indexs}>
-                          {items.fieldType === 'String' ? (
-                            <FormItem
-                              itemStyle={
-                                item.elements.length - 1 === indexs
-                                  ? { marginBottom: 0 }
-                                  : {}
-                              }
-                              label={items.fieldCNName}
-                              name={items.fieldName}
-                              required={items.fieldEmpty === 0}
-                              // rules={items.checkRules}
-                              component={Input}
-                              key={indexs}
-                            />
-                          ) : (
-                            <FormItem
-                              itemStyle={
-                                item.elements.length - 1 === indexs
-                                  ? { marginBottom: 0 }
-                                  : {}
-                              }
-                              label={items.fieldCNName}
-                              name={items.fieldName}
-                              action="/api/file/file/upload"
-                              listType="picture-card"
-                              required={items.fieldEmpty === 0}
-                              // rules={items.checkRules}
-                              data={{ fileType: 2 }}
-                              beforeUpload={beforeUpload}
-                              onChange={(file: any) =>
-                                handleChange(items, file)
-                              }
-                              showUploadList={{
-                                showRemoveIcon:
-                                  items.value && items.value.length > 0,
-                              }}
-                              key={indexs}
-                              component={Upload}
-                            />
-                          )}
-                        </div>
-                      );
-                    })}
-                  </TabPane>
-                );
-              })}
-          </Tabs>
-        </Form>
+        <NiceForm
+          onSubmit={handleSubmit}
+          actions={addSchemaAction}
+          schema={initDetailSchema(memberItems)}
+        />
       </Card>
     </PageHeaderWrapper>
   );

src/pages/member/memberMaintain/index.tsx

@@ -51,9 +51,9 @@ const memberMaintain: React.FC<[]> = () => {
     memberType: 0, // 会员类型
     level: 0, // 会员等级
     source: 0, // 注册来源
-    innerStatus: 0, // 内部状态
-    outerStatus: 0, // 外部状态
-    status: 0, // 会员状态
+    innerStatus: ['0'], // 内部状态
+    outerStatus: ['0'], // 外部状态
+    status: ['0'], // 会员状态
     timeRange: 0, // 申请时间
     startDate: '', // 申请开始时间
     endDate: '', // 申请结束时间
@@ -134,6 +134,7 @@ const memberMaintain: React.FC<[]> = () => {
       key: 'memberStatus',
       filters: [],
       filteredValue: searchForm.memberStatus || ['0'],
+      filterMultiple: false,
       render: (text: any, record: any) => {
         let component: ReactNode = null;
         component = (
@@ -155,6 +156,7 @@ const memberMaintain: React.FC<[]> = () => {
       key: 'outerStatus',
       filters: [],
       filteredValue: searchForm.outerStatus || ['0'],
+      filterMultiple: false,
       render: (text: any, record: any) => {
         let component: ReactNode = null;
         component = (
@@ -180,6 +182,7 @@ const memberMaintain: React.FC<[]> = () => {
       key: 'innerStatus',
       filters: [],
       filteredValue: searchForm.innerStatus || ['0'],
+      filterMultiple: false,
       render: (text: any, record: any) => {
         let component: ReactNode = null;
         component = (
@@ -290,17 +293,6 @@ const memberMaintain: React.FC<[]> = () => {
   };
 
   useEffect(() => {
-    if (!isFirst) return;
-    let timeRanges = timeRange(searchForm.timeRange);
-    // setIsFirst(false);
-    // setSearchForm({
-    //   ...searchForm,
-    //   startDate: timeRanges.st,
-    //   endDate: timeRanges.et,
-    // });
-  }, [searchForm.timeRange]);
-
-  useEffect(() => {
     if (!isFirst) return setIsFirst(true);
     ref.current.reload();
   }, [
@@ -311,6 +303,19 @@ const memberMaintain: React.FC<[]> = () => {
   ]);
 
   useEffect(() => {
+    // if (!isFirst) return;
+    //   setIsFirst(false);
+    let timeRanges = timeRange(searchForm.timeRange);
+    setSearchForm({
+      ...searchForm,
+      startDate: timeRanges.st,
+      endDate: timeRanges.et,
+    });
+    ref.current.reload();
+    // console.log(timeRanges);
+  }, [searchForm.timeRange]);
+
+  useEffect(() => {
     PublicApi.getMemberMaintenancePageitems().then(res => {
       Promise.all([
         processData(res.data.memberStatus),
@@ -335,9 +340,9 @@ const memberMaintain: React.FC<[]> = () => {
       memberType: 0,
       level: 0,
       source: 0,
-      innerStatus: 0,
-      outerStatus: 0,
-      status: 0,
+      innerStatus: ['0'],
+      outerStatus: ['0'],
+      status: ['0'],
       timeRange: 0,
       startDate: '',
       endDate: '',

src/pages/member/memberMaintain/schema/index.tsx

+import React from 'react';
+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+
+export const maintianSchema: ISchema = {
+  type: 'object',
+  properties: {
+    megaLayout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      properties: {
+        search: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-mega-props': {},
+          'x-component-props': {
+            placeholder: '请输入仓位名称',
+          },
+        },
+        [FORM_FILTER_PATH]: {
+          type: 'object',
+          'x-component': 'mega-layout',
+          visible: false,
+          'x-component-props': {
+            inline: true,
+          },
+          properties: {
+            productName: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '商品名称',
+              },
+            },
+            productId: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '商品ID',
+              },
+            },
+            category: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '请选择品类',
+              },
+              enum: [],
+            },
+            brand: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '请选择品牌',
+              },
+              enum: [],
+            },
+            submit: {
+              'x-component': 'Submit',
+              'x-component-props': {
+                children: '查询',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const registryPhone = <></>;
+
+const getCompnentValue = (elements: any) => {
+  let components = {};
+  for (let item of elements) {
+    let xComponentProps =
+      item.fieldType === 'string'
+        ? {
+            placeholder: item.fieldRemark,
+          }
+        : {
+            listType: 'card',
+            action: '/api/file/file/upload',
+            data: { fileType: 2 },
+          };
+    components[item.fieldName] = {
+      type: item.fieldType,
+      required: item.fieldEmpty === 0,
+      title: item.fieldCNName,
+      'x-component-props': xComponentProps,
+    };
+  }
+  return components;
+};
+
+export const initDetailSchema = (props: any) => {
+  let tabSchema = {
+    properties: {
+      'tab-1': {
+        type: 'object',
+        'x-component': 'tabpane',
+        'x-component-props': {
+          tab: '基本信息',
+        },
+        properties: {
+          MEGA_LAYOUT1: {
+            type: 'object',
+            'x-component': 'mega-layout',
+            'x-component-props': {
+              labelCol: 4,
+              wrapperCol: 8,
+              labelAlign: 'left',
+            },
+            properties: {
+              memberTypes: {
+                type: 'string',
+                required: true,
+                title: '会员类型',
+                enum: props.memberTypes,
+                'x-component-props': {
+                  placeholder: '请选择',
+                },
+              },
+              memberRoles: {
+                type: 'string',
+                required: true,
+                title: '会员角色',
+                enum: props.memberRoles,
+                'x-component-props': {
+                  placeholder: '请选择',
+                },
+              },
+              memberLevels: {
+                type: 'string',
+                required: true,
+                title: '会员等级',
+                enum: [{ label: '1', value: 1 }],
+                // enum: props.memberLevels,
+                'x-component-props': {
+                  placeholder: '请选择',
+                },
+              },
+              memberPhone: {
+                type: 'object',
+                required: true,
+                title: '注册手机',
+                'x-component': 'CustomRegistryPhone',
+                'x-component-props': {
+                  dataSource: [
+                    {
+                      text: '+86',
+                      id: 1,
+                      url: require('../../../../../public/static/imgs/level1@2x.png'),
+                    },
+                    {
+                      text: '+126',
+                      id: 2,
+                      url: require('../../../../../public/static/imgs/level2@2x.png'),
+                    },
+                  ],
+                  selectPh: '请选择',
+                  inputPh: '请输入你的手机号码',
+                },
+              },
+              memberEmail: {
+                type: 'string',
+                title: '邮箱',
+                'x-component-props': {},
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+
+  if (Object.keys(props).length > 0) {
+    for (let [index, item] of props.groups.entries()) {
+      tabSchema.properties[`tab-${index + 2}`] = {
+        type: 'object',
+        'x-component': 'tabpane',
+        'x-component-props': {
+          tab: item.groupName,
+        },
+        properties: {
+          [`MEGA_LAYOUT${index + 2}`]: {
+            type: 'object',
+            'x-component': 'mega-layout',
+            'x-component-props': {
+              labelCol: 4,
+              wrapperCol: 8,
+              labelAlign: 'left',
+            },
+            properties: getCompnentValue(item.elements),
+          },
+        },
+      };
+    }
+  }
+
+  let detailSchema = {
+    type: 'object',
+    properties: {
+      REPOSIT_TABS: {
+        type: 'object',
+        'x-component': 'tab',
+        'x-component-props': {},
+        ...tabSchema,
+      },
+    },
+  };
+  const maintianDetailSchema: ISchema = detailSchema;
+  return maintianDetailSchema;
+};

src/pages/member/memberPr/auditPr.tsx → src/pages/member/memberPr1/auditPr1.tsx

 import React from 'react';
 import AuditDetail from '../components/auditDetail';
 
-const auditPr = () => {
-  return <AuditDetail auditType="2" />;
+const auditPr = (props: any) => {
+  return <AuditDetail auditType="2" routeParams={props.location.query} />;
 };
 
 export default auditPr;

src/pages/member/memberPr2/auditPr2.tsx

+import React from 'react';
+import AuditDetail from '../components/auditDetail';
+
+const auditPr = (props: any) => {
+  return <AuditDetail auditType="2" routeParams={props.location.query} />;
+};
+
+export default auditPr;

src/pages/member/memberPr2/index.tsx

+import React from 'react';
+import AuditList from '../components/auditList';
+
+const memberPr = () => {
+  return <AuditList pageType="3" />;
+};
+
+export default memberPr;

src/pages/member/memberPrConfirm/auditPrComfirm.tsx

 import React from 'react';
 import AuditDetail from '../components/auditDetail';
 
-const auditPrConfirm = () => {
-  return <AuditDetail auditType="3" />;
+const auditPrConfirm = (props: any) => {
+  return <AuditDetail auditType="3" routeParams={props.location.query} />;
 };
 
 export default auditPrConfirm;

src/pages/member/memberPrConfirm/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import AuditList from '../components/auditList';
 
 const memberPrConfirm = () => {
-  return <AuditList pageType="3" />;
+  return <AuditList pageType="4" />;
 };
 
 export default memberPrConfirm;

src/pages/member/memberPrSubmit/auditPrSubmit.tsx

 import React from 'react';
 import AuditDetail from '../components/auditDetail';
 
-const auditPrSubmit = () => {
-  return <AuditDetail auditType="1" />;
+const auditPrSubmit = (props: any) => {
+  return <AuditDetail auditType="1" routeParams={props.location.query} />;
 };
 
 export default auditPrSubmit;

src/utils/index.ts

@@ -135,6 +135,20 @@ export const getAsyncSelectList = async (asyncList: any[]) => {
   }
 }
 
+export const findItemAndDelete = (arr: any[], target) => {
+  const newArr = [...arr]
+  if (newArr.length > 0 && isObject(newArr[0])) {
+    return newArr.filter(v => v.id !== target)
+  }
+  const targetIndex = arr.indexOf(target)
+  if (targetIndex === -1) {
+    return newArr
+  } else {
+    newArr.splice(targetIndex, 1)
+    return newArr
+  }
+}
+
 export default {
   isArray,
   isObject,