基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal

字典是所有MIS系统不可缺少的重要组成部分。为减少输入,标准化输入内容,使得数据更加准确地被输入。往往需要在数据库中配置各种各样的字典表。如下图:

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第1张图片

而绝大部分字典的字段简单,且高度一致。建议一个通用的字典表,并设计一个灵活度高的字典选择控件能大大提高效率。很多低代码开发平台提供了基础字典的通用方式,但灵活度上稍有欠缺,如:显示效果不好,不能管理级联(树状)字典信息……以JEECG所提供的字典管理为例,如下图所示:

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第2张图片

针对上面两个问题,进行一个方便管理,方便自定义的通用字典选择控件

(1)数据库表设计

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第3张图片

(2)具体效果

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第4张图片

(3)使用配置

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第5张图片

(4)效果展示

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第6张图片

目前共配置了4种方式,可通过对组件的修改,不断增加选择样式。获取值通过@getSelectedItem方法,获取的是对象,属性丰富。如下:

复选框获取值

单选框获取值

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第7张图片

下拉框获取值

基于JEECG制作一个通用的级联字典选择控件-DictCascadeUniversal_第8张图片

下拉树获取值

(5)代码下载

见有道云笔记(下面的代码端是图太多发不了文章凑字的,直接下载有道云笔记里的代码文件即可,欢迎交流)

有道云笔记

数据库表结构,放置于boot数据库

/*
 Navicat MySQL Data Transfer

 Source Server         : 116.62.233.186
 Source Server Type    : MySQL
 Source Server Version : 50737
 Source Host           : 116.62.233.186:3306
 Source Schema         : hanlin_boot

 Target Server Type    : MySQL
 Target Server Version : 50737
 File Encoding         : 65001

 Date: 23/07/2022 16:13:36
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for dict_cascade_universal
-- ----------------------------
DROP TABLE IF EXISTS `dict_cascade_universal`;
CREATE TABLE `dict_cascade_universal`  (
  `id` varchar(36) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `create_by` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '创建人',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建日期',
  `update_by` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '更新人',
  `update_time` datetime NULL DEFAULT NULL COMMENT '更新日期',
  `sys_org_code` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '所属部门',
  `pid` varchar(36) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '父级节点',
  `has_child` varchar(3) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '是否有子节点',
  `name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '名称',
  `show_order` int(11) NULL DEFAULT NULL COMMENT '显示顺序',
  `comment` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '备注',
  `del_flag` int(11) NULL DEFAULT 0 COMMENT '是否删除',
  `path` varchar(32) 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;

SET FOREIGN_KEY_CHECKS = 1;

组件文件:放置于前端component任意文件夹处





 调用示例:放置于views下任意文件夹后端



后端代码:根据jeecg,按需自动生成。或通过mybatisplus生成(略) 

你可能感兴趣的:(JAVA,VUE,vue.js)