adtec-core-package 0.3.4 → 0.3.6

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 (58) hide show
  1. package/README.en.md +36 -36
  2. package/package.json +59 -58
  3. package/src/api/BasicApi.ts +17 -17
  4. package/src/api/DocumentApi.ts +18 -18
  5. package/src/api/SysDictCacheApi.ts +26 -26
  6. package/src/api/SysUserApi.ts +35 -35
  7. package/src/api/framework.ts +12 -12
  8. package/src/assets/style/ant.scss +19 -19
  9. package/src/assets/style/index.less +180 -180
  10. package/src/components/ElFlex/ElFlex.vue +297 -297
  11. package/src/components/Search/ElSearch.vue +154 -150
  12. package/src/components/Table/ElTableColumnEdit.vue +218 -218
  13. package/src/components/Title/ElTitle.vue +49 -49
  14. package/src/components/autoToolTip/ElAutoToolTip.vue +61 -61
  15. package/src/components/baseEcharts/index.vue +48 -48
  16. package/src/components/business/userSelect.vue +412 -412
  17. package/src/components/upload/FileView.vue +158 -158
  18. package/src/components/upload/FileViewComponents.vue +57 -57
  19. package/src/config/ElementPlusConfig.ts +95 -95
  20. package/src/css/elementUI/autocomplete.scss +89 -89
  21. package/src/css/elementUI/common/var.scss +1549 -1549
  22. package/src/css/elementUI/date-picker/picker.scss +219 -219
  23. package/src/css/elementUI/drawer.scss +164 -164
  24. package/src/css/elementUI/table.scss +694 -694
  25. package/src/css/elementUI/tabs.scss +659 -659
  26. package/src/directives/vKeydown.ts +93 -93
  27. package/src/hooks/useDictHooks.ts +76 -76
  28. package/src/hooks/useEcharts.ts +58 -58
  29. package/src/hooks/useFileView.ts +34 -34
  30. package/src/hooks/useMessageHooks.ts +132 -132
  31. package/src/hooks/useResetRefHooks.ts +18 -18
  32. package/src/interface/BaseEntity.ts +28 -28
  33. package/src/interface/IMdmDept.ts +82 -82
  34. package/src/interface/IOrgDeptInfo.ts +12 -12
  35. package/src/interface/ISysDictDataCacheVo.ts +46 -46
  36. package/src/interface/ISysDictType.ts +37 -37
  37. package/src/interface/ISysMenuDataVo.ts +22 -22
  38. package/src/interface/ISysMenuInfoVo.ts +83 -83
  39. package/src/interface/ISysMenuOperationVo.ts +21 -21
  40. package/src/interface/ISysUploadFiles.ts +16 -16
  41. package/src/interface/ISysUserInfo.ts +70 -70
  42. package/src/interface/IUserPermissionVo.ts +34 -34
  43. package/src/interface/Message.ts +69 -69
  44. package/src/interface/PageData.ts +17 -17
  45. package/src/interface/ResponseData.ts +16 -16
  46. package/src/interface/dictMapType.ts +11 -11
  47. package/src/interface/enum/MessageEnum.ts +41 -41
  48. package/src/mixin/globalMixin.ts +37 -37
  49. package/src/packages/index.ts +18 -18
  50. package/src/packages/text.vue +13 -13
  51. package/src/plugins/echartsConfig.ts +73 -80
  52. package/src/plugins/plugins.ts +12 -12
  53. package/src/stores/dictStore.ts +20 -20
  54. package/src/stores/messageStore.ts +49 -49
  55. package/src/stores/permissionStore.ts +108 -0
  56. package/src/stores/storeConfig.ts +23 -23
  57. package/src/stores/userInfoStore.ts +31 -31
  58. package/src/utils/AxiosConfig.ts +216 -216
@@ -1,412 +1,412 @@
1
- <!--创建人 丁盼-->
2
- <!--说明: userSelect 人员选择-->
3
- <!--创建时间: 2024/12/9 上午10:27-->
4
- <!--修改时间: 2024/12/9 上午10:27-->
5
- <template>
6
- <el-drawer
7
- v-if="viewType === 'drawer'"
8
- :title="title"
9
- v-model="dialogVisible"
10
- :destroy-on-close="true"
11
- size="800px"
12
- @close="close"
13
- @open="open"
14
- >
15
- <el-flex :vertical="true" v-loading="loading">
16
- <el-flex :vertical="false">
17
- <el-flex :vertical="true" style="padding-right: 15px">
18
- <el-title title="人员列表" style="border-bottom: var(--border)"> </el-title>
19
- <el-input v-model="filterText" placeholder="请输入用户名称或者编码进行搜索"></el-input>
20
- <el-flex :vertical="true">
21
- <el-tree
22
- style="width: 100%"
23
- :filter-node-method="filterNode"
24
- show-checkbox
25
- ref="ref_tree"
26
- :data="deptUserTree"
27
- @check-change="handleCheckChange"
28
- node-key="id"
29
- :default-expanded-keys="defaultExpandedKeys"
30
- :default-checked-keys="defaultCheckedKeys"
31
- :props="{
32
- label: 'name',
33
- children: 'children',
34
- }"
35
- >
36
- <template #default="{ data }">
37
- <el-flex align="center">
38
- <el-flex align="center" justify="center" width="20px">
39
- <el-icons
40
- model-value="adtec-dept"
41
- v-if="data.type === 'BM'"
42
- :style="{ color: 'var(--el-color-primary)' }"
43
- ></el-icons>
44
- <el-icons
45
- model-value="adtec-user"
46
- v-if="data.type === 'YH'"
47
- :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
48
- ></el-icons>
49
- </el-flex>
50
- <el-flex align="center">
51
- <el-text v-if="data.type === 'YH'">{{ data.name + `(${data.code})` }}</el-text>
52
- <el-text v-else>{{ data.name }}</el-text>
53
- </el-flex>
54
- </el-flex>
55
- </template>
56
- </el-tree>
57
- </el-flex>
58
- </el-flex>
59
-
60
- <el-flex :vertical="true" style="border-left: var(--border); padding-left: 15px">
61
- <el-title
62
- :title="`已选人员(${selectedUserList.length})`"
63
- style="border-bottom: var(--border); margin-top: 5px"
64
- ></el-title>
65
- <el-flex :vertical="true">
66
- <template v-for="data of selectedUserList" :key="data.id">
67
- <div class="user-select">
68
- <el-flex height="50px" style="border-bottom: var(--border); cursor: pointer">
69
- <el-flex align="center" width="30px">
70
- <el-icons
71
- model-value="adtec-user"
72
- style="font-size: 20px"
73
- :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
74
- >
75
- </el-icons>
76
- </el-flex>
77
- <el-flex align="center" :vertical="true" justify="flex-start">
78
- <el-flex>
79
- <el-text>{{ data.userName + `(${data.loginName})` }}</el-text>
80
- </el-flex>
81
- <el-flex align="flex-start" height="18px" style="overflow: hidden">
82
- <el-text style="font-size: 12px; opacity: 0.8; margin-bottom: 8px">{{
83
- data.deptName
84
- }}</el-text>
85
- </el-flex>
86
- </el-flex>
87
- <el-flex width="50px" align="center">
88
- <el-icon-btn
89
- @click="handleDelete(data)"
90
- model-value="adtec-close"
91
- style="opacity: 0.8; cursor: pointer"
92
- ></el-icon-btn>
93
- </el-flex>
94
- </el-flex>
95
- </div>
96
- </template>
97
- </el-flex>
98
- </el-flex>
99
- </el-flex>
100
- </el-flex>
101
- <template #footer>
102
- <el-button @click="cancel">取消</el-button>
103
- <el-button type="primary" @click="success">确定</el-button>
104
- </template>
105
- </el-drawer>
106
- <el-dialog
107
- v-else
108
- :title="title"
109
- top="10vh"
110
- v-model="dialogVisible"
111
- width="1000px"
112
- @close="close"
113
- @open="open"
114
- >
115
- <el-flex :vertical="true" v-loading="loading" height="500px">
116
- <el-flex :vertical="false">
117
- <el-flex :vertical="true" style="padding-right: 15px">
118
- <el-title title="人员列表" style="border-bottom: var(--border)"> </el-title>
119
- <el-input v-model="filterText" placeholder="请输入用户名称或者编码进行搜索"></el-input>
120
- <el-flex :vertical="true">
121
- <el-tree
122
- style="width: 100%"
123
- :filter-node-method="filterNode"
124
- show-checkbox
125
- ref="ref_tree"
126
- :data="deptUserTree"
127
- @check-change="handleCheckChange"
128
- node-key="id"
129
- :default-expanded-keys="defaultExpandedKeys"
130
- :default-checked-keys="defaultCheckedKeys"
131
- :props="{
132
- label: 'name',
133
- children: 'children',
134
- }"
135
- >
136
- <template #default="{ data }">
137
- <el-flex align="center">
138
- <el-flex align="center" justify="center" width="20px">
139
- <el-icons
140
- model-value="adtec-dept"
141
- v-if="data.type === 'BM'"
142
- :style="{ color: 'var(--el-color-primary)' }"
143
- ></el-icons>
144
- <el-icons
145
- model-value="adtec-user"
146
- v-if="data.type === 'YH'"
147
- :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
148
- ></el-icons>
149
- </el-flex>
150
- <el-flex align="center">
151
- <el-text v-if="data.type === 'YH'">{{ data.name + `(${data.code})` }}</el-text>
152
- <el-text v-else>{{ data.name }}</el-text>
153
- </el-flex>
154
- </el-flex>
155
- </template>
156
- </el-tree>
157
- </el-flex>
158
- </el-flex>
159
-
160
- <el-flex :vertical="true" style="border-left: var(--border); padding-left: 15px">
161
- <el-title
162
- :title="`已选人员(${selectedUserList.length})`"
163
- style="border-bottom: var(--border); margin-top: 5px"
164
- ></el-title>
165
- <el-flex :vertical="true">
166
- <template v-for="data of selectedUserList" :key="data.id">
167
- <div class="user-select">
168
- <el-flex height="50px" style="border-bottom: var(--border); cursor: pointer">
169
- <el-flex align="center" width="30px">
170
- <el-icons
171
- model-value="adtec-user"
172
- style="font-size: 20px"
173
- :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
174
- >
175
- </el-icons>
176
- </el-flex>
177
- <el-flex align="center" :vertical="true" justify="flex-start">
178
- <el-flex>
179
- <el-text>{{ data.userName + `(${data.loginName})` }}</el-text>
180
- </el-flex>
181
- <el-flex align="flex-start" height="18px" style="overflow: hidden">
182
- <el-text style="font-size: 12px; opacity: 0.8; margin-bottom: 8px">{{
183
- data.deptName
184
- }}</el-text>
185
- </el-flex>
186
- </el-flex>
187
- <el-flex width="50px" align="center">
188
- <el-icon-btn
189
- @click="handleDelete(data)"
190
- model-value="adtec-close"
191
- style="opacity: 0.8; cursor: pointer"
192
- ></el-icon-btn>
193
- </el-flex>
194
- </el-flex>
195
- </div>
196
- </template>
197
- </el-flex>
198
- </el-flex>
199
- </el-flex>
200
- </el-flex>
201
- <template #footer>
202
- <el-button @click="cancel">取消</el-button>
203
- <el-button type="primary" @click="success">确定</el-button>
204
- </template>
205
- </el-dialog>
206
- </template>
207
- <script setup lang="ts">
208
- import { useVModel } from '@vueuse/core'
209
- import { type PropType, ref, watch } from 'vue'
210
- import basicApi from '../../api/BasicApi.ts'
211
- import type { IOrgDeptInfo } from '../../interface/IOrgDeptInfo'
212
- import type { ISysUserInfo } from '../../interface/ISysUserInfo'
213
- import sysUserApi from '../../api/SysUserApi.ts'
214
- import { ElMessage, type TreeInstance } from 'element-plus'
215
- const loading = ref(false)
216
- const userList = ref<ISysUserInfo[]>()
217
- const orgDeptTree = ref<IOrgDeptInfo[]>([])
218
- const deptUserTree = ref<any[]>([])
219
- const selectedUserList = ref<ISysUserInfo[]>([])
220
- const defaultExpandedKeys = ref<any[]>([])
221
- const defaultCheckedKeys = ref<any[]>([])
222
- const ref_tree = ref<TreeInstance>()
223
- const filterText = ref('')
224
- const props = defineProps({
225
- modelValue: {
226
- type: Boolean,
227
- },
228
- /**
229
- * @description 已选人员id
230
- * @default []
231
- * @type Array
232
- */
233
- selectedUserIds: {
234
- type: Array as PropType<string[]>,
235
- default: () => [] as string[],
236
- },
237
- /**
238
- * @description 标题
239
- * @default 人员选择
240
- * @type String
241
- */
242
- title: {
243
- type: String,
244
- default: '人员选择',
245
- },
246
- /**
247
- * @description 视图类型
248
- * @default drawer
249
- @type {"drawer" | "dialog" }
250
- **/
251
- viewType: {
252
- type: String,
253
- default: 'drawer',
254
- validator: (value: string) => ['drawer', 'dialog'].includes(value),
255
- },
256
- /**
257
- * @description 是否允许多选
258
- * @default false
259
- * @type Boolean
260
- */
261
- multiple: {
262
- type: Boolean,
263
- default: false,
264
- },
265
- })
266
- watch(filterText, (val) => {
267
- ref_tree.value!.filter(val)
268
- })
269
-
270
- const filterNode = (value: string, data: any) => {
271
- if (!value) return true
272
- return data.name.includes(value) || data.code.includes(value)
273
- }
274
- function success() {
275
- emit('success', selectedUserList.value)
276
- }
277
- function cancel() {
278
- emit('cancel')
279
- }
280
- function handleDelete(row: ISysUserInfo) {
281
- const index = selectedUserList.value.findIndex((item) => item.id === row.id)
282
- if (index !== -1) {
283
- selectedUserList.value.splice(index, 1) // 删除该对象
284
- const key = selectedUserList.value.map((item) => item.id)
285
- ref_tree.value?.setCheckedKeys(key as any[])
286
- }
287
- }
288
- const emit = defineEmits(['update:modelValue', 'success', 'cancel'])
289
- const dialogVisible = useVModel(props, 'modelValue', emit)
290
- const getInitUserList = async () => {
291
- if (props.selectedUserIds) {
292
- try {
293
- selectedUserList.value = await sysUserApi.getInitUserListComp(props.selectedUserIds)
294
- defaultCheckedKeys.value = []
295
- selectedUserList.value.forEach((item) => {
296
- defaultCheckedKeys.value.push(item.id)
297
- })
298
- } catch (err: any) {
299
- ElMessage.error(err.msg)
300
- }
301
- }
302
- }
303
- const open = async () => {
304
- loading.value = true
305
- selectedUserList.value = []
306
- userList.value = []
307
- orgDeptTree.value = await basicApi.getMdmOrgDeptTree()
308
- const userTreeList: any[] = []
309
- const userTreeList1: any[] = []
310
- orgDeptTree.value.forEach((item) => {
311
- item.children?.forEach((item2) => {
312
- item2.parentId = item.id
313
- })
314
- const list = flattenTreeToArray(item)
315
- userTreeList.push(...list)
316
- })
317
- userList.value = await sysUserApi.getSysUserInfoUserSelectComp()
318
- //根据部门关联岗位
319
- userTreeList.forEach((item) => {
320
- item.type = 'BM'
321
- const f = userList.value?.filter((c) => c.mdmDeptId === item.id)
322
- if (f) {
323
- f.forEach((item2) => {
324
- userTreeList1.push({
325
- id: item2.id,
326
- code: item2.loginName,
327
- name: item2.userName,
328
- parentId: item.id,
329
- type: 'YH',
330
- sex: item2.sex,
331
- })
332
- })
333
- }
334
- })
335
- userTreeList.push(...userTreeList1)
336
- const treeData = buildTree(userTreeList)
337
- defaultExpandedKeys.value = []
338
- treeData.forEach((item) => {
339
- defaultExpandedKeys.value.push(item.id)
340
- })
341
- await getInitUserList()
342
- deptUserTree.value = treeData
343
- loading.value = false
344
- }
345
- function buildTree(flatArray: any[]) {
346
- const map = new Map()
347
- const tree: any[] = []
348
- // 首先将平面数组的每个元素都放入 Map 中,以 id 为键,元素本身为值
349
- flatArray.forEach((item) => {
350
- map.set(item.id, { ...item, children: [] })
351
- })
352
- // 然后通过遍历每个元素,将它们归类到正确的父节点中
353
- flatArray.forEach((item) => {
354
- const node = map.get(item.id)
355
- if (item.parentId === null) {
356
- // 如果没有 parentId,说明是根节点
357
- tree.push(node)
358
- } else {
359
- // 否则,将当前节点添加到它的父节点的 children 数组中
360
- const parentNode = map.get(item.parentId)
361
- if (parentNode) {
362
- parentNode.children.push(node)
363
- }
364
- }
365
- })
366
- return tree
367
- }
368
- function flattenTreeToArray(tree: IOrgDeptInfo) {
369
- const result: any = []
370
- function traverse(node: IOrgDeptInfo) {
371
- if (!node) return
372
- // 将当前节点添加到结果数组
373
- result.push({
374
- id: node.id,
375
- code: node.code,
376
- name: node.name,
377
- parentId: node.parentId,
378
- })
379
- // 如果有子节点,递归遍历子节点
380
- if (node.children && node.children.length > 0) {
381
- node.children.forEach((child) => traverse(child))
382
- }
383
- }
384
- // 开始遍历树
385
- traverse(tree)
386
- return result
387
- }
388
- const handleCheckChange = () => {
389
- const data = ref_tree.value?.getCheckedNodes().filter((c) => c.type === 'YH')
390
- selectedUserList.value = []
391
- if (data) {
392
- data.forEach((item: any) => {
393
- const f = userList.value?.find((c) => c.id === item.id)
394
- if (f) {
395
- selectedUserList.value.push(f)
396
- }
397
- })
398
- }
399
- }
400
- const close = () => {
401
- selectedUserList.value = []
402
- }
403
- </script>
404
- <style scoped lang="scss">
405
- .user-select {
406
- //background: red;
407
- width: 100%;
408
- }
409
- .user-select :hover {
410
- background: #f5f7fa !important;
411
- }
412
- </style>
1
+ <!--创建人 丁盼-->
2
+ <!--说明: userSelect 人员选择-->
3
+ <!--创建时间: 2024/12/9 上午10:27-->
4
+ <!--修改时间: 2024/12/9 上午10:27-->
5
+ <template>
6
+ <el-drawer
7
+ v-if="viewType === 'drawer'"
8
+ :title="title"
9
+ v-model="dialogVisible"
10
+ :destroy-on-close="true"
11
+ size="800px"
12
+ @close="close"
13
+ @open="open"
14
+ >
15
+ <el-flex :vertical="true" v-loading="loading">
16
+ <el-flex :vertical="false">
17
+ <el-flex :vertical="true" style="padding-right: 15px">
18
+ <el-title title="人员列表" style="border-bottom: var(--border)"> </el-title>
19
+ <el-input v-model="filterText" placeholder="请输入用户名称或者编码进行搜索"></el-input>
20
+ <el-flex :vertical="true">
21
+ <el-tree
22
+ style="width: 100%"
23
+ :filter-node-method="filterNode"
24
+ show-checkbox
25
+ ref="ref_tree"
26
+ :data="deptUserTree"
27
+ @check-change="handleCheckChange"
28
+ node-key="id"
29
+ :default-expanded-keys="defaultExpandedKeys"
30
+ :default-checked-keys="defaultCheckedKeys"
31
+ :props="{
32
+ label: 'name',
33
+ children: 'children',
34
+ }"
35
+ >
36
+ <template #default="{ data }">
37
+ <el-flex align="center">
38
+ <el-flex align="center" justify="center" width="20px">
39
+ <el-icons
40
+ model-value="adtec-dept"
41
+ v-if="data.type === 'BM'"
42
+ :style="{ color: 'var(--el-color-primary)' }"
43
+ ></el-icons>
44
+ <el-icons
45
+ model-value="adtec-user"
46
+ v-if="data.type === 'YH'"
47
+ :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
48
+ ></el-icons>
49
+ </el-flex>
50
+ <el-flex align="center">
51
+ <el-text v-if="data.type === 'YH'">{{ data.name + `(${data.code})` }}</el-text>
52
+ <el-text v-else>{{ data.name }}</el-text>
53
+ </el-flex>
54
+ </el-flex>
55
+ </template>
56
+ </el-tree>
57
+ </el-flex>
58
+ </el-flex>
59
+
60
+ <el-flex :vertical="true" style="border-left: var(--border); padding-left: 15px">
61
+ <el-title
62
+ :title="`已选人员(${selectedUserList.length})`"
63
+ style="border-bottom: var(--border); margin-top: 5px"
64
+ ></el-title>
65
+ <el-flex :vertical="true">
66
+ <template v-for="data of selectedUserList" :key="data.id">
67
+ <div class="user-select">
68
+ <el-flex height="50px" style="border-bottom: var(--border); cursor: pointer">
69
+ <el-flex align="center" width="30px">
70
+ <el-icons
71
+ model-value="adtec-user"
72
+ style="font-size: 20px"
73
+ :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
74
+ >
75
+ </el-icons>
76
+ </el-flex>
77
+ <el-flex align="center" :vertical="true" justify="flex-start">
78
+ <el-flex>
79
+ <el-text>{{ data.userName + `(${data.loginName})` }}</el-text>
80
+ </el-flex>
81
+ <el-flex align="flex-start" height="18px" style="overflow: hidden">
82
+ <el-text style="font-size: 12px; opacity: 0.8; margin-bottom: 8px">{{
83
+ data.deptName
84
+ }}</el-text>
85
+ </el-flex>
86
+ </el-flex>
87
+ <el-flex width="50px" align="center">
88
+ <el-icon-btn
89
+ @click="handleDelete(data)"
90
+ model-value="adtec-close"
91
+ style="opacity: 0.8; cursor: pointer"
92
+ ></el-icon-btn>
93
+ </el-flex>
94
+ </el-flex>
95
+ </div>
96
+ </template>
97
+ </el-flex>
98
+ </el-flex>
99
+ </el-flex>
100
+ </el-flex>
101
+ <template #footer>
102
+ <el-button @click="cancel">取消</el-button>
103
+ <el-button type="primary" @click="success">确定</el-button>
104
+ </template>
105
+ </el-drawer>
106
+ <el-dialog
107
+ v-else
108
+ :title="title"
109
+ top="10vh"
110
+ v-model="dialogVisible"
111
+ width="1000px"
112
+ @close="close"
113
+ @open="open"
114
+ >
115
+ <el-flex :vertical="true" v-loading="loading" height="500px">
116
+ <el-flex :vertical="false">
117
+ <el-flex :vertical="true" style="padding-right: 15px">
118
+ <el-title title="人员列表" style="border-bottom: var(--border)"> </el-title>
119
+ <el-input v-model="filterText" placeholder="请输入用户名称或者编码进行搜索"></el-input>
120
+ <el-flex :vertical="true">
121
+ <el-tree
122
+ style="width: 100%"
123
+ :filter-node-method="filterNode"
124
+ show-checkbox
125
+ ref="ref_tree"
126
+ :data="deptUserTree"
127
+ @check-change="handleCheckChange"
128
+ node-key="id"
129
+ :default-expanded-keys="defaultExpandedKeys"
130
+ :default-checked-keys="defaultCheckedKeys"
131
+ :props="{
132
+ label: 'name',
133
+ children: 'children',
134
+ }"
135
+ >
136
+ <template #default="{ data }">
137
+ <el-flex align="center">
138
+ <el-flex align="center" justify="center" width="20px">
139
+ <el-icons
140
+ model-value="adtec-dept"
141
+ v-if="data.type === 'BM'"
142
+ :style="{ color: 'var(--el-color-primary)' }"
143
+ ></el-icons>
144
+ <el-icons
145
+ model-value="adtec-user"
146
+ v-if="data.type === 'YH'"
147
+ :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
148
+ ></el-icons>
149
+ </el-flex>
150
+ <el-flex align="center">
151
+ <el-text v-if="data.type === 'YH'">{{ data.name + `(${data.code})` }}</el-text>
152
+ <el-text v-else>{{ data.name }}</el-text>
153
+ </el-flex>
154
+ </el-flex>
155
+ </template>
156
+ </el-tree>
157
+ </el-flex>
158
+ </el-flex>
159
+
160
+ <el-flex :vertical="true" style="border-left: var(--border); padding-left: 15px">
161
+ <el-title
162
+ :title="`已选人员(${selectedUserList.length})`"
163
+ style="border-bottom: var(--border); margin-top: 5px"
164
+ ></el-title>
165
+ <el-flex :vertical="true">
166
+ <template v-for="data of selectedUserList" :key="data.id">
167
+ <div class="user-select">
168
+ <el-flex height="50px" style="border-bottom: var(--border); cursor: pointer">
169
+ <el-flex align="center" width="30px">
170
+ <el-icons
171
+ model-value="adtec-user"
172
+ style="font-size: 20px"
173
+ :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
174
+ >
175
+ </el-icons>
176
+ </el-flex>
177
+ <el-flex align="center" :vertical="true" justify="flex-start">
178
+ <el-flex>
179
+ <el-text>{{ data.userName + `(${data.loginName})` }}</el-text>
180
+ </el-flex>
181
+ <el-flex align="flex-start" height="18px" style="overflow: hidden">
182
+ <el-text style="font-size: 12px; opacity: 0.8; margin-bottom: 8px">{{
183
+ data.deptName
184
+ }}</el-text>
185
+ </el-flex>
186
+ </el-flex>
187
+ <el-flex width="50px" align="center">
188
+ <el-icon-btn
189
+ @click="handleDelete(data)"
190
+ model-value="adtec-close"
191
+ style="opacity: 0.8; cursor: pointer"
192
+ ></el-icon-btn>
193
+ </el-flex>
194
+ </el-flex>
195
+ </div>
196
+ </template>
197
+ </el-flex>
198
+ </el-flex>
199
+ </el-flex>
200
+ </el-flex>
201
+ <template #footer>
202
+ <el-button @click="cancel">取消</el-button>
203
+ <el-button type="primary" @click="success">确定</el-button>
204
+ </template>
205
+ </el-dialog>
206
+ </template>
207
+ <script setup lang="ts">
208
+ import { useVModel } from '@vueuse/core'
209
+ import { type PropType, ref, watch } from 'vue'
210
+ import basicApi from '../../api/BasicApi.ts'
211
+ import type { IOrgDeptInfo } from '../../interface/IOrgDeptInfo'
212
+ import type { ISysUserInfo } from '../../interface/ISysUserInfo'
213
+ import sysUserApi from '../../api/SysUserApi.ts'
214
+ import { ElMessage, type TreeInstance } from 'element-plus'
215
+ const loading = ref(false)
216
+ const userList = ref<ISysUserInfo[]>()
217
+ const orgDeptTree = ref<IOrgDeptInfo[]>([])
218
+ const deptUserTree = ref<any[]>([])
219
+ const selectedUserList = ref<ISysUserInfo[]>([])
220
+ const defaultExpandedKeys = ref<any[]>([])
221
+ const defaultCheckedKeys = ref<any[]>([])
222
+ const ref_tree = ref<TreeInstance>()
223
+ const filterText = ref('')
224
+ const props = defineProps({
225
+ modelValue: {
226
+ type: Boolean,
227
+ },
228
+ /**
229
+ * @description 已选人员id
230
+ * @default []
231
+ * @type Array
232
+ */
233
+ selectedUserIds: {
234
+ type: Array as PropType<string[]>,
235
+ default: () => [] as string[],
236
+ },
237
+ /**
238
+ * @description 标题
239
+ * @default 人员选择
240
+ * @type String
241
+ */
242
+ title: {
243
+ type: String,
244
+ default: '人员选择',
245
+ },
246
+ /**
247
+ * @description 视图类型
248
+ * @default drawer
249
+ @type {"drawer" | "dialog" }
250
+ **/
251
+ viewType: {
252
+ type: String,
253
+ default: 'drawer',
254
+ validator: (value: string) => ['drawer', 'dialog'].includes(value),
255
+ },
256
+ /**
257
+ * @description 是否允许多选
258
+ * @default false
259
+ * @type Boolean
260
+ */
261
+ multiple: {
262
+ type: Boolean,
263
+ default: false,
264
+ },
265
+ })
266
+ watch(filterText, (val) => {
267
+ ref_tree.value!.filter(val)
268
+ })
269
+
270
+ const filterNode = (value: string, data: any) => {
271
+ if (!value) return true
272
+ return data.name.includes(value) || data.code.includes(value)
273
+ }
274
+ function success() {
275
+ emit('success', selectedUserList.value)
276
+ }
277
+ function cancel() {
278
+ emit('cancel')
279
+ }
280
+ function handleDelete(row: ISysUserInfo) {
281
+ const index = selectedUserList.value.findIndex((item) => item.id === row.id)
282
+ if (index !== -1) {
283
+ selectedUserList.value.splice(index, 1) // 删除该对象
284
+ const key = selectedUserList.value.map((item) => item.id)
285
+ ref_tree.value?.setCheckedKeys(key as any[])
286
+ }
287
+ }
288
+ const emit = defineEmits(['update:modelValue', 'success', 'cancel'])
289
+ const dialogVisible = useVModel(props, 'modelValue', emit)
290
+ const getInitUserList = async () => {
291
+ if (props.selectedUserIds) {
292
+ try {
293
+ selectedUserList.value = await sysUserApi.getInitUserListComp(props.selectedUserIds)
294
+ defaultCheckedKeys.value = []
295
+ selectedUserList.value.forEach((item) => {
296
+ defaultCheckedKeys.value.push(item.id)
297
+ })
298
+ } catch (err: any) {
299
+ ElMessage.error(err.msg)
300
+ }
301
+ }
302
+ }
303
+ const open = async () => {
304
+ loading.value = true
305
+ selectedUserList.value = []
306
+ userList.value = []
307
+ orgDeptTree.value = await basicApi.getMdmOrgDeptTree()
308
+ const userTreeList: any[] = []
309
+ const userTreeList1: any[] = []
310
+ orgDeptTree.value.forEach((item) => {
311
+ item.children?.forEach((item2) => {
312
+ item2.parentId = item.id
313
+ })
314
+ const list = flattenTreeToArray(item)
315
+ userTreeList.push(...list)
316
+ })
317
+ userList.value = await sysUserApi.getSysUserInfoUserSelectComp()
318
+ //根据部门关联岗位
319
+ userTreeList.forEach((item) => {
320
+ item.type = 'BM'
321
+ const f = userList.value?.filter((c) => c.mdmDeptId === item.id)
322
+ if (f) {
323
+ f.forEach((item2) => {
324
+ userTreeList1.push({
325
+ id: item2.id,
326
+ code: item2.loginName,
327
+ name: item2.userName,
328
+ parentId: item.id,
329
+ type: 'YH',
330
+ sex: item2.sex,
331
+ })
332
+ })
333
+ }
334
+ })
335
+ userTreeList.push(...userTreeList1)
336
+ const treeData = buildTree(userTreeList)
337
+ defaultExpandedKeys.value = []
338
+ treeData.forEach((item) => {
339
+ defaultExpandedKeys.value.push(item.id)
340
+ })
341
+ await getInitUserList()
342
+ deptUserTree.value = treeData
343
+ loading.value = false
344
+ }
345
+ function buildTree(flatArray: any[]) {
346
+ const map = new Map()
347
+ const tree: any[] = []
348
+ // 首先将平面数组的每个元素都放入 Map 中,以 id 为键,元素本身为值
349
+ flatArray.forEach((item) => {
350
+ map.set(item.id, { ...item, children: [] })
351
+ })
352
+ // 然后通过遍历每个元素,将它们归类到正确的父节点中
353
+ flatArray.forEach((item) => {
354
+ const node = map.get(item.id)
355
+ if (item.parentId === null) {
356
+ // 如果没有 parentId,说明是根节点
357
+ tree.push(node)
358
+ } else {
359
+ // 否则,将当前节点添加到它的父节点的 children 数组中
360
+ const parentNode = map.get(item.parentId)
361
+ if (parentNode) {
362
+ parentNode.children.push(node)
363
+ }
364
+ }
365
+ })
366
+ return tree
367
+ }
368
+ function flattenTreeToArray(tree: IOrgDeptInfo) {
369
+ const result: any = []
370
+ function traverse(node: IOrgDeptInfo) {
371
+ if (!node) return
372
+ // 将当前节点添加到结果数组
373
+ result.push({
374
+ id: node.id,
375
+ code: node.code,
376
+ name: node.name,
377
+ parentId: node.parentId,
378
+ })
379
+ // 如果有子节点,递归遍历子节点
380
+ if (node.children && node.children.length > 0) {
381
+ node.children.forEach((child) => traverse(child))
382
+ }
383
+ }
384
+ // 开始遍历树
385
+ traverse(tree)
386
+ return result
387
+ }
388
+ const handleCheckChange = () => {
389
+ const data = ref_tree.value?.getCheckedNodes().filter((c) => c.type === 'YH')
390
+ selectedUserList.value = []
391
+ if (data) {
392
+ data.forEach((item: any) => {
393
+ const f = userList.value?.find((c) => c.id === item.id)
394
+ if (f) {
395
+ selectedUserList.value.push(f)
396
+ }
397
+ })
398
+ }
399
+ }
400
+ const close = () => {
401
+ selectedUserList.value = []
402
+ }
403
+ </script>
404
+ <style scoped lang="scss">
405
+ .user-select {
406
+ //background: red;
407
+ width: 100%;
408
+ }
409
+ .user-select :hover {
410
+ background: #f5f7fa !important;
411
+ }
412
+ </style>