address-book-shell 0.0.43 → 0.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,339 +6,507 @@
6
6
 
7
7
  [TOC]
8
8
 
9
- ### Install
9
+ ## 快速开始
10
10
 
11
- #### NPM
11
+ ### 安装
12
12
 
13
- ``` bash
13
+ ```bash
14
+ # 使用 npm
14
15
  npm install address-book-shell --save
15
- ```
16
-
17
- #### Yarn
18
16
 
19
- ``` bash
17
+ # 使用 yarn
20
18
  yarn add address-book-shell
21
19
  ```
22
20
 
23
- ### 组件注册
21
+ ### 注册组件
24
22
 
25
23
  ```js
26
24
  import microserviceRequest from '@/utils/microService/microService-request.js'
27
25
  import AddressBookShell from 'address-book-shell'
28
26
  import 'address-book-shell/src/theme/element-ui-theme/element-ui-common.scss'
27
+
28
+ // 注册地址本组件
29
29
  Vue.use(AddressBookShell, {
30
+ // 微服务请求方法(必传)
30
31
  microserviceRequest: microserviceRequest,
31
32
  })
32
33
  ```
33
34
 
34
- microserviceRequest是封装好的微服务请求方法,出于安全考虑,此方法不放在公网,因此需要业务方自行传入,否则无法使用本组件;
35
- <br/>
36
- <br/>至此,地址本注册就完成了
37
-
38
- ### 组件使用
35
+ ### 基本使用
39
36
 
40
- 需要使用地址本的项目要接入cas单点登录,然后注册地址本即可使用。
41
-
42
- ``` html
37
+ ```html
38
+ <template>
39
+ <div>
40
+ <el-button @click="addressListVisible = true">打开地址本</el-button>
41
+
43
42
  <address-book-shell
44
- :visible.sync="addredssListVisible"
43
+ :visible.sync="addressListVisible"
45
44
  :selected="selected"
46
45
  :close-on-click-modal="false"
47
- @submitted="submitAddredss"
48
- @colse="closeAddress"
46
+ @submitted="submitAddress"
47
+ @close="closeAddress"
49
48
  :loginUserinfo="loginUserinfo"
50
49
  :append-to-body="true"
51
50
  />
51
+ </div>
52
+ </template>
53
+
54
+ <script>
55
+ export default {
56
+ data() {
57
+ return {
58
+ addressListVisible: false,
59
+ selected: [], // 默认选中的人员
60
+ loginUserinfo: {
61
+ // CAS单点登录返回的用户信息
62
+ dept: "xxx",
63
+ deptId: "xx",
64
+ email: "xxxx",
65
+ headImage: "xxxx",
66
+ hrId: "xxxx",
67
+ loginName: "xxxx",
68
+ phone: "12345678999",
69
+ post: "xxx",
70
+ telNo: "123456789",
71
+ type: 0,
72
+ userName: "xx"
73
+ }
74
+ }
75
+ },
76
+ methods: {
77
+ submitAddress(personData, typeList, data) {
78
+ console.log('人员数据:', personData)
79
+ console.log('结构数据:', typeList)
80
+ console.log('原始数据:', data)
81
+ },
82
+ closeAddress() {
83
+ // 你的逻辑
84
+ }
85
+ }
86
+ }
87
+ </script>
52
88
  ```
53
89
 
90
+
91
+
92
+
93
+
94
+
95
+
54
96
  ### 组件属性
55
97
  >
56
98
  > 注意:地址本组件继承了element-ui库Dialog组件的全部属性,即Dialog属性全部适用本组件。
57
99
 
58
100
  #### loginUserinfo
59
101
 
60
- cas单点登录会回来的用户信息, **必传,否则地址本将无法正常使用**.
61
-
62
- ``` js
63
- loginUserinfo: {
64
- dept: "公司领导",
65
- deptId: "D1",
66
- email: "xxxx",
67
- headImage: "xxxx",
68
- hrId: "xxxx",
69
- loginName: "xxxx",
70
- phone: "12345678999",
71
- post: "副总裁",
72
- telNo: "0724-5678999",
73
- type: 1,
74
- userName: "xx",
75
- }
76
- <address-book-shell
77
- :loginUserinfo='loginUserinfo'
78
- />
79
- ```
102
+ CAS单点登录返回的用户信息,**必传**,否则地址本将无法正常使用。
103
+
104
+ **数据结构**:
105
+
106
+ | 字段名 | 说明 | 类型 |
107
+ | :--- | :--- | :--- |
108
+ | dept | 部门名称 | String |
109
+ | deptId | 部门ID | String |
110
+ | email | 邮箱地址 | String |
111
+ | headImage | 头像地址 | String |
112
+ | hrId | 人员ID | String |
113
+ | loginName | 登录名 | String |
114
+ | phone | 手机号码 | String |
115
+ | post | 职位 | String |
116
+ | telNo | 固定电话 | String |
117
+ | type | 用户类型 | Number |
118
+ | userName | 用户名 | String |
119
+
120
+ **使用示例**:
121
+
122
+ ```html
123
+ <address-book-shell
124
+ :loginUserinfo="loginUserinfo"
125
+ />
126
+ ```
80
127
 
81
128
  #### selected
82
129
 
83
- 地址本需要默认勾选人员,可以通过selected将需要勾选的数据传入地址本;
84
- 数据格式如下:
85
-
86
- ``` js
87
- selected: [
88
- {
89
- avatar:'xxx', // 头像地址
90
- aduser: 'xxxxx', // OA
91
- hrId: 'xxxxxxxxx', // 例如 100001111
92
- name: 'xxx', // 中文名称
93
- fdOrgType: '8', // 数据类型 '2': 部门 ; '4':岗位 ; '8': 人员
94
- },
95
- {
96
- avatar: 'xxxx',
97
- hrId: 'xxxx',
98
- aduser: 'xxxx',
99
- name: 'xxxx',
100
- fdOrgType: '8',
101
- },
102
- {
103
- avatar: 'xxxxxxxxxxxxx',
104
- hrId: 'xxx',
105
- aduser: '',
106
- name: 'xxxxxxxx',
107
- fdOrgType: '4',
108
- detailedPerson: 'xxxxxxxxxxxx', //非必须,用于鼠标经过岗位或部门时提示人员详情
109
- },
110
- ],
111
-
112
- <address-book-shell
113
- :selected="selected"
114
- />
115
-
116
- ```
117
-
118
- 以上列出的属性为必须属性,如添加了其他非必须属性,点击确定时也会原封不动暴露出去。
119
-
120
- #### selectDisabled
121
-
122
- selected传入的默认选中状态是可以在地址本中取消选中的,如果不希望操作默认选中的数据,可配置selectDisabled属性,将默认传入的数据状态禁止操作。
123
-
124
- ```html
125
- <address-book-shell
126
- selectDisabled
127
- />
128
- ```
129
-
130
- #### showOnlyNewPersonnel
131
-
132
- 是否只展示新增的人员列表。
133
-
134
- 值为1,展示全部人员包括selected传进来的人员;值为2则只显示新增人员。不设置则默认取selectDisabled的值;
135
-
136
- ```html
137
- <address-book-shell
138
- :selectDisabled='2'
139
- />
140
- ```
130
+ 默认勾选的人员数据,通过该属性可以将需要默认勾选的数据传入地址本。
131
+
132
+ **数据结构**:
133
+
134
+ | 字段名 | 说明 | 类型 | 是否必填 |
135
+ | :--- | :--- | :--- | :--- |
136
+ | avatar | 头像地址 | String | 是 |
137
+ | aduser | OA账号 | String | 是 |
138
+ | hrId | 人员/部门/岗位ID | String | 是 |
139
+ | name | 中文名称 | String | 是 |
140
+ | fdOrgType | 数据类型 | String | |
141
+ | detailedPerson | 人员详情(用于鼠标经过岗位或部门时提示) | String | 否 |
142
+
143
+ **fdOrgType取值说明**:
144
+ - `'2'`:部门
145
+ - `'4'`:岗位
146
+ - `'8'`:人员
147
+
148
+ **使用示例**:
149
+
150
+ ```js
151
+ // 默认勾选的人员数据
152
+ selected: [
153
+ {
154
+ avatar: 'xxx', // 头像地址
155
+ aduser: 'xxxxx', // OA账号
156
+ hrId: 'xxxxxxxxx', // 例如 100001111
157
+ name: 'xxx', // 中文名称
158
+ fdOrgType: '8' // 数据类型:人员
159
+ },
160
+ {
161
+ avatar: 'xxxxxxxxxxxxx',
162
+ hrId: 'xxx',
163
+ aduser: 'xxx',
164
+ name: 'xxxxxxxx',
165
+ fdOrgType: '4', // 数据类型:岗位
166
+ detailedPerson: 'xxxxxxxxxxxx' // 人员详情
167
+ }
168
+ ]
169
+ ```
170
+
171
+ ```html
172
+ <address-book-shell
173
+ :selected="selected"
174
+ />
175
+ ```
176
+
177
+ **注意**:以上列出的属性为必须属性,如添加了其他非必须属性,点击确定时也会原封不动暴露出去。
178
+
179
+ #### selectDisabled
180
+
181
+ 是否禁用默认选中数据的操作。如果设置为true,通过selected传入的默认选中数据将被置灰,不允许在地址本中取消选中。
182
+
183
+ **使用示例**:
184
+
185
+ ```html
186
+ <address-book-shell
187
+ selectDisabled
188
+ />
189
+ ```
190
+
191
+ #### showOnlyNewPersonnel
192
+
193
+ 是否只展示新增的人员列表。
194
+
195
+ **取值说明**:
196
+ - `0`:默认值,取selectDisabled的值
197
+ - `1`:展示全部人员,包括selected传进来的人员
198
+ - `2`:只显示新增人员,不包括selected传进来的人员
199
+
200
+ **使用示例**:
201
+
202
+ ```html
203
+ <address-book-shell
204
+ :showOnlyNewPersonnel="2"
205
+ />
206
+ ```
141
207
 
142
208
  #### onlyOriginalData
143
209
 
144
- 默认为false,此时地址本点确定按钮会调用接口,将岗位和部门转化为人员数据,并通过submitted方法返回给业务方。如果仅需要原始的勾选数据,则可以配置needPeopleData属性,直接返回数据避免调用接口,可以减少地址的本反应时间。
210
+ 是否只返回原始勾选数据。
211
+
212
+ **取值说明**:
213
+ - `false`(默认):点击确定按钮时会调用接口,将岗位和部门转化为人员数据,并通过submitted方法返回
214
+ - `true`:直接返回原始勾选数据,不调用接口,可减少地址本的反应时间
215
+
216
+ **注意**:如果没有配置该属性,且勾选的只有人员数据,点击确定按钮时也不会调用接口,而是直接将人员数据返回。
145
217
 
146
- > 注意,如果没有配置该属性,且勾选的只有人员数据,点击地址本确定按钮时也不会调用接口而是直接将人员数据直接返回。
218
+ **使用示例**:
147
219
 
148
- ```html
149
- <address-book-shell
150
- onlyOriginalData
151
- />
152
- ```
220
+ ```html
221
+ <address-book-shell
222
+ onlyOriginalData
223
+ />
224
+ ```
153
225
 
154
226
  #### typeList
155
227
 
156
- 地址本模糊搜索权限默认是根据用户身份自动配置的,但如果想自定义模糊搜索权限,则可以通过传入typeList来控制。
157
- 例如仅开启人员权限
228
+ 自定义模糊搜索下拉选项内容,用于控制模糊搜索的权限范围。
229
+
230
+ **默认值**:`['全部', '部门', '岗位', '人员']`
231
+
232
+ **使用示例**:
233
+
234
+ ```js
235
+ // 仅开启人员搜索权限
236
+ typeList: ['人员']
237
+ ```
158
238
 
159
- ``` js
160
- typeList: ['人员']
161
- <address-book-shell
162
- :typeList='typeList'
163
- />
164
- ```
239
+ ```html
240
+ <address-book-shell
241
+ :typeList="typeList"
242
+ />
243
+ ```
165
244
 
166
245
  #### onlyMailList
167
246
 
168
- 地址本默认会根据身份自动加载对应模块,内部员默认加载通讯录和合作方好友模块,如果内部员工只想加载通讯录模块,可以设置onlyMailList属性快速设置
247
+ 是否只展示通讯录模块。
248
+
249
+ **说明**:地址本默认会根据用户身份自动加载对应模块,内部员工默认加载通讯录和合作方好友模块。如果内部员工只想加载通讯录模块,可以设置该属性。
169
250
 
170
- ```html
171
- <address-book-shell
172
- onlyMailList
173
- />
174
- ```
251
+ **使用示例**:
252
+
253
+ ```html
254
+ <address-book-shell
255
+ onlyMailList
256
+ />
257
+ ```
175
258
 
176
259
  #### tabs
177
260
 
178
- 与onlyMailList一样都是用来控制地址本加载模块的。如果想自定义加载的模块,可手动配置tabs参数来实现。
179
- 例如:
261
+ 自定义地址本加载的模块。
262
+
263
+ **说明**:与onlyMailList一样都是用来控制地址本加载模块的。如果想自定义加载的模块,可手动配置tabs参数来实现。如果不传或传空数组,将根据用户身份动态显示合适的模块。
264
+
265
+ **默认值**:`[]`
180
266
 
181
- ``` js
182
- tabs: ['通讯录', '合作方好友']
183
- <address-book-shell
184
- :tabs='tabs'
185
- />
186
- ```
267
+ **使用示例**:
268
+
269
+ ```js
270
+ // 加载通讯录和合作方好友模块
271
+ tabs: ['通讯录', '合作方好友']
272
+ ```
273
+
274
+ ```html
275
+ <address-book-shell
276
+ :tabs="tabs"
277
+ />
278
+ ```
187
279
 
188
280
  #### radio
189
281
 
190
- 地址本是否开启单选模式
282
+ 是否开启单选模式。
283
+
284
+ **说明**:如果开启了单选模式,selected传入的数据又不止一个的话,地址本只会获取第一项数据,其他数据将被抛弃。
191
285
 
192
- ```html
193
- <address-book-shell
194
- radio
195
- />
196
- ```
286
+ **使用示例**:
197
287
 
198
- >注意:如果开启了单选模式,selected传入的数据又不止一个的话,地址本只会获取第一项数据,其他数据将被抛弃。
288
+ ```html
289
+ <address-book-shell
290
+ radio
291
+ />
292
+ ```
199
293
 
200
294
  #### title
201
295
 
202
- 地址本组件的标题,默认为'地址本'。
296
+ 地址本组件的标题。
297
+
298
+ **默认值**:`'地址本'`
203
299
 
204
- ```html
205
- <address-book-shell
206
- title='测试地址本'
207
- />
208
- ```
300
+ **使用示例**:
301
+
302
+ ```html
303
+ <address-book-shell
304
+ title="测试地址本"
305
+ />
306
+ ```
209
307
 
210
308
  #### width
211
309
 
212
- 地址本弹层的宽度,默认为'800px'
310
+ 地址本弹层的宽度。
311
+
312
+ **默认值**:`'800px'`
213
313
 
214
- ```html
215
- <address-book-shell
216
- width='800px'
217
- />
218
- ```
314
+ **使用示例**:
315
+
316
+ ```html
317
+ <address-book-shell
318
+ width="800px"
319
+ />
320
+ ```
219
321
 
220
322
  #### customClass
221
323
 
222
- 自定义地址本的class类名,默认为address-modal,设置自定义类型即可定制一些样式。
324
+ 自定义地址本的class类名,用于定制样式。
325
+
326
+ **默认值**:`'address-modal'`
327
+
328
+ **使用示例**:
223
329
 
224
- ```html
225
- <address-book-shell
226
- customClass='demo-address'
227
- />
228
- ```
330
+ ```html
331
+ <address-book-shell
332
+ customClass="demo-address"
333
+ />
334
+ ```
229
335
 
230
336
  #### noAddRecent
231
337
 
232
- 是否不需要添加最近联系人,设置改属性之后点击确定按钮不会将已选人写入最近联系人
338
+ 是否不需要添加最近联系人。设置该属性后,点击确定按钮不会将已选人员写入最近联系人。
339
+
340
+ **使用示例**:
233
341
 
234
- ```html
235
- <address-book-shell
236
- noAddRecent
237
- />
238
- ```
342
+ ```html
343
+ <address-book-shell
344
+ noAddRecent
345
+ />
346
+ ```
239
347
 
240
348
  #### hiddenRecently
241
349
 
242
- 隐藏最近联系人模块,设置改属性之后,地址本上将不在显示地址本模块
350
+ 是否隐藏最近联系人模块。设置该属性后,地址本上将不再显示最近联系人模块。
351
+
352
+ **使用示例**:
243
353
 
244
- ```html
245
- <address-book-shell
246
- hiddenRecently
247
- />
248
- ```
354
+ ```html
355
+ <address-book-shell
356
+ hiddenRecently
357
+ />
358
+ ```
249
359
 
250
360
  #### footButton
251
361
 
252
- 自定义左下角功能按钮,目前可以控制两个按钮,查看当前名单和收藏当前名单(未开发完成),其中查看当前名单会动态显影,即只有选择了部门或岗位才回显,仅选择了人员该按钮不会显示.
362
+ 自定义左下角功能按钮。
363
+
364
+ **可选值**:
365
+ - `'check'`:查看当前名单(只有选择了部门或岗位才会显示,仅选择了人员不会显示)
366
+ - `'collect'`:收藏当前名单(未开发完成)
367
+ - `'change'`:本次变动名单(只有selected有值才会显示)
253
368
 
254
- ```html
255
- <address-book-shell
256
- :footButton="['check']"
257
- />
258
- ```
369
+ **默认值**:`['check']`
259
370
 
260
- >注意:配置了change并不会一定显示“本次变动名单”按钮,selected必须有值才会显示。
371
+ **使用示例**:
372
+
373
+ ```html
374
+ <address-book-shell
375
+ :footButton="['check']"
376
+ />
377
+ ```
261
378
 
262
379
  #### top
263
380
 
264
- 自定义地址本组件margin-top值,默认为'7vh'
381
+ 自定义地址本组件的margin-top值。
265
382
 
266
- ```html
267
- <address-book-shell
268
- top='7vh'
269
- />
270
- ```
383
+ **默认值**:`'7vh'`
384
+
385
+ **使用示例**:
386
+
387
+ ```html
388
+ <address-book-shell
389
+ top="7vh"
390
+ />
391
+ ```
271
392
 
272
393
  #### robotsList
273
394
 
274
- 机器人数据,不传或传[],不会显示机器人模块
275
-
276
- ``` js
277
- robotsList: [
278
- {
279
- add_im_group: 1,
280
- bottom_title: "去咨询",
281
- chat_desc: "",
282
- chat_tips: "",
283
- ctime: "20230608102803",
284
- hr_id: "R00001",
285
- jump_url: "xxx",
286
- login_name: "iwenida",
287
- status: 1,
288
- user_desc:'智能知识助手,随时解答您的业务问题',
289
- user_detail: "xxx",
290
- user_id: "",
291
- user_image: "xxx"
292
- user_name: "爱问i答"
293
- }
294
- ]
295
- <address-book-shell
296
- :robotsList='robotsList'
297
- />
298
- ```
395
+ 机器人数据,用于显示机器人模块。不传或传空数组时,不会显示机器人模块。
396
+
397
+ **数据结构**:
398
+
399
+ | 字段名 | 说明 | 类型 |
400
+ | :--- | :--- | :--- |
401
+ | add_im_group | 是否添加到IM群 | Number |
402
+ | bottom_title | 底部按钮标题 | String |
403
+ | chat_desc | 聊天描述 | String |
404
+ | chat_tips | 聊天提示 | String |
405
+ | ctime | 创建时间 | String |
406
+ | hr_id | 机器人ID | String |
407
+ | jump_url | 跳转链接 | String |
408
+ | login_name | 登录名 | String |
409
+ | status | 状态 | Number |
410
+ | user_desc | 机器人描述 | String |
411
+ | user_detail | 机器人详情 | String |
412
+ | user_id | 用户ID | String |
413
+ | user_image | 机器人头像 | String |
414
+ | user_name | 机器人名称 | String |
415
+
416
+ **使用示例**:
417
+
418
+ ```js
419
+ // 机器人数据
420
+ robotsList: [
421
+ {
422
+ add_im_group: 1,
423
+ bottom_title: "去咨询",
424
+ chat_desc: "",
425
+ chat_tips: "",
426
+ ctime: "20230608102803",
427
+ hr_id: "R00001",
428
+ jump_url: "xxx",
429
+ login_name: "iwenida",
430
+ status: 1,
431
+ user_desc: '智能知识助手,随时解答您的业务问题',
432
+ user_detail: "xxx",
433
+ user_id: "",
434
+ user_image: "xxx",
435
+ user_name: "爱问i答"
436
+ }
437
+ ]
438
+ ```
439
+
440
+ ```html
441
+ <address-book-shell
442
+ :robotsList="robotsList"
443
+ />
444
+ ```
299
445
 
300
446
  #### searchStatus
301
447
 
302
- 控制模糊搜索的权限,'1':搜索全部; '2':仅内部; '3':仅合作方。如果没有手动配置,地址本会根据使用场景自动分配权限:长江e家默认'1',web默认'2'
448
+ 控制模糊搜索的权限范围。
449
+
450
+ **取值说明**:
451
+ - `'1'`:搜索全部
452
+ - `'2'`:仅内部
453
+ - `'3'`:仅合作方
454
+
455
+ **默认值**:长江e家默认`'1'`,web默认`'2'`
303
456
 
304
- ```html
305
- <address-book-shell
306
- searchStatus='1'
307
- />
308
- ```
457
+ **使用示例**:
458
+
459
+ ```html
460
+ <address-book-shell
461
+ searchStatus="1"
462
+ />
463
+ ```
309
464
 
310
465
  #### defaultActiveMenu
311
466
 
312
- 自定义初始化时菜单默认选中项,值为部门id,即deptId。(例如: 'C1','D794')
467
+ 自定义初始化时菜单默认选中项,值为部门ID(deptId)。
313
468
 
314
- ```html
315
- <address-book-shell
316
- defaultActiveMenu='C1'
317
- />
318
- ```
469
+ **示例值**:`'C1'`、`'D794'`
470
+
471
+ **使用示例**:
472
+
473
+ ```html
474
+ <address-book-shell
475
+ defaultActiveMenu="C1"
476
+ />
477
+ ```
319
478
 
320
479
  #### enableChangeConfirmation
321
480
 
322
- 是否开启 人员变动超过5人,确定时弹窗提示功能
481
+ 是否开启人员变动超过5人时的弹窗提示功能。
482
+
483
+ **说明**:配置了该属性后,当人员变动超过5人时,点击确定按钮会弹出提示。但只有当地址本打开时已选人员列表selected有值时,才会显示该提示。
323
484
 
324
- ```html
325
- <address-book-shell
326
- enableChangeConfirmation
327
- />
328
- ```
485
+ **使用示例**:
329
486
 
330
- >注意:配置了enableChangeConfirmation并不会一定显示人员变动弹层,地址本打开时已选人员列表selected必须有值才会显示。
487
+ ```html
488
+ <address-book-shell
489
+ enableChangeConfirmation
490
+ />
491
+ ```
331
492
 
332
493
  #### queryCannotChooseLeader
333
494
 
334
- 配置是否不允许选择领导,不配置或'0':默认有权限勾选领导;'1':禁止勾选领导;'query': 通过接口查询权限
495
+ 配置是否不允许选择行政及党务领导。
335
496
 
336
- ```html
337
- <!-- 通过接口查询是否有勾选行政及党务领导权限 -->
338
- <address-book-shell
339
- queryCannotChooseLeader='query'
340
- />
341
- ```
497
+ **取值说明**:
498
+ - `'0'`或不配置:默认有权限勾选领导
499
+ - `'1'`:禁止勾选领导
500
+ - `'query'`:通过接口查询权限
501
+
502
+ **使用示例**:
503
+
504
+ ```html
505
+ <!-- 通过接口查询是否有勾选行政及党务领导权限 -->
506
+ <address-book-shell
507
+ queryCannotChooseLeader="query"
508
+ />
509
+ ```
342
510
 
343
511
  ### 属性总览
344
512
 
@@ -359,11 +527,11 @@ microserviceRequest是封装好的微服务请求方法,出于安全考虑,此
359
527
  | noAddRecent | 是否不需要添加最近联系人 | Boolean | - | false |
360
528
  | hiddenRecently | 是否隐藏最近联系人模块 | Boolean | - | false |
361
529
  | footButton | 自定义功能按钮(check:查看当前名单;collect: 收藏当前名单;change: 本次变动名单) | Array | ['check','collect','change'] | ['check'] |
362
- | top | 地址本 CSS 中的 margin-topz值 | string | - | 7vh |
530
+ | top | 地址本 CSS 中的 margin-top 值 | string | - | 7vh |
363
531
  | robotsList | 机器人数据,不传或传[],不会显示机器人模块 | Array | - | [] |
364
532
  | searchStatus | 搜索框权限控制 | String | '1':搜索全部;'2':仅内部;'3':仅合作方 | 长江e家默认'1',web默认'2' |
365
533
  | defaultActiveMenu | 菜单默认选中项 | String | - | |
366
- | enableChangeConfirmation | 拉人超过5人 弹窗提示 | Boolean | - | false |
534
+ | enableChangeConfirmation | 人员变动超过5人 弹窗提示 | Boolean | - | false |
367
535
  | queryCannotChooseLeader | 配置是否不允许选择行政及党务领导 | String | '0','1','query' | '0' |
368
536
 
369
537
  ### 组件事件
@@ -372,57 +540,105 @@ microserviceRequest是封装好的微服务请求方法,出于安全考虑,此
372
540
 
373
541
  #### submitted
374
542
 
375
- 点击地址本确定按钮的回调事件,将根据是否配置onlyOriginalData属性返回不同的值
376
-
377
- ``` html
378
- <address-book-shell
379
- @submitted='submitted'
380
- />
381
-
382
- submitted(person_data,type_list,data){
383
- console.log(person_data,'人员数据,包含了部门和岗位中的人员')
384
- console.log(type_list,'已选的结构数据,仅包含已选了部门和岗位,不包含人员数据')
385
- console.log(data,'默认勾选的所有数据数据,包含勾选的人员、部门和岗位')
543
+ 点击地址本确定按钮的回调事件,根据是否配置`onlyOriginalData`属性返回不同的值。
544
+
545
+ **回调参数**:
546
+ - 当未配置`onlyOriginalData`或设置为`false`时:
547
+ - `person_data`:人员数据,包含了部门和岗位中的人员
548
+ - `type_list`:已选的结构数据,仅包含已选了部门和岗位,不包含人员数据
549
+ - `data`:默认勾选的所有数据,包含勾选的人员、部门和岗位
550
+ - 当设置`onlyOriginalData`为`true`时:
551
+ - `data`:默认勾选的所有数据,包含勾选的人员、部门和岗位
552
+
553
+ **使用示例**:
554
+
555
+ ```html
556
+ <address-book-shell
557
+ @submitted="submitted"
558
+ />
559
+
560
+ <script>
561
+ export default {
562
+ methods: {
563
+ submitted(personData, typeList, data) {
564
+ console.log('人员数据:', personData)
565
+ console.log('结构数据:', typeList)
566
+ console.log('原始数据:', data)
567
+ }
386
568
  }
569
+ }
570
+ </script>
387
571
  ```
388
572
 
389
- ``` html
390
- <address-book-shell
391
- onlyOriginalData
392
- @submitted='submitted'
393
- />
394
-
395
- submitted(data){
396
- console.log('默认勾选的所有数据数据,包含勾选的人员、部门和岗位')
573
+ ```html
574
+ <address-book-shell
575
+ onlyOriginalData
576
+ @submitted="submitted"
577
+ />
578
+
579
+ <script>
580
+ export default {
581
+ methods: {
582
+ submitted(data) {
583
+ console.log('原始数据:', data)
584
+ }
397
585
  }
586
+ }
587
+ </script>
398
588
  ```
399
589
 
400
590
  #### add
401
591
 
402
- 地址本勾选时触发,返回两个参数,类型全部为数组,第一个参数为新勾选的数据;第二参数为勾选的全部数据
592
+ 地址本勾选时触发的事件。
593
+
594
+ **回调参数**:
595
+ - `data`:新勾选的数据(数组)
596
+ - `selectList`:勾选的全部数据(数组)
597
+
598
+ **使用示例**:
403
599
 
404
- ``` html
405
- <address-book-shell
406
- @add='add'
407
- />
408
- add(data,selectList) {
409
- console.log('新勾选的数据',data)
410
- console.log('勾选的全部数据',selectList)
600
+ ```html
601
+ <address-book-shell
602
+ @add="add"
603
+ />
604
+
605
+ <script>
606
+ export default {
607
+ methods: {
608
+ add(data, selectList) {
609
+ console.log('新勾选的数据:', data)
610
+ console.log('勾选的全部数据:', selectList)
611
+ }
411
612
  }
613
+ }
614
+ </script>
412
615
  ```
413
616
 
414
617
  #### remove
415
618
 
416
- 地址本取消勾选时触发,返回两个参数,类型全部为数组,第一个参数为取消勾选的数据;第二参数为勾选的全部数据
619
+ 地址本取消勾选时触发的事件。
620
+
621
+ **回调参数**:
622
+ - `data`:取消勾选的数据(数组)
623
+ - `selectList`:勾选的全部数据(数组)
624
+
625
+ **使用示例**:
417
626
 
418
- ``` html
419
- <address-book-shell
420
- @remove='remove'
421
- />
422
- remove(data,selectList) {
423
- console.log('取消勾选的数据',data)
424
- console.log('勾选的全部数据',selectList)
627
+ ```html
628
+ <address-book-shell
629
+ @remove="remove"
630
+ />
631
+
632
+ <script>
633
+ export default {
634
+ methods: {
635
+ remove(data, selectList) {
636
+ console.log('取消勾选的数据:', data)
637
+ console.log('勾选的全部数据:', selectList)
638
+ }
425
639
  }
640
+ }
641
+ </script>
426
642
  ```
427
643
 
428
644
  ### 事件总览
@@ -431,7 +647,7 @@ microserviceRequest是封装好的微服务请求方法,出于安全考虑,此
431
647
 
432
648
  | 事件名称 | 说明 | 回调参数 |
433
649
  | :--- | :--- | :-- |
434
- | submitted | 点击确实按钮的回调 | [全部人员数据],[仅结构数据],[原始勾选数据] 或 [原始勾选数据]|
650
+ | submitted | 点击确定按钮的回调 | [全部人员数据],[仅结构数据],[原始勾选数据] 或 [原始勾选数据]|
435
651
  | add | 新增勾选的回调 | [新增勾选数据],[勾选的全部数据] |
436
652
  | remove | 取消勾选的回调 | [取消勾选数据],[勾选的全部数据] |
437
653
 
@@ -439,4 +655,47 @@ microserviceRequest是封装好的微服务请求方法,出于安全考虑,此
439
655
 
440
656
  #### 名单导入
441
657
 
442
- >名单导入通过调用接口查询权限开启,开启之后,可通过上传指定格式的excel表单选择人员。
658
+ >名单导入通过调用接口查询权限开启,开启之后,可通过上传指定格式的excel表单选择人员。
659
+
660
+ ## 常见问题
661
+
662
+ ### Q: 地址本组件无法正常显示怎么办?
663
+
664
+ **A:** 请检查以下几点:
665
+ 1. 是否正确注册了组件并传入了 `microserviceRequest` 参数
666
+ 2. 是否传入了 `loginUserinfo` 属性,且数据结构正确
667
+ 3. 项目是否已接入CAS单点登录
668
+
669
+ ### Q: 选择部门或岗位后,点击确定按钮没有反应?
670
+
671
+ **A:** 请检查是否配置了 `microserviceRequest` 参数,该参数是调用接口将部门和岗位转化为人员数据的必要条件。
672
+
673
+ ### Q: 如何只显示通讯录模块?
674
+
675
+ **A:** 可以通过设置 `onlyMailList` 属性来实现:
676
+
677
+ ```html
678
+ <address-book-shell
679
+ onlyMailList
680
+ />
681
+ ```
682
+
683
+ ### Q: 如何禁用默认选中数据的操作?
684
+
685
+ **A:** 可以通过设置 `selectDisabled` 属性来实现:
686
+
687
+ ```html
688
+ <address-book-shell
689
+ selectDisabled
690
+ />
691
+ ```
692
+
693
+ ### Q: 如何开启单选模式?
694
+
695
+ **A:** 可以通过设置 `radio` 属性来实现:
696
+
697
+ ```html
698
+ <address-book-shell
699
+ radio
700
+ />
701
+ ```