公式计算组件

概述

FormulaInput 是一个公式计算组件，用于根据配置的公式自动计算结果，支持字段引用、聚合函数（SUM/AVG/MAX/MIN/COUNT）和日期差计算。

组件路径：web/apps/web-ele/src/components/zq-form/formula-input/

组件名称：FormulaInput

功能特性

• 自动根据公式计算结果
• 支持字段引用 {fieldName}
• 支持子表聚合函数：SUM{subTable.field}、AVG、MAX、MIN、COUNT
• 支持日期差计算：DATEDIFF{endField, startField, unit}
• 自动精度控制
• 显示公式提示

Props

属性	类型	默认值	说明
modelValue	number	-	计算结果值
formula	string	-	计算公式
formData	Record<string, any>	-	表单数据对象
precision	number	2	小数精度
disabled	boolean	true	是否禁用（始终只读）
placeholder	string	'自动计算'	占位符
showFormula	boolean	true	是否显示公式提示

公式语法

字段引用

{fieldName}

引用表单中的字段值。

聚合函数

SUM{subTableField.childField}   // 求和
AVG{subTableField.childField}   // 平均值
MAX{subTableField.childField}   // 最大值
MIN{subTableField.childField}   // 最小值
COUNT{subTableField.childField} // 计数

对子表中的字段进行聚合计算。

日期差计算

DATEDIFF{endField, startField, unit}

• endField：结束日期字段
• startField：开始日期字段
• unit：单位（days、hours、minutes），默认 days

Events

事件	参数	说明
update:modelValue	number	值更新
change	number	值变化

使用示例

简单计算

<template>
  <FormulaInput
    v-model="formData.total"
    formula="{price} * {quantity}"
    :form-data="formData"
  />
</template>

<script setup>
import { reactive } from 'vue';

const formData = reactive({
  price: 100,
  quantity: 5,
  total: 0,
});
</script>

子表求和

<template>
  <FormulaInput
    v-model="formData.totalAmount"
    formula="SUM{orderItems.amount}"
    :form-data="formData"
    :precision="2"
  />
</template>

<script setup>
import { reactive } from 'vue';

const formData = reactive({
  orderItems: [
    { name: '商品A', amount: 100 },
    { name: '商品B', amount: 200 },
  ],
  totalAmount: 0,
});
</script>

日期差计算

<template>
  <FormulaInput
    v-model="formData.duration"
    formula="DATEDIFF{end_date, start_date, days}"
    :form-data="formData"
    :precision="0"
  />
</template>

复合公式

<template>
  <FormulaInput
    v-model="formData.finalPrice"
    formula="SUM{items.price} * (1 - {discount} / 100)"
    :form-data="formData"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 formula-input 类型的表单项使用：

{
  "type": "formula-input",
  "field": "total_amount",
  "label": "合计金额",
  "props": {
    "formula": "SUM{order_items.amount}",
    "precision": 2,
    "showFormula": true
  }
}

典型应用场景

• 订单金额计算：商品数量 × 单价
• 子表汇总：明细表金额求和
• 工时计算：结束时间 - 开始时间
• 折扣计算：原价 × 折扣率