帮助文档Appearance
简单四则运算
引用本地第三方类库HyyArithmetic.dll（为方便演示生成项目，类库默认存放于编辑器根目录的tools\Libs文件夹），分别编写后端文件Component.cs和前端文件index.vue，然后编译生成.hyyc文件（编辑器根目录tools\dist文件下的7f23094a-1e14-4409-983d-c68c91e3921c_1.0.0.hyyc）,将其拷贝到火语言根目录users\editor文件并重启火语言客户端，在可选组件面板的本地开发分组拖动简单四则运算组件到流程设计器。
后端代码
c#
using HuoYuYan.Component;
using HuoYuYan.Component.IComponents;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Collections;
using System.Net;
using System.Text;
using System.Text.RegularExpressions;
using System;
using HyyArithmetic;
namespace test
{
public class Component : BaseComponent<Object,double,ComponentConfig>
{
/// <summary>
/// 组件实现逻辑方法
/// </summary>
/// <param name="source">为上个组件的输出（或者FLOW值）</param>
/// <param name="result">当前组件的输出，在方法结束前一定要给result赋值</param>
/// <returns></returns>
protected override void ComponentRun(object source, out double result)
{
result = 0;
var a = this.ComponentConfig.numA.ToGetDouble(this);
var b = this.ComponentConfig.numB.ToGetDouble(this);
try
{
Arithmetic arithmetic = new Arithmetic();
switch (this.ComponentConfig.type)
{
case 1:
result = arithmetic.Add(a,b);
break;
case 2:
result = arithmetic.Subtract(a,b);
break;
case 3:
result = arithmetic.Multiply(a,b);
break;
case 4:
result = arithmetic.Divide(a,b);
break;
}
Logger.Info($"计算结果：{result}");
}
catch (Exception ex)
{
Info("运算异常：" + ex.Message);
}
}
}
/// <summary>
/// 组件配置Config，与前端data.config对象的属性名称一一对应
/// </summary>
public class ComponentConfig
{
/// <summary>
/// 数值A
/// </summary>
public InputType numA { get; set; } = new InputType();
/// <summary>
/// 数值B
/// </summary>
public InputType numB { get; set; } = new InputType();
/// <summary>
/// 运算类型：1加、2减、3乘、4除
/// </summary>
public int type { get; set; } = 1;
}
}
前端代码
vue
<template>
<section>
<el-form :model="config" label-position="top">
<el-form-item label="数值A">
<el-input v-model="config.numA.value" placeholder="填写数字类型字符" :render.sync="config.numA.type"></el-input>
</el-form-item>
<el-form-item label="数值B">
<el-input v-model="config.numB.value" placeholder="填写数字类型字符" :render.sync="config.numA.type"></el-input>
</el-form-item>
<el-form-item label="运算类型">
<el-radio-group v-model="config.type" size="mini">
<el-radio-button :label="1">加</el-radio-button>
<el-radio-button :label="2">减</el-radio-button>
<el-radio-button :label="3">乘</el-radio-button>
<el-radio-button :label="4">除</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</section>
</template>
<script>
import locales from './locales.yaml'
export default {
name: 'ArithmeticDemo',
__i18n: [JSON.stringify(locales)],
props: {
value: {
type: Object,
default () {
return {}
}
},
id: {
type: [String, Number],
default () {
return ''
}
}
},
mounted () {
if (Object.keys(this.value).length) {
this.config = this.value
}
},
data () {
return {
config: {
numA: { type: 'T', value: '' },
numB: { type: 'T', value: '' },
type: 1
}
}
},
methods: {},
watch: {
value (newValue) {
this.config = newValue
},
config: {
handler (newValue, oldValue) {
this.$emit('input', newValue)
},
deep: true
}
}
}
</script>
示例
加法、减法、乘法、除法计算
描述
计算11和22加减乘除结果。
配置
输出结果
