matched.js

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

class RoleManageAdd extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            // 添加用户弹框
            visible: false,
            // 用户列表数据
            list: [],
            pagination: '',
            isLoading: true, // 是否正在加载
            // 角色信息
            userInfo: '',
            role: '',
            // 渠道信息
            channelList: [],
            channelObj: {},
            // 机构
            orgOptionsArr: [],
            getOrgOptionsName: {},
            agency: '机构',
            // 要从角色里删除的用户
            selectDelUser: [],
            selectedRowKeys: [],
            // 搜索条件
            searchData: {},
            expandStatus: false,
            btnAuth: null,
            isShowOpt: true
        };
    }
    params = {
        page: 1,
        pageSize: 10
    };
    componentWillMount() {
        const btnAuth = storage.get('btnAuth')
        this.setState({btnAuth})
        if(
          btnAuth.indexOf('cancelUserAuthor') === -1){
            this.setState({isShowOpt: false})
          }
      }
    componentDidMount () {
        this.getRouterParams();
        this.getChannelAll();       
    }
    // 获取渠道
    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});
            // 加载机构列表
            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.getRoleUser();
                } else {
                   return
                }
            })
        })
    }
    // 列表扁平化
    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
    }
    // 查询用户信息
    search = (searchData) => {
        this.setState({searchData}, () => {
            this.params.page = 1;
            this.getRoleUser();
            // Utils.trim(searchData)
        });
    }
    // 重置
    reset = () => {
        this.setState({searchData: {}}, () => {
            this.params.page = 1;
            this.getRoleUser();
        });
    }
    //获取路由参数及用户id
    getRouterParams() {
        const params = this.props.match.params;
        // const { uid } = this.props.location;
        this.setState({userInfo:params,role:params.role});
    }
    // 加载角色用户
    getRoleUser = () => {
        var searchData = this.state.searchData;
        // 开启加载动画
        this.setState({isLoading: true});
        let _this = this;
        axios.ajax({
            url: API_ROLE_MANAGE.getRoleGiveUser,
            data: {
                ...searchData,
                roleId: this.state.userInfo.uid,
                pageNum: this.params.page,
                pageSize: this.params.pageSize
            }
        }).then(res => {
            if (res.records.length == 0 && this.params.page > 1) {
                this.params.page = this.params.page - 1;
                this.getRoleUser();
                return;
            }
            // 关闭加载动画
            this.setState({isLoading: false});
            // 添加key属性
            let keyList = res.records.map((item) => {
                return {key: item.uid, ...item};
            });
            console.log(keyList);
            this.setState({
                list: keyList,
                pagination: Utils.pagination(res, (current) => {
                    _this.params.page = current;
                    this.getRoleUser();
                })
            });
        })
    }
    // 跳转到添加用户页
    addUser = () => {
        this.props.history.push({
            pathname: `/home/permission/role/matchedAdd/${this.state.userInfo.uid}/${this.state.userInfo.role}`
        });
    }
    // 返回到上级
    toBack = () => {
        this.props.history.push({
            pathname: '/home/permission/role'
        });
    }
    // 单行取消用户授权
    handleDelete = (item,uid,loginName) => {
        let _this = this;
        Modal.confirm({
            title: `是否取消对账号:${loginName}的授权?`,
            cancelText: '取消',
            okText: '确定',
            onOk () {
                let userIdList = [];
                userIdList.push(uid);
                _this.deleteRole(userIdList);
            },
            onCancel () {}
        });
    }
    // 批量取消用户授权
    cancelRole = () => {
      let _this = this;
        // 进行提交前判断
        if (this.state.selectedRowKeys.length == 0) {
            message.warn('请先选择取消的用户');
            return false;
        }
        Modal.confirm({
          title: `您是否确定要取消选中的用户?`,
          cancelText: '取消',
          okText: '确定',
          onOk () {
            _this.deleteRole(_this.state.selectedRowKeys);
          },
          onCancel () {}
      });
        // this.deleteRole(this.state.selectedRowKeys);
    }
    // 取消角色授权
    deleteRole = (userIdList) => {
        const roleId = this.state.userInfo.uid;
        axios.ajax({
            url: API_ROLE_MANAGE.deleteByRoleIdBatchUser,
            data: {
                roleId: roleId,
                userIdList: userIdList
            }
        }).then((res) => {
            if (res === true) {
                // 成功
                message.success('成功取消角色授权');
                // 清空选择框
                this.setState({selectedRowKeys: []});
                this.getRoleUser();
            } else {
                message.warn('取消角色授权失败');
            }
        });
    }
    // 表格行点击事件
    onRowClick = (record,index) => {
        let newKey = record.uid;
        let newKeyIndex = this.state.selectedRowKeys.findIndex((value) => {
            return value == newKey;
        });
        if (newKeyIndex == -1) {
            // 没有选中 进行选中
            let selectedRowKeys = [...this.state.selectedRowKeys,newKey];
            this.setState({selectedRowKeys});
        } else {
            // 已经选中进行取消
            let selectedRowKeys = [...this.state.selectedRowKeys];
            selectedRowKeys.splice(newKeyIndex,1);
            this.setState({selectedRowKeys});
        }
    }
    // 对名字判断过长时进行截取处理
    judgeStr (str) {
        if (str.length >= 8) {
            return (<Tooltip style={{maxWidth: 100}} placement="bottom" content={str}>{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',
                maxWidth: 100,
                className: 'tdWidth',
                render(loginName) {
                    return Utils.formatTableColumn(loginName)
                }
            },
            {
                title: '姓名',
                key: 'userName',
                dataIndex: 'userName',
                maxWidth: 100,
                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];
                }
            },
            {
                title: '创建时间',
                key: 'createTime',
                dataIndex: 'createTime',
                render: (createTime) => {
                    return Utils.formateDateToYMD(createTime);
                }
            },
            
        ];

        if (this.state.isShowOpt) {
            columns.push(
                {
                    title: '操作',
                    key: 'action',
                    className:'pRight',
                    align: 'right',
                    render: (item) => {
                        let {uid,loginName} = item;
                        return (
                            
                            this.state.btnAuth.indexOf('cancelUserAuthor') !== -1 ? 
                            <Button onClick={(item) => {this.handleDelete(item,uid,loginName)}}>取消角色授权</Button>
                            : ''
                            
                            
                        );
                    }
                }
            )
        }
        const rowSelection = {
            type: 'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({selectedRowKeys});
            },
            onSelect: (record, selected, selectedRows) => {
                // console.log(record);
            },
        };
        return (
            <div className="allocatedUser">
                <div className="nav">
                    <a href="#/home/permission/role">角色管理</a> > <a href="#/home/permission/role"> {Utils.formatTableColumn(this.state.role)}角色 </a> > <span className="threeTitle">已分配用户</span>
                </div>
                <div className="searchWrap">
                    <UserManageBar title="筛选信息" />
                    <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
                    { 
                    this.state.expandStatus ? 
                    
                            <div className="userForm-box">
                                <SearchForm 
                                    agency={this.state.agency} 
                                    channelList={this.state.channelList} 
                                    showAgency={this.showAgency} 
                                    search={this.search}
                                    reset={this.reset}
                                ></SearchForm>
                            </div>
                    : ''
                    }    
                </div> 
               
                <div className="btnWrapper">
                    {
                        this.state.btnAuth.indexOf('addUserAuthor') !== -1 ? 
                        <Button onClick={this.addUser}>添加用户</Button>
                        : ''
                    }
                    {
                        this.state.btnAuth.indexOf('batchCancel') !== -1 ? 
                        <Button onClick={this.cancelRole}>批量取消</Button>
                        : ''
                    }
                    <Button onClick={this.toBack}>返回</Button>
                </div>
                <UserManageBar title="详细数据" />
                <div className="detData">
                    <div style={{ backgroundColor: '#fff', margin: '10px 26px 10px 26px',minHeight:200 }}>
                        <Table
                            rowkey= 'uid'
                            bordered={false}
                            columns={columns}
                            rowSelection={rowSelection}
                            dataSource={this.state.list}
                            pagination={this.state.pagination}
                            loading={this.state.isLoading}
                            onRow={(record, index) => {
                                return {
                                    onClick: () => {
                                        this.onRowClick(record, index);
                                    }
                                }
                            }}
                        ></Table>
                    </div>
                </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();
            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="com-searchForm">
                    <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 key = {item.channelId} 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
        console.log(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>    
        );
    }
}

export default Form.create()(RoleManageAdd);