address-book-shell

基于vue2和element-ui开发的地址本组件

目录

[TOC]

Install

NPM

npm install address-book-shell --save

Yarn

yarn add address-book-shell

或 yarn add address-book-shell

组件注册

import microserviceRequest from '@/utils/microService/microService-request.js'
import AddressBookShell from 'address-book-shell'
import 'address-book-shell/src/theme/element-ui-theme/element-ui-common.scss'
Vue.use(AddressBookShell, {
  microserviceRequest: microserviceRequest,
})

上面的microserviceRequest是封装好的微服务请求方法,出于安全考虑,此方法不放在公网,因此需要业务方自行传入,否则无法使用本组件; 至此,地址本注册就完成了

组件使用

需要使用地址本的项目要接入cas单点登录，然后注册地址本即可使用。

    <address-book-shell
      :visible.sync="addredssListVisible"
      :selected="selected"
      :close-on-click-modal="false"
      @submitted="submitAddredss"
      @colse="closeAddress"
      :loginUserinfo="loginUserinfo"
      :append-to-body="true"
    />

组件属性

注意:地址本组件继承了element-ui库Dialog组件的全部属性，即Dialog属性全部适用本组件。

selected

地址本需要默认勾选人员,可以通过selected将需要勾选的数据传入地址本;
数据格式如下:

selected: [
       {
         avatar:'xxx',  // 头像地址
         aduser: 'xxxxx', // OA
         hrId: 'xxxxxxxxx', // 例如 100001111
         name: 'xxx', // 中文名称
         fdOrgType: '8', // 数据类型 '2': 部门 ; '4':岗位 ; '8': 人员
       },
       {
         avatar: 'xxxx',
         hrId: 'xxxx',
         aduser: 'xxxx',
         name: 'xxxx',
         fdOrgType: '8',
       },
       {
         avatar: 'xxxxxxxxxxxxx',
         hrId: 'xxx',
         aduser: '',
         name: 'xxxxxxxx',
         fdOrgType: '4',
         detailedPerson: 'xxxxxxxxxxxx', //非必须,用于鼠标经过岗位或部门时提示人员详情
       },
     ],

 <address-book-shell
   :selected="selected"
 />

以上列出的属性为必须属性，如添加了其他非必须属性，点击确定时也会原封不动暴露出去。

selectDisabled

selected传入的默认选中状态是可以在地址本中取消选中的，如果不希望操作默认选中的数据，可配置selectDisabled属性，将默认传入的数据状态禁止操作。

<address-book-shell
  selectDisabled
/>

onlyOriginalData

默认为false，此时地址本点确定按钮会调用接口,将岗位和部门转化为人员数据,并通过submitted方法返回给业务方。如果仅需要原始的勾选数据,则可以配置needPeopleData属性,直接返回数据避免调用接口，可以减少地址的本反应时间。

注意,如果没有配置该属性,且勾选的只有人员数据,点击地址本确定按钮时也不会调用接口而是直接将人员数据直接返回。

<address-book-shell
  onlyOriginalData
/>

typeList

地址本模糊搜索权限默认是根据用户身份自动配置的，但如果想自定义模糊搜索权限，则可以通过传入typeList来控制。 例如仅开启人员权限

typeList: ['人员'] 
<address-book-shell
  :typeList='typeList'
/>

onlyMailList

地址本默认会根据身份自动加载对应模块,内部员默认加载通讯录和合作方好友模块,如果内部员工只想加载通讯录模块,可以设置onlyMailList属性快速设置

<address-book-shell
  onlyMailList
/>

tabs

与onlyMailList一样都是用来控制地址本加载模块的。如果想自定义加载的模块,可手动配置tabs参数来实现。
例如：

tabs: ['通讯录', '合作方好友'] 
<address-book-shell
  :tabs='tabs'
/>

radio

地址本是否开启单选模式

<address-book-shell
 radio
/>

注意：如果开启了单选模式，selected传入的数据又不止一个的话，地址本只会获取第一项数据，其他数据将被抛弃。

title

地址本组件的标题，默认为'地址本'。

<address-book-shell
 title='测试地址本'
/>

width

地址本弹层的宽度，默认为'800px'

 <address-book-shell
   width='800px'
 />

customClass

自定义地址本的class类名，默认为address-modal,设置自定义类型即可定制一些样式。

 <address-book-shell
   customClass='demo-address'
 />

noAddRecent

是否不需要添加最近联系人,设置改属性之后点击确定按钮不会将已选人写入最近联系人

 <address-book-shell
   noAddRecent
 />

hiddenRecently

隐藏最近联系人模块,设置改属性之后,地址本上将不在显示地址本模块

 <address-book-shell
   hiddenRecently
 />

footButton

自定义左下角功能按钮,目前可以控制两个按钮,查看当前名单和收藏当前名单(未开发完成),其中查看当前名单会动态显影,即只有选择了部门或岗位才回显,仅选择了人员该按钮不会显示.

 <address-book-shell
   :footButton="['check']"
 />

top

自定义地址本组件margin-top值,默认为'7vh'

 <address-book-shell
   top='7vh'
 />

robotsList

机器人数据,不传或传[],不会显示机器人模块

robotsList: [
  {
    add_im_group: 1,
    bottom_title: "去咨询",
    chat_desc: "",
    chat_tips: "",
    ctime: "20230608102803",
    hr_id: "R00001",
    jump_url: "xxx",
    login_name: "iwenida",
    status: 1,
    user_desc:'智能知识助手，随时解答您的业务问题', 
    user_detail: "xxx",
    user_id: "",
    user_image: "xxx"
    user_name: "爱问i答"
  }
] 
<address-book-shell
  :robotsList='robotsList'
/>

loginUserinfo

cas单点登录会回来的用户信息,毕传,否则地址本将无法正常使用.

loginUserinfo: {
  dept: "公司领导",
  deptId: "D1",
  email: "xxxx",
  headImage: "xxxx",
  hrId: "xxxx",
  loginName: "xxxx",
  phone: "12345678999",
  post: "副总裁",
  telNo: "0724-5678999",
  type: 1,
  userName: "xx",
} 
<address-book-shell
  :loginUserinfo='loginUserinfo'
/>

searchStatus

控制模糊搜索的权限,'1'：搜索全部; '2'：仅内部; '3'：仅合作方。如果没有手动配置,地址本会根据使用场景自动分配权限：长江e家默认'1',web默认'2'

<address-book-shell
  searchStatus='1'
/>

defaultActiveMenu

自定义初始化时菜单默认选中项,值为部门id,即deptId。(例如: 'C1','D794')

<address-book-shell
  defaultActiveMenu='C1'
/>

属性总览

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :--- | :--- | :--- | :---: |:---: | | selected | 地址本初始化默认选中的人员数据 | Array | - | [] | | selectDisabled | 是否将selected传入的人员置灰不能再选 | Boolean | - | false | | onlyOriginalData | 是否只需要原始勾选的数据(设置为true将勾选的数据直接返回;设置为false则会在submitted回调中返回 【仅人员数据,仅结构数据,勾选的原始数据】三个参数) | Boolean | - | false | | typeList | 用来控制模糊搜索下拉选项内容 | Array | [ '全部','部门' ,'岗位' ,'人员'] | ['全部','部门','岗位','人员'] | | onlyMailList | 是否只展示通讯录模块 | Boolean | - | false | | tabs | 自定义tabs的内容,如果不传或传空数组,将根据身份动态显示合适的模块 | Array | ['通讯录','合作方好友] | [] | | radio | 地址本是否只能单选 | Boolean | - | false | | title | 地址本标题 | String | - | 地址本 | | width | 地址本宽度 | String | - | 800px | | customClass | 地址本自定义类名 | String | - | address-modal | | noAddRecent | 是否不需要添加最近联系人 | Boolean | - | false | | hiddenRecently | 是否隐藏最近联系人模块 | Boolean | - | false | | footButton | 自定义功能按钮(check:查看当前名单;collect: 收藏当前名单) | Array | ['check','collect'] | ['check'] | | top | 地址本 CSS 中的 margin-topz值 | string | - | 7vh | | robotsList | 机器人数据,不传或传[],不会显示机器人模块 | Array | - | [] | | loginUserinfo | cas登录返回的用户信息(必传) | Object | - | {} | | searchStatus | 搜索框权限控制 | String | '1':搜索全部;'2':仅内部;'3':仅合作方 | 长江e家默认'1',web默认'2' | | defaultActiveMenu | 菜单默认选中项 | String | - | |

组件事件

注意:地址本组件继承了element-ui库Dialog组件的全部事件，即Dialog事件全部适用本组件。

submitted

点击地址本确定按钮的回调事件,将根据是否配置onlyOriginalData属性返回不同的值

 <address-book-shell
    @submitted='submitted'
  />
  
    submitted(person_data,type_list,data){
    console.log(person_data,'人员数据,包含了部门和岗位中的人员')
    console.log(type_list,'已选的结构数据,仅包含已选了部门和岗位,不包含人员数据')
    console.log(data,'默认勾选的所有数据数据,包含勾选的人员、部门和岗位')
  }

 <address-book-shell
    onlyOriginalData
    @submitted='submitted'
  />

  submitted(data){
    console.log('默认勾选的所有数据数据,包含勾选的人员、部门和岗位')
  }

add

地址本勾选时触发,返回两个参数,类型全部为数组,第一个参数为新勾选的数据;第二参数为勾选的全部数据

 <address-book-shell
    @add='add'
  />
  add(data,selectList) {
    console.log('新勾选的数据',data)
    console.log('勾选的全部数据',selectList)
  }

remove

地址本取消勾选时触发,返回两个参数,类型全部为数组,第一个参数为取消勾选的数据;第二参数为勾选的全部数据

 <address-book-shell
    @remove='remove'
  />
  remove(data,selectList) {
    console.log('取消勾选的数据',data)
    console.log('勾选的全部数据',selectList)
  }

事件总览

组件自定义事件: | 事件名称 | 说明 | 回调参数 | | :--- | :--- | :-- | | submitted | 点击确实按钮的回调 | [全部人员数据],[仅结构数据],[原始勾选数据] 或 [原始勾选数据]| | add | 新增勾选的回调 | [新增勾选数据],[勾选的全部数据] | | remove | 取消勾选的回调 | [取消勾选数据],[勾选的全部数据] |