matchedAdd.js

import React from 'react';
import UserManageBar from '../../../components/Common/WhiteBar/index';
import './index.less';
import OrgOptionsForm from '@components/Common/OrgOptions/index';
import { Form, Table ,Input, Select, Button, Row, Col, Icon, Modal ,message,Tooltip } from "antd";
import { API_USER_MANAGE, API_ROLE_MANAGE, API_CHANNEL_MANAGE, API_SYSORORG_MANAGE } from '@src/Api';
import Utils from '@src/utils/utils';
import axios from '@src/axios/index';

export default class MatchRoleAdd extends React.Component {
	// 状态
	state = {
		// 当前角色信息
		roleId: '',
        role: '',
		// 角色未分配用户
		userNoMatchList: [],
		pagination: '',
        isLoading: true,
		// 渠道信息
        channelList: [],
        channelObj: {},
        // 机构
        agency: '',
        orgOptionsArr: [],
        getOrgOptionsName: {},
        // 要添加角色的用户列表
        selectedRowKeys: [],
        // 添加角色用户按钮是否失效 false：不禁用 true: 禁用
        addBtnCanClick: false,
        // 搜索条件
        searchData: {},
        expandStatus: false
	};
	// 查询页数和数量配置
	params = {
	    page: 1,
	    pageSize: 10
	}
	componentDidMount () {
        const roleId = this.props.match.params.roleId;
        const role = this.props.match.params.role;
        this.setState({roleId,role});
		this.getChannelAll();
	}
    componentWillMount() {
        document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
    }
	// 获取渠道
    getChannelAll = () => {
        axios.ajax({
            url: API_CHANNEL_MANAGE.getParamChannel,
            data: {
                pageNum: 1,
                pageSize: 100
            }
        }).then(res => {
            res = res.records;
            this.setState({channelList: res});
            // 转换渠道对象
            let channelObj = {};
            channelObj[0]="其他"
            res.forEach((item) => {
                channelObj[item.channelId] = item.name;
            });
            this.setState({channelObj: channelObj},() => {
                console.log(this.state.channelObj);
            });
            // 获取机构树
            this.getOrgTreeList();
        })
    }
    // 获取机构列表
    getOrgTreeList = () => {
         return new Promise((resolve, reject) => {
            axios.ajax({
                url: API_SYSORORG_MANAGE.getOrgTreeList,
            }).then(res => {
                if (res && res.length > 0) {
                  this.setState({
                    orgOptionsArr: res
                  })
                  resolve(this.getOrgOptionsName(res))
                  // 获取列表数据
                  this.getRoleNoMathcd();
                } else {
                   return
                }
            })
        })
    }
    // 列表扁平化
    getOrgOptionsName = (data) => {
        const { getOrgOptionsName } = this.state;
        let obj = {}, that = this;
        if (data && data.length > 0) {
          data.map(item => {
            let id = item.id, name = item.name
            if (item.childOrgs && item.childOrgs.length > 0) {
              that.getOrgOptionsName(item.childOrgs)
            }
            Object.assign(getOrgOptionsName, { [id]: name })
          })
        }
        return getOrgOptionsName
    } 
    // 获取角色未分配的用户
    getRoleNoMathcd = () => {
        var searchData = this.state.searchData;
        // console.log(searchData);
        this.setState({isLoading: true});
    	const _this = this;
    	const roleId = this.state.roleId;
    	axios.ajax({
    		url: API_ROLE_MANAGE.getRoleNoGiveUser,
    		data: {
    			...searchData,
    			roleId: roleId,
    			pageNum: this.params.page,
        		pageSize: this.params.pageSize
    		}
    	}).then((res) => {
            this.setState({isLoading: false});
    		let userNoMatchList = [];
    		if(res.records.length){
    			userNoMatchList= res.records.map((k,index)=>{
    				k.key = k.uid + '&&' + k.userName;
    			 	return k
    			})
    		}
    		this.setState({
    			userNoMatchList,
    			pagination: Utils.pagination(res, (current) => {
		            _this.params.page = current;
		            this.getRoleNoMathcd();
		        })
    		});
    	});
    }
	// 条件查询
	search = (searchData) => {
        // console.log(searchData);
        this.setState({searchData}, () => {
            this.params.page = 1;
            this.getRoleNoMathcd();
        });
	}
    // 重置
    reset = () => {
        this.setState({searchData: {}}, () => {
            this.params.page = 1;
            this.getRoleNoMathcd();
        });
    }
	// 返回上级
	toBack = () => {
		this.props.history.goBack();
	}
	// 删除要添加到角色的用户
	deleteSelectedUser (key) {
        let newSelecteds = [...this.state.selectedRowKeys];
        newSelecteds.forEach((item,index) => {
            if (item == key) {
                newSelecteds.splice(index,1);
            }
        });
		this.setState({
            selectedRowKeys: newSelecteds
        });
	}
    // 向角色内添加用户
    addRoleUser = () => {
        const roleId = this.state.roleId;
        let userIds = [];
        this.state.selectedRowKeys.forEach((item) => {
            userIds.push(item.split('&&')[0]);
        });
        // 进行添加前判断
        if (userIds.length == 0) {
            message.warn('请先选择要添加的账号');
            return false;
        }
        // 添加按钮禁用
        this.setState({addBtnCanClick: true});
        axios.ajax({
            url: API_USER_MANAGE.batchAddUserRole,
            data: {
                roleId: roleId,
                userIds: userIds
            }
        }).then((res) => {
            this.setState({addBtnCanClick: false});
            if (res) {
                // 添加成功
                message.success('添加用户成功');
                this.params.page = 1;
                this.setState({selectedRowKeys: []});
                this.getRoleNoMathcd();
            } else {
                // 添加失败
                message.warn('添加用户失败');
            }
        });
    }
    // 表格行点击选中复选框或取消复选框
    onRowClick = (record,index) => {
        let newKey = record.uid + '&&' + record.userName;
        let newKeyIndex = this.state.selectedRowKeys.findIndex((value,index,arr) => {
            return value == newKey;
        });
        if (newKeyIndex !== -1) {
            // 包含删除
            let selectedRowKeys = [...this.state.selectedRowKeys];
            selectedRowKeys.splice(newKeyIndex,1);
            this.setState({selectedRowKeys});
        } else {
            // 不包含添加
            let selectedRowKeys = [...this.state.selectedRowKeys,newKey];
            this.setState({selectedRowKeys});
        }
        
    }
    // 对名字判断过长时进行截取处理
    judgeStr (str) {
        if (str.length >= 8) {
            return (
                <Tooltip title={str} placement="bottom" >
                    {str.slice(0,8) + '...'}
                </Tooltip>
                )
        } else {
            return str;
        }
    }
      // 展开条件
  expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }

	render () {
		const { channelObj,getOrgOptionsName,selectedRowKeys } = this.state;
		// 表格配置
		const columns = [
			{
	        	title: '账号',
	          	key: 'loginName',
	          	dataIndex: 'loginName',
                className: 'tdWidth',
                render(loginName) {
                    return Utils.formatTableColumn(loginName)
                }
	        },
	        {
	          	title: '姓名',
	          	key: 'userName',
	          	dataIndex: 'userName',
                className: 'tdWidth',
                render(userName) {
                    return Utils.formatTableColumn(userName)
                }
	        },
	        {
	          	title: '机构名称',
	          	key: 'orgId',
	          	dataIndex: 'orgId',
                className: 'tdWidth',
	          	render: (orgId) => {
                    return Utils.formatTableColumn(getOrgOptionsName[orgId])
	          	}
	        },
	        {
	        	title: '所属渠道',
	        	key: 'channelId',
	        	dataIndex: 'channelId',
	        	render: (channelId) => {
	          		return channelObj[channelId];
	          	}
	        },
	        {
	        	title: '在职状态',
	        	key: 'jobStatus',
	        	dataIndex: 'jobStatus',
	        	render: (jobStatus) => {
                    return {
                    0: <div>其他</div> ,
                    1: <div style={{color:'#00BB29'}}>在职</div>,
                    2: <div style={{color:'#ED1719'}}>离职</div>,
                    3: <div style={{color:'#F0B856'}}>暂离</div>
                  }[jobStatus];
                }
	        },
	        {
	        	title: '账户状态',
	        	key: 'status',
	        	dataIndex: 'status',
	        	render: (status) => {
                    return {
                        0: <div>其他</div> ,
                        1: <div>未激活</div> ,
                        2: <div style={{color:'#00BB29'}}>正常</div>,
                        3: <div style={{color:'#ED1719'}}>禁用</div>,
                        4: <div style={{color:'#F0B856'}}>锁定</div> 
                      }[status];
                }
	        }
		]
		const rowSelection = {
			type: 'checkbox',
			selectedRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
                    selectedRowKeys,
                });
			},
			onSelect: (record, selected, selectedRows) => {
	         	// console.log(record);
	        },
		}
		return (
			<div className="com-matchedAdd">
                <div className="nav">
                    <a href="#/home/permission/role">角色管理</a> > <a href="#/home/permission/role">{ Utils.formatTableColumn(this.state.role) }角色</a>  > <span>添加用户</span>
                </div>
                <div className="searchWrap">
                    <UserManageBar title="筛选信息" />
                    <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
                    { 
                        this.state.expandStatus ? 
                        <SearchForm
                        agency={this.state.agency} 
                        channelList={this.state.channelList} 
                        search={this.search}
                        reset = {this.reset}
                    ></SearchForm>
                        : ''
                    }    
                </div> 

				
				{/* 查询表单组件 */}
				
				<div style={{marginTop: 20,paddingLeft: 20}}>
					<Button onClick={this.toBack}>返回</Button>
				</div>
				<UserManageBar title="详细数据" />
				<div className="detail-wrapper">
					<Row>
		             	<Col span={16}>
		                	<div style={{ backgroundColor: '#fff', margin: '0 20px 10px 0' }}>
				                <Table
                                    rowkey= 'uid'
				                    bordered={true}
				                    columns={columns}
				                    rowSelection={rowSelection}
				                    dataSource={this.state.userNoMatchList}
				                    pagination={this.state.pagination}
                                    loading={this.state.isLoading}
                                    onRow={(record, index) => {
                                        return {
                                            onClick: () => {
                                                this.onRowClick(record, index);
                                            }
                                        };
                                    }}
				                ></Table>
		                	</div>
		              	</Col>
		             	<Col span={6}>
		                	<div className="selected">
			                  	<p className="select-title">当前已选择{this.state.selectedRowKeys.length}项</p>
			                  	<ul className="select-content">
			                  		{this.state.selectedRowKeys.map((item) => {
			                  			return (
			                  				<li key={item}>
			                  					<span className="select-item">
					                        		{this.judgeStr(item.split('&&')[1])}
					                        		<span onClick={this.deleteSelectedUser.bind(this,item)} className="cancel">×</span>
					                      		</span>
			                  				</li>
		                  				);
			                  		})}
			                  	</ul>
		                	</div>
		              	</Col>
		            </Row>
				</div>
				<div style={{textAlign: 'center',marginBottom: 20}}>
					<Button disabled={this.state.addBtnCanClick} onClick={this.addRoleUser} style={{backgroundColor: '#00BB29',color: '#fff',width: 200}}>确定</Button>
				</div>
			</div>
		);
	}
}

// 查询表单组件
const SearchForm = Form.create()(
    class extends React.Component {
        constructor (props) {
            super(props);
            this.state = {
                // 机构选择框控制
                agencyVisible: false,
                // 选择的机构key
                agencyKey: ''
            };
        }
        // 查询列表
        search = () => {
            let searchData = this.props.form.getFieldsValue();
            // console.log(searchData);
            if (searchData.orgId) {
                searchData.orgId = this.state.agencyKey;
            }
            this.props.search(searchData);
        }
        // 重置列表
        reset = () => {
            this.props.form.resetFields();
            // 重新加载数据
            this.props.reset();
        }
        // 机构选择控制
        showAgency = () => {
            this.setState({agencyVisible: true});
        }
        closeAgency = () => {
            this.setState({agencyVisible: false});
        }
        setAgency = (agency) => {
            this.setState({agencyKey: agency.key});
            this.props.form.setFieldsValue({orgId: agency.val});
        }
        render () {
            const FormItem = Form.Item;
            const Option = Select.Option;
            const { getFieldDecorator } = this.props.form;
            return (
                <div className="userForm-box">
                    <Form layout="vertical" className="userForm">
                        <Row>
                            <Col span={5}>
                                <FormItem label="姓名">
                                    {
                                        getFieldDecorator('userName',{
                                            rules: []
                                        })(<Input type="text"  placeholder="姓名" />)
                                    }
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem label="账号">
                                    {
                                        getFieldDecorator('loginName',{
                                            rules: []
                                        })(<Input  placeholder="账号" type="text" />)
                                    }
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem label="所属机构">
                                    {
                                        getFieldDecorator('orgId',{
                                            rules: []
                                        })(<Input disabled  placeholder="所属机构"  type="text" />)
                                    }
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <div className="iconstore">
                                    <Icon onClick={this.showAgency} type="appstore" />
                                </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={5}>
                                <FormItem label="所属渠道">
                                    {
                                        getFieldDecorator('channelId', {
                                            // initialValue: 1,
                                            rules: []
                                        })(
                                            <Select placeholder="所属渠道">
                                                {
                                                    this.props.channelList.map((item) => {
                                                        return (
                                                            <Option value={item.channelId}>{item.name}</Option>
                                                        );
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem label="在职状态">
                                    {
                                        getFieldDecorator('jobStatus', {
                                            // initialValue: 1,
                                            rules: []
                                        })(
                                            <Select placeholder="在职状态">
                                                <Option value={1}>在职</Option>
                                                <Option value={2}>离职</Option>
                                                <Option value={3}>暂离</Option>
                                                <Option value={0}>其他</Option>
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem label="账户状态">
                                    {
                                        getFieldDecorator('status',{
                                            // initialValue: 1,
                                            rules: []
                                        })(
                                            <Select placeholder="账户状态">
                                                <Option value={1}>未激活</Option>
                                                <Option value={2}>正常</Option>
                                                <Option value={3}>禁用</Option>
                                                <Option value={4}>锁定</Option>
                                                <Option value={0}>其他</Option>
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem className="btnform">
                                    <Button onClick={this.search} className="searchBtn">查询</Button>
                                    <Button onClick={this.reset} className="resetBtn">重置</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <Agency
                    	visible={this.state.agencyVisible} 
                        closeAgency = {this.closeAgency}
                        setAgency = {this.setAgency}>
                    ></Agency>
                </div>
            ); 
        }
    }
);

// 选择机构弹框组件
class Agency extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            orgOptionsArr: [],
            getOrgOptionsName: {},
            checkedObj: {}
        };
    }
    componentDidMount () {
        // 获取机构列表
        this.getOrgTreeList();
    }
    //根据名称获取机构
    getOrgByName = (orgName) => {
        axios.ajax({
            url: API_SYSORORG_MANAGE.getOrgByName,
            data: {
                name: orgName
            }
        }).then(res => {
            if (res) {
                this.setState({orgOptionsArr: res});
            }
        })
    }
    //对机构进行扁平处理
    getOrgOptionsName = (data) => {
        const { getOrgOptionsName } = this.state;
        let that = this;
        if (data && data.length > 0) {
          data.map(item => {
            let id = item.id, name = item.name
            if (item.childOrgs && item.childOrgs.length > 0) {
              that.getOrgOptionsName(item.childOrgs)
            }
            Object.assign(getOrgOptionsName, { [id]: name })
          })
        }
        return getOrgOptionsName
    }
    // 获取树形机构列表
    getOrgTreeList = () => {
        return new Promise((resolve, reject) => {
            axios.ajax({
                url: API_SYSORORG_MANAGE.getOrgTreeList,
            }).then(res => {
                if (res && res.length > 0) {
                  this.setState({
                    orgOptionsArr: res
                  })
                  resolve(this.getOrgOptionsName(res))
                } else {
                  return
                }
              })
            })
    }
    getCheckedObj = (obj) => {
        this.setState({
            checkedObj: obj
        })
    }
    // 关闭机构弹框
    onCancel = () => {
        // 重置机构搜索
        this.child.reset();
        this.props.closeAgency();
    }
    //机构弹窗
    handleOrgOptions = () => {
        const checkedObj = this.state.checkedObj
        if (Object.keys(checkedObj).length == 0 || !checkedObj) {
            message.warn('请选择对应的机构');
            return;
        } else {
            // 把选中机构传递给父组件
            this.props.setAgency(checkedObj);
            // 关闭弹框
            this.onCancel();
        }
    }
    // 重置机构搜索
    onRef = (ref) => {
        this.child = ref;
    }
    render () {
        return (
            <Modal 
                className="com-agency"
                onCancel={this.onCancel} 
                visible={this.props.visible}
                onOk={this.handleOrgOptions}
                title="所属机构"
                okText="确认"
                cancelText="取消"
                width={965}>
                {/* 树形控件 */}
                <OrgOptionsForm 
                    getOrgByName={(orgName) => this.getOrgByName(orgName)}
                    getOrgTreeList={this.getOrgTreeList}
                    orgOptionsArr={this.state.orgOptionsArr}
                    getCheckedObj={this.getCheckedObj}
                    onRef={this.onRef}
                ></OrgOptionsForm>
            </Modal>    
        );
    }
}