# 模板字段关联管理使用说明

## 功能概述

模板字段关联管理页面提供了一个可视化的界面，用于维护模板与输入字段、输出字段的关联关系。通过这个页面，您可以：

1. 查看所有启用的模板
2. 查看所有输入字段和输出字段
3. 为每个模板选择关联的输入字段和输出字段
4. 保存关联关系到数据库

## 访问方式

启动Flask服务后，访问以下URL：

```
http://localhost:7500/template-field-manager
```

## 使用步骤

### 1. 选择模板

在页面顶部的下拉框中选择要管理的模板。选择后，页面会显示该模板当前关联的字段。

### 2. 查看字段

页面分为两个区域：
- **左侧**：输入字段列表（field_type=1）
- **右侧**：输出字段列表（field_type=2）

每个字段显示：
- 字段名称（中文）
- 字段编码（field_code）

### 3. 选择关联字段

- 点击字段项或复选框来勾选/取消勾选字段
- 已选中的字段会高亮显示（绿色背景）
- 可以使用搜索框快速查找字段

### 4. 查看统计信息

页面顶部显示当前选择的统计信息：
- 已选输入字段数量
- 已选输出字段数量
- 总字段数

### 5. 保存关联关系

点击"保存关联关系"按钮，系统会：
1. 删除该模板的所有现有关联关系
2. 创建新的关联关系（基于当前选择）
3. 显示保存结果

## 功能特性

### 搜索功能

- 在输入字段或输出字段区域，可以使用搜索框过滤字段
- 支持按字段名称或字段编码搜索
- 实时过滤，无需点击按钮

### 重置功能

- 点击"重置"按钮可以清空当前模板的所有选择
- 需要确认操作

### 数据验证

- 系统会自动验证模板和字段是否存在
- 保存时会检查数据完整性
- 错误信息会显示在页面顶部

## API接口

### 获取关联关系

**GET** `/api/template-field-relations`

返回所有模板、字段和关联关系数据。

**响应格式：**
```json
{
  "code": 0,
  "data": {
    "templates": [...],
    "input_fields": [...],
    "output_fields": [...],
    "relations": {
      "template_id": [field_id1, field_id2, ...]
    }
  },
  "isSuccess": true
}
```

### 保存关联关系

**POST** `/api/template-field-relations`

保存指定模板的字段关联关系。

**请求体：**
```json
{
  "template_id": 123,
  "input_field_ids": [1, 2, 3],
  "output_field_ids": [4, 5, 6]
}
```

**响应格式：**
```json
{
  "code": 0,
  "data": {
    "template_id": 123,
    "input_field_count": 3,
    "output_field_count": 3,
    "total_field_count": 6
  },
  "msg": "保存成功",
  "isSuccess": true
}
```

## 注意事项

1. **数据安全**：保存操作会删除该模板的所有现有关联关系，然后创建新的关联。请确保选择正确后再保存。

2. **字段状态**：只有状态为启用（state=1）的模板和字段才会显示在页面上。

3. **关联关系**：关联关系存储在 `f_polic_file_field` 表中，包含以下字段：
   - `file_id`：模板ID
   - `filed_id`：字段ID
   - `tenant_id`：租户ID
   - `state`：状态（1=启用）

4. **批量操作**：目前不支持批量操作多个模板，需要逐个模板进行管理。

## 故障排除

### 页面无法加载

- 检查Flask服务是否正常运行
- 检查端口号是否正确（默认7500）
- 查看浏览器控制台是否有错误信息

### 保存失败

- 检查网络连接
- 查看页面显示的错误信息
- 检查数据库连接是否正常
- 确认模板和字段ID是否有效

### 字段不显示

- 确认字段状态为启用（state=1）
- 检查字段类型是否正确（1=输入字段，2=输出字段）
- 刷新页面重新加载数据

## 技术实现

- **前端**：纯HTML + CSS + JavaScript（无依赖）
- **后端**：Flask + PyMySQL
- **数据库**：MySQL
- **表结构**：
  - `f_polic_file_config`：模板配置表
  - `f_polic_field`：字段定义表
  - `f_polic_file_field`：关联关系表