address-book-shell 0.0.23 → 0.0.25

package/README.md

@@ -3,17 +3,27 @@
 
 > 目录
 
-[toc]
+[TOC]
+
+### Install
+#### NPM
+``` bash
+npm install address-book-shell --save
+```
+#### Yarn
+
+``` bash
+yarn add address-book-shell
+```
 
-### 组件下载
- npm  i  address-book-shell 
 <br/> 或
 <br/>yarn add address-book-shell 
 
 ### 组件注册
-```javascript
+```js
 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,
 })
@@ -43,7 +53,7 @@ Vue.use(AddressBookShell, {
 #### selected
  地址本需要默认勾选人员,可以通过selected将需要勾选的数据传入地址本;  
  数据格式如下:  
- ```javascript
+ ``` js
  selected: [
         {
           avatar:'xxx',  // 头像地址
@@ -59,6 +69,14 @@ Vue.use(AddressBookShell, {
           name: 'xxxx',
           fdOrgType: '8',
         },
+        {
+          avatar: 'xxxxxxxxxxxxx',
+          hrId: 'xxx',
+          aduser: '',
+          name: 'xxxxxxxx',
+          fdOrgType: '4',
+          detailedPerson: 'xxxxxxxxxxxx', //非必须,用于鼠标经过岗位或部门时提示人员详情
+        },
       ],
 
   <address-book-shell
@@ -76,19 +94,21 @@ Vue.use(AddressBookShell, {
   />
  ```
 
- #### needPeopleData
- 默认情况下，地址本会返回选中的原始数据。例如选中了部门或岗位，地址本会返回这个部门或岗位本身。如果需要部门或岗位转换成人员再返回， 则可以配needPeopleData属性。  
+ #### onlyOriginalData
+ 默认为false，此时地址本点确定按钮会调用接口,将岗位和部门转化为人员数据,并通过submitted方法返回给业务方。如果仅需要原始的勾选数据,则可以配置needPeopleData属性,直接返回数据避免调用接口，可以减少地址的本反应时间。
+
+> 注意,如果没有配置该属性,且勾选的只有人员数据,点击地址本确定按钮时也不会调用接口而是直接将人员数据直接返回。
+
   ```html
   <address-book-shell
-    needPeopleData
+    onlyOriginalData
   />
  ```
- 注意，配置了这个属性之后点击确定的时候会调用接口获取部门和岗位下的人员数据，因此最终数据的返回会稍有延迟。
 
  #### typeList
  地址本模糊搜索权限默认是根据用户身份自动配置的，但如果想自定义模糊搜索权限，则可以通过传入typeList来控制。
  例如仅开启人员权限
-  ```javascript
+  ``` js
   typeList: ['人员'] 
   <address-book-shell
     :typeList='typeList'
@@ -104,7 +124,7 @@ Vue.use(AddressBookShell, {
 #### tabs
 与onlyMailList一样都是用来控制地址本加载模块的。如果想自定义加载的模块,可手动配置tabs参数来实现。  
 例如：
-  ```javascript
+  ``` js
   tabs: ['通讯录', '合作方好友'] 
   <address-book-shell
     :tabs='tabs'
@@ -118,7 +138,7 @@ Vue.use(AddressBookShell, {
     radio
   />
  ```
->注意：如果开启了单选模式，selected默认选中的数据又不止一个的话，地址本只会获取第一项数据，其他数据将被抛弃。
+>注意：如果开启了单选模式，selected传入的数据又不止一个的话，地址本只会获取第一项数据，其他数据将被抛弃。
 
 #### title
 地址本组件的标题，默认为'地址本'。
@@ -158,7 +178,7 @@ Vue.use(AddressBookShell, {
 隐藏最近联系人模块,设置改属性之后,地址本上将不在显示地址本模块
  ```html
   <address-book-shell
-    noAddRecent
+    hiddenRecently
   />
   ```
 
@@ -179,7 +199,7 @@ Vue.use(AddressBookShell, {
   ```
 #### robotsList
 机器人数据,不传或传[],不会显示机器人模块
-  ```javascript
+  ``` js
   robotsList: [
     {
       add_im_group: 1,
@@ -205,7 +225,7 @@ Vue.use(AddressBookShell, {
 
  #### loginUserinfo
  cas单点登录会回来的用户信息,毕传,否则地址本将无法正常使用.
-  ```javascript
+  ``` js
   loginUserinfo: {
     dept: "公司领导",
     deptId: "D1",
@@ -225,19 +245,28 @@ Vue.use(AddressBookShell, {
  ```
 
  #### searchStatus
- 控制模糊搜索的权限,'1':搜索全部;'2':仅内部;'3':仅合作方.此外,地址本还会根据使用场景自动分配权限:长江e家默认'1',web默认'2'
+ 控制模糊搜索的权限,'1'：搜索全部; '2'：仅内部; '3'：仅合作方。如果没有手动配置,地址本会根据使用场景自动分配权限：长江e家默认'1',web默认'2'
   ```html
   <address-book-shell
     searchStatus='1'
   />
   ```
 
+#### nameImport
+是否开启地址本的名单导入功能,开启后开放名单导入按钮。
+``` html
+  <address-book-shell
+    nameImport
+  />
+```
+
+
 ### 属性总览
 |  参数   |      说明  | 类型 | 可选值 | 默认值 |
 | :---   | :--- | :--- | :---: |:---:    | 
 | selected   | 地址本初始化默认选中的人员数据  | Array  | - |  []    |
 | selectDisabled  | 是否将selected传入的人员置灰不能再选 | Boolean | - | false  |
-| needPeopleData  | 是否只需要人员数据(设置为true不会再返回已选岗位和部门,会将所选全部转换为人员后再返回) | Boolean | - | false  |
+| onlyOriginalData  | 是否只需要原始勾选的数据(设置为true将勾选的数据直接返回;设置为false则会在submitted回调中返回 【仅人员数据,仅结构数据,勾选的原始数据】三个参数) | Boolean | - | false  |
 | typeList  | 用来控制模糊搜索下拉选项内容 | Array | [ '全部','部门' ,'岗位' ,'人员'] | ['全部','部门','岗位','人员'] |
 | onlyMailList  | 是否只展示通讯录模块 | Boolean | - | false  |
 | tabs  | 自定义tabs的内容,如果不传或传空数组,将根据身份动态显示合适的模块 | Array | ['通讯录','合作方好友] | []  |
@@ -252,6 +281,7 @@ Vue.use(AddressBookShell, {
 | robotsList  | 机器人数据,不传或传[],不会显示机器人模块 | Array | - | []  |
 | loginUserinfo  | cas登录返回的用户信息(必传) | Object | - | {}  |
 | searchStatus   | 搜索框权限控制  | String | '1':搜索全部;'2':仅内部;'3':仅合作方 | 长江e家默认'1',web默认'2'  |
+| nameImport  | 是否开启名单导入功能 | Boolean | - | false | 
 
 
 
@@ -260,30 +290,60 @@ Vue.use(AddressBookShell, {
 > 注意:地址本组件继承了element-ui库Dialog组件的全部事件，即Dialog事件全部适用本组件。
 
 #### submitted
-点击确定按钮地址本返回出来的数据,
- ```html
-  <address-book-shell
+点击地址本确定按钮的回调事件,将根据是否配置onlyOriginalData属性返回不同的值
+
+``` html
+ <address-book-shell
     @submitted='submitted'
   />
-  methods:{
-    submitted(list) {
-      console.log(list, 'submitted')
-      // list:[
-      // aduser:'xxx', // OA
-      //  avatar:'xxxx', // 头像地址 
-      //  fdOrgType:'x', // 数据类型 '2': 部门 ; '4':岗位 ; '8': 人员
-      //  hrId:'', // '100001111'
-      //  name:'xxx' // 中文名称
-      // ]
-    },
+  
+    submitted(person_data,type_list,data){
+    console.log(person_data,'人员数据,包含了部门和岗位中的人员')
+    console.log(type_list,'已选的结构数据,仅包含已选了部门和岗位,不包含人员数据')
+    console.log(data,'默认勾选的所有数据数据,包含勾选的人员、部门和岗位')
   }
- ```
-> **注意:如果地址本外面需要操作数据,可以操作地址本暴露出去的数据,完成之后再通过selected传入地址本即可**
+```
 
+``` html
+ <address-book-shell
+    onlyOriginalData
+    @submitted='submitted'
+  />
+
+  submitted(data){
+    console.log('默认勾选的所有数据数据,包含勾选的人员、部门和岗位')
+  }
+```
+#### add
+地址本勾选时触发,返回两个参数,类型全部为数组,第一个参数为新勾选的数据;第二参数为勾选的全部数据
+``` html
+ <address-book-shell
+    @add='add'
+  />
+  add(data,selectList) {
+    console.log('新勾选的数据',data)
+    console.log('勾选的全部数据',selectList)
+  }
+```
+#### remove
+地址本取消勾选时触发,返回两个参数,类型全部为数组,第一个参数为取消勾选的数据;第二参数为勾选的全部数据
+``` html
+ <address-book-shell
+    @remove='remove'
+  />
+  remove(data,selectList) {
+    console.log('取消勾选的数据',data)
+    console.log('勾选的全部数据',selectList)
+  }
+```
 
-### 组件总览
+### 事件总览
 组件自定义事件:
 |  事件名称   | 说明   | 回调参数 |
 | :---  | :---  | :-- |
-| submitted  | 点击确实按钮的回调 |返回选中的人员数据|
+| submitted  | 点击确实按钮的回调 | [全部人员数据],[仅结构数据],[原始勾选数据]  或 [原始勾选数据]|
+|    add     | 新增勾选的回调     |     [新增勾选数据],[勾选的全部数据]                        |
+|    remove  | 取消勾选的回调     |     [取消勾选数据],[勾选的全部数据]                        |
+
+