1、bus_dict_type 字典类型表

2、bus_dict_item 字典属性表

3、bus_dict_style 字典样式表

使用场景

例1：

首先，这里我要对发布订阅进行字典关联，首先把属性录入字典。

先录入类型表bus_dict_type

再录入属性表bus_dict_item

他们通过custom_id和parent_id进行关联，通过display_key来进行属性绑定

这时候前端就可以通过接口指定参数customId = 100006来获取字典类型和字典列表，如果需要自定义样式还可以配置display_type来关联字典样式表

然后，我要对订阅统计进行字典关联，这时候发现发布订阅和订阅统计的字典属性一样。

那么我只录入类型表bus_dict_type

通过type指定到发布订阅的customId上

这时候前端就可以通过接口指定参数customId = 100007来获取字典类型和字典列表（字典列表可以选择是否获取）

例2：

首先，这里我要对进程统计进行字典关联，首先把属性录入字典。

先录入类型表bus_dict_type，这里display_type默认值

再录入属性表bus_dict_item

他们通过custom_id和parent_id进行关联，通过display_key来进行属性绑定，我在display_value中写了颜色属性。然后前端照例获取，参考例1。

然后，我在对订阅的按钮状态属性进行字典关联的时候发现

这里的按钮状态属性和进程统计时录入的属性一样，那么我就可以在录入的时候通过type指定获取它的属性列表

注意这里我用了display_type = 1，因为我这里是按钮，颜色是按钮的type决定的并不是color决定的，所以我要自定义样式，当然如果不是和进程统计共用属性字段就可以直接把按钮type的值写在display_value中获取即可。

录入样式表bus_dict_style

parent_id 和bus_dict_type表的custom_id关联 ，display_type和bus_dict_type表的display_type一样，display_key和bus_dict_item表的display_key一一对应

然后就可以通过指定接口customId = 100010 和 customId = 100011 来获取字典类型和字典列表，bus_dict_style表中的display_value会覆盖bus_dict_item表的display_value进行返回。

ps: 如果要用到样式表，那么bus_dict_type的display_type就要大于等于1，因为null和0用的是bus_dict_item的display_value，只有大于等于1才会去主动获取bus_dict_style表的属性并覆盖返回

后端接口

    @ApiOperation("根据customerId获取字典（包含类型、属性）")
    @GetMapping("findDictType")
    public Response<?> findDictType(@RequestParam Integer customerId) {
        BusDictTypeVo busDictTypeVo = busDictTypeService.getDictItemsWithCustomId(customerId);
        HashMap<Object, Object> resultMap = new HashMap<>(1);
        resultMap.put("dict", busDictTypeVo);
        return ResponseUtil.makeSuccess(resultMap);
    }


    @ApiOperation("根据customerId获取字典（包含类型、属性）")
    @PostMapping("findDictType")
    public Response<?> findDictType(@RequestBody BusDictTypeDto dto) {
        BusDictTypeVo busDictTypeVo = busDictTypeService.getDictItemsWithCustomId(dto.getCustomId());
        HashMap<Object, Object> resultMap = new HashMap<>(1);
        resultMap.put("dict", busDictTypeVo);
        return ResponseUtil.makeSuccess(resultMap);
    }

    @ApiOperation("根据customerId和type获取字典（包含类型、属性）")
    @PostMapping("findDictTypeByCustomerIdAndType")
    public Response<?> findDictTypeByCustomerIdAndType(@RequestBody BusDictTypeDto dto) {
        HashMap<Object, Object> resultMap = new HashMap<>(1);
        BusDictTypeVo busDictTypeVo = busDictTypeService.getDictTypeByCustomerIdAndType(dto.getCustomId(), dto.getType(), dto.getEnableBusDictItems());
        resultMap.put("dict", busDictTypeVo);
        return ResponseUtil.makeSuccess(resultMap);
    }

前端接口

import request from '@/utils/request'
import { isNotNull } from './validate'

export function findDictItems(data) {
  // 获取字典属性列表
  if (isNotNull(data.dict)) {
    return data.dict.busDictItems
  }
}

export function findDictItem(data, displayKey) {
  // 获取字典属性（用于获取任意字段）
  if (isNotNull(displayKey)) {
    displayKey = displayKey + ''
    if (isNotNull(data.dict) && isNotNull(data.dict.busDictItems)) {
      return data.dict.busDictItems.find(v => isNotNull(v) && v.displayKey === displayKey)
    }
  }
}

export function findDictItemDisplayValue(data, displayKey) {
  // 获取字典属性的显示值
  if (isNotNull(displayKey)) {
    displayKey = displayKey + ''
    if (isNotNull(data.dict) && isNotNull(data.dict.busDictItems)) {
      return data.dict.busDictItems.find(v => isNotNull(v) && v.displayKey === displayKey).displayValue
    }
  }
}

export function findDictTypeByLanguage(data) {
  // 国际化适配字典类型显示名（displayName）
  if (isNotNull(data.dict)) {
    if (this.$isEnLanguage()) {
      return isNotNull(data.dict.displayEnName) ? data.dict.displayEnName : data.dict.displayName
    } else {
      return data.dict.displayName
    }
  }
}
export function findDictItemByLanguage(data, displayKey) {
  // 国际化适配字典属性显示名（displayName）
  if (isNotNull(displayKey)) {
    displayKey = displayKey + ''
    if (isNotNull(data.dict) && isNotNull(data.dict.busDictItems)) {
      if (this.$isEnLanguage()) {
        const dictItem = data.dict.busDictItems.find(v => isNotNull(v) && v.displayKey === displayKey)
        return isNotNull(dictItem.displayEnName) ? dictItem.displayEnName : dictItem.displayName
      } else {
        return data.dict.busDictItems.find(v => isNotNull(v) && v.displayKey === displayKey).displayName
      }
    }
  }
}

// 根据参数 { customerId } 获取字典类型，里面包含字典属性列表，字典属性列表是以（parentId = customerId）来进行获取的
export function postBusDictType(params) {
  return request({
    url: '/api/zbomc/common/findDictType',
    method: 'post',
    data: params
  })
}

// 单独请求字典方法，参数 customerId
export function getBusDictType(customerId) {
  return request({
    url: '/api/zbomc/common/findDictType?customerId=' + customerId,
    method: 'get'
  })
}

// 根据参数 { customerId, type } 获取字典类型，里面包含字典属性列表，但是字典属性列表是以（parentId = type）来进行获取的
export function postDictTypeByCustomerIdAndType(params) {
  return request({
    url: '/api/zbomc/common/findDictTypeByCustomerIdAndType',
    method: 'post',
    data: params
  })
}

export function getDictList(customId) {
  const params = {
    customId: customId
  }
  return new Promise((resolve, reject) => {
    postBusDictType(params).then(res => {
      // 将得到的数据存储到Promise中
      resolve(res)
    }).catch(error => { reject(error) })
  })
}

// 根据参数 { customerId, type } 获取字典类型，里面包含字典属性列表，但是字典属性列表是以（parentId = type）来进行获取的
export function getDictListByCustomIdAndType(customId, enableBusDictItems) {
  const params = {
    customId: customId,
    // 如果不需要获取字典属性，可以不传这个参数
    enableBusDictItems: enableBusDictItems
  }
  return new Promise((resolve, reject) => {
    postDictTypeByCustomerIdAndType(params).then(res => {
      // 将得到的数据存储到Promise中
      resolve(res)
    }).catch(error => { reject(error) })
  })
}

在main.js中声明成全局方法

使用，先在初始化的时候获取到字典列表

页面使用（自动实现国际化）