如何能快速的了解组件
分为四个部分功能说明、使用说明、组件关系、核心逻辑
如下:
- 功能说明
支持对人员的单选或多选,返回一个人员列表数组;
支持设置默认值、修改已选数据 - 使用说明
@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 }