# 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 |
## 例子1
----
```vue
<XReport :config-name="'test_tableConfig'" :activated-slot-name="'test_tableConfig_slot'"/>
```

## 支持的表单项目类型

| 类型              | 说明   | 输出格式    | 备注       |
|-----------------|------|-------|-----------|
| input | 文本输入框 | 字符串 | 标准文本输入     |
| datePicker| 日期选择器 | YYYY-MM-DD | 日期格式 |
| timePicker | 时间选择器 | YYYY-MM-DD HH:mm:ss | 日期时间格式 |
| curDateInput | 当前日期按钮 | YYYY-MM-DD HH:mm:ss | 点击获取当前时间|
| signature | 签名框 | 图片URL | 需要在手机端操作|
| images | 图片上传 | 图片数组 | 支持多图片上传|

## 配置例子

### 日期选择器配置
```json
{
  "type": "datePicker",
  "dataIndex": "selectedDate",
  "inputWidth": "100%",
  "inputReadOnly": false,
  "required": true,
  "requiredMessage": "请选择操作日期"
}
```

### 时间选择器配置
```json
{
  "type": "timePicker", 
  "dataIndex": "selectedDateTime",
  "inputWidth": "100%",
  "inputReadOnly": false,
  "required": true,
  "requiredMessage": "请选择具体时间"
}
```

### 必填字段配置说明

| 参数              | 说明   | 类型    | 默认值       |
|-----------------|------|-------|-----------|
| required | 是否必填 | Boolean | false |
| requiredMessage| 必填提示信息 | String | 根据字段类型自动生成 |

**默认提示信息：**
- datePicker: "请选择日期"
- timePicker: "请选择日期时间" 
- input: "请填写此字段"
- 其他类型: "此字段为必填项"

**必填校验特性：**
- 必填字段为空时会显示红色边框和错误提示
- 保存时会自动校验所有必填字段，校验失败会阻止保存并显示错误信息
- 导出数据时会进行校验提醒，但不会阻止导出

## 注意事项

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

> 新增的datePicker和timePicker支持在普通行、动态行中使用，
> 会自动格式化为指定的日期时间格式并保存到配置数据中。支持必填校验功能。
