| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680 | import React,{Component} from "react";import {AutoComplete, Button, Form, Icon, Input, message, Modal, Popconfirm, Select, Spin} from "antd";import {cityArr, post, station} from "../../../dataDic";import $ from "jquery/src/ajax";import {splitUrl} from "../../../tools";import moment from "moment";import ImgList from "../../../common/imgList";class PicturesWall extends Component{    constructor(props) {        super(props);        this.state={            previewVisible: false,            previewImage: '',            fileList: [],            role:[],            district:[],            cityOption:[],        }    }    handleCancel() {        this.setState({ previewVisible: false })    }    handlePreview(file) {        this.setState({            previewImage: file.url || file.thumbUrl,            previewVisible: true,        });    }    handleChange(info) {        let fileList = info.fileList;        this.setState({ fileList });        this.props.fileList(fileList);    }    componentWillReceiveProps(nextProps) {        this.state.fileList = nextProps.pictureUrl;    }    render() {        const { fileList } = this.state;        return (                <ImgList                    domId={this.props.domId}                    uploadConfig={{                        action:globalConfig.context + "/api/admin/superviser/uploadAdminImg",                        data:{ 'sign': this.props.pictureSign },                        multiple:true,                        listType:"picture-card",                    }}                    onChange={(infor)=>{                        this.handleChange(infor)                    }}                    fileList={fileList}                />        );    }}class UserProcessing extends Component{    constructor(props) {        super(props);        this.state={            orgCodeUrl:[],            loading: false,            loaduser: {},            visible:false,            datauser:[],            role:[],            roleArr:[],            departmentArr:[],            addId:'',            customerArr:[],        }        this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);        this.handleSubmit = this.handleSubmit.bind(this);        this.httpChange = this.httpChange.bind(this);        this.blurChange = this.blurChange.bind(this);        this.selectAuto = this.selectAuto.bind(this);        this.resetPwd = this.resetPwd.bind(this);    }    //新建获取id    addIdS() {        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + '/api/admin/superviser/newId',            data: {},            success: function(data) {                this.setState({                    id: data.data                });            }.bind(this),        }).always(function() {            this.setState({                loading: false            });        }.bind(this));    }    handleSubmit(e) {        e.preventDefault();        this.props.inspect(()=>{            if(!this.state.role || this.state.role.length === 0){                message.warning('请选择角色');                return false;            };            if(!this.state.status&&this.props.userDetaile){                message.warning('请选择角色状态');                return false;            };            if(window.adminData.isSuperAdmin){                if(!this.state.departmentId){                    message.warning('请选择组织部门');                    return false;                };            }            if(!this.state.theTypes&&!this.state.superiorId){                message.warning('请输入正确的上级主管');                return false;            };            if(this.state.contactMobile){                if(!(/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile))){                    message.warning("不是完整的11位手机号或者正确的手机号前七位");                    this.setState({                        loading: false                    });                    return false;                }            }            let theorgCodeUrl = [];            if (this.state.orgCodeUrl.length) {                let picArr = [];                this.state.orgCodeUrl.map(function (item) {                    if ( item.response && item.response.data && item.response.data.length ){                        picArr.push(item.response.data);                    }                });                theorgCodeUrl = picArr.join(",");            };            let api = this.props.userDetaile?"/api/admin/superviser/updateAdmin":'/api/admin/superviser/insertAdmin'            this.setState({                loading: true            });            $.ajax({                method: "POST",                dataType: "json",                crossDomain: false,                url: globalConfig.context + api,                data: {                    roles:this.state.role,                    data:JSON.stringify({                        id:this.state.id?this.state.id:this.props.aid,                        mobile:this.state.mobile,                        status:this.state.status,                        contactMobile:this.state.contactMobile,                        name:this.props.name,                        departmentId:window.adminData.isSuperAdmin?this.state.departmentId:window.adminData.departmentId,                        duty:this.state.duty,                        position:this.state.position,//岗位                        email:this.state.email,                        superiorId:this.state.theTypes?this.state.theTypes:this.state.superiorId,                        district:this.state.district,                        headPortraitUrl:theorgCodeUrl.length?theorgCodeUrl:'',                        entryTime:this.state.selTime                    })                }            }).done(function (data) {                this.setState({                    loading: false                });                if (!data.error.length) {                    if(this.props.userDetaile){                        this.props.onPreservation(this.props.aid);                    }else{                        this.props.onPreservation(data.data.id);                    }                } else {                    message.warning(data.error[0].message);                }            }.bind(this));        });    }    //主管初始加载(自动补全)    supervisor(e){        $.ajax({            method: "post",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/organization/selectName",            data:{                name:e            },            success: function (data) {                let thedata=data.data;                if (!thedata) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    };                    thedata = {};                };                this.setState({                    customerArr:thedata,                });            }.bind(this),        }).always(function () {            this.setState({                loading: false            });        }.bind(this));    }    //上级主管输入框失去焦点是判断客户是否存在    selectAuto(value,options){        this.setState({            superior:value        })    }    blurChange(e){        let theType='';        let contactLists=this.state.customerArr || [];        if (e) {            contactLists.map(function (item) {                if (item.name == e.toString()) {                    theType = item.id;                }            });        }        this.setState({            theName:e,            theTypes:theType        })    }    //值改变时请求客户名称    httpChange(e){        if(e.length>=1){            this.supervisor(e);        }        this.setState({            superior:e        })    }    rolesArrS() {        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/role",            data: {                uid: this.props.aid            },            success: function(data) {                let thedata = data.data;                if(data.error && data.error.length) {                    message.warning(data.error[0].message);                }else{                    this.setState({                        role:thedata,                    })                }            }.bind(this),        }).always(function() {        }.bind(this));    }    //查看基本详情基本信息    loaduser(aid){        if(aid){            $.ajax({                method: "post",                dataType: "json",                crossDomain: false,                url: globalConfig.context + '/api/admin/superviser/selectAllByid',                data: {                    id: aid                },                success: function (data) {                    let thisdata = data.data;                    if (!thisdata) {                        if (data.error && data.error.length) {                            message.warning(data.error[0].message);                        };                        thisdata = {};                    };                    this.setState({                        id: thisdata.id,                        mobile: thisdata.mobile,                        name: thisdata.name,                        email: thisdata.email,                        createTime: thisdata.createTime,                        district:thisdata.district!=' '?JSON.parse(thisdata.district):undefined,                        position: thisdata.position?thisdata.position:undefined,                        superior:thisdata.superior,                        superiorId: thisdata.superiorId,//上级Id                        duty:thisdata.duty?thisdata.duty:undefined,//职务                        status:thisdata.status?thisdata.status:undefined,                        contactMobile:thisdata.contactMobile?thisdata.contactMobile:undefined,//手机号                        departmentId:thisdata.departmentId?thisdata.departmentId:undefined,//部门id                        userNo:thisdata.userNo,                        orgCodeUrl: thisdata.headPortraitUrl? splitUrl(thisdata.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [],                        theTypes:'',                        entryTime:thisdata.entryTime?moment(thisdata.entryTime,'YYYY-MM-DD'):undefined,                        selTime:thisdata.entryTime                    });                }.bind(this),            }).always(function () {                this.setState({                    loading: false                });            }.bind(this));        }    }    //重置密码    resetPwd() {        this.setState({            loading: true        })        $.ajax({            type: 'post',            url: globalConfig.context + "/api/admin/superviser/resetPwd",            dataType: "json",            data: {                id: this.props.aid            },        }).done((res) => {            if (res.error && res.error.length) {                message.error(res.error[0].message);            } else {                message.success("密码重置成功");            }        }).always(() => {            this.setState({                loading: false            })        });    }    //入职时间选择    selTime(e,index){        this.setState({            entryTime:e,            selTime:index        })    }    getOrgCodeUrl(e) {        this.setState({ orgCodeUrl: e });    }    componentDidMount() {        if(!this.props.userDetaile){            this.addIdS();        };        this.rolesList();        this.departmentList();        if(this.props.userDetaile && this.props.aid){            this.loaduser(this.props.aid);            this.rolesArrS();        }else{            this.state.name='';            this.state.mobile='',            this.state.role=[];            this.state.departmentId=undefined;            this.state.mobile='';            this.state.duty=undefined;            this.state.position=undefined;            this.state.station=undefined;            this.state.contactMobile='';            this.state.email='';            this.state.superiorId='';            this.state.superior='';            this.state.district=[];            this.state.orgCodeUrl=[];            this.state.id='';            this.state.entryTime=undefined;        }    }    componentWillMount(e){        const cityArrs=[];        cityArr.map(function (item) {            cityArrs.push(                <Select.Option key={item.value}>{item.key}</Select.Option>            )        });        this.state.cityOption=cityArrs;    }    rolesList() {        this.setState({            loading: true        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/roles",            data: {},            success: function (data) {                let thedata = data.data;                let theArr = [];                if (!thedata) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    }                    ;                    thedata = {};                } else {                    thedata.map(function (item, index) {                        theArr.push({                            key: index,                            roleName: item.roleName,                            id: item.id,                        })                    })                }                this.setState({                    roleArr: theArr,                })            }.bind(this),        }).always(function () {            this.setState({                loading: false            });        }.bind(this));    }    //部门    departmentList() {        this.setState({            loading: true        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/organization/selectSuperId",            data: {            },            success: function(data) {                let thedata = data.data;                let theArr = [];                if(!thedata) {                    if(data.error && data.error.length) {                        message.warning(data.error[0].message);                    };                } else {                    thedata.map(function(item, index) {                        theArr.push({                            key: index,                            name: item.name,                            id: item.id,                            depNo: item.depNo                        })                    })                }                this.setState({                    departmentArr: theArr,                })            }.bind(this),        }).always(function() {            this.setState({                loading: false            });        }.bind(this));    }    render() {        const FormItem = Form.Item        const formItemLayout = {            labelCol: { span: 8 },            wrapperCol: { span: 14 },        };        const dataSources=this.state.customerArr || [];        const options = dataSources.map((group,index) =>            <Select.Option key={index} value={group.name}>{group.name}</Select.Option>        )        return (            <div>                    <h2                        style={{                            textAlign: "center",                            paddingBottom: 10,                            marginBottom: 10,                        }}                    >                        {this.props.userDetaile?'修改系统账户':'同步系统账户'}                    </h2>                    <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">                        <Spin spinning={this.state.loading}>                            <div className="clearfix">                                <FormItem                                    labelCol={{ span: 4 }}                                    wrapperCo={{ span: 14 }}                                    label="用户角色"                                >                                    <Select                                        mode="tags"                                        tokenSeparators={[',']}                                        placeholder="选择用户角色"                                        value={this.state.role}                                        style={{width:'200px'}}                                        onChange={(e)=>{                                            this.setState({                                                role:e                                            })                                        }} >                                        {                                            this.state.roleArr.map(function (item) {                                                return <Select.Option key={item.id} >{item.roleName}</Select.Option>                                            })                                        }                                    </Select>                                    <span className="mandatory">*</span>                                    <span style={{color:'red',padding:'0 15px'}}>存在多个角色</span>                                    {this.props.userDetaile?                                        <Popconfirm                                            title={"用户 [ " + this.props.name + " ] 的密码将会重置为123456,确认操作?"}                                            onConfirm={this.resetPwd}                                            okText="确认"                                            cancelText="取消"                                            placement="topLeft">                                            <Button>重置密码</Button>                                        </Popconfirm>:''}                                </FormItem>                                {this.props.userDetaile?<FormItem className="half-item"                                                                  {...formItemLayout}                                                                  label="用户状态" >                                    <Select placeholder="用户状态" value={this.state.status} style={{width:'200px'}}                                            onChange={(e)=>{this.setState({status:e})}} >                                        <Select.Option value="正常" >正常</Select.Option>                                        <Select.Option value="注销" >注销</Select.Option>                                        <Select.Option value="锁定" >锁定</Select.Option>                                    </Select>                                    <span className="mandatory">*</span>                                </FormItem>:''}                                <FormItem className="half-item"                                          {...formItemLayout}                                          label="用户名" >                                    <Input placeholder="请输入用户名" style={{width:'200px'}} value={this.state.mobile}                                           onChange={(e)=>{this.setState({mobile:e.target.value})}} required="required"/>                                    <span className="mandatory">*</span>                                </FormItem>                                <FormItem className="half-item"                                          {...formItemLayout}                                          label="联系方式" >                                    <Input placeholder="请输入手机号" style={{width:'200px'}} value={this.state.contactMobile}                                           onChange={(e)=>{this.setState({contactMobile:e.target.value})}} />                                </FormItem>                                {window.adminData.isSuperAdmin?<FormItem className="half-item"                                                                         {...formItemLayout}                                                                         label="组织部门" >                                    <Select placeholder="选择组织部门"                                            style={{ width: 200 }}                                            value={this.state.departmentId}                                            onChange={(e) => { this.setState({ departmentId: e }) }}>                                        {                                            this.state.departmentArr.map(function (item) {                                                return <Select.Option key={item.id} >{item.name}</Select.Option>                                            })                                        }                                    </Select>                                    <span className="mandatory">*</span>                                </FormItem>:''}                                <FormItem className="half-item"                                          {...formItemLayout}                                          label="职务"                                >                                    <Select placeholder="选择职务" style={{width:'200px'}} value={this.state.duty} onChange={(e)=>{this.setState({duty:e})}}>                                        {                                            post.map(function (item) {                                                return <Select.Option key={item.value} >{item.key}</Select.Option>                                            })                                        }                                    </Select>                                </FormItem>                                <FormItem className="half-item"                                          {...formItemLayout}                                          label="岗位"                                >                                    <Select placeholder="选择岗位" style={{width:'200px'}} value={this.state.position} onChange={(e)=>{this.setState({position:e})}}>                                        {                                            station.map(function (item) {                                                return <Select.Option key={item.value} >{item.key}</Select.Option>                                            })                                        }                                    </Select>                                </FormItem>                                <FormItem className="half-item"                                          {...formItemLayout}                                          label="电子邮箱" >                                    <Input placeholder="请输入邮箱" style={{width:'200px'}} value={this.state.email}                                           onChange={(e)=>{this.setState({email:e.target.value})}} />                                </FormItem>                                <FormItem className="half-item"                                          {...formItemLayout}                                          label="上级主管"                                >                                    <AutoComplete                                        className="certain-category-search"                                        dropdownClassName="certain-category-search-dropdown"                                        dropdownMatchSelectWidth={false}                                        dropdownStyle={{ width: 200 }}                                        size="large"                                        style={{ width: '200px' }}                                        dataSource={options}                                        placeholder="输入名称"                                        value={this.state.superior}                                        onChange={this.httpChange}                                        filterOption={true}                                        onBlur={this.blurChange}                                        onSelect={this.selectAuto}                                    >                                        <Input/>                                    </AutoComplete>                                    <span className="mandatory">*</span>                                </FormItem>                                {this.props.userDetaile?                                    <FormItem className="half-item"                                              {...formItemLayout}                                              label="用户编号" >                                        <span>{this.state.userNo}</span>                                    </FormItem>                                    :''}                                <div className='clearfix'>                                    <FormItem className="half-item"                                              {...formItemLayout}                                              label="地区" >                                        <Select                                            multiple                                            style={{width:'500px'}}                                            placeholder="选择地区"                                            filterOption={(input, option) => { return option.props.children.indexOf(input) >= 0 }}                                            value={this.state.district}                                            onChange={(pids) => {                                                this.state.district = pids;                                                this.setState({                                                    district: this.state.district                                                })                                            }}                                        >                                            {this.state.cityOption}                                        </Select>                                    </FormItem>                                </div>                                <div className="clearfix pictures">                                    <FormItem                                        labelCol={{ span: 4 }}                                        wrapperCol={{ span: 18 }}                                        label="用户头像" >                                        <PicturesWall                                            domId={'newUser1'}                                            pictureSign="customer_sys_file"                                            fileList={this.getOrgCodeUrl}                                            pictureUrl={this.state.orgCodeUrl} />                                        <p>图片建议:要清晰。</p>                                    </FormItem>                                </div>                            </div>                            <FormItem wrapperCol={{ span: 12, offset: 4 }} style={{                                paddingTop: '16px',                                paddingLeft: '140px',                            }}>                                <Button className="set-submit" type="primary" htmlType="submit">保存</Button>                            </FormItem>                        </Spin>                    </Form>            </div>        );    }}export default UserProcessing;
 |