下拉框联动选择

1.场景介绍

在订单表单内，下拉选择不同的供应商，物料的下拉框内有不同的物料数据。

根据以上场景，本文讲解如何使两个下拉框数据联动。

2.效果展示

3.实现思路

给物料的下拉选择组件设置过滤条件：物料实体的supplierId<等于>供应商实体的id（即物料实体与供应商实体的关联字段相等）。

4.操作步骤

4.1创建数据实体

初始化数据库，以MySQL为例，示例脚本如下：

DROP TABLE IF EXISTS `order_info`;
CREATE TABLE `order_info`  (
  `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 '订单编号',
  `date` date NULL DEFAULT NULL COMMENT '订单日期',
  `material` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料',
  `supplier` 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;
DROP TABLE IF EXISTS `supplier_info`;
CREATE TABLE `supplier_info`  (
                                  `id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
                                  `supplier_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '供应商编码',
                                  `supplier_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '供应商名称',
                                  `usci` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '统一社会信用代码',
                                  `status` 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 `supplier_info` VALUES ('1', '000000001', '上海五金厂', 'USC000001', '有效');
INSERT INTO `supplier_info` VALUES ('2', '000000002', '上海玩具厂', 'USC000002', '有效');
DROP TABLE IF EXISTS `material_info`;
CREATE TABLE `material_info`  (
                                  `ID` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键',
                                  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料名称',
                                  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料类型',
                                  `space` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '规格',
                                  `prices` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '价格',
                                  `supplier_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
                                  PRIMARY KEY (`ID`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
INSERT INTO `material_info` VALUES ('1', '螺丝', '正常物料', '个', '9.9', '1');
INSERT INTO `material_info` VALUES ('2', '螺丝帽', '正常物料', '个', '9.9', '1');
INSERT INTO `material_info` VALUES ('3', '铁丝', '保密物料', '捆', '199', '1');
INSERT INTO `material_info` VALUES ('4', '玩具飞机', '正常物料', '架', '299', '2');
INSERT INTO `material_info` VALUES ('5', '玩具汽车', '保密物料', '辆', '199', '2');

拖拽数据表创建数据实体，并添加关联关系。

4.2生成表单并设置下拉组件

右键订单实体，点击生成页面，生成订单表单。

修改供应商下拉组件的标题。

修改物料组件为下拉组件并设置绑定实体、值字段和过滤条件。

最终效果：