表单内通过按钮切换字段值

1.场景介绍

商机产生的订单，需要选择商机信息并绑定，依据产品最后交付给的客户是商机信息中的合作伙伴或最终用户，可以通过按钮切换订单的交付方为合作伙伴或最终用户。

本文以上述场景为例，讲解如何通过按钮切换交付方字段值为“合作伙伴”或“最终用户"的字段值。

2.效果展示

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;

在构建包内，新建订单数据实体。

拖拽数据源内的”订单“和“商机”数据表至低开页面，生成持久化实体。

关联”订单“与“商机”模型，选择n:1关系，并保存。

4.2生成并调整表单和视图

右键点击“订单”数据实体，生成订单表单页面。

添加下拉框，绑定商机信息字段，显示字段为商机简称。

修改交付方组件，默认值为商机信息表的最终用户，并保存。

4.3新增表单变量

回到表单页面，在右上角表单设置，高级设置中，添加两个表单内部变量。

第一个变量v_delivery为空。

第二个变量v_deliveryData为两位值的数组。

4.4新增组件事件

给商机组件添加一个事件：属性值变化后。

示例代码如下：

//当商机下拉选不为空时，给变量赋值
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。

示例代码如下：

{
    get() {
        return this.v_delivery ? '更换为最终用户' : '更换为合作伙伴'
    },
    set(val) {}
}

4.5.2创建按钮组件

拖拽系统组件-布局组件里的按钮，至表单页面。

修改按钮文字为c_delivery的计算属性，保存。

4.5.3新增按钮点击事件

点击按钮-高级-添加点击时事件，实现字段切换的功能。

示例代码如下：

//点击时变量v_delivery取反
this.v_delivery = !this.v_delivery
//给表单中的字段delivery赋值
this.formData.delivery = this.v_deliveryData[this.v_delivery ? 0 : 1]

保存后，进入视图，点击编辑，测试按钮功能。