widget.qw 1.0.98 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.development +1 -1
- package/build/style.css +20 -88
- package/build/widget.qw.es.js +280 -784
- package/build/widget.qw.umd.js +280 -784
- package/package.json +1 -1
- package/src/components/CascaderPicker.vue +53 -32
- package/src/components/CascaderPop.vue +77 -72
- package/src/components/index.js +0 -10
- package/src/router/index.ts +0 -5
- package/src/views/cascaderpicker/userpicker.vue +2 -2
- package/src/views/userpicker/index.vue +3 -2
- package/src/components/UserPicker.vue +0 -107
- package/src/components/UsersPicker.vue +0 -118
- package/src/components/widget/UserPop.vue +0 -346
- package/src/views/userspicker/index.vue +0 -43
|
@@ -1,346 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<van-popup v-model:show="show" round position="bottom" class="user-popup">
|
|
3
|
-
<div class="department-selector">
|
|
4
|
-
<div class="picker-header">
|
|
5
|
-
<div class="header-left">
|
|
6
|
-
<van-button @click="onBack" icon="arrow-left" size="small" />
|
|
7
|
-
</div>
|
|
8
|
-
|
|
9
|
-
<!-- 移除header-center包装,直接使用current-path -->
|
|
10
|
-
<div class="current-path">{{ pathsLabel }}</div>
|
|
11
|
-
|
|
12
|
-
<div class="header-right">
|
|
13
|
-
<van-button size="small" @click="onCancel" class="cancel-btn">取消</van-button>
|
|
14
|
-
|
|
15
|
-
<van-button type="primary" size="small" @click="onSubmit" class="confirm-btn">确定</van-button>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<!-- 搜索框 -->
|
|
20
|
-
<van-search v-model="data.keyword" placeholder="输入工号查询" @clear="onClear" @search="onSearch" @cancel="onClear"
|
|
21
|
-
show-action>
|
|
22
|
-
<template #action>
|
|
23
|
-
<div @click="onSearch">搜索</div>
|
|
24
|
-
</template>
|
|
25
|
-
</van-search>
|
|
26
|
-
|
|
27
|
-
<div class="scroll-container">
|
|
28
|
-
<!-- 遍历部门列表 -->
|
|
29
|
-
<van-cell-group>
|
|
30
|
-
<van-cell v-for="dept in subDepts" :key="dept.id" :title="dept.name" is-link @click="onSelectDept(dept)" />
|
|
31
|
-
</van-cell-group>
|
|
32
|
-
|
|
33
|
-
<!-- 遍历人员列表 -->
|
|
34
|
-
<van-radio-group v-model="data.selectedUser">
|
|
35
|
-
<van-cell-group>
|
|
36
|
-
<van-cell v-for="user in subUsers" :key="user.id" :title="`${user.userid} ${user.name}`">
|
|
37
|
-
<template #right-icon>
|
|
38
|
-
<van-radio :name="user.userid" />
|
|
39
|
-
</template>
|
|
40
|
-
</van-cell>
|
|
41
|
-
</van-cell-group>
|
|
42
|
-
</van-radio-group>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
</van-popup>
|
|
46
|
-
</template>
|
|
47
|
-
<script setup>
|
|
48
|
-
import { ref, onMounted, watch, reactive, computed } from "vue";
|
|
49
|
-
import util from "../../util"
|
|
50
|
-
import { useVModel } from '@vueuse/core'
|
|
51
|
-
|
|
52
|
-
const props = defineProps({
|
|
53
|
-
show: {
|
|
54
|
-
type: Boolean,
|
|
55
|
-
default: false,
|
|
56
|
-
},
|
|
57
|
-
// 默认查询所有组织机构
|
|
58
|
-
rootDeptId: {
|
|
59
|
-
type: String,
|
|
60
|
-
default: "1", //组织机构id
|
|
61
|
-
},
|
|
62
|
-
// 二级部门取值范围字典id
|
|
63
|
-
// 取dictionary库.dict的配置id
|
|
64
|
-
deptRangeId: {
|
|
65
|
-
type: String,
|
|
66
|
-
default: ''
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
// 定义emit
|
|
70
|
-
const emit = defineEmits(["update:show", "select"]);
|
|
71
|
-
// 弹出?
|
|
72
|
-
const show = useVModel(props, 'show', emit)
|
|
73
|
-
const data = reactive({
|
|
74
|
-
// 当前选中的机构
|
|
75
|
-
selectedDeptId: '',
|
|
76
|
-
// 所有的部门
|
|
77
|
-
totalDepts: [],
|
|
78
|
-
// 搜索关键字
|
|
79
|
-
keyword: "",
|
|
80
|
-
searchUsers: [],
|
|
81
|
-
selectedUser: null
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
// 查找部门路径列表
|
|
86
|
-
function findDeptPaths(targetDept, tree, path = []) {
|
|
87
|
-
if (!tree || tree.length < 1 || !targetDept || !targetDept.id)
|
|
88
|
-
return []
|
|
89
|
-
|
|
90
|
-
for (const dept of tree) {
|
|
91
|
-
if (dept.id === targetDept.id) {
|
|
92
|
-
return [...path, dept];
|
|
93
|
-
}
|
|
94
|
-
if (dept.subDepartments?.length) {
|
|
95
|
-
const found = findDeptPaths(targetDept, dept.subDepartments, [...path, dept]);
|
|
96
|
-
if (found && found.length > 0) return found;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
return []
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// 选中的部门
|
|
104
|
-
const selectedDept = computed(()=>{
|
|
105
|
-
if(!data.selectedDeptId)
|
|
106
|
-
return null
|
|
107
|
-
|
|
108
|
-
let targetDept = findDept(data.selectedDeptId,data.totalDepts)
|
|
109
|
-
return targetDept
|
|
110
|
-
})
|
|
111
|
-
|
|
112
|
-
//选中部门的路径:部门/科室
|
|
113
|
-
const pathsLabel = computed(() => {
|
|
114
|
-
let paths = findDeptPaths(selectedDept.value, data.totalDepts)
|
|
115
|
-
console.log("paths", paths);
|
|
116
|
-
let res = ''
|
|
117
|
-
paths.forEach((dept) => {
|
|
118
|
-
res += dept.name + "/";
|
|
119
|
-
})
|
|
120
|
-
return res
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
const subDepts = computed(() => {
|
|
124
|
-
if (data.keyword)
|
|
125
|
-
return []
|
|
126
|
-
else if (selectedDept.value)
|
|
127
|
-
return selectedDept.value.subDepartments
|
|
128
|
-
else
|
|
129
|
-
return data.totalDepts
|
|
130
|
-
})
|
|
131
|
-
|
|
132
|
-
const subUsers = computed(() => {
|
|
133
|
-
if (data.keyword)
|
|
134
|
-
return data.searchUsers
|
|
135
|
-
else if (selectedDept.value)
|
|
136
|
-
return selectedDept.value.users
|
|
137
|
-
else
|
|
138
|
-
return []
|
|
139
|
-
})
|
|
140
|
-
|
|
141
|
-
// 获得部门列表
|
|
142
|
-
const queryTotalDepts = async () => {
|
|
143
|
-
// 查询所有部门
|
|
144
|
-
const response = await util.get_subdepartments_users({ departmentId: props.rootDeptId, hasGrandson:false })
|
|
145
|
-
let level2Depts = []
|
|
146
|
-
if(response.data)
|
|
147
|
-
level2Depts = response.data.subDepartments
|
|
148
|
-
|
|
149
|
-
// 取配置的二级部门取值范围
|
|
150
|
-
let level2DeptIds = []
|
|
151
|
-
if (props.deptRangeId) {
|
|
152
|
-
let res = await util.dictionary_dict({ id: props.deptRangeId })
|
|
153
|
-
if (res.data.parseValue && res.data.parseValue.length > 0) {
|
|
154
|
-
level2DeptIds = res.data.parseValue
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
// 只保留指定二级部门列表
|
|
159
|
-
if (props.deptRangeId) {
|
|
160
|
-
if (level2DeptIds && level2DeptIds.length > 0) {
|
|
161
|
-
level2Depts = level2Depts.filter(item => {
|
|
162
|
-
return level2DeptIds.includes(item.id)
|
|
163
|
-
})
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
data.totalDepts = level2Depts || []
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
// 查找机构
|
|
171
|
-
function findDept(deptId, tree) {
|
|
172
|
-
if (!tree || tree.length < 1)
|
|
173
|
-
return null
|
|
174
|
-
|
|
175
|
-
for (const dept of tree) {
|
|
176
|
-
if (dept.id === deptId) {
|
|
177
|
-
return dept
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
const found = findDept(deptId, dept.subDepartments);
|
|
181
|
-
if (found) return found
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
return null
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
// 查找父机构
|
|
188
|
-
function findParentDept(deptId, tree) {
|
|
189
|
-
if (!tree || tree.length < 1)
|
|
190
|
-
return null
|
|
191
|
-
|
|
192
|
-
for (const dept of tree) {
|
|
193
|
-
if (!dept.subDepartments || dept.subDepartments.length < 1)
|
|
194
|
-
continue
|
|
195
|
-
|
|
196
|
-
let ary = dept.subDepartments.filter(item => item.id == deptId)
|
|
197
|
-
if (ary && ary.length > 0)
|
|
198
|
-
return dept
|
|
199
|
-
|
|
200
|
-
const found = findParentDept(deptId, dept.subDepartments);
|
|
201
|
-
if (found) return found
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
return null
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
// 搜索人员
|
|
208
|
-
const onSearch = async () => {
|
|
209
|
-
if (!data.keyword)
|
|
210
|
-
return
|
|
211
|
-
|
|
212
|
-
// 搜索用户
|
|
213
|
-
const res = await util.wx_user_list({ keyword: data.keyword, page: 1, limit: 10 })
|
|
214
|
-
data.searchUsers = res.data.list
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
// 切换部门
|
|
218
|
-
const onSelectDept = async(department) => {
|
|
219
|
-
const res = await util.get_subdepartments_users({ departmentId: department.id, hasGrandson:false })
|
|
220
|
-
let targetDept = findDept(department.id, data.totalDepts)
|
|
221
|
-
targetDept.subDepartments = res.data.subDepartments
|
|
222
|
-
targetDept.users = res.data.users
|
|
223
|
-
data.selectedDeptId = department.id
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
// 返回上一级部门
|
|
227
|
-
const onBack = () => {
|
|
228
|
-
data.keyword = ""
|
|
229
|
-
|
|
230
|
-
let paths = findDeptPaths(selectedDept.value, data.totalDepts)
|
|
231
|
-
if (!paths || paths.length <= 1){
|
|
232
|
-
data.selectedDeptId = ''
|
|
233
|
-
return
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
data.selectedDeptId = paths[paths.length - 2].id
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
// 清除掉选中部门及人
|
|
240
|
-
const reset = () => {
|
|
241
|
-
// 当前选中的机构
|
|
242
|
-
data.selectedDeptId = ''
|
|
243
|
-
// 搜索关键字
|
|
244
|
-
data.keyword = ""
|
|
245
|
-
data.searchUsers = []
|
|
246
|
-
data.selectedUser = {}
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
// 确认按钮
|
|
250
|
-
const onSubmit = () => {
|
|
251
|
-
if (!data.selectedUser) {
|
|
252
|
-
util.warnToast("请选择用户")
|
|
253
|
-
return
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
emit('select', data.selectedUser)
|
|
257
|
-
show.value = false
|
|
258
|
-
|
|
259
|
-
reset()
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
// 取消按钮
|
|
263
|
-
const onCancel = () => {
|
|
264
|
-
show.value = false
|
|
265
|
-
reset()
|
|
266
|
-
};
|
|
267
|
-
|
|
268
|
-
//首页加载
|
|
269
|
-
onMounted(async () => {
|
|
270
|
-
await queryTotalDepts()
|
|
271
|
-
// 初始化当前父部门
|
|
272
|
-
data.selectedDept = findDept(props.rootDeptId, data.totalDepts)
|
|
273
|
-
})
|
|
274
|
-
</script>
|
|
275
|
-
|
|
276
|
-
<style scoped>
|
|
277
|
-
.user-popup {
|
|
278
|
-
width: 100%;
|
|
279
|
-
overflow: hidden;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.department-selector {
|
|
283
|
-
padding: 10px;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.search-buttons {
|
|
287
|
-
display: flex;
|
|
288
|
-
gap: 10px;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.clear-btn {
|
|
292
|
-
background-color: #f2f3f5;
|
|
293
|
-
border: none;
|
|
294
|
-
border-radius: 4px;
|
|
295
|
-
padding: 4px 8px;
|
|
296
|
-
font-size: 14px;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
.confirm-btn {
|
|
300
|
-
background-color: #1989fa;
|
|
301
|
-
color: white;
|
|
302
|
-
border: none;
|
|
303
|
-
border-radius: 4px;
|
|
304
|
-
padding: 4px 8px;
|
|
305
|
-
font-size: 14px;
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
.no-results {
|
|
309
|
-
text-align: center;
|
|
310
|
-
padding: 20px;
|
|
311
|
-
color: #969799;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.picker-header {
|
|
315
|
-
padding: 10px;
|
|
316
|
-
border-bottom: 1px solid #ebedf0;
|
|
317
|
-
display: flex;
|
|
318
|
-
justify-content: space-between;
|
|
319
|
-
align-items: center;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.current-path {
|
|
323
|
-
flex: 1;
|
|
324
|
-
font-size: 14px;
|
|
325
|
-
color: #323233;
|
|
326
|
-
white-space: nowrap;
|
|
327
|
-
overflow: hidden;
|
|
328
|
-
text-overflow: ellipsis;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.header-right {
|
|
332
|
-
display: flex;
|
|
333
|
-
gap: 8px;
|
|
334
|
-
margin-left: auto;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
.cancel-btn {
|
|
338
|
-
color: #969799;
|
|
339
|
-
margin-right: 5px;
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
.scroll-container {
|
|
343
|
-
height: calc(80vh - 150px);
|
|
344
|
-
overflow-y: auto;
|
|
345
|
-
}
|
|
346
|
-
</style>
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="page">
|
|
3
|
-
<WidgetQwUsersPicker
|
|
4
|
-
:auth="formData.auth"
|
|
5
|
-
:deptRangeId="formData.deptRangeId"
|
|
6
|
-
v-model="formData.userIds"
|
|
7
|
-
@select="onSelect"
|
|
8
|
-
/>
|
|
9
|
-
</div>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<script setup>
|
|
13
|
-
import { reactive ,onMounted} from "vue";
|
|
14
|
-
const formData = reactive({
|
|
15
|
-
deptRangeId: "production_dept_ids",
|
|
16
|
-
userIds: null,
|
|
17
|
-
auth: "require",
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
const onSelect=(e)=>{
|
|
21
|
-
console.log('onSelect', e)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
onMounted(()=>{
|
|
25
|
-
// setTimeout(()=>{
|
|
26
|
-
// formData.singleUser = '014391'
|
|
27
|
-
// },10000)
|
|
28
|
-
})
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<style lang="scss" scoped>
|
|
32
|
-
.page {
|
|
33
|
-
height: 100vh;
|
|
34
|
-
background: #fff;
|
|
35
|
-
text-align: center;
|
|
36
|
-
background-size: cover;
|
|
37
|
-
display: flex;
|
|
38
|
-
flex-direction: column;
|
|
39
|
-
justify-content: flex-start;
|
|
40
|
-
padding: 80px 15px 0 15px;
|
|
41
|
-
box-sizing: border-box;
|
|
42
|
-
}
|
|
43
|
-
</style>
|