import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, Transfer, Tree, Input, notification } from 'antd'
|
import { FormOutlined } from '@ant-design/icons'
|
|
const { TreeNode } = Tree
|
const { Search } = Input
|
|
const isChecked = (selectedKeys, eventKey) => {
|
return selectedKeys.indexOf(eventKey) !== -1
|
}
|
|
const generateTree = (treeNodes = [], checkedKeys = []) => {
|
return treeNodes.map(({ children, ...props }) => (
|
<TreeNode {...props} disabled={checkedKeys.includes(props.key)} key={props.key}>
|
{generateTree(children, checkedKeys)}
|
</TreeNode>
|
))
|
}
|
|
const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
|
const transferDataSource = []
|
function flatten(list = []) {
|
list.forEach(item => {
|
transferDataSource.push(item)
|
flatten(item.children)
|
})
|
}
|
flatten(dataSource)
|
|
return (
|
<Transfer
|
{...restProps}
|
targetKeys={targetKeys}
|
dataSource={transferDataSource}
|
className="member-transfer"
|
titles={[<span className="mk-tree"><span className="circle"></span>组织机构</span>, <span className="mk-tree"><span className="circle green"></span>已选</span>]}
|
render={item => item.title}
|
showSelectAll={false}
|
>
|
{({ direction, onItemSelect, selectedKeys }) => {
|
if (direction === 'left') {
|
const checkedKeys = [...selectedKeys, ...targetKeys]
|
return (
|
<Tree
|
blockNode
|
checkable
|
checkStrictly
|
defaultExpandAll
|
checkedKeys={checkedKeys}
|
onCheck={(_, { node: { props: { eventKey } } }) => {
|
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey))
|
}}
|
onSelect={(_, { node: { props: { eventKey } } }) => {
|
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey))
|
}}
|
>
|
{generateTree(dataSource, targetKeys)}
|
</Tree>
|
)
|
}
|
}}
|
</Transfer>
|
)
|
}
|
|
class MemberForm extends Component {
|
static propTpyes = {
|
node: PropTypes.any,
|
data: PropTypes.any,
|
orgs: PropTypes.array
|
}
|
|
state = {
|
visible: false,
|
targetKeys: [],
|
users: []
|
}
|
|
onChange = targetKeys => {
|
this.setState({ targetKeys })
|
}
|
|
search = (val) => {
|
const { orgs } = this.props
|
|
let _orgs = fromJS(orgs).toJS()
|
let _orgs_ = []
|
if (val) {
|
let getOrg = (ors) => {
|
return ors.filter(or => {
|
if (or.key.indexOf(val) > -1 || or.title.indexOf(val) > -1) {
|
return true
|
} else if (!or.children) {
|
return false
|
}
|
|
or.children = getOrg(or.children)
|
|
return or.children.length > 0
|
})
|
}
|
|
_orgs_ = getOrg(_orgs)
|
} else {
|
_orgs_ = _orgs
|
}
|
|
this.setState({orgs: _orgs_})
|
}
|
|
trigger = () => {
|
const { orgs, value, title } = this.props
|
|
let userIds = []
|
let users = {}
|
|
let getUsers = (ors) => {
|
ors.forEach(or => {
|
if (or.children) {
|
getUsers(or.children)
|
} else {
|
users[or.worker_id] = or
|
userIds.push(or.worker_id)
|
}
|
})
|
}
|
|
getUsers(orgs)
|
|
let targetKeys = []
|
let lost_works = []
|
value.forEach(user => {
|
if (userIds.includes(user.worker_id)) {
|
targetKeys.push(user.worker_id)
|
} else {
|
lost_works.push(user)
|
}
|
})
|
|
if (lost_works.length) {
|
notification.warning({
|
top: 92,
|
message: `原${title} ${lost_works.map(item => item.workername).join('、')} 不存在，请重新添加。`,
|
duration: 10
|
})
|
}
|
|
this.setState({visible: true, orgs: fromJS(orgs).toJS(), targetKeys, users})
|
}
|
|
confirm = () => {
|
const { targetKeys, users } = this.state
|
|
let value = []
|
targetKeys.forEach(key => {
|
if (!users[key]) return
|
|
let user = fromJS(users[key]).toJS()
|
|
delete user.key
|
delete user.title
|
|
value.push(user)
|
})
|
|
this.setState({visible: false})
|
this.props.onChange(value)
|
}
|
|
render() {
|
const { value } = this.props
|
const { orgs, visible, targetKeys } = this.state
|
|
return (
|
<>
|
<div className="member-input" onClick={this.trigger}>{value.length > 0 ? value.length + '人' : ''}<FormOutlined /></div>
|
<Modal
|
wrapClassName="member-modal"
|
title="选择人员"
|
visible={visible}
|
closable={false}
|
maskClosable={false}
|
width={1000}
|
onOk={this.confirm}
|
onCancel={() => this.setState({visible: false})}
|
destroyOnClose
|
>
|
<Search onSearch={this.search} enterButton/>
|
<TreeTransfer dataSource={orgs} targetKeys={targetKeys} onChange={this.onChange} />
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default MemberForm
|
