jeecgboot use the data dictionary

jeecgboot use the data dictionary

input page using the drop-down box

Showcase the

realization

1. Define the data dictionary
   
2. References and call JDictSelectTag components

import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
export default {
    ....
     components: {
       JDate,
       CustomerModal,
       JDictSelectTag
     },
     ...
}

<j-dict-select-tag :triggerChange="true" v-model="queryParam.type1Id" placeholder="请选择类型" dictCode="customer_type"/>

dictCode code is defined in the data dictionary.

list page displays data dictionary

Show the effect of
treatment before

post-processing

to achieve

1. Entity class annotate

@Dict(dicCode = "customer_type")
private String type1Id;

dicCode code is defined in the data dictionary.

1. Modify the table column definitions

{
  title:'类型',
   align:"center",
   dataIndex: 'type1Id_dictText',
 },

dataIndex value field name + "_ dictText"
modified can also view the data source vue.

list page displays related table

Show the effect of
treatment before

post-processing

to achieve

1. Entity class annotate

@Dict(dicCode = "id",dictTable = "sys_user",dicText = "realname")
private String managerId;

dicCode为关联表的组件
dictTable为关联表
dicText 为需要显示的内容

1. Modify the table column definitions

{
  title:'负责人',
   align:"center",
   dataIndex: 'managerId_dictText'
 },

Consistent dataIndex is the field name + "_ dictText" and the data dictionary.