# XHDescriptions 患者信息描述组件

## 组件介绍

`XHDescriptions` 是一个基于 Ant Design Vue 的描述列表组件封装，专用于显示患者基本信息。该组件具有以下特点：

- 支持两种布局模式：响应式列数布局和自适应流式布局
- 支持折叠/展开功能，控制信息的显示量
- 支持自定义样式和头像
- 自动隐藏值为 null、undefined 的字段
- 右上角悬浮"详情/收起"按钮，布局更整洁

## 配置说明

组件通过 JSON 配置文件进行配置，主要包含以下部分：

### 1. 布局配置 (layout，可选)

```json
"layout": {
    "xl": 4,
    "md": 3,
    "sm": 2,
    "lg": 4,
    "xs": 1,
    "xxl": 5
}
```

- 可选配置，用于设置固定列数布局模式
- 当配置了 layout 时，使用 Ant Design 的 Descriptions 组件布局
- 键名对应不同的屏幕尺寸（xs, sm, md, lg, xl, xxl）
- 值为每行显示的列数
- 如果不配置 layout，则使用自适应流式布局

### 2. 样式配置 (style)

```json
"style": {
    "fontSize": "14px"
}
```

- `fontSize`: 控制文字大小

### 3. 字段配置 (items)

```json
"items": [
    {
        "field": "patientName",
        "label": "患者",
        "showAvatar": true,
        "avatar": {
            "size": 20,
            "background": "#5D5C5C",
            "icon": "user"
        }
    }
]
```

每个字段可配置的属性：

- `field`: 字段名，用于从数据源获取值
- `label`: 显示的标签名
- `showAvatar`: 是否显示头像
- `avatar`: 头像配置（仅当 showAvatar 为 true 时有效）
  - `size`: 头像大小
  - `background`: 头像背景色
  - `icon`: 头像图标名称

### 4. 详情按钮配置 (detailsConfig)

```json
"detailsConfig": {
    "buttonText": "详细",
    "buttonType": "link",
    "showAfterIndex": 6
}
```

- `buttonText`: 详情按钮显示的文本
- `buttonType`: 按钮类型，可选值为 "default", "primary", "dashed", "link" 等
- `showAfterIndex`: 控制在显示多少个字段后显示详情按钮

**重要说明**：
- 只有明确配置了 `detailsConfig` 对象时，才会启用折叠功能
- 如果没有配置 `detailsConfig`，将直接显示所有字段，不会出现详情按钮
- 如果配置了 `detailsConfig` 但字段总数少于或等于 `showAfterIndex`，则不会显示详情按钮

### 5. 其他配置

```json
"logicName": "patientBasicInfo",
"serverName": "af-his",
"parameter": {}
```

- `logicName`: 用于获取数据的逻辑名称
- `serverName`: 服务名称，默认为 "af-his"
- `parameter`: 可选的参数对象，会与组件的 parameter 属性合并后传递给后端

## 使用示例

```vue
<template>
  <XHDescriptions queryParamsName="patientBasicInfoConfig" />
</template>

<script>
import XHDescriptions from '@/base-client/components/his/XHDescriptions/XHDescriptions.vue'

export default {
  components: {
    XHDescriptions
  }
}
</script>
```

也可以传递参数：

```vue
<template>
  <XHDescriptions
    queryParamsName="patientBasicInfoConfig"
    :parameter="{ patientId: '123456' }"
  />
</template>
```

## 特殊说明

1. **布局模式**：
   - 配置了 `layout` 时：使用固定列数布局，每行显示指定数量的列
   - 未配置 `layout` 时：使用自适应流式布局，根据内容自动换行
   - 两种模式下详情按钮都固定在右上角

2. **折叠/展开功能**：
   - 折叠功能只在明确配置了 `detailsConfig` 对象时启用
   - 没有配置 `detailsConfig` 时，会直接显示所有字段
   - 详情按钮会悬浮在组件右上角，点击可展开/收起全部字段

3. **空值处理**：
   - 当字段值为 `null`、`undefined` 时，该字段不会显示
   - 折叠功能会忽略空值的字段，只有有值的隐藏字段才会触发显示详情按钮

## 配置示例

### 固定列数布局示例

```json
{
    "layout": {
        "xl": 4,
        "md": 3,
        "sm": 2,
        "lg": 4,
        "xs": 1,
        "xxl": 5
    },
    "style": {
        "fontSize": "14px"
    },
    "items": [
        {
            "field": "patientName",
            "label": "患者",
            "showAvatar": true,
            "avatar": {
                "size": 20,
                "background": "#5D5C5C",
                "icon": "user"
            }
        },
        {
            "field": "patientType",
            "label": "类别"
        },
        {
            "field": "diagnosisNo",
            "label": "诊号"
        }
        // ... 更多字段
    ],
    "detailsConfig": {
        "buttonText": "详细",
        "buttonType": "link",
        "showAfterIndex": 6
    },
    "logicName": "patientBasicInfoLogic",
    "serverName": "af-his"
}
```

### 自适应流式布局示例

```json
{
    "style": {
        "fontSize": "14px"
    },
    "items": [
        {
            "field": "patientName",
            "label": "患者"
        },
        {
            "field": "patientType",
            "label": "类别"
        }
    ],
    "logicName": "patientBasicInfoLogic",
    "serverName": "af-his"
}
```

### 分组表格模式示例

分组表格模式用于显示血液库存等带分类的数据，支持分类行和子数据行都由接口返回自动生成：

```json
{
    "layout": "group-table",
    "tableColumns": [
        { "label": "分类名称", "dataIndex": "label" },
        { "label": "数量", "dataIndex": "count" },
        { "label": "即将过期", "dataIndex": "expiring" }
    ],
    "style": {
        "fontSize": "16px"
    },
    "logicName": "bloodInventoryLogic",
    "serverName": "af-his",
    "parameter": {}
}
```

#### 单元格点击事件

分组表格模式支持配置列的点击事件，事件触发时会传递当前行的原始数据：

```json
{
    "layout": "group-table",
    "tableColumns": [
        { "label": "分类名称", "dataIndex": "label", "event": "onCellClick" },
        { "label": "数量", "dataIndex": "count" },
        { "label": "即将过期", "dataIndex": "expiring" }
    ]
}
```

**使用方式**：

```vue
<template>
  <XHDescriptions
    queryParamsName="bloodInventoryConfig"
    @on-cell-click="handleCellClick"
  />
</template>

<script>
export default {
  methods: {
    handleCellClick (rowData) {
      console.log('点击行数据:', rowData)
      // rowData 包含原始数据，如 { categoryField, categoryLabel, label, count, expiring }
    }
  }
}
</script>
```

**配置说明**：

- `event`: 事件名称，配置后会为该列添加可点击样式（蓝色加粗 + hover 效果）
- 事件触发时传递的参数为当前行的原始数据（`_rawData`）

渲染效果：

```
┌────────────────┬────────┬──────────┐
│ 分类名称       │ 数量   │ 即将过期  │
├────────────────┼────────┼──────────┤
│ 全血           │        │          │
├────────────────┼────────┼──────────┤
│ 悬浮红细胞     │ 2      │ 1        │
├────────────────┼────────┼──────────┤
│ 冰冻血浆       │ 1      │ 0        │
├────────────────┼────────┼──────────┤
│ 成分血         │        │          │
├────────────────┼────────┼──────────┤
│ 红细胞         │ 3      │ 1        │
└────────────────┴────────┴──────────┘
```

**配置说明**：

- `layout: "group-table"` 启用分组表格模式
- `tableColumns` 定义表头列，支持 `label`（显示文本）和 `dataIndex`（数据字段名）
- 配置中的 `items` 可选，用于定义静态的分类项顺序（当接口数据顺序不固定时）

**接口返回数据格式**：

```json
[
  { "categoryField": "whole_blood", "categoryLabel": "全血", "label": "悬浮红细胞", "count": 2, "expiring": 1 },
  { "categoryField": "whole_blood", "categoryLabel": "全血", "label": "冰冻血浆", "count": 1, "expiring": 0 },
  { "categoryField": "component_blood", "categoryLabel": "成分血", "label": "红细胞", "count": 3, "expiring": 1 },
  { "categoryField": "component_blood", "categoryLabel": "成分血", "label": "血小板", "count": 5, "expiring": 2 }
]
```

**字段说明**：

| 字段 | 说明 |
|------|------|
| `categoryField` | 分类标识，用于判断是否需要插入分类行 |
| `categoryLabel` | 分类显示名称 |
| `label` | 子项名称 |
| `count` | 数量 |
| `expiring` | 即将过期数量 |

**工作原理**：

1. 组件遍历接口返回的数组
2. 当当前项的 `categoryField` 与前一项不同时，自动插入分类行
3. 分类行显示 `categoryLabel`，并占据整行（跨所有列）
