# 表单内通过按钮切换字段值
# 1.场景介绍
商机产生的订单,需要选择商机信息并绑定,依据产品最后交付给的客户是商机信息中的合作伙伴或最终用户,可以通过按钮切换订单的交付方为合作伙伴或最终用户。
本文以上述场景为例,讲解如何通过按钮切换交付方字段值为“合作伙伴”或“最终用户"的字段值。
# 2.效果展示
![](/eos/8.3LA1/assets/img/img-formValue-15.01cb5fd1.gif)
# 3.实现思路
1.添加一个按钮组件,给按钮组件添加表单计算属性,点击按钮时,按钮的文字可以来回切换“更换最终用户”和“更换合作伙伴”。
2.创建一个数组变量,并给商机字段所在组件添加属性值变化事件,当选择商机时,事件内给数组变量赋值该商机的最终用户和合作伙伴字段值。
3.给按钮组件添加点击时事件,点击时事件内把数组变量内的值根据按钮文字,赋值给交付方字段所在组件。
# 4.操作步骤
# 4.1创建数据实体
执行数据库示例脚本,以MySQL为例,示例代码如下:
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
DROP TABLE IF EXISTS `test_form_order`;
CREATE TABLE `test_form_order`
(
`ID` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键',
`code` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '订单编号',
`order_data` date NULL DEFAULT NULL COMMENT '订单日期',
`sale` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '所属销售',
`contract_amount` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '订单金额',
`project` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '项目名称',
`delivery` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '交付方',
`informationID` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商机ID',
PRIMARY KEY (`ID`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
DROP TABLE IF EXISTS `test_form_information`;
CREATE TABLE `test_form_information`
(
`ID` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键',
`Industry` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '行业信息',
`information` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商机简称',
`partners` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '合作伙伴',
`endUser` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '最终用户',
PRIMARY KEY (`ID`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
INSERT INTO `test_form_information` VALUES ('1', '金融', 'OA自动化软件商机', '合作金融软件公司', '最终银行用户');
INSERT INTO `test_form_information` VALUES ('2', '建材', '建材管理平台软件商机', '合作建设软件公司', '最终建材市场');
INSERT INTO `test_form_information` VALUES ('3', '互联网', '网页制作软件商机', '合作IT软件公司', '最终IT使用客户');
SET FOREIGN_KEY_CHECKS = 1;
在构建包内,新建订单数据实体。
![](/eos/8.3LA1/assets/img/img-formValue-01.52bafece.gif)
拖拽数据源内的”订单“和“商机”数据表至低开页面,生成持久化实体。
![](/eos/8.3LA1/assets/img/img-formValue-02.906f8245.gif)
关联”订单“与“商机”模型,选择n:1关系,并保存。
![](/eos/8.3LA1/assets/img/img-formValue-03.5cf3812f.gif)
# 4.2生成并调整表单和视图
右键点击“订单”数据实体,生成订单表单页面。
![](/eos/8.3LA1/assets/img/img-formValue-04.7e906d15.gif)
添加下拉框,绑定商机信息字段,显示字段为商机简称。
![](/eos/8.3LA1/assets/img/img-formValue-05.d6e39adc.gif)
修改交付方组件,默认值为商机信息表的最终用户,并保存。
![](/eos/8.3LA1/assets/img/img-formValue-06.5975d43b.gif)
# 4.3新增表单变量
回到表单页面,在右上角表单设置,高级设置中,添加两个表单内部变量。
![](/eos/8.3LA1/assets/img/img-formValue-07.1de6d2d1.gif)
第一个变量v_delivery为空。
![](/eos/8.3LA1/assets/img/img-formValue-08.f01f1f68.png)
第二个变量v_deliveryData为两位值的数组。
![](/eos/8.3LA1/assets/img/img-formValue-09.cf837df5.png)
# 4.4新增组件事件
给商机组件添加一个事件:属性值变化后。
![](/eos/8.3LA1/assets/img/img-formValue-10.478420e9.gif)
示例代码如下:
//当商机下拉选不为空时,给变量赋值
if(value!=null){
//选择字段值为商机表中的合作伙伴字段
let n1 = this.formData.testFormInformation.partners
//选择字段值为商机表中的最终用户字段
let n2 = this.formData.testFormInformation.endUser
this.v_deliveryData = [n1, n2]
//判断选择商机后的交付方默认为最终用户还是合作伙伴
if (this.formData.delivery == n1) {
this.v_delivery = true
}else {
this.v_delivery = false
}
}
# 4.5创建按钮
# 4.5.1新增表单计算属性
点击表单设置-高级设置,添加一个计算属性c_delivery。
![](/eos/8.3LA1/assets/img/img-formValue-11.80e30b21.png)
示例代码如下:
{
get() {
return this.v_delivery ? '更换为最终用户' : '更换为合作伙伴'
},
set(val) {}
}
# 4.5.2创建按钮组件
拖拽系统组件-布局组件里的按钮,至表单页面。
![](/eos/8.3LA1/assets/img/img-formValue-12.b9f3c262.png)
修改按钮文字为c_delivery的计算属性,保存。
![](/eos/8.3LA1/assets/img/img-formValue-13.bf623124.gif)
# 4.5.3新增按钮点击事件
点击按钮-高级-添加点击时事件,实现字段切换的功能。
![](/eos/8.3LA1/assets/img/img-formValue-14.23ec2d5c.gif)
示例代码如下:
//点击时变量v_delivery取反
this.v_delivery = !this.v_delivery
//给表单中的字段delivery赋值
this.formData.delivery = this.v_deliveryData[this.v_delivery ? 0 : 1]
保存后,进入视图,点击编辑,测试按钮功能。
![](/eos/8.3LA1/assets/img/img-formValue-15.01cb5fd1.gif)