# Auth 共享组件(表单)

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import { constants, Auth, AuthValueType, Button, Dialog, CodeMirror } from '@weapp/ui';
import React from 'react';

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

interface AuthDemoProps {

}

interface AuthDemoState {
  visible: boolean,
  visibleInfo: boolean,
  showInfo: string,
}
class AuthDemo extends Component<AuthDemoProps, AuthDemoState> {
  authRef = React.createRef<any>();
  constructor(props: AuthDemoProps) {
    super(props);
    this.state = {
      visible: false,
      visibleInfo: false,
      showInfo: '',
    }
  }
  onClose = (visible: boolean) => this.setState({ visible });
  showAuth = () => this.setState({ visible: true });
  onChange = (value: AuthValueType) => {
    console.log('value', value);
  }
  showFieldData = () => {
    const showInfo = JSON.stringify(this.authRef?.current?.authFormRef?.current?.getFormDatas() || '')
    this.setState({ showInfo, visibleInfo: true });
  }
  onCloseInfo = () => this.setState({ visibleInfo: false });
  dialogProps = {
    buttons: [
      <Button key='b' onClick={this.showFieldData}>展示字段数据</Button>
    ]
  }
  render() {
    const { visible, visibleInfo, showInfo } = this.state;
    console.log(showInfo);
    return (
      <div className={prefixCls}>
        <Auth
         
          visible={visible}
          onClose={this.onClose}
          onChange={this.onChange}
          url={"/api/app/front/monitor/component/data/permission/form/query"}
          method="POST"
          params={{}}
          ref={this.authRef}
          dialogProps={this.dialogProps}
        >
          <div className={`${prefixCls}-title`} onClick={this.showAuth}>添加权限</div>
        </Auth>
        <Dialog
          title="信息"
          visible={visibleInfo}
          maskClosable
          closable
          mask
          destroyOnClose
          width={600}
          onClose={this.onCloseInfo}
        >
          <CodeMirror
            mode={'javascript'}
            value={showInfo}
            width={550}
            height={600}
          />
        </Dialog>
      </div>
    );
  }
}

export default AuthDemo;
```

### 表单展现模式

表单展现模式

```jsx
import { Component, createRef } from 'react';
import { constants, Auth, Button, AuthFormType, Dialog, FormInitAllDatas, FormStoreType } from '@weapp/ui';
import getAuthData from './datas';

const { AuthForm } = Auth;

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

interface AuthDemoProps {

}
interface AuthDemoState {
  codeVisible: boolean;
}
class AuthDemo extends Component<AuthDemoProps, AuthDemoState> {
  constructor(props: AuthDemoProps) {
    super(props);
    this.state = {
      codeVisible: false,
    }
  }
  authFormRef: any = createRef();
  getFormConfig = () => {
    const condition = getAuthData();
    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 });
  afterInit = (condition: FormInitAllDatas, store?: FormStoreType | null) => {
    console.log(condition, store);
  }
  render() {
    // const { codeVisible } = this.state;
    const condition = getAuthData();
    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick} type="primary">获取数据</Button>
        <Button onClick={this.getFormConfig} type="primary">获取表单布局</Button>
        <AuthForm
          condition={condition}
          ref={this.authFormRef}
          afterInit={this.afterInit}
        />
        {/* <Dialog
         
          title="表单布局数据"
          visible={codeVisible}
          onClose={this.closeDialog}
          closable
          maskClosable
          height={600}
          width={600}
        >
          <pre>
            <code>{JSON.stringify(condition, null, 2)}</code>
          </pre>
        </Dialog> */}
      </div>
    );
  }
}

export default AuthDemo;
```

### 添加矩阵选项

添加矩阵选项

```jsx
import { Component, createRef } from 'react';
import { constants, Auth, Button, FormInitAllDatas, FormStoreType } from '@weapp/ui';
import getAuthData from './datas';

const { AuthForm } = Auth;

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

interface AuthDemoProps {

}
interface AuthDemoState {
  codeVisible: boolean;
}
class AuthDemo extends Component<AuthDemoProps, AuthDemoState> {
  constructor(props: AuthDemoProps) {
    super(props);
    this.state = {
      codeVisible: false,
    }
  }
  authFormRef: any = createRef();
  getFormConfig = () => {
    const condition = getAuthData(false, 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 });
  afterInit = (condition: FormInitAllDatas, store?: FormStoreType | null) => {
    console.log(condition, store);
  }
  render() {
    // const { codeVisible } = this.state;
    const condition = getAuthData(false, true);
    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick} type="primary">获取数据</Button>
        <Button onClick={this.getFormConfig} type="primary">获取表单布局</Button>
        <p>矩阵布局不在默认的 condition 中，需要通过矩阵接口获取，需要传递 module 参数用于矩阵接口请求</p>
        <AuthForm
          condition={condition}
          ref={this.authFormRef}
          afterInit={this.afterInit}
          module='basicserver'
        />
      </div>
    );
  }
}

export default AuthDemo;
```

## 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)

Auth组件默认布局数据如下：

```
{
    "groups": [],
    "layout": [
        [
            {
                "id": "objType",
                "label": "对象类型",
                "labelSpan": 8,
                "items": [
                    "objType"
                ],
                "hide": false,
                "cascadeRules": { // 配置联动，用于重置联动后展示的字段数据
                    "objType": {
                        "resource": {
                            "datas": {
                                "obj_id": []
                            }
                        },
                        "department": {
                            "datas": {
                                "obj_id_department": [],
                                "department_attribute": [],
                                "seclevel": {
                                    "min": 0,
                                    "max": 100
                                }
                            }
                        },
                        "subcompany": {
                            "datas": {
                                "obj_id_subcompany": [],
                                "department_attribute": [],
                                "seclevel": {
                                    "min": 0,
                                    "max": 100
                                }
                            }
                        },
                        "role": {
                            "datas": {
                                "obj_id_role": [],
                                "role_level": "1",
                                "seclevel": {
                                    "min": 0,
                                    "max": 100
                                }
                            }
                        },
                        "group": {
                            "datas": {
                                "obj_id_group": []
                            }
                        },
                        "position": {
                            "datas": {
                                "obj_id_position": [],
                                "position_level": "1",
                                "position_level_department": [],
                                "position_level_subcompany": []
                            }
                        },
                        "all": {
                            "datas": {
                                "seclevel": {
                                    "min": 0,
                                    "max": 100
                                }
                            }
                        },
                        "external": {
                            "datas": {
                                "obj_id_external": []
                            }
                        }
                    }
                },
                "cascadeRulesOuter": { // 配置联动，用于重置联动后展示的字段布局
                    "objType": {
                        "resource": {
                            "show": [
                                "objType",
                                "obj_id"
                            ],
                            "hide": [
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_position",
                                "obj_id_external",
                                "department_attribute",
                                "role_level",
                                "seclevel",
                                "position_level"
                            ]
                        },
                        "department": {
                            "show": [
                                "objType",
                                "obj_id_department",
                                "department_attribute",
                                "seclevel"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_position",
                                "obj_id_external",
                                "role_level",
                                "position_level"
                            ]
                        },
                        "subcompany": {
                            "show": [
                                "objType",
                                "obj_id_subcompany",
                                "department_attribute",
                                "seclevel"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_position",
                                "obj_id_external",
                                "role_level",
                                "position_level"
                            ]
                        },
                        "role": {
                            "show": [
                                "objType",
                                "obj_id_role",
                                "role_level",
                                "seclevel"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_group",
                                "obj_id_position",
                                "obj_id_external",
                                "department_attribute",
                                "position_level"
                            ]
                        },
                        "group": {
                            "show": [
                                "objType",
                                "obj_id_group"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_position",
                                "obj_id_external",
                                "department_attribute",
                                "role_level",
                                "seclevel",
                                "position_level"
                            ]
                        },
                        "position": {
                            "show": [
                                "objType",
                                "obj_id_position",
                                "position_level"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_external",
                                "department_attribute",
                                "role_level",
                                "seclevel"
                            ]
                        },
                        "all": {
                            "show": [
                                "objType",
                                "seclevel"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_position",
                                "obj_id_external",
                                "department_attribute",
                                "role_level",
                                "position_level"
                            ]
                        },
                        "external": {
                            "show": [
                                "objType",
                                "obj_id_external"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_position",
                                "department_attribute",
                                "role_level",
                                "seclevel",
                                "position_level"
                            ]
                        },
                        "allExternal": {
                            "show": [
                                "objType"
                            ],
                            "hide": [
                                "obj_id",
                                "obj_id_department",
                                "obj_id_subcompany",
                                "obj_id_role",
                                "obj_id_group",
                                "obj_id_position",
                                "obj_id_external",
                                "department_attribute",
                                "role_level",
                                "seclevel",
                                "position_level"
                            ]
                        }
                    }
                }
            }
        ],
        [
            {
                "id": "obj_id",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id"
                ],
                "hide": false
            }
        ],
        [
            {
                "id": "obj_id_department",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id_department"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "obj_id_subcompany",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id_subcompany"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "obj_id_role",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id_role"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "obj_id_group",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id_group"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "obj_id_position",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id_position"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "obj_id_external",
                "label": "对象",
                "labelSpan": 8,
                "items": [
                    "obj_id_external"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "department_attribute",
                "label": "",
                "labelSpan": 8,
                "items": [
                    "department_attribute"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "role_level",
                "label": "角色级别",
                "labelSpan": 8,
                "items": [
                    "role_level"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "seclevel",
                "label": "安全级别",
                "labelSpan": 8,
                "items": [
                    "seclevel"
                ],
                "hide": true
            }
        ],
        [
            {
                "id": "position_level",
                "label": "岗位级别",
                "labelSpan": 8,
                "items": [
                    "position_level"
                ],
                "hide": true,
                "cascadeRules": {
                    "position_level": {
                        "1": [],
                        "2": [
                            "position_level_subcompany"
                        ],
                        "3": [
                            "position_level_partment"
                        ]
                    }
                }
            }
        ]
    ],
    "items": {
        "objType": {
            "itemType": "SELECT",
            "data": [
                {
                    "id": "resource",
                    "content": "人员"
                },
                {
                    "id": "department",
                    "content": "部门"
                },
                {
                    "id": "subcompany",
                    "content": "分部"
                },
                {
                    "id": "role",
                    "content": "角色"
                },
                {
                    "id": "group",
                    "content": "群组"
                },
                {
                    "id": "position",
                    "content": "岗位"
                },
                {
                    "id": "all",
                    "content": "所有人"
                },
                {
                    "id": "external",
                    "content": "外部联系人"
                },
                {
                    "id": "allExternal",
                    "content": "所有外部人"
                }
            ]
        },
        "obj_id": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "resource"
            }
        },
        "obj_id_department": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "department"
            }
        },
        "obj_id_subcompany": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "subcompany"
            }
        },
        "obj_id_role": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "role"
            }
        },
        "obj_id_group": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "channel"
            }
        },
        "obj_id_position": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "position"
            }
        },
        "obj_id_external": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "external"
            }
        },
        "department_attribute": {
            "itemType": "CHECKBOX",
            "data": [
                {
                    "id": "subordinate",
                    "content": "含下级"
                },
                {
                    "id": "partTimeStaff",
                    "content": "含兼职人员"
                }
            ]
        },
        "role_level": {
            "itemType": "SELECT",
            "data": [
                {
                    "id": "1",
                    "content": "总部"
                },
                {
                    "id": "2",
                    "content": "分部"
                },
                {
                    "id": "3",
                    "content": "部门"
                }
            ]
        },
        "seclevel": {
            "itemType": "SCOPE"
        },
        "position_level": {
            "itemType": "SELECT",
            "data": [
                {
                    "id": "1",
                    "content": "总部"
                },
                {
                    "id": "2",
                    "content": "指定分部"
                },
                {
                    "id": "3",
                    "content": "指定部门"
                }
            ]
        },
        "position_level_subcompany": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "subCompany"
            }
        },
        "position_level_partment": {
            "itemType": "BROWSER",
            "browserBean": {
                "module": "hrm",
                "type": "department"
            }
        }
    },
    "data": {
        "objType": "resource",
        "seclevel": {
            "min": 0,
            "max": 100
        },
        "role_level": "1",
        "position_level": "1"
    }
}
```
