Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
jinli gu
JSH ERP
Commits
96b44265
Commit
96b44265
authored
Aug 07, 2022
by
季圣华
Browse files
去掉多余的api地址
parent
03984841
Changes
2
Hide whitespace changes
Inline
Side-by-side
jshERP-web/src/components/jeecgbiz/modal/JSelectDepartModal.vue
View file @
96b44265
<
template
>
<a-modal
title=
"选择部门"
:width=
"modalWidth"
:visible=
"visible"
:confirmLoading=
"confirmLoading"
@
ok=
"handleSubmit"
@
cancel=
"handleCancel"
cancelText=
"关闭"
>
<a-spin
tip=
"Loading..."
:spinning=
"false"
>
<a-input-search
style=
"margin-bottom: 1px"
placeholder=
"请输入部门名称按回车进行搜索"
@
search=
"onSearch"
/>
<a-tree
checkable
:treeData=
"treeData"
:checkStrictly=
"true"
@
check=
"onCheck"
@
select=
"onSelect"
@
expand=
"onExpand"
:autoExpandParent=
"autoExpandParent"
:expandedKeys=
"expandedKeys"
:checkedKeys=
"checkedKeys"
>
<template
slot=
"title"
slot-scope=
"
{title}">
<span
v-if=
"title.indexOf(searchValue) > -1"
>
{{
title
.
substr
(
0
,
title
.
indexOf
(
searchValue
))
}}
<span
style=
"color: #f50"
>
{{
searchValue
}}
</span>
{{
title
.
substr
(
title
.
indexOf
(
searchValue
)
+
searchValue
.
length
)
}}
</span>
<span
v-else
>
{{
title
}}
</span>
</
template
>
</a-tree>
</a-spin>
</a-modal>
</template>
<
script
>
import
{
queryDepartTreeList
}
from
'
@/api/api
'
export
default
{
name
:
'
JSelectDepartModal
'
,
props
:[
'
modalWidth
'
,
'
multi
'
,
'
rootOpened
'
,
'
departId
'
],
data
(){
return
{
visible
:
false
,
confirmLoading
:
false
,
treeData
:[],
autoExpandParent
:
true
,
expandedKeys
:[],
dataList
:[],
checkedKeys
:[],
checkedRows
:[],
searchValue
:
""
}
},
created
(){
this
.
loadDepart
();
},
watch
:{
departId
(){
this
.
initDepartComponent
()
},
visible
:
{
handler
()
{
if
(
this
.
departId
)
{
this
.
checkedKeys
=
this
.
departId
.
split
(
"
,
"
);
// console.log('this.departId', this.departId)
}
else
{
this
.
checkedKeys
=
[];
}
}
}
},
methods
:{
show
(){
this
.
visible
=
true
this
.
checkedRows
=
[]
this
.
checkedKeys
=
[]
},
loadDepart
(){
queryDepartTreeList
().
then
(
res
=>
{
if
(
res
.
success
){
let
arr
=
[...
res
.
result
]
this
.
reWriterWithSlot
(
arr
)
this
.
treeData
=
arr
this
.
initDepartComponent
()
if
(
this
.
rootOpened
){
this
.
initExpandedKeys
(
res
.
result
)
}
}
})
},
initDepartComponent
(){
let
names
=
''
if
(
this
.
departId
){
let
currDepartId
=
this
.
departId
for
(
let
item
of
this
.
dataList
){
if
(
currDepartId
.
indexOf
(
item
.
key
)
>=
0
){
names
+=
"
,
"
+
item
.
title
}
}
if
(
names
){
names
=
names
.
substring
(
1
)
}
}
this
.
$emit
(
"
initComp
"
,
names
)
},
reWriterWithSlot
(
arr
){
for
(
let
item
of
arr
){
if
(
item
.
children
&&
item
.
children
.
length
>
0
){
this
.
reWriterWithSlot
(
item
.
children
)
let
temp
=
Object
.
assign
({},
item
)
temp
.
children
=
{}
this
.
dataList
.
push
(
temp
)
}
else
{
this
.
dataList
.
push
(
item
)
item
.
scopedSlots
=
{
title
:
'
title
'
}
}
}
},
initExpandedKeys
(
arr
){
if
(
arr
&&
arr
.
length
>
0
){
let
keys
=
[]
for
(
let
item
of
arr
){
if
(
item
.
children
&&
item
.
children
.
length
>
0
){
keys
.
push
(
item
.
id
)
}
}
this
.
expandedKeys
=
[...
keys
]
}
else
{
this
.
expandedKeys
=
[]
}
},
onCheck
(
checkedKeys
,
info
)
{
if
(
!
this
.
multi
){
let
arr
=
checkedKeys
.
checked
.
filter
(
item
=>
this
.
checkedKeys
.
indexOf
(
item
)
<
0
)
this
.
checkedKeys
=
[...
arr
]
this
.
checkedRows
=
(
this
.
checkedKeys
.
length
===
0
)
?
[]
:
[
info
.
node
.
dataRef
]
}
else
{
this
.
checkedKeys
=
checkedKeys
.
checked
this
.
checkedRows
=
this
.
getCheckedRows
(
this
.
checkedKeys
)
}
},
onSelect
(
selectedKeys
,
info
)
{
let
keys
=
[]
keys
.
push
(
selectedKeys
[
0
])
if
(
!
this
.
checkedKeys
||
this
.
checkedKeys
.
length
===
0
||
!
this
.
multi
){
this
.
checkedKeys
=
[...
keys
]
this
.
checkedRows
=
[
info
.
node
.
dataRef
]
}
else
{
let
currKey
=
info
.
node
.
dataRef
.
key
if
(
this
.
checkedKeys
.
indexOf
(
currKey
)
>=
0
){
this
.
checkedKeys
=
this
.
checkedKeys
.
filter
(
item
=>
item
!==
currKey
)
}
else
{
this
.
checkedKeys
.
push
(...
keys
)
}
}
this
.
checkedRows
=
this
.
getCheckedRows
(
this
.
checkedKeys
)
},
onExpand
(
expandedKeys
)
{
this
.
expandedKeys
=
expandedKeys
this
.
autoExpandParent
=
false
},
handleSubmit
(){
if
(
!
this
.
checkedKeys
||
this
.
checkedKeys
.
length
==
0
){
this
.
$emit
(
"
ok
"
,
''
)
}
else
{
this
.
$emit
(
"
ok
"
,
this
.
checkedRows
,
this
.
checkedKeys
.
join
(
"
,
"
))
}
this
.
handleClear
()
},
handleCancel
(){
this
.
handleClear
()
},
handleClear
(){
this
.
visible
=
false
this
.
checkedKeys
=
[]
},
getParentKey
(
currKey
,
treeData
){
let
parentKey
for
(
let
i
=
0
;
i
<
treeData
.
length
;
i
++
)
{
const
node
=
treeData
[
i
]
if
(
node
.
children
)
{
if
(
node
.
children
.
some
(
item
=>
item
.
key
===
currKey
))
{
parentKey
=
node
.
key
}
else
if
(
this
.
getParentKey
(
currKey
,
node
.
children
))
{
parentKey
=
this
.
getParentKey
(
currKey
,
node
.
children
)
}
}
}
return
parentKey
},
onSearch
(
value
){
const
expandedKeys
=
this
.
dataList
.
map
((
item
)
=>
{
if
(
item
.
title
.
indexOf
(
value
)
>
-
1
)
{
return
this
.
getParentKey
(
item
.
key
,
this
.
treeData
)
}
return
null
}).
filter
((
item
,
i
,
self
)
=>
item
&&
self
.
indexOf
(
item
)
===
i
)
Object
.
assign
(
this
,
{
expandedKeys
,
searchValue
:
value
,
autoExpandParent
:
true
,
})
},
// 根据 checkedKeys 获取 rows
getCheckedRows
(
checkedKeys
)
{
const
forChildren
=
(
list
,
key
)
=>
{
for
(
let
item
of
list
)
{
if
(
item
.
id
===
key
)
{
return
item
}
if
(
item
.
children
instanceof
Array
)
{
let
value
=
forChildren
(
item
.
children
,
key
)
if
(
value
!=
null
)
{
return
value
}
}
}
return
null
}
let
rows
=
[]
for
(
let
key
of
checkedKeys
)
{
let
row
=
forChildren
(
this
.
treeData
,
key
)
if
(
row
!=
null
)
{
rows
.
push
(
row
)
}
}
return
rows
}
}
}
</
script
>
<
style
scoped
>
<
template
>
<a-modal
title=
"选择部门"
:width=
"modalWidth"
:visible=
"visible"
:confirmLoading=
"confirmLoading"
@
ok=
"handleSubmit"
@
cancel=
"handleCancel"
cancelText=
"关闭"
>
<a-spin
tip=
"Loading..."
:spinning=
"false"
>
<a-input-search
style=
"margin-bottom: 1px"
placeholder=
"请输入部门名称按回车进行搜索"
@
search=
"onSearch"
/>
<a-tree
checkable
:treeData=
"treeData"
:checkStrictly=
"true"
@
check=
"onCheck"
@
select=
"onSelect"
@
expand=
"onExpand"
:autoExpandParent=
"autoExpandParent"
:expandedKeys=
"expandedKeys"
:checkedKeys=
"checkedKeys"
>
<template
slot=
"title"
slot-scope=
"
{title}">
<span
v-if=
"title.indexOf(searchValue) > -1"
>
{{
title
.
substr
(
0
,
title
.
indexOf
(
searchValue
))
}}
<span
style=
"color: #f50"
>
{{
searchValue
}}
</span>
{{
title
.
substr
(
title
.
indexOf
(
searchValue
)
+
searchValue
.
length
)
}}
</span>
<span
v-else
>
{{
title
}}
</span>
</
template
>
</a-tree>
</a-spin>
</a-modal>
</template>
<
script
>
export
default
{
name
:
'
JSelectDepartModal
'
,
props
:[
'
modalWidth
'
,
'
multi
'
,
'
rootOpened
'
,
'
departId
'
],
data
(){
return
{
visible
:
false
,
confirmLoading
:
false
,
treeData
:[],
autoExpandParent
:
true
,
expandedKeys
:[],
dataList
:[],
checkedKeys
:[],
checkedRows
:[],
searchValue
:
""
}
},
created
(){
},
watch
:{
departId
(){
this
.
initDepartComponent
()
},
visible
:
{
handler
()
{
if
(
this
.
departId
)
{
this
.
checkedKeys
=
this
.
departId
.
split
(
"
,
"
);
// console.log('this.departId', this.departId)
}
else
{
this
.
checkedKeys
=
[];
}
}
}
},
methods
:{
show
(){
this
.
visible
=
true
this
.
checkedRows
=
[]
this
.
checkedKeys
=
[]
},
initDepartComponent
(){
let
names
=
''
if
(
this
.
departId
){
let
currDepartId
=
this
.
departId
for
(
let
item
of
this
.
dataList
){
if
(
currDepartId
.
indexOf
(
item
.
key
)
>=
0
){
names
+=
"
,
"
+
item
.
title
}
}
if
(
names
){
names
=
names
.
substring
(
1
)
}
}
this
.
$emit
(
"
initComp
"
,
names
)
},
reWriterWithSlot
(
arr
){
for
(
let
item
of
arr
){
if
(
item
.
children
&&
item
.
children
.
length
>
0
){
this
.
reWriterWithSlot
(
item
.
children
)
let
temp
=
Object
.
assign
({},
item
)
temp
.
children
=
{}
this
.
dataList
.
push
(
temp
)
}
else
{
this
.
dataList
.
push
(
item
)
item
.
scopedSlots
=
{
title
:
'
title
'
}
}
}
},
initExpandedKeys
(
arr
){
if
(
arr
&&
arr
.
length
>
0
){
let
keys
=
[]
for
(
let
item
of
arr
){
if
(
item
.
children
&&
item
.
children
.
length
>
0
){
keys
.
push
(
item
.
id
)
}
}
this
.
expandedKeys
=
[...
keys
]
}
else
{
this
.
expandedKeys
=
[]
}
},
onCheck
(
checkedKeys
,
info
)
{
if
(
!
this
.
multi
){
let
arr
=
checkedKeys
.
checked
.
filter
(
item
=>
this
.
checkedKeys
.
indexOf
(
item
)
<
0
)
this
.
checkedKeys
=
[...
arr
]
this
.
checkedRows
=
(
this
.
checkedKeys
.
length
===
0
)
?
[]
:
[
info
.
node
.
dataRef
]
}
else
{
this
.
checkedKeys
=
checkedKeys
.
checked
this
.
checkedRows
=
this
.
getCheckedRows
(
this
.
checkedKeys
)
}
},
onSelect
(
selectedKeys
,
info
)
{
let
keys
=
[]
keys
.
push
(
selectedKeys
[
0
])
if
(
!
this
.
checkedKeys
||
this
.
checkedKeys
.
length
===
0
||
!
this
.
multi
){
this
.
checkedKeys
=
[...
keys
]
this
.
checkedRows
=
[
info
.
node
.
dataRef
]
}
else
{
let
currKey
=
info
.
node
.
dataRef
.
key
if
(
this
.
checkedKeys
.
indexOf
(
currKey
)
>=
0
){
this
.
checkedKeys
=
this
.
checkedKeys
.
filter
(
item
=>
item
!==
currKey
)
}
else
{
this
.
checkedKeys
.
push
(...
keys
)
}
}
this
.
checkedRows
=
this
.
getCheckedRows
(
this
.
checkedKeys
)
},
onExpand
(
expandedKeys
)
{
this
.
expandedKeys
=
expandedKeys
this
.
autoExpandParent
=
false
},
handleSubmit
(){
if
(
!
this
.
checkedKeys
||
this
.
checkedKeys
.
length
==
0
){
this
.
$emit
(
"
ok
"
,
''
)
}
else
{
this
.
$emit
(
"
ok
"
,
this
.
checkedRows
,
this
.
checkedKeys
.
join
(
"
,
"
))
}
this
.
handleClear
()
},
handleCancel
(){
this
.
handleClear
()
},
handleClear
(){
this
.
visible
=
false
this
.
checkedKeys
=
[]
},
getParentKey
(
currKey
,
treeData
){
let
parentKey
for
(
let
i
=
0
;
i
<
treeData
.
length
;
i
++
)
{
const
node
=
treeData
[
i
]
if
(
node
.
children
)
{
if
(
node
.
children
.
some
(
item
=>
item
.
key
===
currKey
))
{
parentKey
=
node
.
key
}
else
if
(
this
.
getParentKey
(
currKey
,
node
.
children
))
{
parentKey
=
this
.
getParentKey
(
currKey
,
node
.
children
)
}
}
}
return
parentKey
},
onSearch
(
value
){
const
expandedKeys
=
this
.
dataList
.
map
((
item
)
=>
{
if
(
item
.
title
.
indexOf
(
value
)
>
-
1
)
{
return
this
.
getParentKey
(
item
.
key
,
this
.
treeData
)
}
return
null
}).
filter
((
item
,
i
,
self
)
=>
item
&&
self
.
indexOf
(
item
)
===
i
)
Object
.
assign
(
this
,
{
expandedKeys
,
searchValue
:
value
,
autoExpandParent
:
true
,
})
},
// 根据 checkedKeys 获取 rows
getCheckedRows
(
checkedKeys
)
{
const
forChildren
=
(
list
,
key
)
=>
{
for
(
let
item
of
list
)
{
if
(
item
.
id
===
key
)
{
return
item
}
if
(
item
.
children
instanceof
Array
)
{
let
value
=
forChildren
(
item
.
children
,
key
)
if
(
value
!=
null
)
{
return
value
}
}
}
return
null
}
let
rows
=
[]
for
(
let
key
of
checkedKeys
)
{
let
row
=
forChildren
(
this
.
treeData
,
key
)
if
(
row
!=
null
)
{
rows
.
push
(
row
)
}
}
return
rows
}
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
View file @
96b44265
<
template
>
<a-modal
:width=
"modalWidth"
:visible=
"visible"
:title=
"title"
@
ok=
"handleSubmit"
@
cancel=
"close"
cancelText=
"关闭"
style=
"margin-top: -70px"
wrapClassName=
"ant-modal-cust-warp"
>
<a-row
:gutter=
"10"
style=
"background-color: #ececec; padding: 10px; margin: -10px"
>
<a-col
:md=
"6"
:sm=
"24"
>
<a-card
:bordered=
"false"
>
<!--组织机构-->
<a-directory-tree
selectable
:selectedKeys=
"selectedDepIds"
:checkStrictly=
"true"
:dropdownStyle=
"
{maxHeight:'200px',overflow:'auto'}"
:treeData="departTree"
:expandAction="false"
:expandedKeys.sync="expandedKeys"
@select="onDepSelect"
/>
</a-card>
</a-col>
<a-col
:md=
"18"
:sm=
"24"
>
<a-card
:bordered=
"false"
>
用户账号:
<a-input-search
:style=
"
{width:'150px',marginBottom:'15px'}"
placeholder="请输入账号"
v-model="queryParam.username"
@search="onSearch"
>
</a-input-search>
<a-button
@
click=
"searchReset(1)"
style=
"margin-left: 20px"
icon=
"redo"
>
重置
</a-button>
<!--用户列表-->
<a-table
ref=
"table"
:scroll=
"scrollTrigger"
size=
"middle"
rowKey=
"id"
:columns=
"columns"
:dataSource=
"dataSource"
:pagination=
"ipagination"
:rowSelection=
"
{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
:loading="loading"
@change="handleTableChange">
</a-table>
</a-card>
</a-col>
</a-row>
</a-modal>
</
template
>
<
script
>
import
{
filterObj
}
from
'
@/utils/util
'
import
{
queryDepartTreeList
,
getUserList
,
queryUserByDepId
}
from
'
@/api/api
'
export
default
{
name
:
'
JSelectUserByDepModal
'
,
components
:
{},
props
:
[
'
modalWidth
'
,
'
multi
'
,
'
userIds
'
],
data
()
{
return
{
queryParam
:
{
username
:
""
,
},
columns
:
[
{
title
:
'
用户账号
'
,
align
:
'
center
'
,
dataIndex
:
'
username
'
},
{
title
:
'
用户姓名
'
,
align
:
'
center
'
,
dataIndex
:
'
realname
'
},
{
title
:
'
性别
'
,
align
:
'
center
'
,
dataIndex
:
'
sex
'
,
customRender
:
function
(
text
)
{
if
(
text
===
1
)
{
return
'
男
'
}
else
if
(
text
===
2
)
{
return
'
女
'
}
else
{
return
text
}
}
},
{
title
:
'
手机
'
,
align
:
'
center
'
,
dataIndex
:
'
phone
'
},
{
title
:
'
部门
'
,
align
:
'
center
'
,
dataIndex
:
'
orgCode
'
}
],
scrollTrigger
:
{},
dataSource
:
[],
selectedRowKeys
:
[],
selectUserRows
:
[],
selectUserIds
:
[],
title
:
'
根据部门选择用户
'
,
ipagination
:
{
current
:
1
,
pageSize
:
10
,
pageSizeOptions
:
[
'
10
'
,
'
20
'
,
'
30
'
],
showTotal
:
(
total
,
range
)
=>
{
return
range
[
0
]
+
'
-
'
+
range
[
1
]
+
'
共
'
+
total
+
'
条
'
},
showQuickJumper
:
true
,
showSizeChanger
:
true
,
total
:
0
},
isorter
:
{
column
:
'
createTime
'
,
order
:
'
desc
'
},
selectedDepIds
:
[],
departTree
:
[],
visible
:
false
,
form
:
this
.
$form
.
createForm
(
this
),
loading
:
false
,
expandedKeys
:
[],
}
},
computed
:
{
// 计算属性的 getter
getType
:
function
()
{
return
this
.
multi
==
true
?
'
checkbox
'
:
'
radio
'
;
}
},
watch
:
{
userIds
:
{
immediate
:
true
,
handler
()
{
this
.
initUserNames
()
}
},
},
created
()
{
// 该方法触发屏幕自适应
this
.
resetScreenSize
();
this
.
loadData
()
},
methods
:
{
initUserNames
()
{
if
(
this
.
userIds
)
{
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确
let
values
=
this
.
userIds
.
split
(
'
,
'
)
+
'
,
'
getUserList
({
username
:
values
,
pageNo
:
1
,
pageSize
:
values
.
length
}).
then
((
res
)
=>
{
if
(
res
.
success
)
{
let
selectedRowKeys
=
[]
let
realNames
=
[]
res
.
result
.
records
.
forEach
(
user
=>
{
realNames
.
push
(
user
[
'
realname
'
])
selectedRowKeys
.
push
(
user
[
'
id
'
])
})
this
.
selectedRowKeys
=
selectedRowKeys
this
.
$emit
(
'
initComp
'
,
realNames
.
join
(
'
,
'
))
}
})
}
else
{
// JSelectUserByDep组件bug issues/I16634
this
.
$emit
(
'
initComp
'
,
''
)
}
},
async
loadData
(
arg
)
{
if
(
arg
===
1
)
{
this
.
ipagination
.
current
=
1
;
}
if
(
this
.
selectedDepIds
&&
this
.
selectedDepIds
.
length
>
0
)
{
await
this
.
initQueryUserByDepId
(
this
.
selectedDepIds
)
}
else
{
this
.
loading
=
true
let
params
=
this
.
getQueryParams
()
//查询条件
await
getUserList
(
params
).
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
dataSource
=
res
.
result
.
records
this
.
ipagination
.
total
=
res
.
result
.
total
}
}).
finally
(()
=>
{
this
.
loading
=
false
})
}
},
// 触发屏幕自适应
resetScreenSize
()
{
let
screenWidth
=
document
.
body
.
clientWidth
;
if
(
screenWidth
<
500
)
{
this
.
scrollTrigger
=
{
x
:
800
};
}
else
{
this
.
scrollTrigger
=
{};
}
},
showModal
()
{
this
.
visible
=
true
;
this
.
queryDepartTree
();
this
.
initUserNames
()
this
.
loadData
();
this
.
form
.
resetFields
();
},
getQueryParams
()
{
let
param
=
Object
.
assign
({},
this
.
queryParam
,
this
.
isorter
);
param
.
field
=
this
.
getQueryField
();
param
.
pageNo
=
this
.
ipagination
.
current
;
param
.
pageSize
=
this
.
ipagination
.
pageSize
;
return
filterObj
(
param
);
},
getQueryField
()
{
let
str
=
'
id,
'
;
for
(
let
a
=
0
;
a
<
this
.
columns
.
length
;
a
++
)
{
str
+=
'
,
'
+
this
.
columns
[
a
].
dataIndex
;
}
return
str
;
},
searchReset
(
num
)
{
let
that
=
this
;
if
(
num
!==
0
)
{
that
.
queryParam
=
{};
that
.
loadData
(
1
);
}
that
.
selectedRowKeys
=
[];
that
.
selectUserIds
=
[];
that
.
selectedDepIds
=
[];
},
close
()
{
this
.
searchReset
(
0
);
this
.
visible
=
false
;
},
handleTableChange
(
pagination
,
filters
,
sorter
)
{
//TODO 筛选
if
(
Object
.
keys
(
sorter
).
length
>
0
)
{
this
.
isorter
.
column
=
sorter
.
field
;
this
.
isorter
.
order
=
'
ascend
'
===
sorter
.
order
?
'
asc
'
:
'
desc
'
;
}
this
.
ipagination
=
pagination
;
this
.
loadData
();
},
handleSubmit
()
{
let
that
=
this
;
this
.
getSelectUserRows
();
that
.
$emit
(
'
ok
'
,
that
.
selectUserRows
,
that
.
selectUserIds
);
that
.
searchReset
(
0
)
that
.
close
();
},
//获取选择用户信息
getSelectUserRows
(
rowId
)
{
let
dataSource
=
this
.
dataSource
;
let
userIds
=
""
;
this
.
selectUserRows
=
[];
for
(
let
i
=
0
,
len
=
dataSource
.
length
;
i
<
len
;
i
++
)
{
if
(
this
.
selectedRowKeys
.
includes
(
dataSource
[
i
].
id
))
{
this
.
selectUserRows
.
push
(
dataSource
[
i
]);
userIds
=
userIds
+
"
,
"
+
dataSource
[
i
].
username
}
}
this
.
selectUserIds
=
userIds
.
substring
(
1
);
},
// 点击树节点,筛选出对应的用户
onDepSelect
(
selectedDepIds
)
{
if
(
selectedDepIds
[
0
]
!=
null
)
{
this
.
initQueryUserByDepId
(
selectedDepIds
);
// 调用方法根据选选择的id查询用户信息
if
(
this
.
selectedDepIds
[
0
]
!==
selectedDepIds
[
0
])
{
this
.
selectedDepIds
=
[
selectedDepIds
[
0
]];
}
}
},
onSelectChange
(
selectedRowKeys
,
selectionRows
)
{
this
.
selectedRowKeys
=
selectedRowKeys
;
this
.
selectionRows
=
selectionRows
;
},
onSearch
()
{
this
.
loadData
(
1
);
},
// 根据选择的id来查询用户信息
initQueryUserByDepId
(
selectedDepIds
)
{
this
.
loading
=
true
return
queryUserByDepId
({
id
:
selectedDepIds
.
toString
()}).
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
dataSource
=
res
.
result
;
this
.
ipagination
.
total
=
res
.
result
.
length
;
}
}).
finally
(()
=>
{
this
.
loading
=
false
})
},
queryDepartTree
()
{
queryDepartTreeList
().
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
departTree
=
res
.
result
;
// 默认展开父节点
this
.
expandedKeys
=
this
.
departTree
.
map
(
item
=>
item
.
id
)
}
})
},
modalFormOk
()
{
this
.
loadData
();
}
}
}
</
script
>
<
style
scoped
>
.ant-table-tbody
.ant-table-row
td
{
padding-top
:
10px
;
padding-bottom
:
10px
;
}
#components-layout-demo-custom-trigger
.trigger
{
font-size
:
18px
;
line-height
:
64px
;
padding
:
0
24px
;
cursor
:
pointer
;
transition
:
color
.3s
;
}
<
template
>
<a-modal
:width=
"modalWidth"
:visible=
"visible"
:title=
"title"
@
ok=
"handleSubmit"
@
cancel=
"close"
cancelText=
"关闭"
style=
"margin-top: -70px"
wrapClassName=
"ant-modal-cust-warp"
>
<a-row
:gutter=
"10"
style=
"background-color: #ececec; padding: 10px; margin: -10px"
>
<a-col
:md=
"6"
:sm=
"24"
>
<a-card
:bordered=
"false"
>
<!--组织机构-->
<a-directory-tree
selectable
:selectedKeys=
"selectedDepIds"
:checkStrictly=
"true"
:dropdownStyle=
"
{maxHeight:'200px',overflow:'auto'}"
:treeData="departTree"
:expandAction="false"
:expandedKeys.sync="expandedKeys"
@select="onDepSelect"
/>
</a-card>
</a-col>
<a-col
:md=
"18"
:sm=
"24"
>
<a-card
:bordered=
"false"
>
用户账号:
<a-input-search
:style=
"
{width:'150px',marginBottom:'15px'}"
placeholder="请输入账号"
v-model="queryParam.username"
@search="onSearch"
>
</a-input-search>
<a-button
@
click=
"searchReset(1)"
style=
"margin-left: 20px"
icon=
"redo"
>
重置
</a-button>
<!--用户列表-->
<a-table
ref=
"table"
:scroll=
"scrollTrigger"
size=
"middle"
rowKey=
"id"
:columns=
"columns"
:dataSource=
"dataSource"
:pagination=
"ipagination"
:rowSelection=
"
{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
:loading="loading"
@change="handleTableChange">
</a-table>
</a-card>
</a-col>
</a-row>
</a-modal>
</
template
>
<
script
>
import
{
filterObj
}
from
'
@/utils/util
'
import
{
getUserList
,
queryUserByDepId
}
from
'
@/api/api
'
export
default
{
name
:
'
JSelectUserByDepModal
'
,
components
:
{},
props
:
[
'
modalWidth
'
,
'
multi
'
,
'
userIds
'
],
data
()
{
return
{
queryParam
:
{
username
:
""
,
},
columns
:
[
{
title
:
'
用户账号
'
,
align
:
'
center
'
,
dataIndex
:
'
username
'
},
{
title
:
'
用户姓名
'
,
align
:
'
center
'
,
dataIndex
:
'
realname
'
},
{
title
:
'
性别
'
,
align
:
'
center
'
,
dataIndex
:
'
sex
'
,
customRender
:
function
(
text
)
{
if
(
text
===
1
)
{
return
'
男
'
}
else
if
(
text
===
2
)
{
return
'
女
'
}
else
{
return
text
}
}
},
{
title
:
'
手机
'
,
align
:
'
center
'
,
dataIndex
:
'
phone
'
},
{
title
:
'
部门
'
,
align
:
'
center
'
,
dataIndex
:
'
orgCode
'
}
],
scrollTrigger
:
{},
dataSource
:
[],
selectedRowKeys
:
[],
selectUserRows
:
[],
selectUserIds
:
[],
title
:
'
根据部门选择用户
'
,
ipagination
:
{
current
:
1
,
pageSize
:
10
,
pageSizeOptions
:
[
'
10
'
,
'
20
'
,
'
30
'
],
showTotal
:
(
total
,
range
)
=>
{
return
range
[
0
]
+
'
-
'
+
range
[
1
]
+
'
共
'
+
total
+
'
条
'
},
showQuickJumper
:
true
,
showSizeChanger
:
true
,
total
:
0
},
isorter
:
{
column
:
'
createTime
'
,
order
:
'
desc
'
},
selectedDepIds
:
[],
departTree
:
[],
visible
:
false
,
form
:
this
.
$form
.
createForm
(
this
),
loading
:
false
,
expandedKeys
:
[],
}
},
computed
:
{
// 计算属性的 getter
getType
:
function
()
{
return
this
.
multi
==
true
?
'
checkbox
'
:
'
radio
'
;
}
},
watch
:
{
userIds
:
{
immediate
:
true
,
handler
()
{
this
.
initUserNames
()
}
},
},
created
()
{
// 该方法触发屏幕自适应
this
.
resetScreenSize
();
this
.
loadData
()
},
methods
:
{
initUserNames
()
{
if
(
this
.
userIds
)
{
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确
let
values
=
this
.
userIds
.
split
(
'
,
'
)
+
'
,
'
getUserList
({
username
:
values
,
pageNo
:
1
,
pageSize
:
values
.
length
}).
then
((
res
)
=>
{
if
(
res
.
success
)
{
let
selectedRowKeys
=
[]
let
realNames
=
[]
res
.
result
.
records
.
forEach
(
user
=>
{
realNames
.
push
(
user
[
'
realname
'
])
selectedRowKeys
.
push
(
user
[
'
id
'
])
})
this
.
selectedRowKeys
=
selectedRowKeys
this
.
$emit
(
'
initComp
'
,
realNames
.
join
(
'
,
'
))
}
})
}
else
{
// JSelectUserByDep组件bug issues/I16634
this
.
$emit
(
'
initComp
'
,
''
)
}
},
async
loadData
(
arg
)
{
if
(
arg
===
1
)
{
this
.
ipagination
.
current
=
1
;
}
if
(
this
.
selectedDepIds
&&
this
.
selectedDepIds
.
length
>
0
)
{
await
this
.
initQueryUserByDepId
(
this
.
selectedDepIds
)
}
else
{
this
.
loading
=
true
let
params
=
this
.
getQueryParams
()
//查询条件
await
getUserList
(
params
).
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
dataSource
=
res
.
result
.
records
this
.
ipagination
.
total
=
res
.
result
.
total
}
}).
finally
(()
=>
{
this
.
loading
=
false
})
}
},
// 触发屏幕自适应
resetScreenSize
()
{
let
screenWidth
=
document
.
body
.
clientWidth
;
if
(
screenWidth
<
500
)
{
this
.
scrollTrigger
=
{
x
:
800
};
}
else
{
this
.
scrollTrigger
=
{};
}
},
showModal
()
{
this
.
visible
=
true
;
this
.
queryDepartTree
();
this
.
initUserNames
()
this
.
loadData
();
this
.
form
.
resetFields
();
},
getQueryParams
()
{
let
param
=
Object
.
assign
({},
this
.
queryParam
,
this
.
isorter
);
param
.
field
=
this
.
getQueryField
();
param
.
pageNo
=
this
.
ipagination
.
current
;
param
.
pageSize
=
this
.
ipagination
.
pageSize
;
return
filterObj
(
param
);
},
getQueryField
()
{
let
str
=
'
id,
'
;
for
(
let
a
=
0
;
a
<
this
.
columns
.
length
;
a
++
)
{
str
+=
'
,
'
+
this
.
columns
[
a
].
dataIndex
;
}
return
str
;
},
searchReset
(
num
)
{
let
that
=
this
;
if
(
num
!==
0
)
{
that
.
queryParam
=
{};
that
.
loadData
(
1
);
}
that
.
selectedRowKeys
=
[];
that
.
selectUserIds
=
[];
that
.
selectedDepIds
=
[];
},
close
()
{
this
.
searchReset
(
0
);
this
.
visible
=
false
;
},
handleTableChange
(
pagination
,
filters
,
sorter
)
{
//TODO 筛选
if
(
Object
.
keys
(
sorter
).
length
>
0
)
{
this
.
isorter
.
column
=
sorter
.
field
;
this
.
isorter
.
order
=
'
ascend
'
===
sorter
.
order
?
'
asc
'
:
'
desc
'
;
}
this
.
ipagination
=
pagination
;
this
.
loadData
();
},
handleSubmit
()
{
let
that
=
this
;
this
.
getSelectUserRows
();
that
.
$emit
(
'
ok
'
,
that
.
selectUserRows
,
that
.
selectUserIds
);
that
.
searchReset
(
0
)
that
.
close
();
},
//获取选择用户信息
getSelectUserRows
(
rowId
)
{
let
dataSource
=
this
.
dataSource
;
let
userIds
=
""
;
this
.
selectUserRows
=
[];
for
(
let
i
=
0
,
len
=
dataSource
.
length
;
i
<
len
;
i
++
)
{
if
(
this
.
selectedRowKeys
.
includes
(
dataSource
[
i
].
id
))
{
this
.
selectUserRows
.
push
(
dataSource
[
i
]);
userIds
=
userIds
+
"
,
"
+
dataSource
[
i
].
username
}
}
this
.
selectUserIds
=
userIds
.
substring
(
1
);
},
// 点击树节点,筛选出对应的用户
onDepSelect
(
selectedDepIds
)
{
if
(
selectedDepIds
[
0
]
!=
null
)
{
this
.
initQueryUserByDepId
(
selectedDepIds
);
// 调用方法根据选选择的id查询用户信息
if
(
this
.
selectedDepIds
[
0
]
!==
selectedDepIds
[
0
])
{
this
.
selectedDepIds
=
[
selectedDepIds
[
0
]];
}
}
},
onSelectChange
(
selectedRowKeys
,
selectionRows
)
{
this
.
selectedRowKeys
=
selectedRowKeys
;
this
.
selectionRows
=
selectionRows
;
},
onSearch
()
{
this
.
loadData
(
1
);
},
// 根据选择的id来查询用户信息
initQueryUserByDepId
(
selectedDepIds
)
{
this
.
loading
=
true
return
queryUserByDepId
({
id
:
selectedDepIds
.
toString
()}).
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
dataSource
=
res
.
result
;
this
.
ipagination
.
total
=
res
.
result
.
length
;
}
}).
finally
(()
=>
{
this
.
loading
=
false
})
},
queryDepartTree
()
{
},
modalFormOk
()
{
this
.
loadData
();
}
}
}
</
script
>
<
style
scoped
>
.ant-table-tbody
.ant-table-row
td
{
padding-top
:
10px
;
padding-bottom
:
10px
;
}
#components-layout-demo-custom-trigger
.trigger
{
font-size
:
18px
;
line-height
:
64px
;
padding
:
0
24px
;
cursor
:
pointer
;
transition
:
color
.3s
;
}
</
style
>
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment