# 模板元素显示条件说明文档

## 概述

在直接支付页面（`/payment/direct-payment`）中，模板元素的显示/隐藏受"合同总金额"和"本次支付金额"两个金额字段控制。本文档详细说明其作用机制。

## 核心函数

**函数位置**：`czemc-budget-execution-frontend/src/views/payment/CreatePayment.vue`

**核心函数**：`checkFieldDisplayConditions(element)` （第866-983行）

**使用位置**：模板中的动态字段渲染（第310行）

```vue
<el-form-item
  v-if="(element.type !== 'approval_flow' || !element.is_main_approval_process) && checkFieldDisplayConditions(element)"
  ...
>
```

## 金额字段的定义和取值逻辑

### 1. 本次支付金额（current_payment_amount）

**定义**：用户在表单中输入的"支付金额"字段值

**取值逻辑**：
```javascript
const currentPaymentAmount = formData.amount || 0
```

- **来源**：直接使用表单数据 `formData.amount`
- **说明**：始终为用户当前输入的支付金额，不存在时默认为 0

---

### 2. 合同总金额（contract_total_amount）

**定义**：用于条件判断的合同总金额值

**取值逻辑**：
```javascript
let contractTotalAmount
if (selectedCategory.value?.need_contract && selectedContract.value) {
  // 情况1：分类需要关联合同，且已选择合同
  contractTotalAmount = selectedContract.value.amount_total || 0
} else {
  // 情况2：分类不需要关联合同，或未选择合同
  contractTotalAmount = currentPaymentAmount  // 使用本次支付金额
}
```

**两种取值情况**：

#### 情况1：分类需要关联合同且已选择合同
- **取值来源**：`selectedContract.value.amount_total`
- **说明**：使用已选择合同的真实总金额
- **适用场景**：直接支付页面，分类配置了 `need_contract: true`，用户已选择合同

#### 情况2：分类不需要关联合同或未选择合同
- **取值来源**：`formData.amount`（本次支付金额）
- **说明**：将本次支付金额作为"合同总金额"用于条件判断
- **适用场景**：
  - 分类未配置需要关联合同（`need_contract: false`）
  - 分类需要关联合同，但用户尚未选择合同
  - 非直接支付场景

---

## 显示条件的判断逻辑

### 条件配置格式

每个模板元素（`element`）可以配置 `display_conditions` 数组，格式如下：

```javascript
{
  display_conditions: [
    {
      field: 'contract_total_amount' | 'current_payment_amount',  // 要判断的字段
      op: 'lt' | 'lte' | 'gt' | 'gte' | 'eq',                    // 操作符
      value: 10000                                                 // 比较值（数字）
    },
    // ... 可以有多个条件，所有条件必须同时满足（AND逻辑）
  ]
}
```

### 支持的操作符

| 操作符 | 含义 | 示例 | 说明 |
|--------|------|------|------|
| `lt` | 小于 | `{ field: 'current_payment_amount', op: 'lt', value: 10000 }` | 本次支付金额 < 10000 |
| `lte` | 小于等于 | `{ field: 'contract_total_amount', op: 'lte', value: 50000 }` | 合同总金额 ≤ 50000 |
| `gt` | 大于 | `{ field: 'current_payment_amount', op: 'gt', value: 5000 }` | 本次支付金额 > 5000 |
| `gte` | 大于等于 | `{ field: 'contract_total_amount', op: 'gte', value: 100000 }` | 合同总金额 ≥ 100000 |
| `eq` | 等于 | `{ field: 'current_payment_amount', op: 'eq', value: 8888 }` | 本次支付金额 = 8888 |

### 判断流程

1. **无显示条件**：如果元素没有 `display_conditions` 或为空数组，默认**显示**
2. **有显示条件**：遍历 `display_conditions` 数组，**所有条件必须同时满足**（AND逻辑）
3. **条件匹配**：
   - 根据 `condition.field` 确定要比较的值（`contract_total_amount` 或 `current_payment_amount`）
   - 根据 `condition.op` 执行比较操作
   - 将比较值与 `condition.value` 进行比较
4. **返回结果**：
   - 所有条件都满足 → **显示**字段
   - 任一条件不满足 → **隐藏**字段

---

## 实际应用示例

### 示例1：基于本次支付金额的条件

**场景**：当本次支付金额大于 50000 时，显示"大额支付说明"字段

**配置**：
```javascript
{
  id: 'field_001',
  name: '大额支付说明',
  display_conditions: [
    {
      field: 'current_payment_amount',
      op: 'gt',
      value: 50000
    }
  ]
}
```

**效果**：
- 用户输入 60000 → 显示该字段
- 用户输入 30000 → 隐藏该字段

---

### 示例2：基于合同总金额的条件（已选择合同）

**场景**：当合同总金额小于等于 100000 时，显示"小额合同附件"字段

**前提条件**：
- 分类配置了 `need_contract: true`
- 用户已选择合同，合同总金额为 80000

**配置**：
```javascript
{
  id: 'field_002',
  name: '小额合同附件',
  display_conditions: [
    {
      field: 'contract_total_amount',
      op: 'lte',
      value: 100000
    }
  ]
}
```

**效果**：
- 合同总金额 = 80000（使用 `selectedContract.amount_total`）
- 80000 ≤ 100000 → **显示**该字段

---

### 示例3：基于合同总金额的条件（未选择合同）

**场景**：当合同总金额大于 200000 时，显示"大额合同审批"字段

**前提条件**：
- 分类配置了 `need_contract: true`
- 用户**尚未**选择合同

**配置**：
```javascript
{
  id: 'field_003',
  name: '大额合同审批',
  display_conditions: [
    {
      field: 'contract_total_amount',
      op: 'gt',
      value: 200000
    }
  ]
}
```

**效果**：
- 由于未选择合同，`contract_total_amount` = `formData.amount`（本次支付金额）
- 如果用户输入 250000 → 250000 > 200000 → **显示**该字段
- 如果用户输入 150000 → 150000 ≤ 200000 → **隐藏**该字段

---

### 示例4：多条件组合（AND逻辑）

**场景**：当本次支付金额大于 10000 **且**合同总金额小于等于 500000 时，显示"中等金额说明"字段

**配置**：
```javascript
{
  id: 'field_004',
  name: '中等金额说明',
  display_conditions: [
    {
      field: 'current_payment_amount',
      op: 'gt',
      value: 10000
    },
    {
      field: 'contract_total_amount',
      op: 'lte',
      value: 500000
    }
  ]
}
```

**效果**：
- 本次支付金额 = 20000，合同总金额 = 400000 → 两个条件都满足 → **显示**
- 本次支付金额 = 5000，合同总金额 = 400000 → 第一个条件不满足 → **隐藏**
- 本次支付金额 = 20000，合同总金额 = 600000 → 第二个条件不满足 → **隐藏**

---

## 实时响应机制

当金额字段或合同选择发生变化时，会触发字段显示/隐藏的重新计算：

**监听逻辑**（第2071-2095行）：
```javascript
watch(
  () => [formData.amount, selectedContract.value],
  () => {
    // 当金额字段或合同选择变化时，清除隐藏字段的验证错误
    if (formRef.value && templateElements.value) {
      nextTick(() => {
        templateElements.value.forEach(element => {
          if (!checkFieldDisplayConditions(element)) {
            // 字段不满足显示条件，清除验证错误
            formRef.value?.clearValidate(`fields.${element.id}`)
          }
        })
      })
    }
  },
  { deep: true }
)
```

**触发时机**：
- 用户修改"支付金额"时
- 用户选择/清除合同时
- 合同信息变化时（通过 `deep: true` 深度监听）

**响应效果**：
- 隐藏不满足条件的字段，并清除其验证错误
- 显示满足条件的字段

---

## 关键代码位置汇总

| 功能 | 文件位置 | 行号范围 |
|------|---------|----------|
| 显示条件判断核心函数 | `CreatePayment.vue` | 866-983 |
| 模板中使用显示条件 | `CreatePayment.vue` | 310 |
| 金额变化监听 | `CreatePayment.vue` | 2071-2095 |
| 表单验证规则生成（考虑显示条件） | `CreatePayment.vue` | 986-1024 |

---

## 注意事项

1. **合同总金额的取值逻辑**：
   - 如果分类需要关联合同但用户未选择合同，`contract_total_amount` 会回退为本次支付金额
   - 这可能导致某些基于合同总金额的条件判断不够准确，建议在配置条件时考虑这种情况

2. **条件判断的默认行为**：
   - 无效条件、未知字段、无效数值等情况，函数会返回 `true`（默认显示）
   - 这保证了向后兼容性，但可能在某些异常情况下导致字段意外显示

3. **验证规则的同步**：
   - 表单验证规则只在字段满足显示条件时才添加（第998行）
   - 当字段被隐藏时，会自动清除其验证错误，避免用户看到隐藏字段的错误提示

4. **性能考虑**：
   - `checkFieldDisplayConditions` 函数在每次字段渲染时都会被调用
   - 函数中包含大量 `console.log`，生产环境建议移除以提高性能

---

## 总结

- **本次支付金额（current_payment_amount）**：始终为用户输入的支付金额，用于判断当前支付规模
- **合同总金额（contract_total_amount）**：
  - 优先使用已选择合同的真实总金额（如果分类需要关联合同且已选择）
  - 否则回退为本次支付金额
  - 用于判断合同规模
- **显示逻辑**：所有条件必须同时满足（AND逻辑），条件不满足时字段自动隐藏并清除验证错误