# XReport

动态报表控件，根据JSON配置生成一个完整的报表


## 何时使用

当需要一个动态生成的报表时


引用方式：

```javascript
import XReport from '@vue2-client/base-client/components/XReport/XReport'

export default {
    components: {
      XReport
    }
}
```

## API

| 参数              | 说明   | 类型    | 默认值       |
|-----------------|------|-------|-----------|
| configName | 配置文件名 | String | 无（必填）     |
| activatedSlotName| 激活插槽名 | String | undefined |
| files | 文件列表 | Array | []        |
| authority | 权限控制 | String | user |
| localConfig | 本地配置 | Object | undefined |
| dontFormat | 禁止已经格式化后的配置格式化| Boolean | false|
| configData | 配置中的Data | Object | undefined |

**事件**

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| configEnd | 报表配置加载完成时触发（本报表配置就绪且所有 slot 子组件配置也结束） | - |
| listClick | 点击表格行时触发 | data: 行数据 |
| updateImg | 更新图片时触发 | data: 图片数据 |
| selectRow | 选择表格行时触发 | selectedRowKeys: 选中行键数组, selectedRows: 选中行数据数组 |
| cancel | 取消操作时触发 | - |

**对外方法（通过 ref 或 registerMap 获取实例后调用）**

| 方法 | 说明 |
|------|------|
| setData(data) | 仅当配置中存在 `dataProcessScript` 时执行该脚本并传入 data；**不修改组件自身任何数据**。无脚本时什么都不做。返回 Promise。 |
| registerComponent(componentName, component, options) | 将组件注册到 `$refs` 中方便调用；支持全局注册和挂载后执行逻辑。参数说明：<br>- `componentName`: 组件名称（必填）<br>- `component`: 组件实例（必填）<br>- `options.globalRegistryName`: 全局注册名称（可选）<br>- `options.mountedLogicName`: 组件挂载后执行的逻辑名称（可选）<br>- `options.mountedLogicMode`: 逻辑执行模式（可选）<br>- `options.mountedLogicParam`: 逻辑执行参数（可选） |
| runMountedLogic(component, options) | 运行组件挂载后的逻辑（通常由 registerComponent 自动调用）。参数说明：<br>- `component`: 组件实例<br>- `options.mountedLogicName`: 逻辑名称<br>- `options.mountedLogicMode`: 执行模式<br>- `options.mountedLogicParam`: 额外参数 |
| getComponentByName(componentName) | 根据名称从 `$refs` 中获取已注册的组件实例 |
| getConfigByName(configName) | 从服务端获取报表配置 |
| getGlobalData() | 获取报表的全局数据 |
| setGlobalData(obj) | 设置报表的全局数据 |
| findComponentByName(instance, componentName, maxDepth, findType) | 递归查找子组件 |
| getRootReport() | 获取根报表实例 |

### registerComponent 使用示例

```vue
<template>
  <XReport ref="reportRef" :config-name="'myReport'" @configEnd="onConfigEnd" />
</template>

<script>
export default {
  methods: {
    onConfigEnd() {
      // 在报表配置加载完成后，手动注册组件
      const report = this.$refs.reportRef
      // 方式1：仅注册到 $refs
      report.registerComponent('myComponent', this.$refs.myComponentRef)

      // 方式2：注册到 $refs 并执行挂载后逻辑
      report.registerComponent('myComponent2', this.$refs.myComponentRef2, {
        globalRegistryName: 'MyComponent2',  // 可选：全局注册
        mountedLogicName: 'initComponent',   // 可选：挂载后执行的逻辑名称
        mountedLogicMode: 'async',           // 可选：执行模式
        mountedLogicParam: {                // 可选：额外参数
          extraData: 'test'
        }
      })
    }
  }
}
</script>
```

**配置项（在 REPORT_GRID 的 JSON 配置中）**

| 字段 | 说明 |
|------|------|
| dataProcessScript | 可选。可执行函数字符串，签名为 `function(data) { ... }`。setData(data) 被调用时执行，传入 data；脚本内可自行处理数据（如写接口、改全局状态等）。`this` 为 XReport 实例。不写则 setData 调用无效。 |

## 例子1
----
```vue
<XReport :config-name="'test_tableConfig'" :activated-slot-name="'test_tableConfig_slot'"/>
```
## 注意事项

> 在某些情况下，比如手机端，只需要输入表格中一部分的内容。
> 可以将这部分内容作为插槽，并在activatedSlotName中填写插槽名。
> 则会在设计页面仅展示插槽中的输入项，并在预览窗口中，根据configName中的配置，
> 渲染出来完整的表格
