d2-crud-plus

# 数据字典

配置数据字典之后， type=【select/area-selector/cascader/tree-selector/radio/dict-switch/checkbox】 这些字段类型就可以通过数据字典获取label及其选项，无需自己写各种各样乱七八糟的options

# 字典配置复制

columns[
  { 
    dict:{}  
  }
]

字段下配置dict会在页面初始化后复制到search.component.props、form.component.props、component.props 下
如果需要search、form、component有不同的表现，直接配置对应位置的dict即可覆盖基本配置
更多信息请先阅读:核心逻辑

# 数据字典的配置

通常配置在column下,然后被分别赋值到component.dict和form.component.dict

export const crudOptions = {
  columns: [ //字段配置
    {
      dict:{
        // 这里配置远程获取字典数据的请求地址
        url:'remote/dict/url', 
        // 或者配置一个方法，动态构建url
        url: (dict,{form,component})=>{ 
          return 'newUrl'
        }, 
        data: [//[Array]，如果数据无需远程获取，可以直接将字典数组写在这里
           {
            value:1,
            label:'开启', 
            color:'primary', //颜色 【primary，success，danger，warning，info】
            disabled:false //是否禁用
            }
        ], 
        getData:(url,dict,{form,component})=>{ //配置此参数会覆盖全局的getRemoteDictFunc
          return request().then(ret=>{return ret.data})
        },
        cache:true, //默认开启缓存
        value: 'value', // 数据字典中value字段的属性名
        label: 'label', // 数据字典中label字段的属性名
        children: 'children', // 数据字典中children字段的属性名
        isTree: false, // 此数据字典是否是树形的，通常用于级联组件、地区选择组件等处
        clone: false, // 是否在获取到字典数据之后clone一份,clone之后不影响全局缓存，可以随意修改
        getNodes(values){return nodeArr}, //根据value数组，返回节点数据，用于懒加载时，行展示组件的label显示
        transfer:(data,options)=>{return data},// 可以修改获取到的远程数据，比如将字典的id字段转成字符串形式（缓存开启时只会执行一次）
        onReady(data, dict, context){
          //远程数据字典加载完成事件，每个引用该字典的组件都会触发一次
        }   
      }   
    }
]}

注意：dict会以url作为缓存key，使得该字典只会远程获取一次。

dict:{
    cache:false //可以禁用缓存
}

注意： getData() 会覆盖全局的getRemoteDictFunc

  • getData() ：如果配置相同的url，即便getData不一样，还是会获取到相同的字典数据，可以通过url单独清理缓存

# 页面中获取数据字典

this.getDictData(dict).then(data=>{
  this.dictData = data 
})

// 还可以传入列的key,根据该列的dict配置来获取字典数据
this.getDictData('columnKey').then(data=>{
  this.dictData = data 
})

// 返回map
this.getDictData('columnKey',{returnType:'dataMap'}).then(dataMap=>{
  this.dictDataMap = dataMap 
})

# 清除字典缓存

远程字典会以url作为key缓存在内存里面
某些情况下需要清空字典缓存，比如添加修改删除字典项的时候

import { d2CrudPlus } from 'd2-crud-plus'
d2CrudPlus.util.dict.clear() //清空所有字典缓存
d2CrudPlus.util.dict.clear(url) //清空单个字典缓存

# onReady事件监听

当dict获取到远程数据之后，会触发onReady事件

dict:{
  onReady: (data, dict,{form,component}) => {
      let value = vm.getEditForm().checkbox
      if (value == null) {
        value = []
      }
      radioOptionsChanged(vm, value)
  }
}

# 如何设置行展示组件【values-format】的颜色

方法1 获取的字典数据中，带上color即可，可选值【primary,success,danger,warning,info】 data:[{value:xx,label:xx,color:'success'}]

方法2 如果后台不方便返回color，可以给字段配置自动染色 columns:[{component:{props:{color:'auto'}}}]

方法3 或者手动设置

dict:{
 getData:(url,dict,{form,component})=>{ //配置此参数会覆盖全局的getRemoteDictFunc
          return request(url).then(ret=>{
                    //修改颜色值
                    return ret.data
           })
  }
}

# 动态修改字典数据

直接修改dict.data无法动态修改select的选项数据

方式1： 配置DictSelect组件的options(数据结构与dict.data一致)，options参数比dict.data具有更高优先级，并且可以动态修改

valueChange (key, value, form, { getColumn, mode, component, immediate, getComponent }) {
       getColumn('key').component.props.options=[{字典数据}]
 },

方式2： 参考选择联动http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/linkage

valueChange (key, value, form, { getColumn, mode, component, immediate, getComponent }) {
            form.city = undefined // 将“city”的值置空
            form.county = undefined// 将“county”的值置空
            if (value) {
              getComponent('city').reloadDict() // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
            }
          },

DictSelect、DictRadio、DictCheckbox组件ref暴露如下一些方法可以操作字典：

component.clearDict()  //清除字典
component.loadDict() //加载字典
component.setDictData(data) //修改字典数据
component.getDictData()

方式3：动态修改dict.url 也会触发字典重载

valueChange (key, value, form, { getColumn, mode, component, immediate, getComponent }) {
       getColumn('key').component.props.dict.url=dict.url?params=xxx //不同的参数获取不同的字典列表
 },

# 字典缓存仅页面级别生效

在页面的created方法中清空所有字典缓存即可

import { d2CrudPlus } from 'd2-crud-plus'
export const crudOptions= {
 pageOptions:{
    onInitAfter(){ //初始化完成后，清空所有字典缓存
        d2CrudPlus.util.dict.clear() 
    }
 }
}

← 多级数据 →