@ebiz/designer-components 0.0.57 → 0.0.59

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 (199) hide show
  1. package/README.md +29 -29
  2. package/dist/designer-components.css +1 -1
  3. package/dist/index.mjs +4822 -4822
  4. package/package.json +1 -1
  5. package/src/App.vue +26 -26
  6. package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
  7. package/src/apiService/mockDataService.js +115 -115
  8. package/src/apiService/simpleDataService.js +297 -297
  9. package/src/assets/base.css +86 -86
  10. package/src/assets/logo.svg +1 -1
  11. package/src/components/Button.vue +149 -149
  12. package/src/components/DataContainer.vue +40 -40
  13. package/src/components/EbizApproval.vue +332 -338
  14. package/src/components/EbizAutoForm.vue +596 -596
  15. package/src/components/EbizAvatar.vue +115 -115
  16. package/src/components/EbizCheckbox.vue +93 -93
  17. package/src/components/EbizCheckboxGroup.vue +69 -69
  18. package/src/components/EbizDepartmentSelector.vue +144 -144
  19. package/src/components/EbizDescriptions.vue +340 -340
  20. package/src/components/EbizDescriptionsItem.vue +47 -47
  21. package/src/components/EbizDetailBlock.vue +81 -81
  22. package/src/components/EbizDialog.vue +260 -260
  23. package/src/components/EbizDiv.vue +32 -32
  24. package/src/components/EbizDivider.vue +96 -96
  25. package/src/components/EbizEmployeeInfo.vue +138 -138
  26. package/src/components/EbizEmployeeSelector.vue +1093 -1086
  27. package/src/components/EbizFileUpload.vue +238 -238
  28. package/src/components/EbizMap.vue +541 -541
  29. package/src/components/EbizOkrTree.vue +99 -99
  30. package/src/components/EbizPageHeader.vue +95 -95
  31. package/src/components/EbizPagination.vue +162 -162
  32. package/src/components/EbizPopconfirm.vue +47 -47
  33. package/src/components/EbizRadio.vue +86 -86
  34. package/src/components/EbizRadioGroup.vue +83 -83
  35. package/src/components/EbizRemoteSelect.vue +232 -232
  36. package/src/components/EbizRouteBreadcrumb.vue +46 -46
  37. package/src/components/EbizSelect.vue +85 -85
  38. package/src/components/EbizSpace.vue +100 -100
  39. package/src/components/EbizStatistic.vue +149 -149
  40. package/src/components/EbizStatsCard.vue +113 -113
  41. package/src/components/EbizSwiper.vue +113 -113
  42. package/src/components/EbizSwiperItem.vue +13 -13
  43. package/src/components/EbizSwitch.vue +85 -85
  44. package/src/components/EbizTabHeader.vue +132 -132
  45. package/src/components/EbizTabPanel.vue +22 -22
  46. package/src/components/EbizTable.vue +469 -469
  47. package/src/components/EbizTableColumn.vue +116 -116
  48. package/src/components/EbizTableSort.vue +179 -179
  49. package/src/components/EbizTabs.vue +142 -142
  50. package/src/components/EbizTdesignButtonDialog.vue +332 -332
  51. package/src/components/EbizTdesignLoading.vue +107 -107
  52. package/src/components/EbizTimePicker.vue +143 -143
  53. package/src/components/EbizTitle.vue +91 -91
  54. package/src/components/EbizTree.vue +152 -152
  55. package/src/components/EbizTreeMergeTable.vue +1414 -1414
  56. package/src/components/EbizTreeSelector.vue +418 -418
  57. package/src/components/EbizVxeTable.vue +290 -290
  58. package/src/components/Form.vue +28 -28
  59. package/src/components/Home.vue +7 -7
  60. package/src/components/MyComponent.vue +39 -39
  61. package/src/components/Table.vue +45 -45
  62. package/src/components/TdesignAlert.vue +115 -115
  63. package/src/components/TdesignButton.vue +135 -135
  64. package/src/components/TdesignCalendar/index.vue +145 -145
  65. package/src/components/TdesignCard.vue +195 -195
  66. package/src/components/TdesignCol.vue +101 -101
  67. package/src/components/TdesignCollapse.vue +142 -142
  68. package/src/components/TdesignCollapsePanel.vue +79 -79
  69. package/src/components/TdesignDatePicker.vue +124 -124
  70. package/src/components/TdesignDescriptions.vue +74 -74
  71. package/src/components/TdesignDescriptionsItem.vue +50 -50
  72. package/src/components/TdesignDialog.vue +225 -225
  73. package/src/components/TdesignForm.vue +138 -138
  74. package/src/components/TdesignFormItem.vue +105 -105
  75. package/src/components/TdesignGrid.vue +55 -55
  76. package/src/components/TdesignIcon.vue +67 -67
  77. package/src/components/TdesignImage.vue +162 -162
  78. package/src/components/TdesignImageViewer.vue +200 -200
  79. package/src/components/TdesignInput.vue +242 -242
  80. package/src/components/TdesignSelect.vue +444 -444
  81. package/src/components/TdesignTag.vue +117 -117
  82. package/src/components/TdesignTextarea.vue +142 -142
  83. package/src/components/TdesignTimeline.vue +58 -58
  84. package/src/components/TdesignTimelineItem.vue +71 -71
  85. package/src/components/TdesignUpload.vue +388 -388
  86. package/src/components/TdesignWatermark.vue +107 -107
  87. package/src/components/ebiz-form/components/cascader.vue +61 -61
  88. package/src/components/ebiz-form/components/checkbox.vue +37 -37
  89. package/src/components/ebiz-form/components/city.vue +137 -137
  90. package/src/components/ebiz-form/components/date-panel.vue +52 -52
  91. package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
  92. package/src/components/ebiz-form/components/date-range.vue +56 -56
  93. package/src/components/ebiz-form/components/date.vue +52 -52
  94. package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
  95. package/src/components/ebiz-form/components/editor.vue +78 -78
  96. package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
  97. package/src/components/ebiz-form/components/file.vue +149 -149
  98. package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
  99. package/src/components/ebiz-form/components/images.vue +129 -129
  100. package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
  101. package/src/components/ebiz-form/components/img.vue +129 -129
  102. package/src/components/ebiz-form/components/number.vue +50 -50
  103. package/src/components/ebiz-form/components/radio.vue +28 -28
  104. package/src/components/ebiz-form/components/select.vue +119 -119
  105. package/src/components/ebiz-form/components/switch.vue +23 -23
  106. package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
  107. package/src/components/ebiz-form/components/text.vue +52 -52
  108. package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
  109. package/src/components/ebiz-form/components/textarea.vue +29 -29
  110. package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
  111. package/src/components/ebiz-form/components/video.vue +97 -97
  112. package/src/components/ebiz-form/index.vue +157 -157
  113. package/src/components/examples/PopconfirmExample.vue +149 -149
  114. package/src/components/icons/IconCommunity.vue +7 -7
  115. package/src/components/icons/IconDocumentation.vue +7 -7
  116. package/src/components/icons/IconEcosystem.vue +7 -7
  117. package/src/components/icons/IconSupport.vue +7 -7
  118. package/src/components/icons/IconTooling.vue +19 -19
  119. package/src/components/senior/EbizSData/index.vue +260 -260
  120. package/src/components/senior/EbizSDialog/index.vue +713 -712
  121. package/src/components/senior/EbizSForm/README.md +157 -157
  122. package/src/components/senior/EbizSForm/index.vue +668 -668
  123. package/src/components/senior/EbizSForm/item.vue +522 -522
  124. package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
  125. package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
  126. package/src/index.js +218 -218
  127. package/src/main.js +55 -55
  128. package/src/router/index.js +374 -374
  129. package/src/utils/formatCode.js +24 -24
  130. package/src/utils/generateImportStatement.js +52 -52
  131. package/src/utils/hasJsx.js +25 -25
  132. package/src/utils/index.js +166 -166
  133. package/src/utils/mergeOptions.js +29 -29
  134. package/src/utils/parseRequiredBlocks.js +18 -18
  135. package/src/utils/upload.ts +126 -126
  136. package/src/utils/vue-sfc-validator.js +155 -155
  137. package/src/views/Button.vue +23 -23
  138. package/src/views/CheckboxDemo.vue +104 -104
  139. package/src/views/DataContainer.vue +19 -19
  140. package/src/views/DialogDemo.vue +125 -125
  141. package/src/views/EbizApprovalDemo.vue +76 -76
  142. package/src/views/EbizAutoFormDemo.vue +129 -129
  143. package/src/views/EbizAvatar.vue +223 -223
  144. package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
  145. package/src/views/EbizDetailBlockDemo.vue +30 -30
  146. package/src/views/EbizEmployeeInfo.vue +249 -249
  147. package/src/views/EbizEmployeeSelector.vue +83 -83
  148. package/src/views/EbizMap.vue +201 -201
  149. package/src/views/EbizRadioDemo.vue +151 -151
  150. package/src/views/EbizSDataDemo.vue +136 -136
  151. package/src/views/EbizSDialogDemo.vue +301 -301
  152. package/src/views/EbizSForm/index.vue +359 -359
  153. package/src/views/EbizSFormDemo.vue +420 -420
  154. package/src/views/EbizSpace.vue +185 -185
  155. package/src/views/EbizSwiper.vue +157 -157
  156. package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
  157. package/src/views/Form.vue +19 -19
  158. package/src/views/GridDemo.vue +238 -238
  159. package/src/views/Home.vue +146 -146
  160. package/src/views/Mindmap.vue +17 -17
  161. package/src/views/MyComponent.vue +19 -19
  162. package/src/views/OkrTree.vue +19 -19
  163. package/src/views/PageHeaderDemo.vue +104 -104
  164. package/src/views/PaginationDemo.vue +96 -96
  165. package/src/views/PermissionBoxDemo.vue +85 -85
  166. package/src/views/PopconfirmDemo.vue +80 -80
  167. package/src/views/RemoteSelect.vue +350 -350
  168. package/src/views/StatisticDemo.vue +190 -190
  169. package/src/views/SwitchDemo.vue +79 -79
  170. package/src/views/Table.vue +19 -19
  171. package/src/views/TableDemo.vue +334 -334
  172. package/src/views/TableSortDemo.vue +143 -143
  173. package/src/views/TableView.vue +68 -68
  174. package/src/views/TabsDemo.vue +282 -282
  175. package/src/views/TagDemo.vue +101 -101
  176. package/src/views/TdesignAlert.vue +98 -98
  177. package/src/views/TdesignButton.vue +190 -190
  178. package/src/views/TdesignCalendar.vue +94 -94
  179. package/src/views/TdesignCard.vue +296 -296
  180. package/src/views/TdesignCollapse.vue +293 -293
  181. package/src/views/TdesignDatePicker.vue +187 -187
  182. package/src/views/TdesignDescriptions.vue +101 -101
  183. package/src/views/TdesignForm.vue +248 -248
  184. package/src/views/TdesignIcon.vue +203 -203
  185. package/src/views/TdesignImage.vue +215 -215
  186. package/src/views/TdesignImageViewer.vue +198 -198
  187. package/src/views/TdesignInput.vue +252 -252
  188. package/src/views/TdesignSelect.vue +473 -473
  189. package/src/views/TdesignSwiper.vue +157 -157
  190. package/src/views/TextareaDemo.vue +93 -93
  191. package/src/views/TimePickerDemo.vue +146 -146
  192. package/src/views/TimelineDemo.vue +160 -160
  193. package/src/views/Title.vue +19 -19
  194. package/src/views/TreeDemo.vue +254 -254
  195. package/src/views/TreeMergeTableDemo.vue +239 -239
  196. package/src/views/TreeSelectorDemo.vue +245 -245
  197. package/src/views/UploadDemo.vue +121 -121
  198. package/src/views/VxeTableDemo.vue +279 -279
  199. package/src/views/WatermarkDemo.vue +85 -85
@@ -1,1087 +1,1094 @@
1
- <template>
2
- <div class="ebiz-employee-selector">
3
- <!-- 选择框展示区 -->
4
- <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
5
- <div class="selected-items" v-if="selectedItems && selectedItems.length">
6
- <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
7
- <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
8
- <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
9
- <span class="item-info">
10
- <span class="item-code">{{ item.no }} - </span>
11
- <span class="item-name">{{ item.name }}</span>
12
- </span>
13
- <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
14
- </div>
15
- </div>
16
- <t-button @click="showDialog" variant="text" theme="primary">选择人员</t-button>
17
- </div>
18
-
19
- <!-- 选择弹窗 -->
20
- <t-dialog v-model:visible="dialogVisible" header="选择人员" :width="800" footer :close-btn="true"
21
- :close-on-esc-keydown="true" :close-on-overlay-click="true" destroyOnClose>
22
-
23
- <!-- 选项卡 -->
24
- <t-tabs v-model="activeTab" class="selector-tabs">
25
- <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false"></t-tab-panel>
26
- <t-tab-panel value="role" label="角色" :destroyOnHide="false"></t-tab-panel>
27
- <!-- <t-tab-panel value="position" label="岗位" :destroyOnHide="false"></t-tab-panel> -->
28
- <!-- <t-tab-panel value="department" label="同部门" :destroyOnHide="false"></t-tab-panel> -->
29
- <!-- <t-tab-panel value="subordinate" label="我的下属" :destroyOnHide="false"></t-tab-panel> -->
30
- </t-tabs>
31
-
32
-
33
- <div>
34
-
35
- <div class="selector-dialog-content">
36
- <!-- 左侧选择区域 -->
37
- <div class="left-panel">
38
- <!-- 内容区域 -->
39
- <div class="content-area">
40
- <div v-if="loading" class="loading-container">
41
- <t-loading />
42
- </div>
43
- <!-- 组织架构 -->
44
- <div v-show="activeTab === 'organization'" class="tab-content">
45
- <t-tree ref="organizationTree" :data="organizationData"
46
- :keys="{ label: 'name', value: 'id', children: 'children' }" hover activable :active="currentActive"
47
- @active="handleActive" />
48
- </div>
49
-
50
- <!-- 角色 -->
51
- <div v-show="activeTab === 'role'" class="tab-content">
52
- <t-tree ref="roleTree" :data="roleData" :keys="{ label: 'name', value: 'code' }" hover activable
53
- :active="currentActive" @active="handleActive" />
54
- </div>
55
-
56
- <!-- 岗位 -->
57
- <div v-show="activeTab === 'position'" class="tab-content">
58
- <t-tree ref="positionTree" :data="positionData" :keys="{ label: 'name', value: 'id' }" hover activable
59
- :active="currentActive" @active="handleActive" />
60
- </div>
61
-
62
- <!-- 同部门 -->
63
- <div v-show="activeTab === 'department'" class="tab-content">
64
- <t-list :split="true" size="small">
65
- <t-list-item v-for="(item, index) in departmentData" :key="index">
66
- <div class="department-item" @click="selectDepartment(item)">
67
- {{ item.name }}
68
- </div>
69
- </t-list-item>
70
- </t-list>
71
- </div>
72
-
73
- <!-- 我的下属 -->
74
- <div v-show="activeTab === 'subordinate'" class="tab-content">
75
- <t-list :split="true" size="small">
76
- <t-list-item v-for="(item, index) in subordinateData" :key="index">
77
- <div class="department-item" @click="selectDepartment(item)">
78
- {{ item.name }}
79
- </div>
80
- </t-list-item>
81
- </t-list>
82
- </div>
83
- </div>
84
- </div>
85
-
86
- <!-- 右侧人员列表区域 -->
87
- <div class="right-panel">
88
- <div class="employee-header">
89
- <div class="employee-title">
90
- {{ currentNodeName || '人员列表' }}
91
- <div v-if="activeTab === 'organization'" class="sub-dept-option">
92
- <t-checkbox v-model="childDeptEnable">包含子部门</t-checkbox>
93
- </div>
94
- </div>
95
- <div class="employee-count" v-if="!single">
96
- <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
97
- <span class="count-info">共 {{ employeeList.length }} 人</span>
98
- </div>
99
- </div>
100
-
101
- <!-- 搜索框 -->
102
- <div class="search-box">
103
- <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号搜索" clearable
104
- @keyup.enter="handleSearchEnter">
105
- <template #suffix-icon>
106
- <t-icon name="search" @click="handleSearchClick"></t-icon>
107
- </template>
108
- </t-input>
109
- <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn" @click="clearSearch">清除搜索</t-button>
110
- </div>
111
-
112
- <div class="employee-list">
113
- <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item">
114
- <t-checkbox v-model="item.checked" @change="handleCheckChange(item)"></t-checkbox>
115
- <div class="employee-avatar">
116
- <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
117
- <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
118
- </div>
119
- <div class="employee-info">
120
- <div class="employee-code">{{ item.no }} - </div>
121
- <div class="employee-name">{{ item.name }}</div>
122
- </div>
123
- </div>
124
- <div v-if="filteredEmployeeList.length === 0" class="empty-data">
125
- <t-empty />
126
- </div>
127
- </div>
128
- </div>
129
- </div>
130
- </div>
131
-
132
-
133
- <!-- 底部按钮区域 -->
134
- <template #footer>
135
- <div class="dialog-footer">
136
- <div class="selected-preview">
137
- 已选: {{ tempSelectedEmployees.length }} 人
138
- <div class="selected-people-list" v-if="tempSelectedEmployees.length > 0">
139
- <div v-for="(item, index) in tempSelectedEmployees" :key="index" class="selected-people-item">
140
- <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
141
- <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
142
- <span class="item-info">
143
- <span class="item-code">{{ item.no }}</span>
144
- <span class="item-name">{{ item.name }}</span>
145
- </span>
146
- <t-icon name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
147
- </div>
148
- </div>
149
- </div>
150
- <div class="dialog-actions">
151
- <t-button theme="default" @click="handleCancel">取消</t-button>
152
- <t-button theme="primary" @click="handleConfirm">确定</t-button>
153
- </div>
154
- </div>
155
- </template>
156
- </t-dialog>
157
- </div>
158
- </template>
159
-
160
- <script setup>
161
- import { ref, computed, watch, onMounted } from 'vue';
162
- import {
163
- Dialog as TDialog,
164
- Button as TButton,
165
- Icon as TIcon,
166
- Input as TInput,
167
- Tabs as TTabs,
168
- TabPanel as TTabPanel,
169
- Loading as TLoading,
170
- Tree as TTree,
171
- Avatar as TAvatar,
172
- Checkbox as TCheckbox,
173
- Empty as TEmpty,
174
- List as TList,
175
- ListItem as TListItem,
176
- MessagePlugin
177
- } from 'tdesign-vue-next';
178
- import dataService from '../apiService/simpleDataService';
179
-
180
- // 定义组件属性
181
- const props = defineProps({
182
- // 选中的数据,支持v-model,只存储ID列表
183
- showDefault: {
184
- type: Boolean,
185
- default: true
186
- },
187
- modelValue: {
188
- type: Array,
189
- default: () => []
190
- },
191
- // 单选模式
192
- single: {
193
- type: Boolean,
194
- default: false
195
- },
196
- // 是否展示默认标签页
197
- showDefaultTab: {
198
- type: Boolean,
199
- default: true
200
- },
201
- visible:{
202
- type: Boolean,
203
- default: null
204
- },
205
- // 是否包含部门
206
- includeDepartment: {
207
- type: Boolean,
208
- default: false
209
- },
210
- // 默认标签页
211
- defaultTab: {
212
- type: String,
213
- default: 'organization'
214
- },
215
- // 是否展示顶层组织
216
- showRootOrg: {
217
- type: Boolean,
218
- default: true
219
- },
220
- // 最大选择数量,0表示不限制
221
- maxCount: {
222
- type: Number,
223
- default: 0
224
- }
225
- });
226
-
227
- // 定义组件事件
228
- const emit = defineEmits(['update:modelValue', 'change','update:visible']);
229
- const tempVisible = ref(false);
230
- // 内部状态变量
231
- const dialogVisible = computed({
232
- set(val){
233
- if(props.visible==null){
234
- tempVisible.value = val;
235
- return
236
- }
237
- emit('update:visible', val)
238
- },
239
- get(){
240
- return props.visible ?? tempVisible.value
241
- }
242
- });
243
-
244
- const searchText = ref('');
245
- const activeTab = ref(props.defaultTab);
246
- const loading = ref(false);
247
- const selectedItems = ref([]);
248
- // 对话框中临时保存的选中员工列表
249
- const tempSelectedEmployees = ref([]);
250
- // 是否查询子部门
251
- const childDeptEnable = ref(false);
252
-
253
- // 数据源
254
- const organizationData = ref([]);
255
- const roleData = ref([]);
256
- const positionData = ref([]);
257
- const departmentData = ref([]);
258
- const subordinateData = ref([]);
259
- const employeeList = ref([]);
260
- const currentActive = ref([]);
261
- const currentNodeName = ref('');
262
- const selectAll = ref(false);
263
-
264
- // 从名称中获取头像显示文本
265
- const getAvatarText = (name) => {
266
- return name ? name.substring(0, 1) : '';
267
- };
268
-
269
- // 处理组织数据,转换为树形结构
270
- const _processOrgData = (data) => {
271
- // 转换数据结构为树形结构
272
- const map = {};
273
- const result = [];
274
-
275
- data.forEach(item => {
276
- map[item.id] = {
277
- ...item,
278
- name: item.name,
279
- id: item.id,
280
- children: []
281
- };
282
- });
283
-
284
- data.forEach(item => {
285
- const node = map[item.id];
286
-
287
- if (item.manager_dept && map[item.manager_dept]) {
288
- map[item.manager_dept].children.push(node);
289
- } else {
290
- // 只有在显示根组织或不存在父节点时才添加到结果中
291
- if (props.showRootOrg || !item.manager_dept) {
292
- result.push(node);
293
- }
294
- }
295
- });
296
-
297
- return result;
298
- };
299
-
300
- // 更新全选状态
301
- const updateSelectAllStatus = () => {
302
- selectAll.value = employeeList.value.length > 0 && employeeList.value.every(item => item.checked);
303
- };
304
-
305
- // 选中的员工列表
306
- const selectedEmployees = computed(() => {
307
- return employeeList.value.filter((item) => item.checked);
308
- });
309
-
310
- // 根据搜索文本过滤的员工列表
311
- const filteredEmployeeList = computed(() => {
312
- if (!searchText.value) {
313
- return employeeList.value;
314
- }
315
-
316
- const keyword = searchText.value.toLowerCase();
317
- return employeeList.value.filter((item) => {
318
- return (
319
- item.name.toLowerCase().includes(keyword) ||
320
- (item.pinyin && item.pinyin.toLowerCase().includes(keyword)) ||
321
- (item.code && item.code.toLowerCase().includes(keyword))
322
- );
323
- });
324
- });
325
-
326
- const allData = ref([])
327
-
328
- const fetchAllData = async () => {
329
- const response = await dataService.fetch({}, {}, '/process/deptList');
330
- employeeList.value = response;
331
- }
332
- fetchAllData()
333
-
334
- // 获取组织架构数据
335
- const fetchOrganizationData = async () => {
336
- loading.value = true;
337
- try {
338
- const response = await dataService.fetch(
339
- {},
340
- {
341
- apiId: 1933,
342
- key: 'organizationalStructure'
343
- },"/process/deptList"
344
- );
345
- organizationData.value = response;
346
- handleActive(response[0].id, 'organization')
347
- // organizationData.value = processOrgData(response.data || []);
348
- } catch (error) {
349
- MessagePlugin.error({
350
- content: '获取组织架构数据失败',
351
- duration: 3000
352
- });
353
- } finally {
354
- loading.value = false;
355
- }
356
- };
357
-
358
- // 获取角色数据
359
- const fetchRoleData = async () => {
360
- loading.value = true;
361
- try {
362
- const response = await dataService.fetch(
363
- {},
364
- {},
365
- '/process/roleList'
366
- );
367
- roleData.value = response || [];
368
- } catch (error) {
369
- MessagePlugin.error({
370
- content: '获取角色数据失败',
371
- duration: 3000
372
- });
373
- } finally {
374
- loading.value = false;
375
- }
376
- };
377
-
378
- // 获取岗位数据
379
- const fetchPositionData = async () => {
380
- loading.value = true;
381
- try {
382
- const response = await dataService.fetch(
383
- {},
384
- {
385
- },
386
- '/process/roleList'
387
- );
388
- positionData.value = response?.data || [];
389
- } catch (error) {
390
- MessagePlugin.error({
391
- content: '获取岗位数据失败',
392
- duration: 3000
393
- });
394
- } finally {
395
- loading.value = false;
396
- }
397
- };
398
-
399
- // 获取部门数据
400
- const fetchDepartmentData = async () => {
401
- loading.value = true;
402
- try {
403
- const response = await dataService.fetch(
404
- {},
405
- {
406
- apiId: 1933,
407
- key: 'departmentList',
408
- apiType: 'MULTIPLE_DATA_SEARCH'
409
- }
410
- );
411
- departmentData.value = response?.data || [];
412
- } catch (error) {
413
- MessagePlugin.error({
414
- content: '获取部门数据失败',
415
- duration: 3000
416
- });
417
- } finally {
418
- loading.value = false;
419
- }
420
- };
421
-
422
- // 获取下属数据
423
- const fetchSubordinateData = async () => {
424
- loading.value = true;
425
- try {
426
- const response = await dataService.fetch(
427
- {},
428
- {
429
- apiKey: 'subordinateList',
430
- apiType: 'MULTIPLE_DATA_SEARCH'
431
- }
432
- );
433
- subordinateData.value = response?.data || [];
434
- } catch (error) {
435
- MessagePlugin.error({
436
- content: '获取下属数据失败',
437
- duration: 3000
438
- });
439
- } finally {
440
- loading.value = false;
441
- }
442
- };
443
-
444
- // 根据节点ID获取员工列表
445
- const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
446
- loading.value = true;
447
- try {
448
- const params = {};
449
-
450
- // 只有当nodeId不为空且type有效时,添加对应参数
451
- if (nodeId && type) {
452
- // 根据不同类型设置不同的查询参数
453
- switch (type) {
454
- case 'organization':
455
- params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId;
456
- // 添加子部门查询参数
457
- params.childDeptEnable = childDeptEnable.value;
458
- break;
459
- case 'role':
460
- params.roleKeyWork = nodeId[0];
461
- break;
462
- case 'position':
463
- params.positionId = nodeId;
464
- break;
465
- case 'department':
466
- params.departmentId = nodeId;
467
- break;
468
- case 'subordinate':
469
- params.managerId = nodeId;
470
- break;
471
- }
472
- }
473
-
474
- // 如果有搜索关键词,添加到查询参数中
475
- if (keyword) {
476
- params.keyWord = keyword;
477
- }
478
-
479
- const response = await dataService.fetch(
480
- params,
481
- {},
482
- '/process/userList'
483
- );
484
- // 获取当前已选择的员工ID列表
485
- const selectedIds = [...new Set(tempSelectedEmployees.value.map(emp => emp.id))];
486
-
487
- // 处理返回数据,添加checked属性,保留已选状态
488
- const employees = (response || []).map(emp => ({
489
- ...emp,
490
- checked: selectedIds.includes(emp.id)
491
- }));
492
-
493
- employeeList.value = employees;
494
- updateSelectAllStatus();
495
- } catch (error) {
496
- console.log(error,592)
497
- MessagePlugin.error({
498
- content: '获取员工列表失败',
499
- duration: 3000
500
- });
501
- } finally {
502
- loading.value = false;
503
- }
504
- };
505
-
506
- // 根据ID列表批量获取员工信息
507
- const fetchEmployeesByIds = async (ids) => {
508
- if (!ids || ids.length === 0) {
509
- selectedItems.value = [];
510
- return;
511
- }
512
-
513
- loading.value = true;
514
- try {
515
- const response = await dataService.fetch(
516
- {
517
- userIds: ids // 使用新的接口参数格式
518
- },
519
- {},
520
- '/process/userList' // 直接使用新的API路径
521
- );
522
-
523
- if (response && Array.isArray(response)) {
524
- selectedItems.value = response;
525
- } else {
526
- selectedItems.value = [];
527
- MessagePlugin.warning({
528
- content: '获取员工详情返回的数据格式不正确',
529
- duration: 3000
530
- });
531
- }
532
- } catch (error) {
533
- selectedItems.value = [];
534
- MessagePlugin.error({
535
- content: '获取员工详情失败: ' + (error.message || '未知错误'),
536
- duration: 3000
537
- });
538
- } finally {
539
- loading.value = false;
540
- }
541
- };
542
-
543
- // 处理节点激活
544
- const handleActive = (value, context) => {
545
- currentActive.value = [value];
546
- currentNodeName.value = context.node?.label || '';
547
-
548
- // 获取该节点下的员工
549
- fetchEmployeesByNode(value, activeTab.value);
550
- };
551
-
552
- // 选择部门
553
- const selectDepartment = (department) => {
554
- currentNodeName.value = department.name;
555
- fetchEmployeesByNode(department.id, activeTab.value);
556
- };
557
-
558
- // 处理全选
559
- const handleSelectAll = (checked) => {
560
- employeeList.value.forEach(item => {
561
- item.checked = checked;
562
-
563
- // 如果选中,确保添加到临时选中列表
564
- if (checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
565
- tempSelectedEmployees.value.push(item);
566
- }
567
- });
568
- };
569
-
570
- // 处理选中状态变更
571
- const handleCheckChange = (item) => {
572
- // 单选模式下,取消其他选中
573
- if (props.single) {
574
- employeeList.value.forEach(emp => {
575
- if (emp.id !== item.id) {
576
- emp.checked = false;
577
- }
578
- });
579
- console.log(item,573)
580
- // 单选模式下,直接替换tempSelectedEmployees
581
- tempSelectedEmployees.value = item.checked ? [item] : [];
582
- } else {
583
- // 多选模式
584
- // 如果选中,添加到临时选中列表
585
- if (item.checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
586
- tempSelectedEmployees.value.push(item);
587
- } else if (!item.checked) {
588
- // 如果取消选中,从临时选中列表中移除
589
- const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
590
- if (index !== -1) {
591
- tempSelectedEmployees.value.splice(index, 1);
592
- }
593
- }
594
- }
595
-
596
- // 检查最大选择数量限制
597
- if (props.maxCount > 0) {
598
- const checkedCount = tempSelectedEmployees.value.length;
599
- if (checkedCount > props.maxCount) {
600
- item.checked = false;
601
- const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
602
- if (index !== -1) {
603
- tempSelectedEmployees.value.splice(index, 1);
604
- }
605
- MessagePlugin.warning({
606
- content: `最多只能选择${props.maxCount}个人员`,
607
- duration: 3000
608
- });
609
- }
610
- }
611
-
612
- updateSelectAllStatus();
613
- };
614
-
615
- // 移除已选择的项目
616
- const removeItem = (index, id) => {
617
- // 移除ID
618
- const newIds = [...props.modelValue];
619
- const idIndex = newIds.indexOf(id);
620
- if (idIndex !== -1) {
621
- newIds.splice(idIndex, 1);
622
- emit('update:modelValue', newIds);
623
- emit('change', newIds);
624
- }
625
-
626
- // 移除展示项
627
- selectedItems.value.splice(index, 1);
628
- };
629
-
630
- // 从已选列表中移除员工
631
- const removeSelectedEmployee = (employee) => {
632
- // 将员工的checked状态设为false
633
- const foundEmployee = employeeList.value.find(item => item.id === employee.id);
634
- if (foundEmployee) {
635
- foundEmployee.checked = false;
636
- }
637
-
638
- // 从临时选中列表中移除
639
- const index = tempSelectedEmployees.value.findIndex(emp => emp.id === employee.id);
640
- if (index !== -1) {
641
- tempSelectedEmployees.value.splice(index, 1);
642
- }
643
-
644
- // 更新全选状态
645
- updateSelectAllStatus();
646
- };
647
-
648
- // 初始化选择器
649
- const initSelector = async () => {
650
- // 获取数据
651
- if (activeTab.value === 'organization' && organizationData.value.length === 0) {
652
- await fetchOrganizationData();
653
- } else if (activeTab.value === 'role' && roleData.value.length === 0) {
654
- await fetchRoleData();
655
- } else if (activeTab.value === 'position' && positionData.value.length === 0) {
656
- await fetchPositionData();
657
- } else if (activeTab.value === 'department' && departmentData.value.length === 0) {
658
- await fetchDepartmentData();
659
- } else if (activeTab.value === 'subordinate' && subordinateData.value.length === 0) {
660
- await fetchSubordinateData();
661
- }
662
- };
663
-
664
- // 显示对话框
665
- const showDialog = () => {
666
- // 初始化临时选中列表
667
- if (selectedItems.value.length > 0) {
668
- tempSelectedEmployees.value = [...selectedItems.value];
669
- } else {
670
- tempSelectedEmployees.value = [];
671
- }
672
-
673
- // 初始化数据
674
- if(props.visible == null){
675
- initSelector();
676
- }
677
- dialogVisible.value = true;
678
- };
679
-
680
- // 确认选择
681
- const handleConfirm = () => {
682
- const selectedEmployeeIds = tempSelectedEmployees.value.map(item => item.id);
683
-
684
- emit('update:modelValue', selectedEmployeeIds);
685
- emit('change', selectedEmployeeIds);
686
- dialogVisible.value = false;
687
- };
688
-
689
- // 取消选择
690
- const handleCancel = () => {
691
- // 放弃临时选择
692
- tempSelectedEmployees.value = [];
693
- dialogVisible.value = false;
694
- };
695
-
696
- // 监听标签页切换
697
- watch(activeTab, () => {
698
- // 切换标签页时重新加载数据
699
- initSelector();
700
- });
701
-
702
- // 监听modelValue变化,更新展示的员工信息
703
- watch(() => props.modelValue, (newIds, oldIds) => {
704
- // 判断值是否真的变化了 (通过比较JSON字符串)
705
- const newIdsStr = JSON.stringify(newIds || []);
706
- const oldIdsStr = JSON.stringify(oldIds || []);
707
-
708
- if (newIdsStr !== oldIdsStr) {
709
- // 获取员工详情数据
710
- fetchEmployeesByIds(newIds);
711
- }
712
- }, { immediate: true, deep: true });
713
- watch(() => props.visible, (val) => {
714
- tempSelectedEmployees.value = [];
715
- currentActive.value = [];
716
- currentNodeName.value = '';
717
- if (val) {
718
- fetchOrganizationData()
719
- }
720
- }, { immediate: true })
721
- // 监听选中员工变化,更新临时已选列表
722
- watch(selectedEmployees, (newVal) => {
723
- // 更新临时选中列表,保留之前不在当前列表中的已选员工
724
- const currentIds = new Set(newVal.map(emp => emp.id));
725
-
726
- // 移除tempSelectedEmployees中已经不再选中的员工
727
- tempSelectedEmployees.value = tempSelectedEmployees.value.filter(emp =>
728
- !currentIds.has(emp.id) || newVal.some(item => item.id === emp.id)
729
- );
730
-
731
- // 添加新选中的员工
732
- newVal.forEach(emp => {
733
- if (!tempSelectedEmployees.value.some(item => item.id === emp.id)) {
734
- tempSelectedEmployees.value.push(emp);
735
- }
736
- });
737
- }, { deep: true });
738
-
739
- // 监听子部门查询开关变化
740
- watch(childDeptEnable, () => {
741
- // 如果当前在组织架构页面且有选中节点,重新加载员工列表
742
- if (activeTab.value === 'organization' && currentActive.value && currentActive.value.length > 0) {
743
- fetchEmployeesByNode(currentActive.value[0], activeTab.value);
744
- }
745
- });
746
-
747
- // 防抖函数
748
- const debounce = (fn, delay) => {
749
- let timer = null;
750
- return function(...args) {
751
- if (timer) clearTimeout(timer);
752
- timer = setTimeout(() => {
753
- fn.apply(this, args);
754
- }, delay);
755
- };
756
- };
757
-
758
- // 防抖处理过的搜索函数
759
- const debouncedSearch = debounce((keyword) => {
760
- if (keyword) {
761
- const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
762
- const type = nodeId ? activeTab.value : null;
763
- fetchEmployeesByNode(nodeId, type, keyword);
764
- } else if (currentActive.value && currentActive.value.length > 0) {
765
- // 如果搜索框清空,恢复显示当前选中节点的员工列表
766
- fetchEmployeesByNode(currentActive.value[0], activeTab.value);
767
- } else {
768
- // 如果没有选中节点,清空员工列表
769
- employeeList.value = [];
770
- }
771
- }, 300); // 300ms防抖
772
-
773
- // 监听搜索文本变化,触发搜索
774
- watch(searchText, (newValue) => {
775
- debouncedSearch(newValue);
776
- }, { immediate: false });
777
-
778
- // 组件挂载时执行
779
- onMounted(() => {
780
- // 获取已选员工详情
781
- fetchEmployeesByIds(props.modelValue);
782
- });
783
-
784
- // 处理搜索图标点击
785
- const handleSearchClick = () => {
786
- if (searchText.value) {
787
- const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
788
- const type = nodeId ? activeTab.value : null;
789
- fetchEmployeesByNode(nodeId, type, searchText.value);
790
- }
791
- };
792
-
793
- // 处理回车键搜索
794
- const handleSearchEnter = () => {
795
- if (searchText.value) {
796
- const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
797
- const type = nodeId ? activeTab.value : null;
798
- fetchEmployeesByNode(nodeId, type, searchText.value);
799
- }
800
- };
801
-
802
- // 清除搜索
803
- const clearSearch = () => {
804
- searchText.value = '';
805
- if (currentActive.value && currentActive.value.length > 0) {
806
- fetchEmployeesByNode(currentActive.value[0], activeTab.value);
807
- } else {
808
- // 如果没有选中节点,重置员工列表但保留选中状态
809
- employeeList.value = employeeList.value.map(emp => ({
810
- ...emp,
811
- checked: tempSelectedEmployees.value.some(item => item.id === emp.id)
812
- }));
813
- }
814
- };
815
- </script>
816
-
817
- <style scoped>
818
- .ebiz-employee-selector {
819
- width: 100%;
820
- display: flex;
821
- flex-direction: column;
822
- }
823
-
824
- /* 选择框展示区 */
825
- .employee-selector-container {
826
- min-height: 32px;
827
- width: 100%;
828
- border: 1px solid #dcdcdc;
829
- border-radius: 3px;
830
- padding: 4px 8px;
831
- display: flex;
832
- flex-wrap: wrap;
833
- gap: 8px;
834
- align-items: center;
835
- }
836
-
837
- .selected-items {
838
- display: flex;
839
- flex-wrap: wrap;
840
- gap: 8px;
841
- }
842
-
843
- .selected-item {
844
- display: flex;
845
- align-items: center;
846
- background-color: #f0f0f0;
847
- border-radius: 3px;
848
- padding: 2px 8px 2px 2px;
849
- gap: 8px;
850
- }
851
-
852
- .item-info {
853
- display: flex;
854
- align-items: center;
855
- gap: 4px;
856
- }
857
-
858
- .item-code {
859
- color: #999;
860
- font-size: 12px;
861
- }
862
-
863
- .item-name {
864
- font-size: 14px;
865
- }
866
-
867
- .item-remove {
868
- cursor: pointer;
869
- color: #999;
870
- font-size: 12px;
871
- }
872
-
873
- .item-remove:hover {
874
- color: #E34D59;
875
- }
876
-
877
- /* 选择弹窗 */
878
- .selector-dialog-content {
879
- display: flex;
880
- height: 500px;
881
- }
882
-
883
- .left-panel, .right-panel {
884
- height: 100%;
885
- overflow: hidden;
886
- display: flex;
887
- flex-direction: column;
888
- }
889
-
890
- .left-panel {
891
- width: 40%;
892
- border-right: 1px solid #dcdcdc;
893
- padding-right: 16px;
894
- }
895
-
896
- .right-panel {
897
- width: 60%;
898
- padding-left: 16px;
899
- }
900
-
901
- .search-box {
902
- margin-bottom: 16px;
903
- }
904
-
905
- .right-panel .search-box {
906
- margin-top: 8px;
907
- margin-bottom: 16px;
908
- display: flex;
909
- align-items: center;
910
- gap: 8px;
911
- }
912
-
913
- .right-panel .search-box .t-input {
914
- width: 100%;
915
- border-radius: 4px;
916
- }
917
-
918
- .right-panel .search-box .t-input__suffix-icon {
919
- cursor: pointer;
920
- }
921
-
922
- .right-panel .search-box .t-input__suffix-icon:hover {
923
- color: var(--td-brand-color);
924
- }
925
-
926
- .selector-tabs {
927
- margin-bottom: 16px;
928
- }
929
-
930
- .content-area {
931
- flex: 1;
932
- overflow: auto;
933
- position: relative;
934
- }
935
-
936
- .loading-container {
937
- position: absolute;
938
- top: 0;
939
- left: 0;
940
- right: 0;
941
- bottom: 0;
942
- display: flex;
943
- justify-content: center;
944
- align-items: center;
945
- background-color: rgba(255, 255, 255, 0.6);
946
- z-index: 1;
947
- }
948
-
949
- .tab-content {
950
- height: 100%;
951
- overflow: auto;
952
- }
953
-
954
- .department-item {
955
- cursor: pointer;
956
- padding: 8px;
957
- }
958
-
959
- .department-item:hover {
960
- background-color: #f5f5f5;
961
- }
962
-
963
- .employee-header {
964
- display: flex;
965
- justify-content: space-between;
966
- align-items: center;
967
- margin-bottom: 16px;
968
- }
969
-
970
- .employee-title {
971
- font-weight: bold;
972
- font-size: 16px;
973
- display: flex;
974
- align-items: center;
975
- gap: 10px;
976
- }
977
-
978
- .sub-dept-option {
979
- margin-left: 10px;
980
- font-weight: normal;
981
- font-size: 14px;
982
- }
983
-
984
- .employee-count {
985
- display: flex;
986
- align-items: center;
987
- gap: 8px;
988
- }
989
-
990
- .count-info {
991
- color: #999;
992
- font-size: 14px;
993
- }
994
-
995
- .employee-list {
996
- flex: 1;
997
- overflow: auto;
998
- display: flex;
999
- flex-direction: column;
1000
- gap: 8px;
1001
- }
1002
-
1003
- .employee-item {
1004
- display: flex;
1005
- align-items: center;
1006
- gap: 12px;
1007
- padding: 8px;
1008
- border-radius: 4px;
1009
- }
1010
-
1011
- .employee-item:hover {
1012
- background-color: #f5f5f5;
1013
- }
1014
-
1015
- .employee-avatar {
1016
- display: flex;
1017
- align-items: center;
1018
- }
1019
-
1020
- .employee-info {
1021
- display: flex;
1022
- gap: 8px;
1023
- align-items: center;
1024
- }
1025
-
1026
- .employee-code {
1027
- color: #999;
1028
- font-size: 12px;
1029
- }
1030
-
1031
- .employee-name {
1032
- font-size: 14px;
1033
- }
1034
-
1035
- .empty-data {
1036
- display: flex;
1037
- justify-content: center;
1038
- align-items: center;
1039
- height: 200px;
1040
- }
1041
-
1042
- .dialog-footer {
1043
- display: flex;
1044
- justify-content: space-between;
1045
- align-items: center;
1046
- padding: 16px 0;
1047
- }
1048
-
1049
- .selected-preview {
1050
- color: #666;
1051
- }
1052
-
1053
- .dialog-actions {
1054
- display: flex;
1055
- gap: 8px;
1056
- }
1057
-
1058
- .selected-people-list {
1059
- margin-top: 8px;
1060
- display: flex;
1061
- flex-wrap: wrap;
1062
- gap: 8px;
1063
- }
1064
-
1065
- .selected-people-item {
1066
- display: flex;
1067
- align-items: center;
1068
- background-color: #f0f0f0;
1069
- border-radius: 3px;
1070
- padding: 2px 8px 2px 2px;
1071
- gap: 8px;
1072
- }
1073
-
1074
- .selected-people-item:hover {
1075
- background-color: #e0e0e0;
1076
- }
1077
-
1078
- .selected-people-item .item-remove {
1079
- cursor: pointer;
1080
- color: #999;
1081
- font-size: 12px;
1082
- }
1083
-
1084
- .selected-people-item .item-remove:hover {
1085
- color: #E34D59;
1086
- }
1
+ <template>
2
+ <div class="ebiz-employee-selector">
3
+ <!-- 选择框展示区 -->
4
+ <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
5
+ <div class="selected-items" v-if="selectedItems && selectedItems.length">
6
+ <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
7
+ <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
8
+ <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
9
+ <span class="item-info">
10
+ <span class="item-code">{{ item.no }} - </span>
11
+ <span class="item-name">{{ item.name }}</span>
12
+ </span>
13
+ <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
14
+ </div>
15
+ </div>
16
+ <t-button @click="showDialog" variant="text" theme="primary">选择人员</t-button>
17
+ </div>
18
+
19
+ <!-- 选择弹窗 -->
20
+ <t-dialog v-model:visible="dialogVisible" header="选择人员" :width="800" footer :close-btn="true"
21
+ :close-on-esc-keydown="true" :close-on-overlay-click="true" destroyOnClose>
22
+
23
+ <!-- 选项卡 -->
24
+ <t-tabs v-model="activeTab" class="selector-tabs">
25
+ <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false"></t-tab-panel>
26
+ <t-tab-panel value="role" label="角色" :destroyOnHide="false"></t-tab-panel>
27
+ <!-- <t-tab-panel value="position" label="岗位" :destroyOnHide="false"></t-tab-panel> -->
28
+ <!-- <t-tab-panel value="department" label="同部门" :destroyOnHide="false"></t-tab-panel> -->
29
+ <!-- <t-tab-panel value="subordinate" label="我的下属" :destroyOnHide="false"></t-tab-panel> -->
30
+ </t-tabs>
31
+
32
+
33
+ <div>
34
+
35
+ <div class="selector-dialog-content">
36
+ <!-- 左侧选择区域 -->
37
+ <div class="left-panel">
38
+ <!-- 内容区域 -->
39
+ <div class="content-area">
40
+ <div v-if="loading" class="loading-container">
41
+ <t-loading />
42
+ </div>
43
+ <!-- 组织架构 -->
44
+ <div v-show="activeTab === 'organization'" class="tab-content">
45
+ <t-tree ref="organizationTree" :data="organizationData"
46
+ :keys="{ label: 'name', value: 'id', children: 'children' }" hover activable :active="currentActive"
47
+ @active="handleActive" />
48
+ </div>
49
+
50
+ <!-- 角色 -->
51
+ <div v-show="activeTab === 'role'" class="tab-content">
52
+ <t-tree ref="roleTree" :data="roleData" :keys="{ label: 'name', value: 'code' }" hover activable
53
+ :active="currentActive" @active="handleActive" />
54
+ </div>
55
+
56
+ <!-- 岗位 -->
57
+ <div v-show="activeTab === 'position'" class="tab-content">
58
+ <t-tree ref="positionTree" :data="positionData" :keys="{ label: 'name', value: 'id' }" hover activable
59
+ :active="currentActive" @active="handleActive" />
60
+ </div>
61
+
62
+ <!-- 同部门 -->
63
+ <div v-show="activeTab === 'department'" class="tab-content">
64
+ <t-list :split="true" size="small">
65
+ <t-list-item v-for="(item, index) in departmentData" :key="index">
66
+ <div class="department-item" @click="selectDepartment(item)">
67
+ {{ item.name }}
68
+ </div>
69
+ </t-list-item>
70
+ </t-list>
71
+ </div>
72
+
73
+ <!-- 我的下属 -->
74
+ <div v-show="activeTab === 'subordinate'" class="tab-content">
75
+ <t-list :split="true" size="small">
76
+ <t-list-item v-for="(item, index) in subordinateData" :key="index">
77
+ <div class="department-item" @click="selectDepartment(item)">
78
+ {{ item.name }}
79
+ </div>
80
+ </t-list-item>
81
+ </t-list>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- 右侧人员列表区域 -->
87
+ <div class="right-panel">
88
+ <div class="employee-header">
89
+ <div class="employee-title">
90
+ {{ currentNodeName || '人员列表' }}
91
+ <div v-if="activeTab === 'organization'" class="sub-dept-option">
92
+ <t-checkbox v-model="childDeptEnable">包含子部门</t-checkbox>
93
+ </div>
94
+ </div>
95
+ <div class="employee-count" v-if="!single">
96
+ <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
97
+ <span class="count-info">共 {{ employeeList.length }} 人</span>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- 搜索框 -->
102
+ <div class="search-box">
103
+ <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号搜索" clearable
104
+ @keyup.enter="handleSearchEnter">
105
+ <template #suffix-icon>
106
+ <t-icon name="search" @click="handleSearchClick"></t-icon>
107
+ </template>
108
+ </t-input>
109
+ <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn" @click="clearSearch">清除搜索</t-button>
110
+ </div>
111
+
112
+ <div class="employee-list">
113
+ <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item">
114
+ <t-checkbox v-model="item.checked" @change="handleCheckChange(item)"></t-checkbox>
115
+ <div class="employee-avatar">
116
+ <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
117
+ <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
118
+ </div>
119
+ <div class="employee-info">
120
+ <div class="employee-code">{{ item.no }} - </div>
121
+ <div class="employee-name">{{ item.name }}</div>
122
+ </div>
123
+ </div>
124
+ <div v-if="filteredEmployeeList.length === 0" class="empty-data">
125
+ <t-empty />
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+
133
+ <!-- 底部按钮区域 -->
134
+ <template #footer>
135
+ <div class="dialog-footer">
136
+ <div class="selected-preview">
137
+ 已选: {{ tempSelectedEmployees.length }} 人
138
+ <div class="selected-people-list" v-if="tempSelectedEmployees.length > 0">
139
+ <div v-for="(item, index) in tempSelectedEmployees" :key="index" class="selected-people-item">
140
+ <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
141
+ <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
142
+ <span class="item-info">
143
+ <span class="item-code">{{ item.no }}</span>
144
+ <span class="item-name">{{ item.name }}</span>
145
+ </span>
146
+ <t-icon name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div class="dialog-actions">
151
+ <t-button theme="default" @click="handleCancel">取消</t-button>
152
+ <t-button theme="primary" @click="handleConfirm">确定</t-button>
153
+ </div>
154
+ </div>
155
+ </template>
156
+ </t-dialog>
157
+ </div>
158
+ </template>
159
+
160
+ <script setup>
161
+ import { ref, computed, watch, onMounted } from 'vue';
162
+ import {
163
+ Dialog as TDialog,
164
+ Button as TButton,
165
+ Icon as TIcon,
166
+ Input as TInput,
167
+ Tabs as TTabs,
168
+ TabPanel as TTabPanel,
169
+ Loading as TLoading,
170
+ Tree as TTree,
171
+ Avatar as TAvatar,
172
+ Checkbox as TCheckbox,
173
+ Empty as TEmpty,
174
+ List as TList,
175
+ ListItem as TListItem,
176
+ MessagePlugin
177
+ } from 'tdesign-vue-next';
178
+ import dataService from '../apiService/simpleDataService';
179
+
180
+ // 定义组件属性
181
+ const props = defineProps({
182
+ // 选中的数据,支持v-model,只存储ID列表
183
+ showDefault: {
184
+ type: Boolean,
185
+ default: true
186
+ },
187
+ modelValue: {
188
+ type: Array,
189
+ default: () => []
190
+ },
191
+ // 单选模式
192
+ single: {
193
+ type: Boolean,
194
+ default: false
195
+ },
196
+ // 是否展示默认标签页
197
+ showDefaultTab: {
198
+ type: Boolean,
199
+ default: true
200
+ },
201
+ visible:{
202
+ type: Boolean,
203
+ default: null
204
+ },
205
+ // 是否包含部门
206
+ includeDepartment: {
207
+ type: Boolean,
208
+ default: false
209
+ },
210
+ // 默认标签页
211
+ defaultTab: {
212
+ type: String,
213
+ default: 'organization'
214
+ },
215
+ // 是否展示顶层组织
216
+ showRootOrg: {
217
+ type: Boolean,
218
+ default: true
219
+ },
220
+ // 最大选择数量,0表示不限制
221
+ maxCount: {
222
+ type: Number,
223
+ default: 0
224
+ }
225
+ });
226
+
227
+ // 定义组件事件
228
+ const emit = defineEmits(['update:modelValue', 'change','update:visible']);
229
+ const tempVisible = ref(false);
230
+ // 内部状态变量
231
+ const dialogVisible = computed({
232
+ set(val){
233
+ if(props.visible==null){
234
+ tempVisible.value = val;
235
+ return
236
+ }
237
+ emit('update:visible', val)
238
+ },
239
+ get(){
240
+ return props.visible ?? tempVisible.value
241
+ }
242
+ });
243
+
244
+ const searchText = ref('');
245
+ const activeTab = ref(props.defaultTab);
246
+ const loading = ref(false);
247
+ const selectedItems = ref([]);
248
+ // 对话框中临时保存的选中员工列表
249
+ const tempSelectedEmployees = ref([]);
250
+ // 是否查询子部门
251
+ const childDeptEnable = ref(false);
252
+
253
+ // 数据源
254
+ const organizationData = ref([]);
255
+ const roleData = ref([]);
256
+ const positionData = ref([]);
257
+ const departmentData = ref([]);
258
+ const subordinateData = ref([]);
259
+ const employeeList = ref([]);
260
+ const currentActive = ref([]);
261
+ const currentNodeName = ref('');
262
+ const selectAll = ref(false);
263
+
264
+ // 从名称中获取头像显示文本
265
+ const getAvatarText = (name) => {
266
+ return name ? name.substring(0, 1) : '';
267
+ };
268
+
269
+ // 处理组织数据,转换为树形结构
270
+ const _processOrgData = (data) => {
271
+ // 转换数据结构为树形结构
272
+ const map = {};
273
+ const result = [];
274
+
275
+ data.forEach(item => {
276
+ map[item.id] = {
277
+ ...item,
278
+ name: item.name,
279
+ id: item.id,
280
+ children: []
281
+ };
282
+ });
283
+
284
+ data.forEach(item => {
285
+ const node = map[item.id];
286
+
287
+ if (item.manager_dept && map[item.manager_dept]) {
288
+ map[item.manager_dept].children.push(node);
289
+ } else {
290
+ // 只有在显示根组织或不存在父节点时才添加到结果中
291
+ if (props.showRootOrg || !item.manager_dept) {
292
+ result.push(node);
293
+ }
294
+ }
295
+ });
296
+
297
+ return result;
298
+ };
299
+
300
+ // 更新全选状态
301
+ const updateSelectAllStatus = () => {
302
+ selectAll.value = employeeList.value.length > 0 && employeeList.value.every(item => item.checked);
303
+ };
304
+
305
+ const updateSelectStatus = ()=>{
306
+ employeeList.value.forEach(item => {
307
+ item.checked = props.modelValue.includes(item.id);
308
+ })
309
+ }
310
+
311
+ // 选中的员工列表
312
+ const selectedEmployees = computed(() => {
313
+ return employeeList.value.filter((item) => item.checked);
314
+ });
315
+
316
+ // 根据搜索文本过滤的员工列表
317
+ const filteredEmployeeList = computed(() => {
318
+ if (!searchText.value) {
319
+ return employeeList.value;
320
+ }
321
+
322
+ const keyword = searchText.value.toLowerCase();
323
+ return employeeList.value.filter((item) => {
324
+ return (
325
+ item.name.toLowerCase().includes(keyword) ||
326
+ (item.pinyin && item.pinyin.toLowerCase().includes(keyword)) ||
327
+ (item.code && item.code.toLowerCase().includes(keyword))
328
+ );
329
+ });
330
+ });
331
+
332
+ const allData = ref([])
333
+
334
+ const fetchAllData = async () => {
335
+ const response = await dataService.fetch({}, {}, '/process/deptList');
336
+ employeeList.value = response ?? [];
337
+ }
338
+ fetchAllData()
339
+
340
+ // 获取组织架构数据
341
+ const fetchOrganizationData = async () => {
342
+ loading.value = true;
343
+ try {
344
+ const response = await dataService.fetch(
345
+ {},
346
+ {
347
+ apiId: 1933,
348
+ key: 'organizationalStructure'
349
+ },"/process/deptList"
350
+ );
351
+ organizationData.value = response;
352
+ handleActive(response[0].id, 'organization')
353
+ // organizationData.value = processOrgData(response.data || []);
354
+ } catch (error) {
355
+ MessagePlugin.error({
356
+ content: '获取组织架构数据失败',
357
+ duration: 3000
358
+ });
359
+ } finally {
360
+ loading.value = false;
361
+ }
362
+ };
363
+
364
+ // 获取角色数据
365
+ const fetchRoleData = async () => {
366
+ loading.value = true;
367
+ try {
368
+ const response = await dataService.fetch(
369
+ {},
370
+ {},
371
+ '/process/roleList'
372
+ );
373
+ roleData.value = response || [];
374
+ } catch (error) {
375
+ MessagePlugin.error({
376
+ content: '获取角色数据失败',
377
+ duration: 3000
378
+ });
379
+ } finally {
380
+ loading.value = false;
381
+ }
382
+ };
383
+
384
+ // 获取岗位数据
385
+ const fetchPositionData = async () => {
386
+ loading.value = true;
387
+ try {
388
+ const response = await dataService.fetch(
389
+ {},
390
+ {
391
+ },
392
+ '/process/roleList'
393
+ );
394
+ positionData.value = response?.data || [];
395
+ } catch (error) {
396
+ MessagePlugin.error({
397
+ content: '获取岗位数据失败',
398
+ duration: 3000
399
+ });
400
+ } finally {
401
+ loading.value = false;
402
+ }
403
+ };
404
+
405
+ // 获取部门数据
406
+ const fetchDepartmentData = async () => {
407
+ loading.value = true;
408
+ try {
409
+ const response = await dataService.fetch(
410
+ {},
411
+ {
412
+ apiId: 1933,
413
+ key: 'departmentList',
414
+ apiType: 'MULTIPLE_DATA_SEARCH'
415
+ }
416
+ );
417
+ departmentData.value = response?.data || [];
418
+ } catch (error) {
419
+ MessagePlugin.error({
420
+ content: '获取部门数据失败',
421
+ duration: 3000
422
+ });
423
+ } finally {
424
+ loading.value = false;
425
+ }
426
+ };
427
+
428
+ // 获取下属数据
429
+ const fetchSubordinateData = async () => {
430
+ loading.value = true;
431
+ try {
432
+ const response = await dataService.fetch(
433
+ {},
434
+ {
435
+ apiKey: 'subordinateList',
436
+ apiType: 'MULTIPLE_DATA_SEARCH'
437
+ }
438
+ );
439
+ subordinateData.value = response?.data || [];
440
+ } catch (error) {
441
+ MessagePlugin.error({
442
+ content: '获取下属数据失败',
443
+ duration: 3000
444
+ });
445
+ } finally {
446
+ loading.value = false;
447
+ }
448
+ };
449
+
450
+ // 根据节点ID获取员工列表
451
+ const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
452
+ loading.value = true;
453
+ try {
454
+ const params = {};
455
+
456
+ // 只有当nodeId不为空且type有效时,添加对应参数
457
+ if (nodeId && type) {
458
+ // 根据不同类型设置不同的查询参数
459
+ switch (type) {
460
+ case 'organization':
461
+ params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId;
462
+ // 添加子部门查询参数
463
+ params.childDeptEnable = childDeptEnable.value;
464
+ break;
465
+ case 'role':
466
+ params.roleKeyWork = nodeId[0];
467
+ break;
468
+ case 'position':
469
+ params.positionId = nodeId;
470
+ break;
471
+ case 'department':
472
+ params.departmentId = nodeId;
473
+ break;
474
+ case 'subordinate':
475
+ params.managerId = nodeId;
476
+ break;
477
+ }
478
+ }
479
+
480
+ // 如果有搜索关键词,添加到查询参数中
481
+ if (keyword) {
482
+ params.keyWord = keyword;
483
+ }
484
+
485
+ const response = await dataService.fetch(
486
+ params,
487
+ {},
488
+ '/process/userList'
489
+ );
490
+ // 获取当前已选择的员工ID列表
491
+ const selectedIds = [...new Set(tempSelectedEmployees.value.map(emp => emp.id))];
492
+
493
+ // 处理返回数据,添加checked属性,保留已选状态
494
+ const employees = (response || []).map(emp => ({
495
+ ...emp,
496
+ checked: selectedIds.includes(emp.id)
497
+ }));
498
+
499
+ employeeList.value = employees;
500
+ updateSelectAllStatus();
501
+ } catch (error) {
502
+ MessagePlugin.error({
503
+ content: '获取员工列表失败',
504
+ duration: 3000
505
+ });
506
+ } finally {
507
+ loading.value = false;
508
+ }
509
+ };
510
+
511
+ // 根据ID列表批量获取员工信息
512
+ const fetchEmployeesByIds = async (ids) => {
513
+ if (!ids || ids.length === 0) {
514
+ selectedItems.value = [];
515
+ return;
516
+ }
517
+
518
+ loading.value = true;
519
+ try {
520
+ const response = await dataService.fetch(
521
+ {
522
+ userIds: ids // 使用新的接口参数格式
523
+ },
524
+ {},
525
+ '/process/userList' // 直接使用新的API路径
526
+ );
527
+
528
+ if (response && Array.isArray(response)) {
529
+ selectedItems.value = response;
530
+ } else {
531
+ selectedItems.value = [];
532
+ MessagePlugin.warning({
533
+ content: '获取员工详情返回的数据格式不正确',
534
+ duration: 3000
535
+ });
536
+ }
537
+ } catch (error) {
538
+ selectedItems.value = [];
539
+ MessagePlugin.error({
540
+ content: '获取员工详情失败: ' + (error.message || '未知错误'),
541
+ duration: 3000
542
+ });
543
+ } finally {
544
+ loading.value = false;
545
+ }
546
+ };
547
+
548
+ // 处理节点激活
549
+ const handleActive = (value, context) => {
550
+ currentActive.value = [value];
551
+ currentNodeName.value = context.node?.label || '';
552
+
553
+ // 获取该节点下的员工
554
+ fetchEmployeesByNode(value, activeTab.value);
555
+ };
556
+
557
+ // 选择部门
558
+ const selectDepartment = (department) => {
559
+ currentNodeName.value = department.name;
560
+ fetchEmployeesByNode(department.id, activeTab.value);
561
+ };
562
+
563
+ // 处理全选
564
+ const handleSelectAll = (checked) => {
565
+ employeeList.value.forEach(item => {
566
+ item.checked = checked;
567
+
568
+ // 如果选中,确保添加到临时选中列表
569
+ if (checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
570
+ tempSelectedEmployees.value.push(item);
571
+ }
572
+ });
573
+ };
574
+
575
+ // 处理选中状态变更
576
+ const handleCheckChange = (item) => {
577
+ // 单选模式下,取消其他选中
578
+ if (props.single) {
579
+ employeeList.value.forEach(emp => {
580
+ if (emp.id !== item.id) {
581
+ emp.checked = false;
582
+ }
583
+ });
584
+ console.log(item,573)
585
+ // 单选模式下,直接替换tempSelectedEmployees
586
+ tempSelectedEmployees.value = item.checked ? [item] : [];
587
+ } else {
588
+ // 多选模式
589
+ // 如果选中,添加到临时选中列表
590
+ if (item.checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
591
+ tempSelectedEmployees.value.push(item);
592
+ } else if (!item.checked) {
593
+ // 如果取消选中,从临时选中列表中移除
594
+ const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
595
+ if (index !== -1) {
596
+ tempSelectedEmployees.value.splice(index, 1);
597
+ }
598
+ }
599
+ }
600
+
601
+ // 检查最大选择数量限制
602
+ if (props.maxCount > 0) {
603
+ const checkedCount = tempSelectedEmployees.value.length;
604
+ if (checkedCount > props.maxCount) {
605
+ item.checked = false;
606
+ const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
607
+ if (index !== -1) {
608
+ tempSelectedEmployees.value.splice(index, 1);
609
+ }
610
+ MessagePlugin.warning({
611
+ content: `最多只能选择${props.maxCount}个人员`,
612
+ duration: 3000
613
+ });
614
+ }
615
+ }
616
+
617
+ updateSelectAllStatus();
618
+ };
619
+
620
+ // 移除已选择的项目
621
+ const removeItem = (index, id) => {
622
+ // 移除ID
623
+ const newIds = [...props.modelValue];
624
+ const idIndex = newIds.indexOf(id);
625
+ if (idIndex !== -1) {
626
+ newIds.splice(idIndex, 1);
627
+ emit('update:modelValue', newIds);
628
+ emit('change', newIds);
629
+ }
630
+
631
+ // 移除展示项
632
+ selectedItems.value.splice(index, 1);
633
+ };
634
+
635
+ // 从已选列表中移除员工
636
+ const removeSelectedEmployee = (employee) => {
637
+ // 将员工的checked状态设为false
638
+ const foundEmployee = employeeList.value.find(item => item.id === employee.id);
639
+ if (foundEmployee) {
640
+ foundEmployee.checked = false;
641
+ }
642
+
643
+ // 从临时选中列表中移除
644
+ const index = tempSelectedEmployees.value.findIndex(emp => emp.id === employee.id);
645
+ if (index !== -1) {
646
+ tempSelectedEmployees.value.splice(index, 1);
647
+ }
648
+
649
+ // 更新全选状态
650
+ updateSelectAllStatus();
651
+ };
652
+
653
+ // 初始化选择器
654
+ const initSelector = async () => {
655
+ // 获取数据
656
+ if (activeTab.value === 'organization' && organizationData.value.length === 0) {
657
+ await fetchOrganizationData();
658
+ } else if (activeTab.value === 'role' && roleData.value.length === 0) {
659
+ await fetchRoleData();
660
+ } else if (activeTab.value === 'position' && positionData.value.length === 0) {
661
+ await fetchPositionData();
662
+ } else if (activeTab.value === 'department' && departmentData.value.length === 0) {
663
+ await fetchDepartmentData();
664
+ } else if (activeTab.value === 'subordinate' && subordinateData.value.length === 0) {
665
+ await fetchSubordinateData();
666
+ }
667
+ };
668
+
669
+ // 显示对话框
670
+ const showDialog = () => {
671
+ // 初始化临时选中列表
672
+ if (selectedItems.value.length > 0) {
673
+ tempSelectedEmployees.value = [...selectedItems.value];
674
+ updateSelectStatus()
675
+ } else {
676
+ tempSelectedEmployees.value = [];
677
+ }
678
+
679
+ // 初始化数据
680
+ if(props.visible == null){
681
+ initSelector();
682
+ }
683
+ dialogVisible.value = true;
684
+ };
685
+
686
+ // 确认选择
687
+ const handleConfirm = () => {
688
+ const selectedEmployeeIds = tempSelectedEmployees.value.map(item => item.id);
689
+
690
+ emit('update:modelValue', selectedEmployeeIds);
691
+ emit('change', selectedEmployeeIds);
692
+ dialogVisible.value = false;
693
+ };
694
+
695
+ // 取消选择
696
+ const handleCancel = () => {
697
+ // 放弃临时选择
698
+ tempSelectedEmployees.value = [];
699
+ dialogVisible.value = false;
700
+ };
701
+
702
+ // 监听标签页切换
703
+ watch(activeTab, () => {
704
+ // 切换标签页时重新加载数据
705
+ initSelector();
706
+ });
707
+
708
+ // 监听modelValue变化,更新展示的员工信息
709
+ watch(() => props.modelValue, (newIds, oldIds) => {
710
+ // 判断值是否真的变化了 (通过比较JSON字符串)
711
+ const newIdsStr = JSON.stringify(newIds || []);
712
+ const oldIdsStr = JSON.stringify(oldIds || []);
713
+
714
+ if (newIdsStr !== oldIdsStr) {
715
+ // 获取员工详情数据
716
+ fetchEmployeesByIds(newIds);
717
+ }
718
+ }, { immediate: true, deep: true });
719
+ watch(() => props.visible, (val) => {
720
+ tempSelectedEmployees.value = [];
721
+ currentActive.value = [];
722
+ currentNodeName.value = '';
723
+
724
+ if (val) {
725
+ fetchOrganizationData()
726
+ }
727
+ }, { immediate: true })
728
+ // 监听选中员工变化,更新临时已选列表
729
+ watch(selectedEmployees, (newVal) => {
730
+ // 更新临时选中列表,保留之前不在当前列表中的已选员工
731
+ const currentIds = new Set(newVal.map(emp => emp.id));
732
+
733
+ // 移除tempSelectedEmployees中已经不再选中的员工
734
+ tempSelectedEmployees.value = tempSelectedEmployees.value.filter(emp =>
735
+ !currentIds.has(emp.id) || newVal.some(item => item.id === emp.id)
736
+ );
737
+
738
+ // 添加新选中的员工
739
+ newVal.forEach(emp => {
740
+ if (!tempSelectedEmployees.value.some(item => item.id === emp.id)) {
741
+ tempSelectedEmployees.value.push(emp);
742
+ }
743
+ });
744
+ }, { deep: true });
745
+
746
+ // 监听子部门查询开关变化
747
+ watch(childDeptEnable, () => {
748
+ // 如果当前在组织架构页面且有选中节点,重新加载员工列表
749
+ if (activeTab.value === 'organization' && currentActive.value && currentActive.value.length > 0) {
750
+ fetchEmployeesByNode(currentActive.value[0], activeTab.value);
751
+ }
752
+ });
753
+
754
+ // 防抖函数
755
+ const debounce = (fn, delay) => {
756
+ let timer = null;
757
+ return function(...args) {
758
+ if (timer) clearTimeout(timer);
759
+ timer = setTimeout(() => {
760
+ fn.apply(this, args);
761
+ }, delay);
762
+ };
763
+ };
764
+
765
+ // 防抖处理过的搜索函数
766
+ const debouncedSearch = debounce((keyword) => {
767
+ if (keyword) {
768
+ const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
769
+ const type = nodeId ? activeTab.value : null;
770
+ fetchEmployeesByNode(nodeId, type, keyword);
771
+ } else if (currentActive.value && currentActive.value.length > 0) {
772
+ // 如果搜索框清空,恢复显示当前选中节点的员工列表
773
+ fetchEmployeesByNode(currentActive.value[0], activeTab.value);
774
+ } else {
775
+ // 如果没有选中节点,清空员工列表
776
+ employeeList.value = [];
777
+ }
778
+ }, 300); // 300ms防抖
779
+
780
+ // 监听搜索文本变化,触发搜索
781
+ watch(searchText, (newValue) => {
782
+ debouncedSearch(newValue);
783
+ }, { immediate: false });
784
+
785
+ // 组件挂载时执行
786
+ onMounted(() => {
787
+ // 获取已选员工详情
788
+ fetchEmployeesByIds(props.modelValue);
789
+ });
790
+
791
+ // 处理搜索图标点击
792
+ const handleSearchClick = () => {
793
+ if (searchText.value) {
794
+ const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
795
+ const type = nodeId ? activeTab.value : null;
796
+ fetchEmployeesByNode(nodeId, type, searchText.value);
797
+ }
798
+ };
799
+
800
+ // 处理回车键搜索
801
+ const handleSearchEnter = () => {
802
+ if (searchText.value) {
803
+ const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
804
+ const type = nodeId ? activeTab.value : null;
805
+ fetchEmployeesByNode(nodeId, type, searchText.value);
806
+ }
807
+ };
808
+
809
+ // 清除搜索
810
+ const clearSearch = () => {
811
+ searchText.value = '';
812
+ if (currentActive.value && currentActive.value.length > 0) {
813
+ fetchEmployeesByNode(currentActive.value[0], activeTab.value);
814
+ } else {
815
+ // 如果没有选中节点,重置员工列表但保留选中状态
816
+ employeeList.value = employeeList.value.map(emp => ({
817
+ ...emp,
818
+ checked: tempSelectedEmployees.value.some(item => item.id === emp.id)
819
+ }));
820
+ }
821
+ };
822
+ </script>
823
+
824
+ <style scoped>
825
+ .ebiz-employee-selector {
826
+ width: 100%;
827
+ display: flex;
828
+ flex-direction: column;
829
+ }
830
+
831
+ /* 选择框展示区 */
832
+ .employee-selector-container {
833
+ min-height: 32px;
834
+ width: 100%;
835
+ border: 1px solid #dcdcdc;
836
+ border-radius: 3px;
837
+ padding: 4px 8px;
838
+ display: flex;
839
+ flex-wrap: wrap;
840
+ gap: 8px;
841
+ align-items: center;
842
+ }
843
+
844
+ .selected-items {
845
+ display: flex;
846
+ flex-wrap: wrap;
847
+ gap: 8px;
848
+ }
849
+
850
+ .selected-item {
851
+ display: flex;
852
+ align-items: center;
853
+ background-color: #f0f0f0;
854
+ border-radius: 3px;
855
+ padding: 2px 8px 2px 2px;
856
+ gap: 8px;
857
+ }
858
+
859
+ .item-info {
860
+ display: flex;
861
+ align-items: center;
862
+ gap: 4px;
863
+ }
864
+
865
+ .item-code {
866
+ color: #999;
867
+ font-size: 12px;
868
+ }
869
+
870
+ .item-name {
871
+ font-size: 14px;
872
+ }
873
+
874
+ .item-remove {
875
+ cursor: pointer;
876
+ color: #999;
877
+ font-size: 12px;
878
+ }
879
+
880
+ .item-remove:hover {
881
+ color: #E34D59;
882
+ }
883
+
884
+ /* 选择弹窗 */
885
+ .selector-dialog-content {
886
+ display: flex;
887
+ height: 500px;
888
+ }
889
+
890
+ .left-panel, .right-panel {
891
+ height: 100%;
892
+ overflow: hidden;
893
+ display: flex;
894
+ flex-direction: column;
895
+ }
896
+
897
+ .left-panel {
898
+ width: 40%;
899
+ border-right: 1px solid #dcdcdc;
900
+ padding-right: 16px;
901
+ }
902
+
903
+ .right-panel {
904
+ width: 60%;
905
+ padding-left: 16px;
906
+ }
907
+
908
+ .search-box {
909
+ margin-bottom: 16px;
910
+ }
911
+
912
+ .right-panel .search-box {
913
+ margin-top: 8px;
914
+ margin-bottom: 16px;
915
+ display: flex;
916
+ align-items: center;
917
+ gap: 8px;
918
+ }
919
+
920
+ .right-panel .search-box .t-input {
921
+ width: 100%;
922
+ border-radius: 4px;
923
+ }
924
+
925
+ .right-panel .search-box .t-input__suffix-icon {
926
+ cursor: pointer;
927
+ }
928
+
929
+ .right-panel .search-box .t-input__suffix-icon:hover {
930
+ color: var(--td-brand-color);
931
+ }
932
+
933
+ .selector-tabs {
934
+ margin-bottom: 16px;
935
+ }
936
+
937
+ .content-area {
938
+ flex: 1;
939
+ overflow: auto;
940
+ position: relative;
941
+ }
942
+
943
+ .loading-container {
944
+ position: absolute;
945
+ top: 0;
946
+ left: 0;
947
+ right: 0;
948
+ bottom: 0;
949
+ display: flex;
950
+ justify-content: center;
951
+ align-items: center;
952
+ background-color: rgba(255, 255, 255, 0.6);
953
+ z-index: 1;
954
+ }
955
+
956
+ .tab-content {
957
+ height: 100%;
958
+ overflow: auto;
959
+ }
960
+
961
+ .department-item {
962
+ cursor: pointer;
963
+ padding: 8px;
964
+ }
965
+
966
+ .department-item:hover {
967
+ background-color: #f5f5f5;
968
+ }
969
+
970
+ .employee-header {
971
+ display: flex;
972
+ justify-content: space-between;
973
+ align-items: center;
974
+ margin-bottom: 16px;
975
+ }
976
+
977
+ .employee-title {
978
+ font-weight: bold;
979
+ font-size: 16px;
980
+ display: flex;
981
+ align-items: center;
982
+ gap: 10px;
983
+ }
984
+
985
+ .sub-dept-option {
986
+ margin-left: 10px;
987
+ font-weight: normal;
988
+ font-size: 14px;
989
+ }
990
+
991
+ .employee-count {
992
+ display: flex;
993
+ align-items: center;
994
+ gap: 8px;
995
+ }
996
+
997
+ .count-info {
998
+ color: #999;
999
+ font-size: 14px;
1000
+ }
1001
+
1002
+ .employee-list {
1003
+ flex: 1;
1004
+ overflow: auto;
1005
+ display: flex;
1006
+ flex-direction: column;
1007
+ gap: 8px;
1008
+ }
1009
+
1010
+ .employee-item {
1011
+ display: flex;
1012
+ align-items: center;
1013
+ gap: 12px;
1014
+ padding: 8px;
1015
+ border-radius: 4px;
1016
+ }
1017
+
1018
+ .employee-item:hover {
1019
+ background-color: #f5f5f5;
1020
+ }
1021
+
1022
+ .employee-avatar {
1023
+ display: flex;
1024
+ align-items: center;
1025
+ }
1026
+
1027
+ .employee-info {
1028
+ display: flex;
1029
+ gap: 8px;
1030
+ align-items: center;
1031
+ }
1032
+
1033
+ .employee-code {
1034
+ color: #999;
1035
+ font-size: 12px;
1036
+ }
1037
+
1038
+ .employee-name {
1039
+ font-size: 14px;
1040
+ }
1041
+
1042
+ .empty-data {
1043
+ display: flex;
1044
+ justify-content: center;
1045
+ align-items: center;
1046
+ height: 200px;
1047
+ }
1048
+
1049
+ .dialog-footer {
1050
+ display: flex;
1051
+ justify-content: space-between;
1052
+ align-items: center;
1053
+ padding: 16px 0;
1054
+ }
1055
+
1056
+ .selected-preview {
1057
+ color: #666;
1058
+ }
1059
+
1060
+ .dialog-actions {
1061
+ display: flex;
1062
+ gap: 8px;
1063
+ }
1064
+
1065
+ .selected-people-list {
1066
+ margin-top: 8px;
1067
+ display: flex;
1068
+ flex-wrap: wrap;
1069
+ gap: 8px;
1070
+ }
1071
+
1072
+ .selected-people-item {
1073
+ display: flex;
1074
+ align-items: center;
1075
+ background-color: #f0f0f0;
1076
+ border-radius: 3px;
1077
+ padding: 2px 8px 2px 2px;
1078
+ gap: 8px;
1079
+ }
1080
+
1081
+ .selected-people-item:hover {
1082
+ background-color: #e0e0e0;
1083
+ }
1084
+
1085
+ .selected-people-item .item-remove {
1086
+ cursor: pointer;
1087
+ color: #999;
1088
+ font-size: 12px;
1089
+ }
1090
+
1091
+ .selected-people-item .item-remove:hover {
1092
+ color: #E34D59;
1093
+ }
1087
1094
  </style>