# 前端

## 1、主页面内容区域组件

组件

```
  <CorsComponent
          app="@weapp/ebdfpage"
          compName="EBViewsetPage"
          appId="" //必填  应用id
          objId=""  //必填  eb表单id
          //预留一个参数，表单没对接好之前可以前端自己demo开发,非必填
            pageParams={
                  pageId:""
                  compId:""
            }
/>

列表头部右侧区域事件
 eventEmitter.emit('weappEbdfpage', 'eblist.titleRight', {compId:"" })

判断条件：
数据集列表打开的组件config会多一个标识 config. ebListOtherParams =  { ViewsetPage: '1' }   用这个判断场景开关
```

## 2、新建-空白数据表

- 分组项属于数据表业务功能，使用方需外部传入；
- 弹框内不做接口保存，表单数据会在onsave方法中抛出；

```typescript
// 组件调用  
<CorsComponent
            weId={`${this.props.weId || ''}_r697rb`}
            app="@weapp/ebdform"
            compName="FormCreate"
            visible={visible}
            onSave={this.onSaveCreat}
            onCancel={this.onClose}
            hideField={['showName', 'isAdvance', 'description', 'tableType']}
            isCreate
            isPhysical
            needOuterSave
            customItemAndLayout={this.customItemAndLayout}
            onCustomRenderFormSwitch={this.onCustomRenderFormSwitch}
            getFormStore={this.getFormStore}
          />

// 保存回调
onSaveCreat = (params: any) => {
    console.log(params, '保存值');
  };

// 自定义增加分组项
customItemAndLayout = ({ items, layout }: any) => ({
    items: {
      ...items,
      demoGroup: {
        itemType: 'CUSTOM',
        value: [],
        multiple: false,
        readOnly: false,
      },
    },
    layout: [
      ...layout,
      [
        {
          id: 'demoGroup',
          label: '测试分组',
          items: ['demoGroup'],
          labelSpan: 7,
          hide: false,
          className: 'formCreateLayout-cls',
        },
      ],
    ],
  });

 onCustomRenderFormSwitch = (key: string, props: any) => {
    if (key === 'demoGroup') {
      console.log(props);
      return <div>占位</div>;
    }
  };

  getFormStore = (store: any) => {
    console.log(store, 'asdasdasd');
  };
```

## 3、新建-excel创建表

- 分组项属于数据表业务功能，使用方需外部传入；
- excel表单模块做内部保存，新建后的表单数据会在onsave方法中抛出；

```typescript
// 组件调用  
<CorsComponent
            weId={`${this.props.weId || ''}_r697rb`}
            app="@weapp/ebdform"
            compName="DatalistExcelCreatForm"
            visible={this.state.authVisible}
            onClose={this.onClose}
            onSave={this.onSaveCreat}
            customItems={{
              appId: {
                label: '所属分组',
                itemType: 'CUSTOM',
                customRender: () => <div>占位</div>,
              },
            }}
          />
```

## 4、视图新增、切换、配置组件

```typescript
// 组件调用  
<CorsComponent
              weId={`${this.props.weId || ''}_r697rb`}
              app="@weapp/ebdform"
              compName="ViewMenu"
              objId="1069267245686210560"
              objInfo={{//表单额外信息，是否是虚拟表、物理表等等
                formId: '1069267245686210560',
                isVForm: false,
                isVirtualForm: false,
                isPhysical: true,
              }}
              appId="787963620946870272"
              tagNumber={5}
              onAfterGetViewDatas={this.onAfterGetViewDatas}
              onAfterSelect={this.onAfterSelect}
            />

// 切换回调
onAfterSelect = (selected?: AnyObj | null) => {
    console.log(selected);
  };

// 获取视图数据回调
onAfterGetViewDatas = (views: AnyObj[]) => {
    console.log(views);
  };
```

## 5、左侧树-数据权限

```typescript

// 分组级别调用权限
<CorsComponent
            app="@weapp/ebdform"
            compName="AppPermission"
            weId={`${this.props.weId || ''}_1r8tqj`}
            appId="787963620946870272"
            customPageTypeOptions={(opts: any) => opts.filter((opt: any) => opt.id === 'form')}
            needBatchAuth={false}
            allowShowNodeTypes={['form']}
            visible={this.state.authVisible}
            onClose={this.onClose}
          />

// 仅表单调用权限
<CorsComponent
            app="@weapp/ebdform"
            compName="AppPermission"
            weId={`${this.props.weId || ''}_1r8tqj`}
            appId="787963620946870272"
            needBatchAuth={false}
            visible={this.state.authVisible}
            onClose={this.onClose}
            singlePermissionData={{
              name: '表单',
              title: '表单',
              isLeaf: true,
              // 表单id
              id: '1064489493870256129',
              type: 'form',
            }}
          />
```

## 6、左侧树-协作分享

```typescript
<CorsComponent
            weId={`${this.props.weId || ''}_hdvm8u`}
            app="@weapp/ebdform"
            compName="ShowAddress"
            visible={this.state.isShowAddress}
            onCancel={this.onClose}
            url="demo"
            className="xxxx-address"
            title={getLabel('0', '协作分享')}
            canOpenLink
          />
```

# 后端接口

---

## **1、获取数据表可编辑列表信息**

> BASIC

**Path:** /api/bs/ebuilder/form/obj/getEditableListByObj/{objId}

**Method:** GET

> REQUEST

**Path Params:**

| **name** | **value** | **desc** |
| --- | --- | --- |
| objId | Long | 表单id |

> RESPONSE **Body:**

| **name** | **type** | **desc** |
| --- | --- | --- |
| code | integer |  |
| msg | string |  |
| status | boolean |  |
| data | array |  |
| \|─ | object |  |
| \|─objId | integer | 表单id |
| \|─listId | integer | 表格id |
| \|─pageId | integer | 页面id |
| \|─compId | string | 组件id |
| \|─type | string | 可编辑数据表NList的多视图类型<br>main :主视图<br>slave :从视图 |

**Response Demo:**

```json
{
  "code": 200,
  "msg": "",
  "status": false,
  "data": [
    {
      "objId": 1068936326996656129,
      "listId": 1068936339856392206,
      "pageId": 1068936339856392206,
      "compId": "bf66d5e62f7040e795d0a69fd58085d5",
      "type": "main"
    }
  ]
}
```
