# 一、设置页面调用

【注意warning】  
后期改造中台可编辑，原中台仅预览的效果，改造后在中台也可和前台一致，可编辑数据！！！！该方案沟通后，菜单入口判断中台terminal标识给底层项目传递 ‘front’

```typescriptreact
//专项传递过来的使用场景
export enum TerminalEnum {
  backend = 'backend',
  front = 'front'
}

export enum FormCheckTypeEnum {
  AUTH = 'auth', // 权限
  PAGE = 'page', // 页面
  // 专项二期：提醒、表单的关联、按钮、编码等自定义
  // 专项三期：表单、导入导出
  CUSTOM = 'custom'
}

//自定义设置类型区分参考
export enum CustomTypeEnum {
  CustomMsg = 'CustomMsg',
  CustomRelation = 'CustomRelation',
  FlowSet = 'FlowSet',
  EnCode = 'EnCode',
  Button = 'Button',
  View = 'View',
  FormImpExp = 'FormImpExp',
  Form = 'form',
  FormComment= "FormComment",
StageThruster = 'stageThruster' // 阶段
}

// AppBuilderFormCheck参数
export interface AppBuilderFormCheckProps extends Attributes {
  appId: string;
  terminal: TerminalEnum;
  type: FormCheckTypeEnum;
  // 当type是custom时，需要传，指定对应的自定义类别
  customType?: CustomTypeEnum;
  // 挂载方法，会抛出保存回调
  onDitMount?: (onSave:Function)=>void;
  onRef?: any;
  checkStatus?: boolean; // 用于张健那边的传入，其他场景无用
  //用于李浩鉴权
  menuId?: string;
  // 外部传入table列表数据
  tableData?:FormCheckDatas[];
  // 提供外部获取table列表 onChange 数据
  onTableChange?: (customType: CustomTypeEnum, data: FormCheckDatas[]) => void; 
}

//使用示例：
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.FlowSet}
     onDitMount={onDitMount}
     menuId=""	
     tableData={tableData}
     onTableChange={onTableChange}
/>
```

## 1.1 审批

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.FlowSet}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.2 消息提醒

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.CustomMsg}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.3 权限设置

```typescriptreact
<CorsComponent
    app='@weapp/ebdform'
    compName='AppBuilderFormCheck'
    appId={appid}
    terminal={TerminalEnum.backend}
    type={'auth'}
    menuId=''
    onDitMount={onDitMount}
/>
```

## 1.4 关联设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.CustomRelation}
	 menuId=""
     onDitMount={onDitMount}
/>
```

## 1.5 编码设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.EnCode}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.6 按钮设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.Button}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.7 视图设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.View}
	 onDitMount={onDitMount}
     menuId=""
/>
```

## 1.8 导入导出

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.FormImpExp}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.9 点赞设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.LikeButton}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.10 关注设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.FollowButton}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.11 外部分发

## 1.12 打印

## 1.13 表单设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.Form}
     onDitMount={onDitMount}
	 menuId={menuId}
/>
```

## 1.14 评论设置

```typescript
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.FormImpExp}
     onDitMount={onDitMount}
     menuId=""
/>
```

## 1.15 阶段推进器

```
<CorsComponent
     app='@weapp/ebdform'
     compName='AppBuilderFormCheck'
     appId={appid}
     terminal={TerminalEnum.backend}
     type={'custom'}
     customType={CustomTypeEnum.StageThruster }
     onDitMount={onDitMount}
     menuId=""
/>
```

# 二、运行界面调用

```typescript
export enum FormTabsType {
  Base = 'base', // 基础
  View = 'view', // 视图
  Auth = 'auth', // 权限
  Relation = 'relation', // 关联
  Button = 'button', // 按钮
  OpenApi = 'openApi', // 对外接口
  Like = 'like', // 点赞
  Follow = 'follow', // 关注
  Print = 'print', // 打印
  ImpExp = 'impExp', // 导入导出设置
  Encode = 'encode', // 编码
  Comment = 'comment' ,// 评论设置
  Distribute = 'distribute', // 外部分发
 // 阶段
  StageThruster = 'stageThruster'
}

export interface SpecialApplyContentProps extends Attributes {
  appId: string;
  // 非必填，外部需要指定表单设置传对应的eb表单id(objId/selectFormId),
  // 专项如果要受控formId(objId/selectFormId),最好结合 updateSelectFormData(type,{...selectFormData, objid, formid }) 传入真实的objid和真实的formid
  formId?: string;
  terminal: TerminalEnum;
  pageName: FormTabsType;
  isHideTop?: boolean; // 隐藏头部
  isHideSide?: boolean; // 隐藏侧边栏
  onAfterInit?: (instance: any) => void;
  otherParams?: {
    customViewMoreMenus?: (viewId: string, menus: MenuItemData[]) => MenuItemData[];
    customViewMoreClick?: (viewId: string, activeKey: any, menuData: DetailItem) => void;
    customRenderCardIcon?: (rowData: ListData) => ReactNode;
  };
  onAuthTypeChange?: (val: any, options: any) => void;
}

// 审批、消息提醒、权限设置按照后面的章节特殊对接
// 关联、编码、按钮、视图可用公共组件【SpecialApplyPages】对接，使用示例
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     formId={formId}
     isHideTop // 隐藏头部
     isHideSide // 隐藏侧边栏
     terminal={TerminalEnum.front}
     pageName={FormTabsType.Relation}
     onAfterInit={onAfterInit} // 获取到页面实例
/>
```

## 2.1 审批

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='WorkFlowFC'
     appid={appid} // 应用id
     groupId="-1"
     groups={[]}
     isOnlyWf // 只有流程 ,存在多级填报
     needAppIcon // 是否需要图标
     type="forwardType"
     terminal={TerminalEnum.backend}
/>
```

## 2.2 消息提醒

```typescriptreact
<CorsComponent
     app='@weapp/ebdform' 
     compName='MessageFC'
     appid={appid}
     terminal={TerminalEnum.backend}
 />
```

## 2.3 权限设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform' 
     compName='AppPermission'
     appId={appid}
     terminal={TerminalEnum.backend}
	 inDialog={false}
 />
```

## 2.4 关联设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}
     pageName={FormTabsType.Relation}
/>
```

## 2.5 编码设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.Encode}
/>
```

## 2.6 按钮设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.Button}
/>
```

## 2.7 视图设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.View}
     onAfterInit={this.onAfterInit} // 抛出实例
     otherParams={{
        customViewMoreMenus: this.customViewMoreMenus,
        customViewMoreClick: this.customViewMoreClick,
        customRenderCardIcon: (rowData: ListData) => ReactNode;
     }}
/>

// 如需单独使用视图右侧按钮dom
{this.state.instance?.renderHeaderExtra()}

onAfterInit = (instance） => {
  this.setState({instance: instance})
}

customViewMoreMenus = (viewId:string, menuData:any) => {
   // 支持对自定义视图右侧按钮增删操作
   const menus = [...menuData];
   menus.push({id:'custom', content:'自定义按钮', groupId: 'group1'}
   return menus;
}

customViewMoreClick = (viewId:string, activeKey: any, menuData: DetailItem) => {
  // 支持对自定义的右侧按钮动作回调
  if(activeKey === 'custom'){
    alert('自定义按钮')
  }
}

customRenderCardIcon = (rowData: any) => {
// rowData 当前视图数据
  return <>{dom}</>
}
```

## 2.8 导入导出

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.ImpExp}
/>
```

## 2.9 点赞设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.LikeButton}
/>
```

## 2.10 关注设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.FollowButton}
/>
```

## 2.11 外部分发

## 2.12 打印

## 2.13 表单设置

```typescriptreact
<CorsComponent
     app='@weapp/ebdform'
     compName='EbFormManage'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
/>
```

## 2.14 评论设置

```typescript
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.Comment}
/>
```

## 2.15 阶段推进器

```
<CorsComponent
     app='@weapp/ebdform'
     compName='SpecialApplyPages'
     appId={appid}
     terminal={TerminalEnum.backend}//区分专项前后台
     pageName={FormTabsType.StageThruster}
/>
```
