# MAuth 共享组件(表单)

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/auth/freepass)
- 平台：移动端
- 维护者：蒋贝贝
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MAuth]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import { constants, MAuth, AuthValueType, utils, MButton } from '@weapp/ui';
import getAuthData from '../pc/datas';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const prefixCls = `${constants.uiPcClsPrefix}-demo-auth`;
const { formatParentPath } = utils;

interface MAuthDemoProps extends RouteComponentProps {

}

interface MAuthDemoState {
  visible: boolean,
}
const condition = getAuthData(true);
class MAuthDemo extends Component<MAuthDemoProps, MAuthDemoState> {
  constructor(props: MAuthDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  onClose = (visible: boolean) => this.setState({ visible });
  showAuth = () => {
    // this.setState({ visible: true });
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }
  onChange = (value: AuthValueType) => {
    console.log('value', value);
  }
  render() {
    const { visible } = this.state;
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
      isRouteLayout: true,
    }
    return (
      <div className={prefixCls}>
        <MAuth
          onClose={this.onClose}
          condition={condition}
          onChange={this.onChange}
          isMobile
          dialogProps={dialogProps}
          url={"/api/app/front/monitor/component/data/permission/form/query"}
          method="POST"
          params={{}}
        >
          <MButton className={`${prefixCls}-title`} type="primary" onClick={this.showAuth}>添加权限</MButton>
        </MAuth>
      </div>
    );
  }
}

export default withRouter(MAuthDemo);
```

### 表单展现模式

表单展现模式

```jsx
import { Component, createRef } from 'react';
import { constants, MAuth, MDialog, MDialogButtonProps } from '@weapp/ui';
import getAuthData from '../pc/datas';

const { ButtonGroup } = MDialog;
const { AuthForm } = MAuth;

const prefixCls = `${constants.uiPcClsPrefix}-demo-auth`;

interface MAuthDemoProps {

}
interface MAuthDemoState {
  codeVisible: boolean;
}
class MAuthDemo extends Component<MAuthDemoProps, MAuthDemoState> {
  constructor(props: MAuthDemoProps) {
    super(props);
    this.state = {
      codeVisible: false,
    }
  }
  authFormRef: any = createRef();
  getFormConfig = () => {
    const condition = getAuthData(true);
    console.log('condition', condition);
    // this.setState({ codeVisible: true });
  }
  onClick = () => {
    this.authFormRef?.current?.validate().then((errors: any) => {
      if (!(errors && errors.errors && Object.keys(errors.errors).length > 0)) {
        const datas = this.authFormRef?.current?.getFormDatas();
        console.log('datas', datas);
      }
    })
  }
  closeDialog = () => this.setState({ codeVisible: false });
  condition = getAuthData(true);
  render() {
    // const { codeVisible } = this.state;
    const datas = [
      { id: 'getData', content: '获取数据', onClick: this.onClick, type: 'primary' },
      { id: 'getFormConfig', content: '获取表单布局', onClick: this.getFormConfig, type: 'primary' },
    ] as MDialogButtonProps[];
    return (
      <div className={prefixCls}>
        <AuthForm
          condition={this.condition}
          ref={this.authFormRef}
          isMobile
        />
        <ButtonGroup datas={datas}></ButtonGroup>
      </div>
    );
  }
}

export default MAuthDemo;
```

## API

### 参数说明如下：

AuthForm支持的API，Auth均支持

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| condition | 布局配置(同Form组件配置) | FormInitAllDatas | T | - |
| visible | 弹框显示隐藏 | boolean | F | - |
| onClose | 弹框关闭回调 | (visible: boolean) => void | F | - |
| onChange | 数据回调 | (value: AuthValueType) => void | F | - |
| formProps | Form组件API配置集合 | FormRenderProps | F | - |
| dialogProps | Dialog组件API配置集合 | FormRenderProps | F | - |
| path | 弹框路由地址 | string | F | - |
| condition | 布局配置(同Form组件配置) | FormInitAllDatas | T | - |
| formProps | Form组件API配置集合 | FormRenderProps | F | - |
| isMobile | 表单移动端标识 | boolean | F | - |
| url | 表单数据获取接口 | string | F | - |
| params | 表单数据获取接口参数 | AnyObj | F | - |
| method | 表单数据获取接口方法 | Method | F | - |
| afterInit | 表单布局初始化后回调事件 | (condition: FormInitAllDatas, store?: FormStoreType \| null) => void | F | - |
### AuthForm组件参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| condition | 布局配置(同Form组件配置) | FormInitAllDatas | T | - |
| formProps | Form组件API配置集合 | FormRenderProps | F | - |
| isMobile | 表单移动端标识 | boolean | F | - |
| url | 表单数据获取接口 | string | F | - |
| params | 表单数据获取接口参数 | AnyObj | F | - |
| method | 表单数据获取接口方法 | Method | F | - |
### condition参考数据

详细数据从 demo2 表单展现模式 中获取

Auth组件基于Form实现，联动规则配置同Form，字段数据复用越多，联动配置越多

[Form组件](/ui/form)

```
{
  "layout": [
    [
      {
        "id": "objType", // 主要联动字段
        "label": "对象类型",
        "labelSpan": 8,
        "items": ["objType"],
        "hide": false,
        "cascadeRules": { // 行内联动配置,这里用于处理更新字段值，达到切换对象类型，联动带出的字段值恢复初始值的效果
          "objType": {
            "resource": {
              "datas": { "download": true, "seclevel": "1", "obj_id": [], "test_input": "" } // 当对象类型选中人力资源(objType='resource'), 更新当前行配置的字段值
            },
            "subcompany": {  "datas": { ... } },
            "department": {  "datas": { ... } },
            "position": {  "datas": { ... } },
            ...
          }
        },
        "cascadeRulesOuter": { // 多行联动配置
          "objType": {
            "resource": {
              "show": ["obj_id", "seclevel", "test_input"], // 需要展示行(layout id)
              "hide": ["obj_id_subcompany", "level", "date", "seclevel2", "obj_id_department", "level"...], // 需要隐藏行(layout id)
              "reset": [ // 重置某一行的字段配置及数据，用于重置带行内字段联动的行布局，可配置多项
                {
                  "datas": { "seclevel": "1" }, // 切换到人力资源字段，seclevel字段默认选中值恢复默认且字段按照layout配置的展示 (单个字段联动配置)
                  "layout": { "id": "seclevel", "label": "权限", "labelSpan": 8, "items": ["seclevel","download"] ... }
                }
              ]
            },
            ...
          }
        }
      }
    ],
    [
      {
        "id": "seclevel", "label": "权限", "labelSpan": 8, "items": ["seclevel", "download"], "hide": false,
        "cascadeRules": { //行内联动配置
          "seclevel": { // item key=seclevel 的联动规则
            "1": { // 当seclevel=1，带出item key为download的字段，并赋值为true
              "items": ["download"],
              "datas": { "download": true }
            },
            "2": {
              "items": ["download"],
              "datas": { "download": false }
            },
            "3": [], // 当seclevel=3，后面没有新的字段
            "4": ['test'] // 当seclevel=4，带出 item key为test的字段，且不需要更新字段值
          }
        }
      }
    ],
      ...
    ],
    "items": { // item 配置
        "objType": {
            "itemType": "SELECT",
            "data": [
                { "id": "resource",  "content": "人力资源" },
                { "id": "subcompany", "content": "分部" },
                { "id": "department", "content": "部门" },
                ...
            ]
        },
        "obj_id": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "resource"
            }
        },
        ...
    },
    "data": { // data配置
        "objType": "resource",
        "download": true,
        ...
    },
    "groups": [], // 目前分组均为空
}
```
