agilebuilder-ui 1.1.41 → 1.1.42

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.
Files changed (28) hide show
  1. package/lib/{401-deb6f978.js → 401-89fd25ba.js} +1 -1
  2. package/lib/{404-ca0b33ee.js → 404-4264aeb1.js} +1 -1
  3. package/lib/{iframe-page-eb39ba95.js → iframe-page-4a8dcdbb.js} +1 -1
  4. package/lib/{index-a36c91b2.js → index-50fdf8ae.js} +4630 -4580
  5. package/lib/super-ui.css +1 -1
  6. package/lib/super-ui.js +1 -1
  7. package/lib/super-ui.umd.cjs +85 -85
  8. package/lib/{tab-content-iframe-index-094835e7.js → tab-content-iframe-index-16207fb9.js} +1 -1
  9. package/lib/{tab-content-index-92b24462.js → tab-content-index-8ae8c396.js} +1 -1
  10. package/lib/{tache-subprocess-history-0d32337a.js → tache-subprocess-history-110e29f2.js} +1 -1
  11. package/package.json +1 -1
  12. package/packages/fs-preview/src/fs-preview.vue +38 -29
  13. package/packages/fs-upload-new/src/fs-button-upload.vue +34 -1
  14. package/packages/fs-upload-new/src/fs-drag-upload.vue +43 -2
  15. package/packages/fs-upload-new/src/fs-preview-new.vue +6 -4
  16. package/packages/super-grid/src/custom-formatter.js +16 -10
  17. package/packages/super-grid/src/dynamic-input.vue +7 -2
  18. package/packages/super-grid/src/normal-column.vue +8 -4
  19. package/packages/super-grid/src/search-form-advancedQuery.vue +1 -1
  20. package/packages/super-grid/src/search-form-item.vue +23 -23
  21. package/packages/super-grid/src/search-form-open.vue +164 -158
  22. package/packages/super-grid/src/super-grid-service.js +141 -153
  23. package/packages/super-grid/src/super-grid.vue +43 -14
  24. package/packages/super-nine-grid/src/search-form.vue +465 -659
  25. package/packages/workgroup-tree-inline/src/workgroup-tree-inline.vue +515 -539
  26. package/packages/workgroup-user-tree-inline/src/workgroup-tree-inline-service.js +24 -44
  27. package/packages/workgroup-user-tree-inline/src/workgroup-user-tree-inline.vue +626 -665
  28. package/src/utils/permission.js +86 -9
package/packages/workgroup-tree-inline/src/workgroup-tree-inline.vue CHANGED
@@ -1,84 +1,86 @@
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="text-align: right; font-size: 12px">
7
- <el-autocomplete
8
- v-model="filterText"
9
- :fetch-suggestions="querySearch"
10
- :placeholder="$t('imatrixUIMessage.pleaseEnterTeamName')"
11
- :trigger-on-focus="false"
12
- class="inline-input inline-input-custom"
13
- select-when-unmatched
14
- @select="handleSelect"
15
- @keyup.enter="clickSearch"
16
- >
17
- <template v-slot:append>
18
- <el-button :icon="ElIconSearch" @click="clickSearch"/>
19
- </template>
20
- </el-autocomplete>
21
- </el-header>
22
- <el-main>
23
- <div
24
- v-if="!searchValue"
25
- style="
26
- padding-top: 5px;
27
- overflow: auto;
28
- width: auto;
29
- display: inline-block !important;
30
- "
31
- >
32
- <el-tree
33
- ref="workgroupTree"
34
- :filter-node-method="filterNode"
35
- :load="loadNode"
36
- :props="defaultProps"
37
- :show-checkbox="multiple"
38
- lazy
39
- node-key="id"
40
- @check="handleCheckNode"
41
- @node-click="handleNodeClick"
42
- >
43
- <template #default="{ node, data }">
44
- <span>
45
- <el-icon>
46
- <Menu v-if="node.data.id === -1"/>
47
- <Calendar v-else/>
48
- </el-icon>
49
- <span :class="data.nodeType && data.nodeType === 'WORKGROUP' && searchValue && data.name.indexOf(searchValue) > -1?'searchResult': '' " :title="node.label">
50
- {{ node.label }}
51
- </span>
52
- </span>
53
- </template>
54
- </el-tree>
55
- </div>
56
- <div
57
- v-if="searchValue && searchValue.length > 0"
58
- style="height: 100%; overflow: hidden"
59
- >
60
- <workgroup-result
61
- ref="workgroupResult"
62
- :grid-data="searchResult"
63
- :height="height"
64
- :is-search-result="true"
65
- :multiple="multiple"
66
- :select-result="selectResult"
67
- @addWorkgroup="addWorkgroup"
68
- @resultRowDblclick="resultRowDblclick"
69
- @selectResult="getSelectWorkgroup"
70
- />
71
- </div>
72
- </el-main>
73
- </el-container>
74
- </el-aside>
75
- <el-container v-if="multiple">
76
- <el-aside width="2px">
77
- <table
78
- border="1px"
79
- cellpadding="0"
80
- cellspacing="0"
81
- style="
2
+ <div>
3
+ <el-container style="height: 395px">
4
+ <el-aside width="430px">
5
+ <el-container style="height: 390px">
6
+ <el-header style="text-align: right; font-size: 12px">
7
+ <el-autocomplete
8
+ v-model="filterText"
9
+ :fetch-suggestions="querySearch"
10
+ :placeholder="$t('imatrixUIMessage.pleaseEnterTeamName')"
11
+ :trigger-on-focus="false"
12
+ class="inline-input inline-input-custom"
13
+ select-when-unmatched
14
+ @select="handleSelect"
15
+ @keyup.enter="clickSearch"
16
+ >
17
+ <template v-slot:append>
18
+ <el-button :icon="ElIconSearch" @click="clickSearch" />
19
+ </template>
20
+ </el-autocomplete>
21
+ </el-header>
22
+ <el-main>
23
+ <div
24
+ v-if="!searchValue"
25
+ style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
26
+ >
27
+ <el-tree
28
+ ref="workgroupTree"
29
+ :filter-node-method="filterNode"
30
+ :load="loadNode"
31
+ :props="defaultProps"
32
+ :show-checkbox="multiple"
33
+ lazy
34
+ node-key="id"
35
+ @check="handleCheckNode"
36
+ @node-click="handleNodeClick"
37
+ >
38
+ <template #default="{ node, data }">
39
+ <span>
40
+ <el-icon>
41
+ <Menu v-if="node.data.id === -1" />
42
+ <Calendar v-else />
43
+ </el-icon>
44
+ <span
45
+ :class="
46
+ data.nodeType &&
47
+ data.nodeType === 'WORKGROUP' &&
48
+ searchValue &&
49
+ data.name.indexOf(searchValue) > -1
50
+ ? 'searchResult'
51
+ : ''
52
+ "
53
+ :title="node.label"
54
+ >
55
+ {{ node.label }}
56
+ </span>
57
+ </span>
58
+ </template>
59
+ </el-tree>
60
+ </div>
61
+ <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
62
+ <workgroup-result
63
+ ref="workgroupResult"
64
+ :grid-data="searchResult"
65
+ :height="height"
66
+ :is-search-result="true"
67
+ :multiple="multiple"
68
+ :select-result="selectResult"
69
+ @addWorkgroup="addWorkgroup"
70
+ @resultRowDblclick="resultRowDblclick"
71
+ @selectResult="getSelectWorkgroup"
72
+ />
73
+ </div>
74
+ </el-main>
75
+ </el-container>
76
+ </el-aside>
77
+ <el-container v-if="multiple">
78
+ <el-aside width="2px">
79
+ <table
80
+ border="1px"
81
+ cellpadding="0"
82
+ cellspacing="0"
83
+ style="
82
84
  height: 100%;
83
85
  border-left-style: solid;
84
86
  border-bottom-style: none;
@@ -86,487 +88,461 @@
86
88
  border-top-style: none;
87
89
  border-left-color: #cccccc;
88
90
  "
89
- />
90
- </el-aside>
91
- <el-main style="padding: 10px">
92
- <div style="text-align: left; font-size: 16px">
93
- {{ $t('imatrixUIMessage.selectedWorkingGroup') }}:
94
- </div>
95
- <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
96
- <workgroup-result
97
- :grid-data="selectResult"
98
- :height="height"
99
- :is-search-result="false"
100
- :multiple="multiple"
101
- @removeWorkgroup="removeWorkgroup"
102
- @resultRowDblclick="resultRowDblclick"
103
- @selectResult="getSelectWorkgroup"
104
- />
105
- </div>
106
- </el-main>
107
- </el-container>
108
- </el-container>
109
- </div>
91
+ />
92
+ </el-aside>
93
+ <el-main style="padding: 10px">
94
+ <div style="text-align: left; font-size: 16px">{{ $t('imatrixUIMessage.selectedWorkingGroup') }}:</div>
95
+ <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
96
+ <workgroup-result
97
+ :grid-data="selectResult"
98
+ :height="height"
99
+ :is-search-result="false"
100
+ :multiple="multiple"
101
+ @removeWorkgroup="removeWorkgroup"
102
+ @resultRowDblclick="resultRowDblclick"
103
+ @selectResult="getSelectWorkgroup"
104
+ />
105
+ </div>
106
+ </el-main>
107
+ </el-container>
108
+ </el-container>
109
+ </div>
110
110
  </template>
111
111
 
112
112
  <script>
113
- import {Search as ElIconSearch} from '@element-plus/icons-vue'
114
- import {$emit} from '../../utils/gogocodeTransfer'
113
+ import { Search as ElIconSearch } from '@element-plus/icons-vue'
114
+ import { $emit } from '../../utils/gogocodeTransfer'
115
115
  import localStorage from '../../../src/utils/local-storage'
116
116
  import utils from '../../utils/utils'
117
117
  import workgroupTreeService from './workgroup-tree-service'
118
118
  import WorkgroupResult from './search-result.vue'
119
119
 
120
120
  export default {
121
- data() {
122
- return {
123
- filterText: '',
124
- defaultProps: {
125
- id: 'id',
126
- label: 'name',
127
- children: 'children',
128
- isLeaf: 'leaf',
129
- },
130
- // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给工作组，例如：部门1(分支1)
131
- containBranch: false,
132
- // 公司节点的id
133
- tenantNodeId: -1,
134
- // 查询的备选值
135
- restaurants: [],
136
- // 查询条件
137
- searchValue: null,
138
- // 工作组的查询结果
139
- searchResult: [],
140
- // 工作组的选中结果
141
- selectResult: [],
142
- searchStoreKey: 'searchWorkgroup',
143
- // 单选时，选择的工作组信息
144
- selectNodeInfo: null,
145
- selectWorkgroupData: null,
146
- // 公司根节点信息
147
- tenantInfo: {},
148
- ElIconSearch,
149
- }
150
- },
151
- name: 'InlineWorkgroupTree',
152
- components: {
153
- WorkgroupResult,
154
- },
155
- props: {
156
- // 是否是多选树，默认是true
157
- multiple: {
158
- type: Boolean,
159
- default: true,
160
- },
161
- // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
162
- branchInfo: {
163
- type: Array,
164
- default: null,
165
- },
166
- // 多选工作组树时，已选择工作组id或工作组名称或工作组编码集合，多个之间以逗号隔开
167
- selectGroupInfo: {
168
- type: [String, Number],
169
- default: null,
170
- },
171
- // 工作组属性名称：id、name、code，默认是id
172
- searchField: {
173
- type: String,
174
- default: 'code',
175
- },
176
- // 多选树时结果之间的分隔符，默认是逗号分隔
177
- separator: {
178
- type: String,
179
- default: ',',
121
+ data() {
122
+ return {
123
+ filterText: '',
124
+ defaultProps: {
125
+ id: 'id',
126
+ label: 'name',
127
+ children: 'children',
128
+ isLeaf: 'leaf'
129
+ },
130
+ // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给工作组，例如：部门1(分支1)
131
+ containBranch: false,
132
+ // 公司节点的id
133
+ tenantNodeId: -1,
134
+ // 查询的备选值
135
+ restaurants: [],
136
+ // 查询条件
137
+ searchValue: null,
138
+ // 工作组的查询结果
139
+ searchResult: [],
140
+ // 工作组的选中结果
141
+ selectResult: [],
142
+ searchStoreKey: 'searchWorkgroup',
143
+ // 单选时，选择的工作组信息
144
+ selectNodeInfo: null,
145
+ selectWorkgroupData: null,
146
+ // 公司根节点信息
147
+ tenantInfo: {},
148
+ ElIconSearch
149
+ }
150
+ },
151
+ name: 'InlineWorkgroupTree',
152
+ components: {
153
+ WorkgroupResult
154
+ },
155
+ props: {
156
+ // 是否是多选树，默认是true
157
+ multiple: {
158
+ type: Boolean,
159
+ default: true
160
+ },
161
+ // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
162
+ branchInfo: {
163
+ type: Array,
164
+ default: null
165
+ },
166
+ // 多选工作组树时，已选择工作组id或工作组名称或工作组编码集合，多个之间以逗号隔开
167
+ selectGroupInfo: {
168
+ type: [String, Number],
169
+ default: null
170
+ },
171
+ // 工作组属性名称：id、name、code，默认是id
172
+ searchField: {
173
+ type: String,
174
+ default: 'code'
175
+ },
176
+ // 多选树时结果之间的分隔符，默认是逗号分隔
177
+ separator: {
178
+ type: String,
179
+ default: ','
180
180
  },
181
181
  // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
182
182
  limitFilterColumn: {
183
183
  type: String,
184
184
  default: 'code'
185
185
  }
186
- },
187
- computed: {},
188
- watch: {
189
- filterText(val) {
190
- if (!val) {
191
- this.searchValue = val
192
- // 清空查询内容时，重新加载整个树
193
- this.loadWorkgroup(this.tenantNodeId)
194
- }
195
- },
196
- },
197
- created() {
198
- if(this.multiple){
199
- this.initSelectGroups(
200
- this.searchField,
201
- this.selectGroupInfo,
202
- this.separator
203
- ).then((selectGroups) => {
204
- if (selectGroups) {
205
- this.selectResult = selectGroups
206
- }
207
- })
208
- }
209
- },
210
- mounted() {
211
- var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
212
- if (searchWorkgroup) {
213
- this.restaurants = searchWorkgroup
214
- } else {
215
- this.restaurants = []
216
- }
217
- },
218
- methods: {
219
- ...utils,
220
- ...workgroupTreeService,
221
- // 将查询结果中指定工作组添加到已选择工作组集合中
222
- addWorkgroup(index, workgroup) {
223
- const containWorkgroups = this.selectResult.filter(
224
- this.filterWorkgroup(workgroup)
225
- )
226
- if (containWorkgroups && containWorkgroups.length === 0) {
227
- this.selectResult.push(workgroup)
228
- }
229
- },
230
- filterWorkgroup(queryWorkgroup) {
231
- return (workgroup) => {
232
- return workgroup.id === queryWorkgroup.id
233
- }
234
- },
235
- removeWorkgroup(index, workgroup) {
236
- if (this.$refs.workgroupTree) {
237
- // 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
238
- const checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
239
- const currentCheckedWorkgroupNodeIds = checkedKeys.filter(
240
- this.filterWorkgroupNode(workgroup)
241
- )
242
- if (currentCheckedWorkgroupNodeIds.length > 0) {
243
- // 表示当前工作组是选中的状态，需要去掉
244
- currentCheckedWorkgroupNodeIds.forEach((workgroupNodeId) => {
245
- this.$refs.workgroupTree.setChecked(workgroupNodeId, false)
246
- })
247
- }
248
- }
249
- this.selectResult = this.removeRow(this.selectResult, workgroup)
250
- if (!this.selectResult || this.selectResult.length === 0) {
251
- // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
252
- if (this.$refs.workgroupTree) {
253
- this.$refs.workgroupTree.setCheckedKeys([])
254
- }
255
- }
256
- },
257
- filterWorkgroupNode(queryWorkgroup) {
258
- return (workgroupNodeId) => {
259
- return workgroupNodeId === queryWorkgroup.id
260
- }
261
- },
262
- getSelectWorkgroup(workgroup) {
263
- this.packageSelectResult(workgroup)
264
- },
265
- resultRowDblclick(workgroup) {
266
- this.packageSelectResult(workgroup)
267
- $emit(this, 'result', this.selectNodeInfo)
268
- },
269
- packageSelectResult(workgroup) {
270
- workgroup.tenantCode = this.tenantInfo.code
271
- workgroup.tenantName = this.tenantInfo.tenantName
272
- const selectNodeInfo = {
273
- id: workgroup.id,
274
- name: workgroup.name,
275
- code: workgroup.code,
276
- subCompanyName: workgroup.subCompanyName,
277
- workgroup: workgroup,
278
- }
279
- // 表示是勾选单选按钮或 选中树节点
280
- this.selectNodeInfo = selectNodeInfo
281
- },
282
- handleSelect(item) {
283
- this.handleSelectUtil(item, localStorage)
284
- },
285
- search(value) {
286
- this.searchValue = value
287
- this.$refs.workgroupTree.filter(value)
288
- },
289
- // 点击查询按钮调用的方法
290
- clickSearch() {
291
- this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
292
- this.search(this.filterText)
293
- },
294
- filterNode(value, data, node) {
295
- if (!value) {
296
- return true
297
- } else {
298
- var workgroupName = data.name
299
- if (data.id === this.tenantNodeId) {
300
- // 表示是根节点公司节点
301
- return false
302
- } else if (this.containBranch) {
303
- // 如果包含分支，工作组节点显示的格式为：工作组名称(分支名称)
304
- workgroupName = workgroupName.substring(
305
- 0,
306
- workgroupName.lastIndexOf('(')
307
- )
308
- }
309
- return workgroupName.indexOf(value) !== -1
310
- }
311
- },
312
- // 点击复选框时处理
313
- handleCheckNode(data, checkObj) {
314
- if (checkObj.checkedKeys.indexOf(data.id) > -1) {
315
- // 表示正选中data节点
316
- if (data.id === this.tenantNodeId) {
317
- // 表示选中了公司节点
318
- this.checkedAllWorkgroups(data)
319
- } else {
320
- this.selectResult.push(JSON.parse(data.data))
321
- }
322
- } else {
323
- // 表示正取消选中data节点，同时要取消其子节点的选中状态
324
- if (data.id === this.tenantNodeId) {
325
- // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
326
- this.$refs.workgroupTree.setCheckedKeys([])
327
- } else {
328
- this.selectResult = this.removeRow(
329
- this.selectResult,
330
- JSON.parse(data.data)
331
- )
332
- }
333
- }
334
- },
335
- // 选中了根节点公司节点时，选中所有工作组
336
- checkedAllWorkgroups(root) {
337
- const children = root.children
338
- if (children) {
339
- children.forEach((workgroupNode) => {
340
- this.$refs.workgroupTree.setChecked(workgroupNode.id, true)
341
- })
342
- }
343
- },
344
- handleNodeClick(data, node, nodeTree) {
345
- if (this.multiple) {
346
- // 多选部门树时，处理点击节点事件
347
- this.clickNodeWhenMultiple(data)
348
- }
349
- this.selectSingleNode(data, false)
350
- },
351
- selectSingleNode(data, isClickOkBtn) {
352
- if (this.isWorkgroupNode(data) && !this.multiple) {
353
- // 点击的是工作组节点，并且是单选树时，点击部门节点直接关闭弹框
354
- const workgroup = JSON.parse(data.data)
355
- workgroup.tenantCode = this.tenantInfo.code
356
- workgroup.tenantName = this.tenantInfo.tenantName
357
- var selectNodeInfo = {
358
- id: data.id,
359
- name: data.name,
360
- code: workgroup.code,
361
- containBranch: this.containBranch,
362
- workgroup: workgroup,
363
- }
364
- this.selectNodeInfo = selectNodeInfo
365
- if (isClickOkBtn === true) {
366
- // 点击确定按钮时才需要调result回调事件，关闭弹框
367
- $emit(this, 'result', selectNodeInfo)
368
- }
369
- }
370
- },
371
- // 多选树时，点击节点处理复选框的选中状态
372
- clickNodeWhenMultiple(data) {
373
- var checkedKeys = []
374
- if (this.$refs.workgroupTree) {
375
- checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
376
- }
377
- // 取消选中状态时，保持节点是展开的状态，不要折叠
378
- this.$refs.workgroupTree.store.nodesMap[data.id].expanded = true
379
- if (checkedKeys.indexOf(data.id) > -1) {
380
- // 表示当前节点是选中状态，则需要取消其选中状态
381
- // 取消当前节点的勾选状态
382
- this.$refs.workgroupTree.setChecked(data.id, false)
383
- if (data.id === this.tenantNodeId) {
384
- // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
385
- this.$refs.workgroupTree.setCheckedKeys([])
386
- } else {
387
- this.selectResult = this.removeRow(
388
- this.selectResult,
389
- JSON.parse(data.data)
390
- )
391
- }
392
- } else {
393
- // 表示当前节点不是选中的状态，需要勾选该节点
394
- this.$refs.workgroupTree.setChecked(data.id, true)
395
- if (data.id === this.tenantNodeId) {
396
- // 表示当前正选中根节点公司节点，则需要勾选所有节点的选中状态
397
- this.checkedAllWorkgroups(data)
398
- } else {
399
- this.selectResult.push(JSON.parse(data.data))
400
- }
401
- }
402
- },
403
- isWorkgroupNode(data) {
404
- // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
405
- return (
406
- data.id !== this.tenantNodeId &&
407
- data.nodeType &&
408
- data.nodeType === 'WORKGROUP'
409
- )
410
- },
411
- singleSetValue() {
412
- let showTip = false
413
- if (this.searchValue) {
414
- if (this.selectNodeInfo) {
415
- $emit(this, 'result', this.selectNodeInfo)
416
- } else {
417
- showTip = true
418
- }
419
- } else {
420
- const data = this.$refs.workgroupTree.getCurrentNode()
421
- if (data && data !== null && this.isWorkgroupNode(data)) {
422
- this.selectSingleNode(data, true)
423
- } else {
424
- showTip = true
425
- }
426
- }
427
- this.showTip(showTip)
428
- },
429
- multipleSetValue() {
430
- let showTip = false
431
- var selectNodeInfo = {
432
- ids: [],
433
- names: [],
434
- codes: [],
435
- workgroups: [],
436
- }
437
- if (this.searchValue) {
438
- if (this.selectResult.length > 0) {
439
- this.selectResult.forEach((workgroupData) => {
440
- const node = {
441
- id: workgroupData.id,
442
- name: workgroupData.name,
443
- code: workgroupData.code,
444
- }
445
- this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
446
- })
447
- $emit(this, 'result', selectNodeInfo)
448
- } else {
449
- showTip = true
450
- }
451
- } else {
452
- var nodes = this.$refs.workgroupTree.getCheckedNodes()
453
- if (nodes) {
454
- if (nodes.length === 0) {
455
- // 没有选择任何节点
456
- showTip = true
457
- } else {
458
- for (var i = 0; i < nodes.length; i++) {
459
- var node = nodes[i]
460
- if (node.id !== this.tenantNodeId) {
461
- // 不是公司根节点，表示是工作组节点，直接存到结果集合中
462
- // node.data是部门对象的json字符串信息，通过JSON.parse(node.data)将json字符串转为对象
463
- const workgroupData = JSON.parse(node.data)
464
- this.addSelectedWorkgroupInfo(
465
- selectNodeInfo,
466
- node,
467
- workgroupData
468
- )
469
- }
470
- }
471
- if (selectNodeInfo.ids.length > 0) {
472
- $emit(this, 'result', selectNodeInfo)
473
- } else {
474
- showTip = true
475
- }
476
- }
477
- } else {
478
- showTip = true
479
- }
480
- }
481
- this.showTip(showTip)
482
- },
483
- selectWorkgroup() {
484
- if (this.multiple) {
485
- this.multipleSetValue()
486
- } else {
487
- this.singleSetValue()
488
- }
489
- },
490
- showTip(showTip) {
491
- // 是否需要显示提示框，默认不显示
492
- if (showTip) {
493
- this.$alert(
494
- this.$t('imatrixUIMessage.pleaseSelectATeam'),
495
- this.$t('imatrixUIMessage.tips'),
496
- {
497
- confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
498
- }
499
- )
500
- }
501
- },
502
- // 将选中的部门节点添加到结果集合中
503
- addSelectedWorkgroupInfo(result, node, workgroup) {
504
- workgroup.tenantCode = this.tenantInfo.code
505
- workgroup.tenantName = this.tenantInfo.tenantName
506
- result.containBranch = this.containBranch
507
- result.ids.push(node.id)
508
- result.workgroups.push(workgroup)
509
- result.codes.push(workgroup.code)
510
- result.names.push(node.name)
511
- },
512
- // 初始化树 或 点击三角展开节点时动态加载子节点
513
- loadNode(node, resolve) {
514
- var parentId = 0
515
- if (node.level === 0) {
516
- // 表示初始化树
517
- parentId = 0
518
- } else {
519
- parentId = node.data.id
520
- }
521
- var checkedKeys = []
522
- if (this.$refs.workgroupTree) {
523
- checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
524
- }
525
- // 初始化部门树
526
- this.initLoad(parentId, node, resolve, checkedKeys)
527
- },
528
- // 给节点添加自定义图标
529
- // renderContent(h, {node, data, store}) {
530
- // var className
531
- // if (node.data.id === -1) {
532
- // // node.id ===-1表示公司节点，node.branch表示是分支机构节点
533
- // className = 'Menu'
534
- // } else {
535
- // // 表示是工作组节点
536
- // className = 'Date'
537
- // }
538
- // if (
539
- // data.nodeType &&
540
- // data.nodeType === 'WORKGROUP' &&
541
- // this.searchValue &&
542
- // data.name.indexOf(this.searchValue) > -1
543
- // ) {
544
- // return h(
545
- // 'span',
546
- // h('el-icon', h(className)),
547
- // h('span', {class: searchResult, title: node.label}, node.label)
548
- // )
549
- // // 如果是查询条件
550
- // // return `<span><i class={className}></i><span class="searchResult" title={node.label}>{node.label}</span></span>`
551
- // }
552
- // return h(
553
- // 'span',
554
- // h('el-icon', h(className)),
555
- // h('span', {title: node.label}, node.label)
556
- // )
557
- // // return `<span><i class={className}></i><span title={node.label}>{node.label}</span></span>`
558
- // },
559
- },
560
- emits: ['result'],
186
+ },
187
+ computed: {},
188
+ watch: {
189
+ filterText(val) {
190
+ if (!val) {
191
+ this.searchValue = val
192
+ // 清空查询内容时，重新加载整个树
193
+ this.loadWorkgroup(this.tenantNodeId)
194
+ }
195
+ }
196
+ },
197
+ created() {
198
+ if (this.multiple) {
199
+ this.initSelectGroups(this.searchField, this.selectGroupInfo, this.separator).then((selectGroups) => {
200
+ if (selectGroups) {
201
+ this.selectResult = selectGroups
202
+ }
203
+ })
204
+ }
205
+ },
206
+ mounted() {
207
+ var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
208
+ if (searchWorkgroup) {
209
+ this.restaurants = searchWorkgroup
210
+ } else {
211
+ this.restaurants = []
212
+ }
213
+ },
214
+ methods: {
215
+ ...utils,
216
+ ...workgroupTreeService,
217
+ // 将查询结果中指定工作组添加到已选择工作组集合中
218
+ addWorkgroup(index, workgroup) {
219
+ const containWorkgroups = this.selectResult.filter(this.filterWorkgroup(workgroup))
220
+ if (containWorkgroups && containWorkgroups.length === 0) {
221
+ this.selectResult.push(workgroup)
222
+ }
223
+ },
224
+ filterWorkgroup(queryWorkgroup) {
225
+ return (workgroup) => {
226
+ return workgroup.id === queryWorkgroup.id
227
+ }
228
+ },
229
+ removeWorkgroup(index, workgroup) {
230
+ if (this.$refs.workgroupTree) {
231
+ // 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
232
+ const checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
233
+ const currentCheckedWorkgroupNodeIds = checkedKeys.filter(this.filterWorkgroupNode(workgroup))
234
+ if (currentCheckedWorkgroupNodeIds.length > 0) {
235
+ // 表示当前工作组是选中的状态，需要去掉
236
+ currentCheckedWorkgroupNodeIds.forEach((workgroupNodeId) => {
237
+ this.$refs.workgroupTree.setChecked(workgroupNodeId, false)
238
+ })
239
+ }
240
+ }
241
+ this.selectResult = this.removeRow(this.selectResult, workgroup)
242
+ if (!this.selectResult || this.selectResult.length === 0) {
243
+ // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
244
+ if (this.$refs.workgroupTree) {
245
+ this.$refs.workgroupTree.setCheckedKeys([])
246
+ }
247
+ }
248
+ },
249
+ filterWorkgroupNode(queryWorkgroup) {
250
+ return (workgroupNodeId) => {
251
+ return workgroupNodeId === queryWorkgroup.id
252
+ }
253
+ },
254
+ getSelectWorkgroup(workgroup) {
255
+ this.packageSelectResult(workgroup)
256
+ },
257
+ resultRowDblclick(workgroup) {
258
+ this.packageSelectResult(workgroup)
259
+ $emit(this, 'result', this.selectNodeInfo)
260
+ },
261
+ packageSelectResult(workgroup) {
262
+ workgroup.tenantCode = this.tenantInfo.code
263
+ workgroup.tenantName = this.tenantInfo.tenantName
264
+ const selectNodeInfo = {
265
+ id: workgroup.id,
266
+ name: workgroup.name,
267
+ code: workgroup.code,
268
+ subCompanyName: workgroup.subCompanyName,
269
+ workgroup: workgroup
270
+ }
271
+ // 表示是勾选单选按钮或 选中树节点
272
+ this.selectNodeInfo = selectNodeInfo
273
+ },
274
+ handleSelect(item) {
275
+ this.handleSelectUtil(item, localStorage)
276
+ },
277
+ search(value) {
278
+ this.searchValue = value
279
+ this.$refs.workgroupTree.filter(value)
280
+ },
281
+ // 点击查询按钮调用的方法
282
+ clickSearch() {
283
+ this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
284
+ this.search(this.filterText)
285
+ },
286
+ filterNode(value, data, node) {
287
+ if (!value) {
288
+ return true
289
+ } else {
290
+ var workgroupName = data.name
291
+ if (data.id === this.tenantNodeId) {
292
+ // 表示是根节点公司节点
293
+ return false
294
+ } else if (this.containBranch) {
295
+ // 如果包含分支，工作组节点显示的格式为：工作组名称(分支名称)
296
+ workgroupName = workgroupName.substring(0, workgroupName.lastIndexOf('('))
297
+ }
298
+ return workgroupName.indexOf(value) !== -1
299
+ }
300
+ },
301
+ // 点击复选框时处理
302
+ handleCheckNode(data, checkObj) {
303
+ if (checkObj.checkedKeys.indexOf(data.id) > -1) {
304
+ // 表示正选中data节点
305
+ if (data.id === this.tenantNodeId) {
306
+ // 表示选中了公司节点
307
+ this.checkedAllWorkgroups(data)
308
+ } else {
309
+ this.selectResult.push(JSON.parse(data.data))
310
+ }
311
+ } else {
312
+ // 表示正取消选中data节点，同时要取消其子节点的选中状态
313
+ if (data.id === this.tenantNodeId) {
314
+ // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
315
+ this.$refs.workgroupTree.setCheckedKeys([])
316
+ } else {
317
+ this.selectResult = this.removeRow(this.selectResult, JSON.parse(data.data))
318
+ }
319
+ }
320
+ },
321
+ // 选中了根节点公司节点时，选中所有工作组
322
+ checkedAllWorkgroups(root) {
323
+ const children = root.children
324
+ if (children) {
325
+ children.forEach((workgroupNode) => {
326
+ this.$refs.workgroupTree.setChecked(workgroupNode.id, true)
327
+ })
328
+ }
329
+ },
330
+ handleNodeClick(data, node, nodeTree) {
331
+ if (this.multiple) {
332
+ // 多选部门树时，处理点击节点事件
333
+ this.clickNodeWhenMultiple(data)
334
+ }
335
+ this.selectSingleNode(data, false)
336
+ },
337
+ selectSingleNode(data, isClickOkBtn) {
338
+ if (this.isWorkgroupNode(data) && !this.multiple) {
339
+ // 点击的是工作组节点，并且是单选树时，点击部门节点直接关闭弹框
340
+ const workgroup = JSON.parse(data.data)
341
+ workgroup.tenantCode = this.tenantInfo.code
342
+ workgroup.tenantName = this.tenantInfo.tenantName
343
+ var selectNodeInfo = {
344
+ id: data.id,
345
+ name: data.name,
346
+ code: workgroup.code,
347
+ containBranch: this.containBranch,
348
+ workgroup: workgroup
349
+ }
350
+ this.selectNodeInfo = selectNodeInfo
351
+ if (isClickOkBtn === true) {
352
+ // 点击确定按钮时才需要调result回调事件，关闭弹框
353
+ $emit(this, 'result', selectNodeInfo)
354
+ }
355
+ }
356
+ },
357
+ // 多选树时，点击节点处理复选框的选中状态
358
+ clickNodeWhenMultiple(data) {
359
+ var checkedKeys = []
360
+ if (this.$refs.workgroupTree) {
361
+ checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
362
+ }
363
+ // 取消选中状态时，保持节点是展开的状态，不要折叠
364
+ this.$refs.workgroupTree.store.nodesMap[data.id].expanded = true
365
+ if (checkedKeys.indexOf(data.id) > -1) {
366
+ // 表示当前节点是选中状态，则需要取消其选中状态
367
+ // 取消当前节点的勾选状态
368
+ this.$refs.workgroupTree.setChecked(data.id, false)
369
+ if (data.id === this.tenantNodeId) {
370
+ // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
371
+ this.$refs.workgroupTree.setCheckedKeys([])
372
+ } else {
373
+ this.selectResult = this.removeRow(this.selectResult, JSON.parse(data.data))
374
+ }
375
+ } else {
376
+ // 表示当前节点不是选中的状态，需要勾选该节点
377
+ this.$refs.workgroupTree.setChecked(data.id, true)
378
+ if (data.id === this.tenantNodeId) {
379
+ // 表示当前正选中根节点公司节点，则需要勾选所有节点的选中状态
380
+ this.checkedAllWorkgroups(data)
381
+ } else {
382
+ this.selectResult.push(JSON.parse(data.data))
383
+ }
384
+ }
385
+ },
386
+ isWorkgroupNode(data) {
387
+ // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
388
+ return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'WORKGROUP'
389
+ },
390
+ singleSetValue() {
391
+ let showTip = false
392
+ if (this.searchValue) {
393
+ if (this.selectNodeInfo) {
394
+ $emit(this, 'result', this.selectNodeInfo)
395
+ } else {
396
+ showTip = true
397
+ }
398
+ } else {
399
+ const data = this.$refs.workgroupTree.getCurrentNode()
400
+ if (data && data !== null && this.isWorkgroupNode(data)) {
401
+ this.selectSingleNode(data, true)
402
+ } else {
403
+ showTip = true
404
+ }
405
+ }
406
+ this.showTip(showTip)
407
+ },
408
+ multipleSetValue() {
409
+ let showTip = false
410
+ var selectNodeInfo = {
411
+ ids: [],
412
+ names: [],
413
+ codes: [],
414
+ workgroups: []
415
+ }
416
+ if (this.searchValue) {
417
+ if (this.selectResult.length > 0) {
418
+ this.selectResult.forEach((workgroupData) => {
419
+ const node = {
420
+ id: workgroupData.id,
421
+ name: workgroupData.name,
422
+ code: workgroupData.code
423
+ }
424
+ this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
425
+ })
426
+ $emit(this, 'result', selectNodeInfo)
427
+ } else {
428
+ showTip = true
429
+ }
430
+ } else {
431
+ var nodes = this.$refs.workgroupTree.getCheckedNodes()
432
+ if (nodes) {
433
+ if (nodes.length === 0) {
434
+ // 没有选择任何节点
435
+ showTip = true
436
+ } else {
437
+ for (var i = 0; i < nodes.length; i++) {
438
+ var node = nodes[i]
439
+ if (node.id !== this.tenantNodeId) {
440
+ // 不是公司根节点，表示是工作组节点，直接存到结果集合中
441
+ // node.data是部门对象的json字符串信息，通过JSON.parse(node.data)将json字符串转为对象
442
+ const workgroupData = JSON.parse(node.data)
443
+ this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
444
+ }
445
+ }
446
+ if (selectNodeInfo.ids.length > 0) {
447
+ $emit(this, 'result', selectNodeInfo)
448
+ } else {
449
+ showTip = true
450
+ }
451
+ }
452
+ } else {
453
+ showTip = true
454
+ }
455
+ }
456
+ this.showTip(showTip)
457
+ },
458
+ selectWorkgroup() {
459
+ if (this.multiple) {
460
+ this.multipleSetValue()
461
+ } else {
462
+ this.singleSetValue()
463
+ }
464
+ },
465
+ showTip(showTip) {
466
+ // 是否需要显示提示框，默认不显示
467
+ if (showTip) {
468
+ this.$alert(this.$t('imatrixUIMessage.pleaseSelectATeam'), this.$t('imatrixUIMessage.tips'), {
469
+ confirmButtonText: this.$t('imatrixUIPublicModel.sure')
470
+ })
471
+ }
472
+ },
473
+ // 将选中的部门节点添加到结果集合中
474
+ addSelectedWorkgroupInfo(result, node, workgroup) {
475
+ workgroup.tenantCode = this.tenantInfo.code
476
+ workgroup.tenantName = this.tenantInfo.tenantName
477
+ result.containBranch = this.containBranch
478
+ result.ids.push(node.id)
479
+ result.workgroups.push(workgroup)
480
+ result.codes.push(workgroup.code)
481
+ result.names.push(node.name)
482
+ },
483
+ // 初始化树 或 点击三角展开节点时动态加载子节点
484
+ loadNode(node, resolve) {
485
+ var parentId = 0
486
+ if (node.level === 0) {
487
+ // 表示初始化树
488
+ parentId = 0
489
+ } else {
490
+ parentId = node.data.id
491
+ }
492
+ var checkedKeys = []
493
+ if (this.$refs.workgroupTree) {
494
+ checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
495
+ }
496
+ if (parentId === -1 && node.data.children && node.data.children.length > 0) {
497
+ // 表示初始化树时，已经加载过子节点了，如果子节点为空就再查下
498
+ resolve(node.data.children)
499
+ return
500
+ }
501
+ // 初始化部门树
502
+ this.initLoad(parentId, node, resolve, checkedKeys)
503
+ }
504
+ // 给节点添加自定义图标
505
+ // renderContent(h, {node, data, store}) {
506
+ // var className
507
+ // if (node.data.id === -1) {
508
+ // // node.id ===-1表示公司节点，node.branch表示是分支机构节点
509
+ // className = 'Menu'
510
+ // } else {
511
+ // // 表示是工作组节点
512
+ // className = 'Date'
513
+ // }
514
+ // if (
515
+ // data.nodeType &&
516
+ // data.nodeType === 'WORKGROUP' &&
517
+ // this.searchValue &&
518
+ // data.name.indexOf(this.searchValue) > -1
519
+ // ) {
520
+ // return h(
521
+ // 'span',
522
+ // h('el-icon', h(className)),
523
+ // h('span', {class: searchResult, title: node.label}, node.label)
524
+ // )
525
+ // // 如果是查询条件
526
+ // // return `<span><i class={className}></i><span class="searchResult" title={node.label}>{node.label}</span></span>`
527
+ // }
528
+ // return h(
529
+ // 'span',
530
+ // h('el-icon', h(className)),
531
+ // h('span', {title: node.label}, node.label)
532
+ // )
533
+ // // return `<span><i class={className}></i><span title={node.label}>{node.label}</span></span>`
534
+ // },
535
+ },
536
+ emits: ['result']
561
537
  }
562
538
  </script>
563
539
 
564
540
  <style>
565
541
  .searchResult {
566
- color: red;
542
+ color: red;
567
543
  }
568
544
 
569
545
  .inline-input-custom {
570
- width: 90%;
546
+ width: 90%;
571
547
  }
572
548
  </style>