如何能快速的瞭解組件
分爲四個部分功能說明、使用說明、組件關係、核心邏輯
如下:
- 功能說明
支持對人員的單選或多選,返回一個人員列表數組;
支持設置默認值、修改已選數據 - 使用說明
@param {String/Number} [title] 標題內容
@param {Boolean} [isSingle] 是否是單選
@param {Array} [afferentData] 傳入的已選數據
@param {Function} [peopelGroupBack] 回調函數
提供的外部調用的方法
this.$refs.personnelSelection.open() // 打開組件
this.$refs.personnelSelection.close() // 關閉組件
this.$refs.personnelSelection.editCachePickData(data) // 修改已選中的數據,data爲修改後的數據
eg:<personnelSelection
:isSingle="false"
:afferentData="afferentData"
title="加簽人"
ref="personnelSelection"
@peopelGroupBack="peopelGroupBack"></personnelSelection>
- 組件關係
- 核心邏輯
4.1 主體思路
4.1.1 personnelSelection中getDefaultData方法獲取當前人所在的部門人員信息,數據返回後加工處理賦值給peopleList,並把數據賦值給cacheDefaultData進行緩存,ulSelected獲得後進行展示
4.1.2 Dsearch進行搜索觸發personnelSelection中searchFun方法在全公司進行搜索,返回10條數據,數據返回後加工處理賦值給peopleList,ulSelected獲得後進行展示
4.1.3 點擊人員列表,觸發ulSelected中listFun方法,通過dataComparison方法進行數據比對,返回已選的人員數組pickData到personnelSelection
4.2 主要組件
ulSelected的主要功能是展示列表、返回已勾選的數據
4.2.1 父組件把人員列表data和已選的人員數據pickData傳遞到ulSelected組件中,在ulSelected組件中進行數據對比,當執行點擊操作後,進行數據對比,在把數據返回到父組件中
4.2.2 核心代碼ulSelected的參數和主要方法 @param {Boolean} [isSingle] 是否是單選類型 @param {Array} [data] 展示的人員數據 @param {Array} [pickData] 已選的人員數據 @param {Function} [peopelCallBack] 選中後的回調函數,參數是已選中的數據 /** * 點擊某條數據,觸發的數據操作,判斷是在選中列表中寫入還是刪除 * @param {Object} [item] 某條被點擊的數據 */ listFun(item) { let pickData = this.pickData.slice() let obj = this.dataComparison(item) if(obj.state){ pickData.splice(obj.index, 1) }else { if(this.isSingle){ pickData = [item] }else{ pickData.push(item) } } this.$emit('peopelCallBack', pickData) }, /** * 數據對比,對比當前數據是否在已選擇的數據列表中,返回一個對象,是否存在,存在角標號碼 * @param {Object} [item] 當前要對比的數據 */ dataComparison(item) { let returnData = {state:false} let pickData = this.pickData.slice() pickData.forEach((ele, index) => { if(ele.onlyId === item.onlyId){ returnData = { state:true, index: index } } }); return returnData }