From b69b5f6329ca5f87932436b7a6c1ddfc3377e10f Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 16 五月 2024 10:56:41 +0800 Subject: [PATCH] 2024-05-16 --- src/tabviews/custom/components/chart/antv-X6/nodeupdate/memberform.jsx | 125 +++++++++++++++++++++++++++++++++-------- 1 files changed, 101 insertions(+), 24 deletions(-) diff --git a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/memberform.jsx b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/memberform.jsx index 8013724..1304c3d 100644 --- a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/memberform.jsx +++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/memberform.jsx @@ -1,9 +1,11 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Modal, Transfer, Tree } from 'antd' +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 @@ -33,7 +35,7 @@ targetKeys={targetKeys} dataSource={transferDataSource} className="member-transfer" - titles={['鍏ㄩ儴浜哄憳', '宸查��']} + 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} > @@ -63,55 +65,130 @@ ) } -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 + orgs: PropTypes.array } state = { visible: false, - targetKeys: [] + 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 { visible, targetKeys } = this.state + const { value } = this.props + const { orgs, visible, targetKeys } = this.state return ( <> - <div className="member-input">0浜�<FormOutlined onClick={() => this.setState({visible: true})} /></div> + <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={800} + width={1000} onOk={this.confirm} onCancel={() => this.setState({visible: false})} destroyOnClose > - <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={this.onChange} /> + <Search onSearch={this.search} enterButton/> + <TreeTransfer dataSource={orgs} targetKeys={targetKeys} onChange={this.onChange} /> </Modal> </> ) -- Gitblit v1.8.0