如何描述清楚一个组件

Myth丶恋晨 2021-11-30 00:38 249阅读 0赞

#### 如何能快速的了解组件 ####

###### 分为四个部分功能说明、使用说明、组件关系、核心逻辑 ######

如下：

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.  组件关系![组件关系图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70]
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
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70]: /images/20211129/5bb0144d562a4b078ffbb878dffc6a34.png