agilebuilder-ui 1.1.11 → 1.1.12-tmp2

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.
@@ -1,100 +1,89 @@
1
1
  <template>
2
- <div>
3
- <el-container style="height: 395px">
4
- <el-aside width="430px">
5
- <el-container style="height: 390px">
6
- <el-header style="font-size: 12px; height: 35px">
7
- <el-autocomplete
8
- v-model="filterText"
9
- :fetch-suggestions="querySearch"
10
- :placeholder="$t('departmentUserTree.pleaseEnterUserInformation')"
11
- class="inline-input inline-input-custom searchDepartmentUser"
12
- size="default"
13
- @select="handleSelect"
14
- @keyup.enter="clickSearch"
15
- >
16
- <template v-slot:append>
17
- <el-button :icon="ElIconSearch" @click="clickSearch"/>
18
- </template>
19
- </el-autocomplete>
20
- </el-header>
21
- <el-main style="padding: 10px">
22
- <div
23
- v-if="!searchValue"
24
- style="
25
- padding-top: 5px;
26
- overflow: auto;
27
- width: auto;
28
- display: inline-block !important;
29
- "
30
- >
31
- <el-tabs v-model="activeTab" class="boe">
32
- <el-tab-pane :label="$t('departmentUserTreeInline.orgTree')" name="orgTree">
33
- <el-tree
34
- ref="deparmentUserTree"
35
- :props="defaultProps"
36
- :load="loadNode"
37
- :check-on-click-node="true"
38
- lazy
39
- show-checkbox
40
- node-key="nodeId"
41
- @check="handleCheckNode"
42
- @check-change="handleCheckChange"
43
- >
44
- <template #default="{ node, data }">
45
- <span>
46
- <el-icon>
47
- <Menu v-if="node.data.id === -1 || node.data.branch"/>
48
- <Tickets v-else-if="node.data.id === -2 || node.data.id === -3"/>
49
- <User v-else-if="node.data.nodeType === 'USER'"/>
50
- <Calendar v-else/>
51
- </el-icon>
52
- <span :title="node.label">
53
- {{ node.label }}
54
- </span>
55
- </span>
56
- </template>
57
- </el-tree>
58
- </el-tab-pane>
59
- <el-tab-pane name="groupTree">
60
- <template v-slot:label>
61
- <span>{{$t('departmentUserTreeInline.group')}}</span>
62
- <span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
63
- </template>
64
- <GroupUserMultipleTree
65
- v-if="isShowGroupTree"
66
- @result="getGroupUserResult"
67
- />
68
- </el-tab-pane>
69
- </el-tabs>
70
- <!-- @node-click="handleNodeClick" 移除节点点击,不然会造成节点不可选择时,点击也会选择节点 -->
71
- </div>
2
+ <div>
3
+ <el-container style="height: 395px">
4
+ <el-aside width="430px">
5
+ <el-container style="height: 390px">
6
+ <el-header style="font-size: 12px; height: 35px">
7
+ <el-autocomplete
8
+ v-model="filterText"
9
+ :fetch-suggestions="querySearch"
10
+ :placeholder="$t('departmentUserTree.pleaseEnterUserInformation')"
11
+ class="inline-input inline-input-custom searchDepartmentUser"
12
+ size="default"
13
+ @select="handleSelect"
14
+ @keyup.enter="clickSearch"
15
+ >
16
+ <template v-slot:append>
17
+ <el-button :icon="ElIconSearch" @click="clickSearch" />
18
+ </template>
19
+ </el-autocomplete>
20
+ </el-header>
21
+ <el-main style="padding: 10px">
22
+ <div
23
+ v-if="!searchValue"
24
+ style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
25
+ >
26
+ <el-tabs v-model="activeTab" class="boe">
27
+ <el-tab-pane :label="$t('departmentUserTreeInline.orgTree')" name="orgTree">
28
+ <el-tree
29
+ ref="deparmentUserTree"
30
+ :props="defaultProps"
31
+ :load="loadNode"
32
+ :check-on-click-node="true"
33
+ lazy
34
+ show-checkbox
35
+ node-key="nodeId"
36
+ @check="handleCheckNode"
37
+ @check-change="handleCheckChange"
38
+ >
39
+ <template #default="{ node, data }">
40
+ <span>
41
+ <el-icon>
42
+ <Menu v-if="node.data.id === -1 || node.data.branch" />
43
+ <Tickets v-else-if="node.data.id === -2 || node.data.id === -3" />
44
+ <User v-else-if="node.data.nodeType === 'USER'" />
45
+ <Calendar v-else />
46
+ </el-icon>
47
+ <span :title="node.label">
48
+ {{ node.label }}
49
+ </span>
50
+ </span>
51
+ </template>
52
+ </el-tree>
53
+ </el-tab-pane>
54
+ <el-tab-pane name="groupTree">
55
+ <template v-slot:label>
56
+ <span>{{ $t('departmentUserTreeInline.group') }}</span>
57
+ <span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
58
+ </template>
59
+ <GroupUserMultipleTree v-if="isShowGroupTree" @result="getGroupUserResult" />
60
+ </el-tab-pane>
61
+ </el-tabs>
62
+ <!-- @node-click="handleNodeClick" 移除节点点击,不然会造成节点不可选择时,点击也会选择节点 -->
63
+ </div>
72
64
 
73
- <div
74
- v-if="searchValue && searchValue.length > 0"
75
- style="height: 100%; overflow: hidden"
76
- >
77
- <user-result
78
- :contain-branch="containBranch"
79
- :grid-data="searchResult"
80
- :height="height"
81
- :is-search-result="true"
82
- :multiple="true"
83
- :select-result="selectResult"
84
- @addUser="selectUser"
85
- />
86
- </div>
87
- </el-main>
88
- </el-container>
89
- </el-aside>
65
+ <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
66
+ <user-result
67
+ :contain-branch="containBranch"
68
+ :grid-data="searchResult"
69
+ :height="height"
70
+ :is-search-result="true"
71
+ :multiple="true"
72
+ :select-result="selectResult"
73
+ @addUser="selectUser"
74
+ />
75
+ </div>
76
+ </el-main>
77
+ </el-container>
78
+ </el-aside>
90
79
 
91
- <el-container>
92
- <el-aside width="2px">
93
- <table
94
- border="1px"
95
- cellpadding="0"
96
- cellspacing="0"
97
- style="
80
+ <el-container>
81
+ <el-aside width="2px">
82
+ <table
83
+ border="1px"
84
+ cellpadding="0"
85
+ cellspacing="0"
86
+ style="
98
87
  height: 100%;
99
88
  border-left-style: solid;
100
89
  border-bottom-style: none;
@@ -102,30 +91,28 @@
102
91
  border-top-style: none;
103
92
  border-left-color: #cccccc;
104
93
  "
105
- />
106
- </el-aside>
107
- <el-main style="padding: 10px">
108
- <div style="text-align: left; font-size: 16px">
109
- {{ $t('departmentUserTree.selectedPeople') }}:
110
- </div>
111
- <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
112
- <user-result
113
- :contain-branch="containBranch"
114
- :grid-data="selectResult"
115
- :height="height"
116
- :is-search-result="false"
117
- :multiple="true"
118
- @removeUser="removeUser"
119
- />
120
- </div>
121
- </el-main>
122
- </el-container>
123
- </el-container>
124
- </div>
94
+ />
95
+ </el-aside>
96
+ <el-main style="padding: 10px">
97
+ <div style="text-align: left; font-size: 16px">{{ $t('departmentUserTree.selectedPeople') }}:</div>
98
+ <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
99
+ <user-result
100
+ :contain-branch="containBranch"
101
+ :grid-data="selectResult"
102
+ :height="height"
103
+ :is-search-result="false"
104
+ :multiple="true"
105
+ @removeUser="removeUser"
106
+ />
107
+ </div>
108
+ </el-main>
109
+ </el-container>
110
+ </el-container>
111
+ </div>
125
112
  </template>
126
113
 
127
114
  <script>
128
- import {Calendar, Menu, Search as ElIconSearch, Tickets, User} from '@element-plus/icons-vue'
115
+ import { Calendar, Menu, Search as ElIconSearch, Tickets, User } from '@element-plus/icons-vue'
129
116
  import localStorage from '../../../src/utils/local-storage'
130
117
  import UserResult from './search-result.vue'
131
118
  import utils from '../../utils/utils'
@@ -135,658 +122,625 @@ import GroupUserMultipleTree from './group-user-multiple-tree'
135
122
  import GroupUser from './group-user/group-user.vue'
136
123
 
137
124
  export default {
138
- data() {
139
- return {
140
- filterText: '',
141
- defaultProps: {
142
- id: 'id',
143
- label: 'showName',
144
- children: 'children',
145
- isLeaf: 'leaf',
146
- disabled: 'disabled',
147
- },
148
- searchParam: {
149
- userField: null,
150
- searchValue: null,
151
- treeType: 'MAN_DEPARTMENT_TREE',
152
- departmentInfo: null,
153
- },
154
- // 当前租户内是否包含分支机构。获得当前选中用户名称时,如果有分支,则需要将分支名称返回给用户,例如:张三(分支1)
155
- containBranch: false,
156
- // 公司节点的id
157
- tenantNodeId: -1,
158
- // 用于保存所有查询出的节点id
159
- allSearchNodeIds: [],
160
- // 用于保存allSearchNodeIds中所有已加载子节点的id集合
161
- allExpandNodeIds: [],
162
- // 多选树时,是否点击当前的节点
163
- isClickNode: false,
164
- // 查询的备选值
165
- restaurants: [],
166
- // 查询条件
167
- searchValue: null,
168
- // 用户的查询结果
169
- searchResult: [],
170
- // 已选用户结果
171
- selectResult: [],
172
- searchStoreKey: 'searchDepartmentUser',
173
- // 公司根节点信息
174
- tenantInfo: {},
175
- activeTab: 'orgTree', // 当前页签
176
- isShowGroupTree: true,
177
- memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
178
- // 记忆选择数据, 搜索框获得焦点后,下拉显示最近选中的10个人,倒序排列,最后选中的在最上面显示。
179
- memoryCacheData: [],
180
- ElIconSearch,
181
- }
182
- },
183
- name: 'InlineDepartmentUserMultiTree',
184
- components: {
185
- UserResult,
186
- Menu,
187
- Tickets,
188
- User,
189
- Calendar,
190
- GroupUserMultipleTree,
191
- GroupUser
192
- },
193
- props: {
194
- // 显示指定部门节点及其子节点,不传该属性,表示显示整个组织结构树
195
- departmentInfo: {
196
- type: Array,
197
- default: null,
198
- },
199
- // 弹框的高度
200
- height: {
201
- type: String,
202
- default: '300px',
203
- },
204
- // 是否需要显示虚拟用户
205
- isNeedVirtualUser: {
206
- type: Boolean,
207
- default: false,
208
- },
209
- // 多选用户树时,已选择用户id或登录名集合,多个之间以逗号隔开
210
- selectUserInfo: {
211
- type: [String, Number],
212
- default: null,
213
- },
214
- // 移除用户时,用户属性名称:id、loginName、email、telephone,默认是loginName
215
- searchField: {
216
- type: String,
217
- default: 'loginName',
218
- },
219
- // 多选树时结果之间的分隔符,默认是逗号分隔
220
- separator: {
221
- type: String,
222
- default: ',',
223
- },
224
- },
225
- computed: {},
226
- watch: {
227
- filterText(val) {
228
- if (!val) {
229
- this.searchValue = val
230
- // 清空查询内容时,重新加载整个树
231
- if (this.departmentInfo && this.departmentInfo.length > 0) {
232
- // 加载指定部门时,展开公司节点
233
- this.loadPointDepartments()
234
- } else {
235
- // 加载整个组织结构树时,展开公司节点
236
- this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
237
- }
238
- }
239
- },
240
- },
241
- created() {
242
- this.initSelectUsers(
243
- this.searchField,
244
- this.selectUserInfo,
245
- this.separator
246
- ).then((selectUsers) => {
247
- if (selectUsers) {
248
- this.selectResult = selectUsers
249
- }
250
- })
251
- },
252
- mounted() {
253
- var searchDepartmentUser = localStorage.getObject(this.searchStoreKey)
254
- if (searchDepartmentUser) {
255
- this.restaurants = searchDepartmentUser
256
- } else {
257
- this.restaurants = []
258
- }
259
- this.getMemoryCacheData('departmentUser')
260
- },
261
- methods: {
262
- ...utils,
263
- ...departmentUserTreeMultiService,
264
- ...memoryCacheUtils,
265
- // 将查询结果中指定用户添加到已选择用户集合中
266
- selectUser(index, user) {
267
- if (!this.isContainAllUser()) {
268
- const containUsers = this.selectResult.filter(this.filterUser(user))
269
- if (containUsers && containUsers.length === 0) {
270
- // 如果已选结果中不包含当前用户,则添加
271
- // 将查询结果中的用户复制到已选择用户集合中
272
- user.tenantCode = this.tenantInfo.code
273
- user.tenantName = this.tenantInfo.tenantName
274
- this.selectResult.push(user)
275
- // 搜索选中记忆
276
- this.setMemoryCacheData(user, 'departmentUser')
277
- }
278
- } else {
279
- this.alertByAllUser()
280
- }
281
- },
282
- // 从已选择用户集合中移除指定用户,并添加到查询结果集合中
283
- removeUser(index, user) {
284
- // 表示是在组织结构树页面,需要将树的人员节点的选中状态去掉
285
- if (user.nodeId) {
286
- const nodeId = user.nodeId
287
- if (this.$refs.deparmentUserTree && nodeId) {
288
- this.$refs.deparmentUserTree.setChecked(nodeId, false)
289
- }
290
- } else {
291
- if (this.$refs.deparmentUserTree) {
292
- // 通过查询结果添加的用户,在返回到组织结构树时,也选中了该用户,在移除该用户时,需要去掉复选框的选中状态
293
- const checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
294
- const currentCheckedUserNodeIds = checkedKeys.filter(
295
- this.filterUserNode(user)
296
- )
297
- if (currentCheckedUserNodeIds.length > 0) {
298
- // 表示当前用户是选中的状态,需要去掉
299
- currentCheckedUserNodeIds.forEach((userNodeId) => {
300
- this.$refs.deparmentUserTree.setChecked(userNodeId, false)
301
- })
302
- }
303
- }
304
- }
305
- this.selectResult = this.removeRow(this.selectResult, user)
306
- if (!this.selectResult || this.selectResult.length === 0) {
307
- // 已选结果面板没有内容,则左侧树节点也不要有选中节点了
308
- if (this.$refs.deparmentUserTree) {
309
- this.$refs.deparmentUserTree.setCheckedKeys([])
310
- }
311
- }
312
- },
313
- filterUserNode(queryUser) {
314
- return (userNodeId) => {
315
- // 用户节点的id的分隔符,USER~departmentId~userId
316
- const nodeIdSeparator = '~'
317
- const userId = userNodeId.substring(
318
- userNodeId.lastIndexOf(nodeIdSeparator) + 1
319
- )
320
- return userId === queryUser.id + ''
321
- }
322
- },
323
- // handleSelect(item) {
324
- // this.handleSelectUtil(item, localStorage)
325
- // },
326
- search(value) {
327
- this.searchValue = value
328
- let mySearchValue = value
329
- if (mySearchValue) {
330
- mySearchValue = mySearchValue.trim()
331
- }
332
- this.searchParam.searchValue = mySearchValue
333
- this.searchParam.departmentInfo = this.departmentInfo
334
- // TODO: 查询的信息,不需要该属性了,默认自动匹配姓名、登录名等
335
- // this.searchParam.userField = this.searchField
336
- // 后台查询部门,并拼接树节点
337
- this.filterAppendNodes(value)
338
- },
339
- // 点击查询按钮调用的方法
340
- clickSearch() {
341
- this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
342
- this.search(this.filterText)
343
- },
344
- handleCheckChange(data, checked, childrenChecked) {
345
- if (this.isUserNode(data)) {
346
- // 是否是人员节点
347
- if (checked) {
348
- // 当前节点是否被选中
349
- const user = JSON.parse(data.data)
350
- const selectUser = this.packageSelectUser(user)
351
- if (selectUser) {
352
- this.selectResult.push(selectUser)
353
- // 搜索选中记忆
354
- this.setMemoryCacheData(user, 'departmentUser')
355
- }
356
- }
357
- }
358
- },
359
- // 封装已选人员结果
360
- packageSelectUser(user) {
361
- if (!this.isContainAllUser()) {
362
- const containUsers = this.selectResult.filter(this.filterUser(user))
363
- if (containUsers && containUsers.length === 0) {
364
- user.tenantName = this.tenantInfo.tenantName
365
- user.tenantCode = this.tenantInfo.code
366
- // 表示集合中不存在该用户,则封装该用户
367
- var selectUser = {
368
- id: user.id,
369
- name: user.name,
370
- zhName: user.name,
371
- loginName: user.loginName,
372
- email: user.email,
373
- telephone: user.telephone,
374
- mainDepartmentName: user.mainDepartmentName,
375
- subCompanyName: user.subCompanyName,
376
- user: user,
377
- enName: user.enName,
125
+ data() {
126
+ return {
127
+ filterText: '',
128
+ defaultProps: {
129
+ id: 'id',
130
+ label: 'showName',
131
+ children: 'children',
132
+ isLeaf: 'leaf',
133
+ disabled: 'disabled'
134
+ },
135
+ searchParam: {
136
+ userField: null,
137
+ searchValue: null,
138
+ treeType: 'MAN_DEPARTMENT_TREE',
139
+ departmentInfo: null
140
+ },
141
+ // 当前租户内是否包含分支机构。获得当前选中用户名称时,如果有分支,则需要将分支名称返回给用户,例如:张三(分支1)
142
+ containBranch: false,
143
+ // 公司节点的id
144
+ tenantNodeId: -1,
145
+ // 用于保存所有查询出的节点id
146
+ allSearchNodeIds: [],
147
+ // 用于保存allSearchNodeIds中所有已加载子节点的id集合
148
+ allExpandNodeIds: [],
149
+ // 多选树时,是否点击当前的节点
150
+ isClickNode: false,
151
+ // 查询的备选值
152
+ restaurants: [],
153
+ // 查询条件
154
+ searchValue: null,
155
+ // 用户的查询结果
156
+ searchResult: [],
157
+ // 已选用户结果
158
+ selectResult: [],
159
+ searchStoreKey: 'searchDepartmentUser',
160
+ // 公司根节点信息
161
+ tenantInfo: {},
162
+ activeTab: 'orgTree', // 当前页签
163
+ isShowGroupTree: true,
164
+ memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
165
+ // 记忆选择数据, 搜索框获得焦点后,下拉显示最近选中的10个人,倒序排列,最后选中的在最上面显示。
166
+ memoryCacheData: [],
167
+ ElIconSearch
168
+ }
169
+ },
170
+ name: 'InlineDepartmentUserMultiTree',
171
+ components: {
172
+ UserResult,
173
+ Menu,
174
+ Tickets,
175
+ User,
176
+ Calendar,
177
+ GroupUserMultipleTree,
178
+ GroupUser
179
+ },
180
+ props: {
181
+ // 显示指定部门节点及其子节点,不传该属性,表示显示整个组织结构树
182
+ departmentInfo: {
183
+ type: Array,
184
+ default: null
185
+ },
186
+ // 弹框的高度
187
+ height: {
188
+ type: String,
189
+ default: '300px'
190
+ },
191
+ // 是否需要显示虚拟用户
192
+ isNeedVirtualUser: {
193
+ type: Boolean,
194
+ default: false
195
+ },
196
+ // 多选用户树时,已选择用户id或登录名集合,多个之间以逗号隔开
197
+ selectUserInfo: {
198
+ type: [String, Number],
199
+ default: null
200
+ },
201
+ // 移除用户时,用户属性名称:id、loginName、email、telephone,默认是loginName
202
+ searchField: {
203
+ type: String,
204
+ default: 'loginName'
205
+ },
206
+ // 多选树时结果之间的分隔符,默认是逗号分隔
207
+ separator: {
208
+ type: String,
209
+ default: ','
210
+ }
211
+ },
212
+ computed: {},
213
+ watch: {
214
+ filterText(val) {
215
+ if (!val) {
216
+ this.searchValue = val
217
+ // 清空查询内容时,重新加载整个树
218
+ if (this.departmentInfo && this.departmentInfo.length > 0) {
219
+ // 加载指定部门时,展开公司节点
220
+ this.loadPointDepartments()
221
+ } else {
222
+ // 加载整个组织结构树时,展开公司节点
223
+ this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
224
+ }
225
+ }
226
+ }
227
+ },
228
+ created() {
229
+ this.initSelectUsers(this.searchField, this.selectUserInfo, this.separator).then((selectUsers) => {
230
+ if (selectUsers) {
231
+ this.selectResult = selectUsers
232
+ }
233
+ })
234
+ },
235
+ mounted() {
236
+ var searchDepartmentUser = localStorage.getObject(this.searchStoreKey)
237
+ if (searchDepartmentUser) {
238
+ this.restaurants = searchDepartmentUser
239
+ } else {
240
+ this.restaurants = []
241
+ }
242
+ this.getMemoryCacheData('departmentUser')
243
+ },
244
+ methods: {
245
+ ...utils,
246
+ ...departmentUserTreeMultiService,
247
+ ...memoryCacheUtils,
248
+ // 将查询结果中指定用户添加到已选择用户集合中
249
+ selectUser(index, user) {
250
+ if (!this.isContainAllUser()) {
251
+ const containUsers = this.selectResult.filter(this.filterUser(user))
252
+ if (containUsers && containUsers.length === 0) {
253
+ // 如果已选结果中不包含当前用户,则添加
254
+ // 将查询结果中的用户复制到已选择用户集合中
255
+ user.tenantCode = this.tenantInfo.code
256
+ user.tenantName = this.tenantInfo.tenantName
257
+ this.selectResult.push(user)
258
+ // 搜索选中记忆
259
+ this.setMemoryCacheData(user, 'departmentUser')
260
+ }
261
+ } else {
262
+ this.alertByAllUser()
263
+ }
264
+ },
265
+ // 从已选择用户集合中移除指定用户,并添加到查询结果集合中
266
+ removeUser(index, user) {
267
+ // 表示是在组织结构树页面,需要将树的人员节点的选中状态去掉
268
+ if (user.nodeId) {
269
+ const nodeId = user.nodeId
270
+ if (this.$refs.deparmentUserTree && nodeId) {
271
+ this.$refs.deparmentUserTree.setChecked(nodeId, false)
272
+ }
273
+ } else {
274
+ if (this.$refs.deparmentUserTree) {
275
+ // 通过查询结果添加的用户,在返回到组织结构树时,也选中了该用户,在移除该用户时,需要去掉复选框的选中状态
276
+ const checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
277
+ const currentCheckedUserNodeIds = checkedKeys.filter(this.filterUserNode(user))
278
+ if (currentCheckedUserNodeIds.length > 0) {
279
+ // 表示当前用户是选中的状态,需要去掉
280
+ currentCheckedUserNodeIds.forEach((userNodeId) => {
281
+ this.$refs.deparmentUserTree.setChecked(userNodeId, false)
282
+ })
283
+ }
284
+ }
285
+ }
286
+ this.selectResult = this.removeRow(this.selectResult, user)
287
+ if (!this.selectResult || this.selectResult.length === 0) {
288
+ // 已选结果面板没有内容,则左侧树节点也不要有选中节点了
289
+ if (this.$refs.deparmentUserTree) {
290
+ this.$refs.deparmentUserTree.setCheckedKeys([])
291
+ }
292
+ }
293
+ },
294
+ filterUserNode(queryUser) {
295
+ return (userNodeId) => {
296
+ // 用户节点的id的分隔符,USER~departmentId~userId
297
+ const nodeIdSeparator = '~'
298
+ const userId = userNodeId.substring(userNodeId.lastIndexOf(nodeIdSeparator) + 1)
299
+ return userId === queryUser.id + ''
300
+ }
301
+ },
302
+ // handleSelect(item) {
303
+ // this.handleSelectUtil(item, localStorage)
304
+ // },
305
+ search(value) {
306
+ this.searchValue = value
307
+ let mySearchValue = value
308
+ if (mySearchValue) {
309
+ mySearchValue = mySearchValue.trim()
310
+ }
311
+ this.searchParam.searchValue = mySearchValue
312
+ this.searchParam.departmentInfo = this.departmentInfo
313
+ // TODO: 查询的信息,不需要该属性了,默认自动匹配姓名、登录名等
314
+ // this.searchParam.userField = this.searchField
315
+ // 后台查询部门,并拼接树节点
316
+ this.filterAppendNodes(value)
317
+ },
318
+ // 点击查询按钮调用的方法
319
+ clickSearch() {
320
+ this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
321
+ this.search(this.filterText)
322
+ },
323
+ handleCheckChange(data, checked, childrenChecked) {
324
+ if (this.isUserNode(data)) {
325
+ // 是否是人员节点
326
+ if (checked) {
327
+ // 当前节点是否被选中
328
+ const user = JSON.parse(data.data)
329
+ const selectUser = this.packageSelectUser(user)
330
+ if (selectUser) {
331
+ this.selectResult.push(selectUser)
332
+ // 搜索选中记忆
333
+ this.setMemoryCacheData(user, 'departmentUser')
334
+ }
335
+ }
336
+ }
337
+ },
338
+ // 封装已选人员结果
339
+ packageSelectUser(user) {
340
+ if (!this.isContainAllUser()) {
341
+ const containUsers = this.selectResult.filter(this.filterUser(user))
342
+ if (containUsers && containUsers.length === 0) {
343
+ user.tenantName = this.tenantInfo.tenantName
344
+ user.tenantCode = this.tenantInfo.code
345
+ // 表示集合中不存在该用户,则封装该用户
346
+ var selectUser = {
347
+ id: user.id,
348
+ name: user.name,
349
+ zhName: user.name,
350
+ loginName: user.loginName,
351
+ email: user.email,
352
+ telephone: user.telephone,
353
+ mainDepartmentName: user.mainDepartmentName,
354
+ subCompanyName: user.subCompanyName,
355
+ user: user,
356
+ enName: user.enName,
378
357
  superiorDeptNameFullPath: user.superiorDeptNameFullPath
379
- }
380
- return selectUser
381
- }
382
- return null
383
- } else {
384
- this.alertByAllUser()
385
- }
386
- },
387
- isContainAllUser() {
388
- if (this.selectResult.length > 0) {
389
- return this.selectResult[0].id === this.tenantNodeId
390
- }
391
- return false
392
- },
393
- // 选中了组织结构树的根节点
394
- packageAllUserToResult() {
395
- if (!this.isContainAllUser()) {
396
- // 表示集合中不存在该用户,则封装该用户
397
- var allUser = {
398
- id: this.tenantNodeId,
399
- name: '所有用户',
400
- }
401
- return allUser
402
- }
403
- return null
404
- },
405
- // 判断用户是否存在的过滤器
406
- filterUser(queryUser) {
407
- return (user) => {
408
- return user.id === queryUser.id
409
- }
410
- },
411
- // 点击复选框时处理
412
- handleCheckNode(data, checkObj) {
413
- if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
414
- if (!this.isContainAllUser()) {
415
- // 如果没有选择所有用户,则可以继续选择用户
416
- this.checkedNodeToSelectResult(data)
417
- } else {
418
- // 如果已选择所有用户,提示用户,先移除所有用户
419
- this.alertByAllUser()
420
- }
421
- } else {
422
- this.cancelChildCheckedNodes(data)
423
- }
424
- },
425
- // 由于选择了所有用户,再次选择时的提示信息
426
- alertByAllUser() {
427
- this.$alert(
428
- this.$t(
429
- 'imatrixUIMessage.pleaseRemoveallpersonnelBeforeSelectingSpecificPersonnel'
430
- ),
431
- this.$t('imatrixUIMessage.tips'),
432
- {
433
- confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
434
- }
435
- ).then(() => {
436
- if (this.$refs.deparmentUserTree) {
437
- this.$refs.deparmentUserTree.setCheckedKeys([])
438
- }
439
- })
440
- },
441
- // 选中树节点处理
442
- checkedNodeToSelectResult(data) {
443
- if (this.isSelectTenantNode(data.id)) {
444
- // 如果选中了公司节点,表示选择了所有人
445
- const selectUser = this.packageAllUserToResult()
446
- if (selectUser) {
447
- this.selectResult = []
448
- selectUser.nodeId = this.tenantNodeId + ''
449
- this.selectResult.push(selectUser)
450
- }
451
- } else {
452
- this.checkedNode(data)
453
- }
454
- },
455
- // 取消当前节点及其子节点的选中状态
456
- cancelCheckedNodeAndChildren(data) {
457
- if (data.id !== this.tenantNodeId) {
458
- // 如果当前节点不是公司节点,需要将公司节点的选中状态去掉
459
- this.$refs.deparmentUserTree.setChecked(this.tenantNodeId + '', false)
460
- }
461
- const children = data.children
462
- if (children) {
463
- children.forEach((nodeData) => {
464
- // 取消节点的选中状态
465
- this.$refs.deparmentUserTree.setChecked(nodeData.nodeId, false)
466
- // 递归取消子子节点的选中状态
467
- this.cancelCheckedNodeAndChildren(nodeData)
468
- })
469
- }
470
- },
471
- // 勾选节点时的操作
472
- checkedNode(data) {
473
- // 勾选当前节点
474
- const isExpand =
475
- this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded
476
- if (isExpand) {
477
- // 如果已展开,不需要再走后台获得其子节点。只需要选中已有子节点
478
- // 选中当前节点及其子节点
479
- this.checkedChildrenUserNodes(data, data.children)
480
- } else {
481
- // 当前节点未展开。则再判断是否需要走后台加载叶子节点
482
- if (!data.leaf) {
483
- // 不是叶子节点
484
- if (data.children) {
485
- // 如果已经加载过该父节点的子节点,则只需展开,并选中人员节点
486
- this.staticCheckedUserNodes(data)
487
- } else {
488
- // 没有加载过该父节点的子节点时,需要走后台获得该父节点的子节点,并展开子节点
489
- this.dynamicCheckedUserNodes(data)
490
- }
491
- }
492
- }
493
- },
494
- // 取消当前节点的子节点的勾选状态
495
- cancelChildCheckedNodes(data) {
496
- const children = data.children
497
- if (children) {
498
- children.forEach((nodeData) => {
499
- // 取消节点的选中状态
500
- this.$refs.deparmentUserTree.setChecked(nodeData.nodeId, false)
501
- // 递归取消子节点的孩子节点的选中状态
502
- this.cancelChildCheckedNodes(nodeData)
503
- })
504
- }
505
- },
506
- // 勾选指定节点及其下的所有用户节点
507
- checkedChildrenUserNodes(data, children) {
508
- // 勾选指定节点
509
- // 勾选指定节点下的用户节点
510
- if (children) {
511
- const childrenDepartmentIds = []
512
- children.forEach((childData) => {
513
- if (childData.nodeType === 'USER') {
514
- // 勾选用户节点
515
- this.$refs.deparmentUserTree.setChecked(childData.nodeId, true)
516
- const user = JSON.parse(childData.data)
517
- const selectUser = this.packageSelectUser(user)
518
- if (selectUser) {
519
- selectUser.nodeId = childData.nodeId
520
- this.selectResult.push(selectUser)
521
- }
522
- } else if (childData.nodeType === 'DEPARTMENT') {
523
- this.$refs.deparmentUserTree.setChecked(childData.nodeId, true)
524
- childrenDepartmentIds.push(childData.id)
525
- } else {
526
- this.$refs.deparmentUserTree.setChecked(childData.nodeId, false)
527
- }
528
- if (
529
- this.$refs.deparmentUserTree.store.nodesMap[childData.nodeId]
530
- .expanded
531
- ) {
532
- // 如果当前子节点已展开,则选中子节点的孩子节点中的用户节点
533
- this.checkedChildrenUserNodes(childData)
534
- }
535
- })
536
- // 封装所有子部门及孙子部门的用户
537
- this.packageChildrenDepartmentUsers(childrenDepartmentIds)
538
- }
539
- if (data.id === this.tenantNodeId) {
540
- // 如果是公司节点,清除其它所有节点的选中状态,只选中公司节点,表示选择了所有用户
541
- this.$refs.deparmentUserTree.setCheckedKeys([])
542
- }
543
- // 选中当前点击的节点,即使当前点击的是非用户节点也要选中
544
- this.$refs.deparmentUserTree.setChecked(data.nodeId, true)
545
- },
546
- // 封装所有子部门及孙子部门的用户
547
- packageChildrenDepartmentUsers(childrenDepartmentIds) {
548
- if (childrenDepartmentIds && childrenDepartmentIds.length > 0) {
549
- this.getChildrenDepartmentUsers(childrenDepartmentIds).then((users) => {
550
- users.forEach((user) => {
551
- const selectUser = this.packageSelectUser(user)
552
- if (selectUser) {
553
- this.selectResult.push(selectUser)
554
- }
555
- })
556
- })
557
- }
558
- },
559
- // 选中非叶子类型的部门节点时,已加载过该节点下的子节点,只需展开该部门,且选中用户节点
560
- staticCheckedUserNodes(data) {
561
- // 展开当前选中的节点
562
- this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = true
563
- // 选中用户节点
564
- this.checkedChildrenUserNodes(data, data.children)
565
- },
566
- // 多选树时,点击节点处理复选框的选中状态
567
- handleNodeClick(data, node, nodeTree) {
568
- var checkedKeys = []
569
- if (this.$refs.deparmentUserTree) {
570
- checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
571
- }
572
- if (checkedKeys.indexOf(data.nodeId) > -1) {
573
- // 表示当前节点是选中状态,则需要取消其选中状态
574
- // 取消当前节点的勾选状态
575
- this.$refs.deparmentUserTree.setChecked(data.nodeId, false)
576
- // 取消当前节点的子节点的勾选状态
577
- this.cancelChildCheckedNodes(data)
578
- // 取消选中状态时,保持节点是展开的状态,不要折叠
579
- this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = true
580
- } else {
581
- // 表示当前节点不是选中的状态,需要勾选该节点
582
- if (!this.isContainAllUser()) {
583
- if (this.isSelectTenantNode(data.id)) {
584
- // 如果选中了公司节点,表示选择了所有人
585
- const selectUser = this.packageAllUserToResult()
586
- if (selectUser) {
587
- this.selectResult = []
588
- selectUser.nodeId = this.tenantNodeId + ''
589
- this.selectResult.push(selectUser)
590
- }
591
- this.staticCheckedUserNodes(data)
592
- } else {
593
- // 点击树节点时添加并展开节点会走loadNode方法,因为设置了树组件的expand-on-click-node属性为true
594
- const children = data.children
595
- if (children && children.length > 0) {
596
- // 表示加载过该节点,直接选中即可
597
- this.staticCheckedUserNodes(data)
598
- } else if (data.nodeType && data.nodeType === 'USER') {
599
- // 表示是用户节点需要选中该节点
600
- this.$refs.deparmentUserTree.setChecked(data.nodeId, true)
601
- } else {
602
- // 表示没有加载过该节点,是首次加载,需要走后台
603
- // 会走loadNode方法,因为设置了树组件的expand-on-click-node属性为true
604
- this.isClickNode = true
605
- }
606
- }
607
- } else {
608
- // 如果已选择所有用户,提示用户,先移除所有用户
609
- // 当前节点的当前展开状态
610
- const currentExpand =
611
- this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded
612
- // 当前节点的原展开状态
613
- const originalExpand = !currentExpand
614
- // 保持当前节点的原展开状态
615
- this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded =
616
- originalExpand
617
- this.alertByAllUser()
618
- }
619
- }
620
- },
621
- isUserNode(data) {
622
- // 当前节点不是公司节点,节点类型是用户类型时,表示点击的是用户节点
623
- return (
624
- data.id !== this.tenantNodeId &&
625
- data.nodeType &&
626
- data.nodeType === 'USER'
627
- )
628
- },
629
- confirmSelectUser() {
630
- // 选中的用户结果
631
- var selectNodeInfo = {
632
- userIds: [],
633
- userNames: [],
634
- userZhNames: [],
635
- userEnNames: [],
636
- loginNames: [],
637
- emails: [],
638
- telephones: [],
639
- users: [],
640
- }
641
- // 是否需要显示提示框,默认不显示
642
- var showTip = false
643
- if (this.selectResult.length === 0) {
644
- // 没有选择任何节点
645
- showTip = true
646
- } else {
647
- for (var i = 0; i < this.selectResult.length; i++) {
648
- var userData = this.selectResult[i]
649
- // 不存在该用户则放到结果集合中,去掉重复使用
650
- selectNodeInfo.userIds.push(userData.id)
651
- selectNodeInfo.loginNames.push(userData.loginName)
652
- if (userData.email && userData.email !== '') {
653
- selectNodeInfo.emails.push(userData.email)
654
- }
655
- if (userData.telephone && userData.telephone !== '') {
656
- selectNodeInfo.telephones.push(userData.telephone)
657
- }
658
- if (userData.user) {
659
- selectNodeInfo.users.push(userData.user)
660
- } else {
661
- selectNodeInfo.users.push(userData)
662
- }
663
- var name = userData.name
664
- selectNodeInfo.userZhNames.push(name)
665
- if (userData.enName && userData.enName.trim() !== '') {
666
- selectNodeInfo.userEnNames.push(userData.enName)
667
- name = name + '(' + userData.enName + ')'
668
- } else {
669
- selectNodeInfo.userEnNames.push('')
670
- }
671
- // if (this.containBranch && userData.subCompanyName) {
672
- // // 如果包含分支机构,则拼接分支机构名称
673
- // name = name + '' + userData.subCompanyName + ')'
674
- // }
675
- selectNodeInfo.userNames.push(name)
676
- }
677
- }
678
- if (selectNodeInfo.userIds.length > 0) {
679
- selectNodeInfo.containBranch = this.containBranch
680
- this.$emit('result', selectNodeInfo)
681
- } else {
682
- showTip = true
683
- }
684
- if (showTip) {
685
- this.$alert(
686
- this.$t('imatrixUIMessage.pleaseSelectPersonnel'),
687
- this.$t('imatrixUIMessage.tips'),
688
- {
689
- confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
690
- }
691
- )
692
- }
693
- },
694
- // 是否选中了公司节点
695
- isSelectTenantNode(dataId) {
696
- return (
697
- dataId === this.tenantNodeId &&
698
- (!this.departmentInfo || this.departmentInfo.length === 0)
699
- )
700
- },
701
- // 初始化树 或 点击三角展开节点时动态加载子节点
702
- loadNode(node, resolve) {
703
- var parentId = 0
704
- var parentNodeId = '0'
705
- if (node.level === 0) {
706
- // 表示初始化树
707
- parentId = 0
708
- parentNodeId = parentId + ''
709
- } else {
710
- parentId = node.data.id
711
- parentNodeId = node.data.nodeId
712
- }
713
- var checkedKeys = []
714
- if (this.$refs.deparmentUserTree) {
715
- checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
716
- }
717
- // 初始化部门人员树
718
- this.initLoadDepartment(
719
- parentId,
720
- node,
721
- resolve,
722
- checkedKeys,
723
- parentNodeId
724
- )
725
- },
726
- // 给节点添加自定义图标
727
- // renderContent(h, {node, data, store}) {
728
- // var className
729
- // if (node.data.id === -1 || node.data.branch) {
730
- // // node.id ===-1表示公司节点,node.branch表示是分支机构节点
731
- // className = 'Menu'
732
- // } else if (node.data.id === -2 || node.data.id === -3) {
733
- // // node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
734
- // className = 'Tickets'
735
- // } else if (node.data.nodeType === 'USER') {
736
- // className = 'User'
737
- // } else {
738
- // className = 'Date'
739
- // }
740
- // return h(
741
- // 'span',
742
- // h('el-icon', h(className)),
743
- // h('span', {title: node.label}, node.label)
744
- // )
745
- // // return (
746
- // // `<span>
747
- // // <i class={className}></i>
748
- // // <span title={node.label}>{node.label}</span>
749
- // // </span>`
750
- // // )
751
- // },
752
- getGroupUserResult(selectUser) {
753
- if (selectUser) {
754
- const result = this.selectResult.filter(user => user.id === selectUser.id)
755
- if (!result || result.length === 0) {
756
- this.selectResult.push(selectUser)
757
- }
758
- }
759
- },
760
- updateGroupTree() {
761
- this.isShowGroupTree = false
762
- const that = this
763
- setTimeout(() => {
764
- that.isShowGroupTree = true
765
- }, 10)
766
- }
767
- },
768
- emits: ['result'],
358
+ }
359
+ return selectUser
360
+ }
361
+ return null
362
+ } else {
363
+ this.alertByAllUser()
364
+ }
365
+ },
366
+ isContainAllUser() {
367
+ if (this.selectResult.length > 0) {
368
+ return this.selectResult[0].id === this.tenantNodeId
369
+ }
370
+ return false
371
+ },
372
+ // 选中了组织结构树的根节点
373
+ packageAllUserToResult() {
374
+ if (!this.isContainAllUser()) {
375
+ // 表示集合中不存在该用户,则封装该用户
376
+ var allUser = {
377
+ id: this.tenantNodeId,
378
+ name: '所有用户'
379
+ }
380
+ return allUser
381
+ }
382
+ return null
383
+ },
384
+ // 判断用户是否存在的过滤器
385
+ filterUser(queryUser) {
386
+ return (user) => {
387
+ return user.id === queryUser.id
388
+ }
389
+ },
390
+ // 点击复选框时处理
391
+ handleCheckNode(data, checkObj) {
392
+ if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
393
+ if (!this.isContainAllUser()) {
394
+ // 如果没有选择所有用户,则可以继续选择用户
395
+ this.checkedNodeToSelectResult(data)
396
+ } else {
397
+ // 如果已选择所有用户,提示用户,先移除所有用户
398
+ this.alertByAllUser()
399
+ }
400
+ } else {
401
+ this.cancelChildCheckedNodes(data)
402
+ }
403
+ },
404
+ // 由于选择了所有用户,再次选择时的提示信息
405
+ alertByAllUser() {
406
+ this.$alert(
407
+ this.$t('imatrixUIMessage.pleaseRemoveallpersonnelBeforeSelectingSpecificPersonnel'),
408
+ this.$t('imatrixUIMessage.tips'),
409
+ {
410
+ confirmButtonText: this.$t('imatrixUIPublicModel.sure')
411
+ }
412
+ ).then(() => {
413
+ if (this.$refs.deparmentUserTree) {
414
+ this.$refs.deparmentUserTree.setCheckedKeys([])
415
+ }
416
+ })
417
+ },
418
+ // 选中树节点处理
419
+ checkedNodeToSelectResult(data) {
420
+ if (this.isSelectTenantNode(data.id)) {
421
+ // 如果选中了公司节点,表示选择了所有人
422
+ const selectUser = this.packageAllUserToResult()
423
+ if (selectUser) {
424
+ this.selectResult = []
425
+ selectUser.nodeId = this.tenantNodeId + ''
426
+ this.selectResult.push(selectUser)
427
+ }
428
+ } else {
429
+ this.checkedNode(data)
430
+ }
431
+ },
432
+ // 取消当前节点及其子节点的选中状态
433
+ cancelCheckedNodeAndChildren(data) {
434
+ if (data.id !== this.tenantNodeId) {
435
+ // 如果当前节点不是公司节点,需要将公司节点的选中状态去掉
436
+ this.$refs.deparmentUserTree.setChecked(this.tenantNodeId + '', false)
437
+ }
438
+ const children = data.children
439
+ if (children) {
440
+ children.forEach((nodeData) => {
441
+ // 取消节点的选中状态
442
+ this.$refs.deparmentUserTree.setChecked(nodeData.nodeId, false)
443
+ // 递归取消子子节点的选中状态
444
+ this.cancelCheckedNodeAndChildren(nodeData)
445
+ })
446
+ }
447
+ },
448
+ // 勾选节点时的操作
449
+ checkedNode(data) {
450
+ // 勾选当前节点
451
+ const isExpand = this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded
452
+ if (isExpand) {
453
+ // 如果已展开,不需要再走后台获得其子节点。只需要选中已有子节点
454
+ // 选中当前节点及其子节点
455
+ this.checkedChildrenUserNodes(data, data.children)
456
+ } else {
457
+ // 当前节点未展开。则再判断是否需要走后台加载叶子节点
458
+ if (!data.leaf) {
459
+ // 不是叶子节点
460
+ if (data.children) {
461
+ // 如果已经加载过该父节点的子节点,则只需展开,并选中人员节点
462
+ this.staticCheckedUserNodes(data)
463
+ } else {
464
+ // 没有加载过该父节点的子节点时,需要走后台获得该父节点的子节点,并展开子节点
465
+ this.dynamicCheckedUserNodes(data)
466
+ }
467
+ }
468
+ }
469
+ },
470
+ // 取消当前节点的子节点的勾选状态
471
+ cancelChildCheckedNodes(data) {
472
+ const children = data.children
473
+ if (children) {
474
+ children.forEach((nodeData) => {
475
+ // 取消节点的选中状态
476
+ this.$refs.deparmentUserTree.setChecked(nodeData.nodeId, false)
477
+ // 递归取消子节点的孩子节点的选中状态
478
+ this.cancelChildCheckedNodes(nodeData)
479
+ })
480
+ }
481
+ },
482
+ // 勾选指定节点及其下的所有用户节点
483
+ checkedChildrenUserNodes(data, children) {
484
+ // 勾选指定节点
485
+ // 勾选指定节点下的用户节点
486
+ if (children) {
487
+ const childrenDepartmentIds = []
488
+ children.forEach((childData) => {
489
+ if (childData.nodeType === 'USER') {
490
+ // 勾选用户节点
491
+ this.$refs.deparmentUserTree.setChecked(childData.nodeId, true)
492
+ const user = JSON.parse(childData.data)
493
+ const selectUser = this.packageSelectUser(user)
494
+ if (selectUser) {
495
+ selectUser.nodeId = childData.nodeId
496
+ this.selectResult.push(selectUser)
497
+ }
498
+ } else if (childData.nodeType === 'DEPARTMENT') {
499
+ this.$refs.deparmentUserTree.setChecked(childData.nodeId, true)
500
+ childrenDepartmentIds.push(childData.id)
501
+ } else {
502
+ this.$refs.deparmentUserTree.setChecked(childData.nodeId, false)
503
+ }
504
+ if (this.$refs.deparmentUserTree.store.nodesMap[childData.nodeId].expanded) {
505
+ // 如果当前子节点已展开,则选中子节点的孩子节点中的用户节点
506
+ this.checkedChildrenUserNodes(childData)
507
+ }
508
+ })
509
+ // 封装所有子部门及孙子部门的用户
510
+ this.packageChildrenDepartmentUsers(childrenDepartmentIds)
511
+ }
512
+ if (data.id === this.tenantNodeId) {
513
+ // 如果是公司节点,清除其它所有节点的选中状态,只选中公司节点,表示选择了所有用户
514
+ this.$refs.deparmentUserTree.setCheckedKeys([])
515
+ }
516
+ // 选中当前点击的节点,即使当前点击的是非用户节点也要选中
517
+ this.$refs.deparmentUserTree.setChecked(data.nodeId, true)
518
+ },
519
+ // 封装所有子部门及孙子部门的用户
520
+ packageChildrenDepartmentUsers(childrenDepartmentIds) {
521
+ if (childrenDepartmentIds && childrenDepartmentIds.length > 0) {
522
+ this.getChildrenDepartmentUsers(childrenDepartmentIds).then((users) => {
523
+ users.forEach((user) => {
524
+ const selectUser = this.packageSelectUser(user)
525
+ if (selectUser) {
526
+ this.selectResult.push(selectUser)
527
+ }
528
+ })
529
+ })
530
+ }
531
+ },
532
+ // 选中非叶子类型的部门节点时,已加载过该节点下的子节点,只需展开该部门,且选中用户节点
533
+ staticCheckedUserNodes(data) {
534
+ // 展开当前选中的节点
535
+ this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = true
536
+ // 选中用户节点
537
+ this.checkedChildrenUserNodes(data, data.children)
538
+ },
539
+ // 多选树时,点击节点处理复选框的选中状态
540
+ handleNodeClick(data, node, nodeTree) {
541
+ var checkedKeys = []
542
+ if (this.$refs.deparmentUserTree) {
543
+ checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
544
+ }
545
+ if (checkedKeys.indexOf(data.nodeId) > -1) {
546
+ // 表示当前节点是选中状态,则需要取消其选中状态
547
+ // 取消当前节点的勾选状态
548
+ this.$refs.deparmentUserTree.setChecked(data.nodeId, false)
549
+ // 取消当前节点的子节点的勾选状态
550
+ this.cancelChildCheckedNodes(data)
551
+ // 取消选中状态时,保持节点是展开的状态,不要折叠
552
+ this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = true
553
+ } else {
554
+ // 表示当前节点不是选中的状态,需要勾选该节点
555
+ if (!this.isContainAllUser()) {
556
+ if (this.isSelectTenantNode(data.id)) {
557
+ // 如果选中了公司节点,表示选择了所有人
558
+ const selectUser = this.packageAllUserToResult()
559
+ if (selectUser) {
560
+ this.selectResult = []
561
+ selectUser.nodeId = this.tenantNodeId + ''
562
+ this.selectResult.push(selectUser)
563
+ }
564
+ this.staticCheckedUserNodes(data)
565
+ } else {
566
+ // 点击树节点时添加并展开节点会走loadNode方法,因为设置了树组件的expand-on-click-node属性为true
567
+ const children = data.children
568
+ if (children && children.length > 0) {
569
+ // 表示加载过该节点,直接选中即可
570
+ this.staticCheckedUserNodes(data)
571
+ } else if (data.nodeType && data.nodeType === 'USER') {
572
+ // 表示是用户节点需要选中该节点
573
+ this.$refs.deparmentUserTree.setChecked(data.nodeId, true)
574
+ } else {
575
+ // 表示没有加载过该节点,是首次加载,需要走后台
576
+ // 会走loadNode方法,因为设置了树组件的expand-on-click-node属性为true
577
+ this.isClickNode = true
578
+ }
579
+ }
580
+ } else {
581
+ // 如果已选择所有用户,提示用户,先移除所有用户
582
+ // 当前节点的当前展开状态
583
+ const currentExpand = this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded
584
+ // 当前节点的原展开状态
585
+ const originalExpand = !currentExpand
586
+ // 保持当前节点的原展开状态
587
+ this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = originalExpand
588
+ this.alertByAllUser()
589
+ }
590
+ }
591
+ },
592
+ isUserNode(data) {
593
+ // 当前节点不是公司节点,节点类型是用户类型时,表示点击的是用户节点
594
+ return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'USER'
595
+ },
596
+ confirmSelectUser() {
597
+ // 选中的用户结果
598
+ var selectNodeInfo = {
599
+ userIds: [],
600
+ userNames: [],
601
+ userZhNames: [],
602
+ userEnNames: [],
603
+ loginNames: [],
604
+ emails: [],
605
+ telephones: [],
606
+ users: []
607
+ }
608
+ // 是否需要显示提示框,默认不显示
609
+ var showTip = false
610
+ if (this.selectResult.length === 0) {
611
+ // 没有选择任何节点
612
+ showTip = true
613
+ } else {
614
+ for (var i = 0; i < this.selectResult.length; i++) {
615
+ var userData = this.selectResult[i]
616
+ // 不存在该用户则放到结果集合中,去掉重复使用
617
+ selectNodeInfo.userIds.push(userData.id)
618
+ selectNodeInfo.loginNames.push(userData.loginName)
619
+ if (userData.email && userData.email !== '') {
620
+ selectNodeInfo.emails.push(userData.email)
621
+ }
622
+ if (userData.telephone && userData.telephone !== '') {
623
+ selectNodeInfo.telephones.push(userData.telephone)
624
+ }
625
+ if (userData.user) {
626
+ selectNodeInfo.users.push(userData.user)
627
+ } else {
628
+ selectNodeInfo.users.push(userData)
629
+ }
630
+ var name = userData.name
631
+ selectNodeInfo.userZhNames.push(name)
632
+ if (userData.enName && userData.enName.trim() !== '') {
633
+ selectNodeInfo.userEnNames.push(userData.enName)
634
+ name = name + '(' + userData.enName + ')'
635
+ } else {
636
+ selectNodeInfo.userEnNames.push('')
637
+ }
638
+ // if (this.containBranch && userData.subCompanyName) {
639
+ // // 如果包含分支机构,则拼接分支机构名称
640
+ // name = name + '(' + userData.subCompanyName + ')'
641
+ // }
642
+ selectNodeInfo.userNames.push(name)
643
+ }
644
+ }
645
+ if (selectNodeInfo.userIds.length > 0) {
646
+ selectNodeInfo.containBranch = this.containBranch
647
+ this.$emit('result', selectNodeInfo)
648
+ } else {
649
+ showTip = true
650
+ }
651
+ if (showTip) {
652
+ this.$alert(this.$t('imatrixUIMessage.pleaseSelectPersonnel'), this.$t('imatrixUIMessage.tips'), {
653
+ confirmButtonText: this.$t('imatrixUIPublicModel.sure')
654
+ })
655
+ }
656
+ },
657
+ // 是否选中了公司节点
658
+ isSelectTenantNode(dataId) {
659
+ return dataId === this.tenantNodeId && (!this.departmentInfo || this.departmentInfo.length === 0)
660
+ },
661
+ // 初始化树 或 点击三角展开节点时动态加载子节点
662
+ loadNode(node, resolve) {
663
+ var parentId = 0
664
+ var parentNodeId = '0'
665
+ if (node.level === 0) {
666
+ // 表示初始化树
667
+ parentId = 0
668
+ parentNodeId = parentId + ''
669
+ } else {
670
+ parentId = node.data.id
671
+ parentNodeId = node.data.nodeId
672
+ }
673
+ var checkedKeys = []
674
+ if (this.$refs.deparmentUserTree) {
675
+ checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
676
+ }
677
+ // 初始化部门人员树
678
+ this.initLoadDepartment(parentId, node, resolve, checkedKeys, parentNodeId)
679
+ },
680
+ // 给节点添加自定义图标
681
+ // renderContent(h, {node, data, store}) {
682
+ // var className
683
+ // if (node.data.id === -1 || node.data.branch) {
684
+ // // node.id ===-1表示公司节点,node.branch表示是分支机构节点
685
+ // className = 'Menu'
686
+ // } else if (node.data.id === -2 || node.data.id === -3) {
687
+ // // node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
688
+ // className = 'Tickets'
689
+ // } else if (node.data.nodeType === 'USER') {
690
+ // className = 'User'
691
+ // } else {
692
+ // className = 'Date'
693
+ // }
694
+ // return h(
695
+ // 'span',
696
+ // h('el-icon', h(className)),
697
+ // h('span', {title: node.label}, node.label)
698
+ // )
699
+ // // return (
700
+ // // `<span>
701
+ // // <i class={className}></i>
702
+ // // <span title={node.label}>{node.label}</span>
703
+ // // </span>`
704
+ // // )
705
+ // },
706
+ getGroupUserResult(selectUser) {
707
+ if (selectUser) {
708
+ const result = this.selectResult.filter((user) => user.id === selectUser.id)
709
+ if (!result || result.length === 0) {
710
+ this.selectResult.push(selectUser)
711
+ }
712
+ }
713
+ },
714
+ updateGroupTree() {
715
+ this.isShowGroupTree = false
716
+ const that = this
717
+ setTimeout(() => {
718
+ that.isShowGroupTree = true
719
+ }, 10)
720
+ }
721
+ },
722
+ emits: ['result']
769
723
  }
770
724
  </script>
771
725
 
772
726
  <style>
773
727
  .searchResult {
774
- color: red;
728
+ color: red;
775
729
  }
776
730
 
777
731
  .inline-select-custom {
778
- width: 100px;
732
+ width: 100px;
779
733
  }
780
734
 
781
735
  .inline-input-custom {
782
- width: 98%;
736
+ width: 98%;
783
737
  }
784
738
 
785
739
  .searchDepartmentUser {
786
- width: 250px;
740
+ width: 250px;
787
741
  }
788
742
 
789
743
  .el-autocomplete-suggestion.el-popper {
790
- min-width: 300px;
744
+ min-width: 300px;
791
745
  }
792
746
  </style>