ruoyi項目在低於3.7.0的版本中,前端字典功能實現比較簡單,每個index.vue頁面都請求dict的api,獲取數據再加工顯示即可。3.7.0之後的版本使用了混入,所以複雜了一些。 ...
此文章屬於ruoyi項目實戰系列
使用目的
- 什麼是字典數據:具體的值(0,1,"Y","N"),對應具體的業務邏輯("男","女","是","否")。
- 字典數據不應該只寫死在代碼中,還應存入資料庫,通過管理系統來增刪改查。
源碼分析
ruoyi項目在低於3.7.0的版本中,前端字典功能實現比較簡單,每個index.vue頁面都請求dict的api,獲取數據再加工顯示即可。3.7.0之後的版本使用了混入,所以複雜了一些。
分析
-
入口:查看全局入口文件
main.js
,DictData.install()
是字典功能的入口位置。function install() { Vue.use(DataDict, {//額外參數 metas: { '*': { labelField: 'dictLabel', valueField: 'dictValue', request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, }, }, }) }
install全局註冊了一個插件
DataDict
,同時傳入了額外參數{meta:xxx}
,目的是將DataDict插件對應的參數進行賦值。 -
DataDict插件:因為該插件本身是個function,所以Vue.use會直接將function視為
install()
方法執行。export default function (Vue, options) { mergeOptions(options) Vue.mixin({...}) }
首先執行
mergeOptions(options)
,目的是將傳入的額外參數與DictOptions合併。具體實現是通過遞歸調用mergeRecursive(source,target)
,將DictOptions的屬性覆蓋或者添加。其次註冊全局混入
Vue.mixin
,給所有 Vue 實例添加了data()
和created()
方法。Vue.mixin({ data(){ const dict = new Dict() dict.owner = this return {dict} }, created(){ .... this.dict.init(this.$options.dicts).then(()=>{...}) } })
data (): 每個 Vue 頁面創建一個 Dict。
created(): 調用Dict.init(dicts)方法,傳入每個vue頁面聲明的dicts數組(例如
dicts['sys_normal_disable']
)。(額外補充:init().then(....)里的方法個人認為是為了拓展性,因為我全局查找也沒有看到任何地方用到。) -
Dict. init () : 看註釋即可
init(options) { if (options instanceof Array) { //此處傳進來的是每個index.vue的dicts屬性,基本上是['dictName1','dictName2']之類的。 options = {types: options} } const opts = mergeRecursive(DEFAULT_DICT_OPTIONS, options)//options與DEFAULT合併,並且將合併結果賦值給opts if (opts.types === undefined) { throw new Error('need dict types') } const ps = [] this._dictMetas = opts.types.map(t => DictMeta.parse(t)) //調用parse,將數組中的字元串轉換為DictMeta對象返回。 this._dictMetas.forEach(dictMeta => { const type = dictMeta.type Vue.set(this.label, type, {})//dict.label添加屬性 dictName:{} Vue.set(this.type, type, [])//dict.type 添加屬性 dictName[] if (dictMeta.lazy) { return } ps.push(loadDict(this, dictMeta)) })loadDict:請求後端api,將數據組裝進dict return Promise.all(ps) }
簡單通過註釋解釋一下init里的一些調用函數源碼
-
DictMeta.parse
DictMeta.parse= function(options) { let opts = null if (typeof options === 'string') { opts = DictOptions.metas[options] || {} opts.type = options//opt{type:'字典名稱'} } else if (typeof options === 'object') { opts = options } //創建{type:'字典名稱"}並且賦值給DictOptions.meta屬性 opts = mergeRecursive(DictOptions.metas['*'], opts) //構造dictmeta原數據 return new DictMeta(opts) }
主要將vue頁面的dicts數組以及DictOption的meta數據在整合賦值到DictMeta對象,方便後續調用。
-
loadDict(dict,dictMeta)
function loadDict(dict, dictMeta) { return dictMeta.request(dictMeta)//請求後端api,獲取字典數據 .then(response => { const type = dictMeta.type let dicts = dictMeta.responseConverter(response, dictMeta)//將response轉換成DictData if (!(dicts instanceof Array)) { console.error('the return of responseConverter must be Array.<DictData>') dicts = [] } else if (dicts.filter(d => d instanceof DictData).length !== dicts.length) { console.error('the type of elements in dicts must be DictData') dicts = [] } //將response的數據插入到dict.type['dictName']的數組中 //splice實現了響應式改變數組元素,所以這裡不用vue.set dict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts) //將dicts(也就是dictData)賦值給dict.type[type] dicts.forEach(d => { Vue.set(dict.label[type], d.value, d.label) //dict.label{'dictName':{}}添加屬性d.value:d.label }) return dicts }) }
-
具體頁面應用
例如job/index.vue,<el-select v-model="queryParams.status" placeholder="請選擇任務狀態" clearable> <el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> export default{ dicts:['sys_job_group','sys_job_status'], //dict:{'sys_job_group':[data1,data2],'sys_job_status':[data1,data2]} 通過上文的代碼全局混入得到 }