数据字典组件

数据字典组件对el-select、el-checkbox-group、el-radio-group几种常规数据选择进行了封装，封装的目的是简化了对数据字典的操作只需要引用组件就可以了，不需要自己再重复的写一堆脚本。

1、使用方法

数据字典组件使用时需要先import引用，之后就可以直接使用 waf-data-dict ，传递相应的参数即可使用

<!-- 数据字典使用-->
<waf-data-dict parentCode="OptType" :compVal="formData.sourceId" ref="syncSysRef"/>

// script 示例代码
import WafDataDict from '@/components/DataDict'
data() {
    return {
        formData: {
            idArr: ['LOGIN', 'SSO'],
            sourceId: 'INSERT',
            compStyle: 'width:90%;margin-left: 0px;'
        }
    }
},
methods: {
 getDictVal() {
     // 获取选择的code
     console.info(this.$refs.syncSysRef.value)
 },
  getDictName(code) {
     // 获取选择的name
    const options = this.$refs.syncSysRef.options
    for (let i = 0; i < options.length; i++) {
      if (options[i].code === code) {
        console.info(code + ':' + options[i].name)
        return options[i].name
      }
    }
  }    
}

2、组件参数说明

分页组件由el-select、el-checkbox-group、el-radio-group重新封装，理论上原有的属性按官方文档一样来使用，这里只列举自定义的一些属性

参数	说明	类型	可选值	默认值
parentCode	数据字典分类编码	string	—	—
compVal	单选初始化值	string	—	—
compValArr	多选初始化值	array	—	—
compType	组件类型	string	select/checkbox/radio	select
compStyle	组件样式	string	—	—

3、示例访问

示例文件路径：src/views/demo/DataDictDemo.vue
本地访问地址： http://localhost:8080/#/demo/dict

4、使用限制

数据字典组件不支持el-select、el-checkbox-group、el-radio-group相关组件的事件触发，如需要进行复杂的事件处理，建议只用数据字典的数据服务，组件自行去写。

// 根据parentCode（字典分类编码）获取数据
import { getDatadictByPid } from '@/api/admin/sysDatadictionary'

methods: {
  getData() {
    getDatadictByPid(this.parentCode).then(res => {
      this.options = res.data
    })
  }
}

form规则rules验证，只支持自定义验证（因不能直接触发事件，不能用chang方式）

// 自定义验证代码片断
data() {
  var validateCode = (rule, value, callback) => {
    if (!this.$refs.systemCodeRef.value) {
      callback(new Error('系统名称不能为空'))
    } else {
      callback()
    }
  }
  return {
    rules: {
      code: [{ validator: validateCode, trigger: 'change' }]
    }
  }