Make a general cascade dictionary selection control based on jeecg -dictcascadeuniversal

Dictionaries are all MIS An indispensable and important part of the system . To reduce input , Standardize input , Make the data input more accurately . It is often necessary to configure various dictionary tables in the database . Here's the picture ：

Most dictionaries have simple fields , And highly consistent . Suggest a general dictionary table , And designing a flexible dictionary selection control can greatly improve efficiency . Many low code development platforms provide a common way of basic dictionary , But there is a slight lack of flexibility , Such as ： The display effect is not good , Cannot manage cascades （ Trees ） Dictionary information …… With JEECG Take the dictionary management provided as an example , As shown in the figure below ：

In view of the above two problems , Carry out a convenient management , Easy to customize general dictionary selection control

（1） Database table design

（2） Specific effect

（3） Use configuration

（4） Effect display

At present, a total of 4 Ways of planting , You can modify the components , Increasing choice of styles . Get value through @getSelectedItem Method , What we get is the object , Rich properties . as follows ：

Check box get value

The radio box gets the value

Drop down box to get the value

Pull down the tree to get the value

（5） The code download

See Youdao cloud notes （ The following code side is too many pictures to make up words , Directly download the code file in Youdao cloud notes , Welcome to exchange ）

Youdao cloud notes

Database table structure , Placed in boot database

/*
 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 ' founder ',
  `create_time` datetime NULL DEFAULT NULL COMMENT ' Date of creation ',
  `update_by` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT ' Updated by ',
  `update_time` datetime NULL DEFAULT NULL COMMENT ' Updated date ',
  `sys_org_code` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT ' Department ',
  `pid` varchar(36) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT ' Parent node ',
  `has_child` varchar(3) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT ' Whether there are child nodes ',
  `name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT ' name ',
  `show_order` int(11) NULL DEFAULT NULL COMMENT ' According to the order ',
  `comment` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT ' remarks ',
  `del_flag` int(11) NULL DEFAULT 0 COMMENT ' Whether or not to delete ',
  `path` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT ' route ',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

Component files ： Placed on the front component Anywhere

<template>
  <div>
    <div v-if='controlType==" Pop up tree "'>
      hello, Trees 
    </div>
    <div v-else-if='controlType=="dropdown"'>
      <a-select @change="onChange" style="width: 220px" v-model='selectedItemId'>
        <a-select-option v-for='item in options' :value="item.key">
          {
   { item.title }}
        </a-select-option>
      </a-select>
<!--      {
   {selectedItems}}-->
    </div>
    <div v-else-if='controlType=="treeSelect_single"'>
      <a-tree-select
        v-model="selectedItemId"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
        :tree-data="options"
        :placeholder="placeholder"
        @change='onChange'
      >
      </a-tree-select>
<!--      {
   {selectedItems}}-->
    </div>
    <div v-else-if='controlType=="radiobox_group"'>
      <a-radio-group name="radioGroup" v-model='selectedItems' @change="onChange">
        <a-radio v-for="item in options" :value="item">
          {
   {item.title}}
        </a-radio>
      </a-radio-group>

<!--      {
   {selectedItems}}-->
    </div>
    <div v-else-if='controlType=="checkbox_group"'>
      <a-checkbox-group @change="onChange" v-model='selectedItems'>
        <a-checkbox v-for='item in options' :value="item">
          {
   {item.title}}
        </a-checkbox>
      </a-checkbox-group>
<!--      {
   {selectedItems}}-->
    </div>
    <div v-else>
       Please configure the control type 
    </div>
  </div>
</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'

export default {
  name: 'KingDictCascadeUniversal',
  props: {
    DictRootId: '',
    controlType: '',// Pop up tree 、 The drop-down menu 、 Drop down tree menu 、 Radio buttons 、 Check box 
    placeholder:''
  },
  data() {
    return {
      dictName: '',
      dictPath: '',
      dictId: '',
      options:[],
      selectedItems:[],
      selectedItemId:""
    }
  },
  methods: {
    getArrayItem(arr){
      let that = this
      arr.forEach(function(arrItem){
        if (arrItem.key === that.selectedItemId) {
          that.selectedItems = arrItem
          that.selectedItems.children=[]
          return
        }

        if (arrItem.children != null && arrItem.children.length > 0) {
          that.getArrayItem(arrItem.children)
        }
      })
    },
    onChange:function(){
      //region  Get object information  selectedItems
      let that = this
      switch(this.controlType){
        case "dropdown":
          let rsArr = this.options.filter(function(item){
            return item.key === that.selectedItemId
          })
          this.selectedItems = rsArr[0]
          break
        case "treeSelect_single":

          this.getArrayItem(this.options)
          break
      }
      //endregion

      this.$emit('getSelectedItems', this.selectedItems)
    },
    getTreeNodes(arr, pid, rootNode){
      debugger
      let that = this

      let parentNodes = arr.filter(function(item){
        return item.pid === pid
      })

      parentNodes.forEach(function(item) {
        let optionObj = new Object();
        optionObj.key = item.id
        optionObj.value = item.id
        optionObj.title = item.name
        optionObj.path = item.path

        if(rootNode == null){
          optionObj.children = []
          that.options.push(optionObj)
        }
        else{
          rootNode.children.push(optionObj)
        }
        that.getTreeNodes(arr, optionObj.key, optionObj)
      })
    }
  },
  created(){
    let that = this
    this.options = []
    let params = new Object()
    params.rootID = this.DictRootId

    getAction('/jeecg-system/kingsystem/dictCascadeUniversal/getAllNodesFromRoot', params).then(function(res) {
      if(that.DictRootId == "-1")
      {
        that.DictRootId = "0"
      }
      that.getTreeNodes(res, that.DictRootId, null)
    })
  }
}
</script>

<style scoped>

</style>

  Invoke the sample ： Placed in views Down any folder backend

<template>
  <div>
    <kingDictCascadeUniversal DictRootId='1550011878280650753' controlType='dropdown' @getSelectedItems='getSelectedValue'></kingDictCascadeUniversal>
    <br>

    <kingDictCascadeUniversal DictRootId='1550011878280650753' controlType='checkbox_group' @getSelectedItems='getSelectedValue'></kingDictCascadeUniversal>
    <br>
    <kingDictCascadeUniversal DictRootId='1550011911256268801' controlType='radiobox_group' @getSelectedItems='getSelectedValue'></kingDictCascadeUniversal>

    <br>
    <kingDictCascadeUniversal DictRootId='1550744481837195266' controlType='treeSelect_single' style='width:200px' placeholder=' Please select ' @getSelectedItems='getSelectedValue'></kingDictCascadeUniversal>

    {
   {selectedItems}}
  </div>
</template>
<script>
import kingDictCascadeUniversal from '@comp/kingsystem/KingDictCascadeUinversal/KingDictCascadeUniversal'
export default {
  components: {
    kingDictCascadeUniversal,
  },
  data(){
    return {
      selectedItems:{}
    }
  },
  methods:{
    getSelectedValue(rs){
      this.selectedItems = rs
    }
  }
};
</script>

Back end code ： according to jeecg, Automatically generate on demand . Or through mybatisplus Generate （ A little ）