ctj-ui-next
搜索 K

Appearance

本页目录

前端表达式(可视化配置) ​

配合视图设置，可实现基本计算、校验、赋值、页面要素的动态联动效果。

说明

  • 常规四则运算,实时赋值、计算、跨模块汇总计算、赋值
  • 自定义 JavaScript 脚本支持
  • 页面元素动态联动规则设置

一、前端表达式说明 ​

1、常规计算及赋值 ​

普通的加减乘除四则运算

javascript
job_salary + level_salary + basic_salary
job_salary + level_salary + basic_salary

2、自定义函数 ​

为方便计算，前端自定义一些业务中经常使用的函数，表达式可以组合使用。

方法说明示例备注
toArray转数组toArray(a,b,c)
join(arr: [], separator = '/')字符串拼接 join(arr: [], separator = '/')join([a,b,c],'-')arr:数组类型，非数组可用 toArray 转换，separator:分隔符，默认'/'连接，可自定义
toFixed(num: any, p = 2)数值、金额精度处理toFixed(1234.567,2),结果：1234.56num:要格式化的数据，p:精度，默认 2 位
dateCalc时间间隔计算dateCalc(toArray(start_date,end_date))
type 为'date',或者不传（注意 date 要加上单引号）		使用 dateCalc 函数,时间区间计算，直接使用该函数，多个字段的需要加一个 toArray 函数，该函数会根据两个时间是否带时分去按日期计算还是按时间计算，按日期计算的话会在默认算出的结果加 1，比如 2024-05-31 到 2024-06-01 会算出来 2 天，type 为’date’或者不传，传了‘date’之后不管是否有时分秒，都按日期计算
min录入最小值min=10 // 最小值为 10
min=pay_money // 最小值为 pay_money		目前支持的都是在同一个表中
max录入最大值max=50 // 最小值为 50
或 max=pay_money // 最小值为 pay_money		目前支持的都是在同一个表中
multiSum跨表计算合计multiSum(MAIN_BILL_DTO[test_money],
BILL_LIST[last_month_amount+current_month_amount])

MAIN_BILL_DTO[test_money]

参数中以 MAIN_BILL_DTO 为对象名称，英文的[]内是需要计算的字段，可以是单个字段，也可以为简单的表达式（加减乘除）。
setDomVisible(doms,value)设置元素的显隐,doms 数数组,需要隐藏的元素 id,规则是 getattribute+''+field_code,value 是隐藏时的值
numberPositive(num)最小值为 0numberPositive(a+b-c)若计算结果小于 0，则返回 0

【tips:补充说明】手动触发跨表计算调用 create-form-view 组件的 toggleCalc 方法手动触发 跨表计算

javascript
createFormRef?.value?.toggleCalc(getAttribute)
createFormRef?.value?.toggleCalc(getAttribute)

3、自定义函数 ​

支持基本的 JavaScript 脚本，用于处理特殊情况 alt text

javascript
//record为当前行数据;formData为全部表单数据;dataSource为当前表格数据;
function doCalculate(record, formData, dataSource) {
  console.log('Hello, world!')
}
//record为当前行数据;formData为全部表单数据;dataSource为当前表格数据;
function doCalculate(record, formData, dataSource) {
  console.log('Hello, world!')
}

参数说明 ​

  • formData：全部表单数据对象
  • dataSource：当前表格数据对象
  • 注意事项：（1） （2）

二、应该场景示例 ​

一级列表视图 ​

注册事项

  • （1）一级列表只支持简单的公式设置，不支持联动规则。
  • （2）公式配置入口：【视图字段 》 个性化设置 》 计算表达式】

1、列表字段组合 ​

alt text

2、要素字段转译 ​

alt text

3、个性化数据显示设置 ​

示例：设置中间列，组合显示：申请人编码、姓名、自定义用途、申请金额 的组件显示。

js
join(toArray(manage_user_code,manage_user_name,'申请费用',approval_money),'-')
join(toArray(manage_user_code,manage_user_name,'申请费用',approval_money),'-')

二、单据详情中的表达式使用 ​

单据详情中支持公式和联动规则的综合使用

  • （1）配置入口：【视图管理 》 配置表达式】
  • （2）通用表达式接口：formula/queryFormulaInfo，返回对应视图的公式配置。
  • （3）通用联动规则接口：viewRuleRelation/queryByViewGroupId,返回视图对应的动态规则配置。

  • 1、直接赋值： ​

将[申请事由]值，默认赋值给[申请用途]，配置如下： 应用字段：设置[申请用途]，公式中直接设置取值来源为[申请事由]即可

应用字段公式=
申请用途申请事由

  • 2、计算赋值 ​

示例：限额= 标准(stard_money) X 人数（person_num）

应用字段公式=
限额stard_money * person_num

  • 3、多字段拼接赋值 ​

示例：设置[备注]字段默认值=[申请日期]-[申请事由]-[金额]三个字段组合，用'-'分隔

应用字段公式
备注join(toArray(input_date,remark,approval_money) , "-")

页面效果：

  • 4、multiSum：跨表合计与赋值 ​

multiSum内置函数，支持跨模块汇总计算，主要用于汇总计算多个区块的子表金额汇总，赋值给主单金额。 示例：基本信息[申请金额]=出差明细[金额]合计 + 补助信息[合计金额]汇总

应用字段公式
基本信息[申请金额]multiSum(BILL_DETAIL_LIST[far_money],TRAVEL_PAY_DETAIL[total_cost])

  • 5、自定义javascript脚本 ​

程序支持自定义javascript脚本，来补充个性化的项目需求支撑。

由于vue的响应式原则，通过操作数据，实现界面元素的动态更新

  • 参数说明： （1）formData：为全部表单数据 （2）dataSource：为当前表格数据

配置注意事项: (1) 关联字段设置：需要明确指定，哪些字段的变更会触发js脚本的执行。 原因：js脚本存储时作为json串存储，系统无法自动识别要响应的字段，需要手动指定触发字段，确保脚本正确执行。

  • 三、保存校验 ​

保存校验，可以使用javascrpit脚本，返回false：拦截，true时放行

校验级别：

  • 【提示】：只提示，不进行数据拦截，
  • 【禁止】：提示信息，并阻止数据的提交。

示例：校验师资费，税前金额不大于标准金额，否则禁止保存

预算单位软件产品开发部