2023-08-04

king

2023-08-04 770a7035c21ff90898938f73a8501b7cb4b6bf37

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Modal, Transfer, Tree } from 'antd'
import { FormOutlined } from '@ant-design/icons'
 
const { TreeNode } = Tree
 
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={['全部人员', '已选']}
      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>
  )
}
 
const treeData = [
  {
    key: '0-0',
    title: '0-0',
    checkable: false,
    children: [{ key: '0-0-0', title: '0-0-0' }, { key: '0-0-1', title: '0-0-1' }]
  },
  {
    key: '0-1',
    title: '0-1',
    checkable: false,
    children: [{ key: '0-1-0', title: '0-1-0' }, { key: '0-1-1', title: '0-1-1' }],
  },
  { key: '0-2', title: '0-3' },
]
 
class MemberForm extends Component {
  static propTpyes = {
    node: PropTypes.any,
    data: PropTypes.any,
    rolelist: PropTypes.array
  }
 
  state = {
    visible: false,
    targetKeys: []
  }
 
  onChange = targetKeys => {
    this.setState({ targetKeys })
  }
 
  render() {
    const { visible, targetKeys } = this.state
 
    return (
      <>
        <div className="member-input">0人<FormOutlined onClick={() => this.setState({visible: true})} /></div>
        <Modal
          title="选择人员"
          visible={visible}
          closable={false}
          maskClosable={false}
          width={800}
          onOk={this.confirm}
          onCancel={() => this.setState({visible: false})}
          destroyOnClose
        >
          <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={this.onChange} />
        </Modal>
      </>
    )
  }
}
 
export default MemberForm