如何描述清楚一個組件

如何能快速的瞭解組件

分爲四個部分功能說明、使用說明、組件關係、核心邏輯

如下:

  1. 功能說明
    支持對人員的單選或多選,返回一個人員列表數組;
    支持設置默認值、修改已選數據
  2. 使用說明
	@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>
  1. 組件關係組件關係圖
  2. 核心邏輯
    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
        } 
    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章