import React from 'react'; import { Icon, Modal, message, AutoComplete,Spin, Input, Select, Button, Form,Upload,Popconfirm } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import './userMangagement.less'; import {socialAttribute,cityArr,station,post} from '../../../dataDic.js'; import {splitUrl} from '../../../tools.js'; const Option = AutoComplete.Option; //图片组件 const PicturesWall = React.createClass({ getInitialState() { return { 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 { previewVisible, previewImage, fileList } = this.state; const uploadButton = ( <div> <Icon type="plus" /> <div className="ant-upload-text">点击上传</div> </div> ); return ( <div style={{display:"inline-block"}}> <Upload action={globalConfig.context + "/api/admin/superviser/uploadAdminImg"} data={{ 'sign': this.props.pictureSign }} listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange} > {fileList.length >= 1 ? null : uploadButton} </Upload> <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> ); } }); const Newuser = Form.create()(React.createClass({ getInitialState() { return { orgCodeUrl:[], loading: false, loaduser: {}, visible:false, datauser:[], role:[] }; }, getDefaultProps(){ return{ userDetaile:false } }, handleSubmit(e) { e.preventDefault(); if(!this.state.role){ message.warning('请选择角色'); return false; }; if(!this.state.status&&this.props.userDetaile){ message.warning('请选择角色状态'); return false; }; if(!this.state.departmentId){ message.warning('请选择组织部门'); return false; }; if(!this.state.theTypes&&!this.state.superiorId){ message.warning('请输入正确的上级主管'); 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 }); let roleArrT=[]; roleArrT.push((this.state.role).toString()) $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + api, data: { roles:roleArrT, data:JSON.stringify({ id:this.state.id?this.state.id:this.props.addId, mobile:this.state.mobile, status:this.state.status, name:this.state.name, departmentId:this.state.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:'', }) } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('保存成功!'); this.handleOk(); } 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 }) }, //查看基本详情基本信息 loaduser(record){ if(record){ $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/superviser/selectAllByid', data: { id: record.id }, success: function (data) { let thisdata = data.data; if (!thisdata) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisdata = {}; }; let roleArr=[] roleArr.push(this.props.role[0]) 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, departmentId:thisdata.departmentId?thisdata.departmentId:undefined,//部门id userNo:thisdata.userNo, orgCodeUrl: thisdata.headPortraitUrl? splitUrl(thisdata.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [], role:roleArr, theTypes:'' }); }.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.datauser.id }, }).done((res) => { if (res.error && res.error.length) { message.error(res.error[0].message); } else { message.success("密码重置成功"); } }).always(() => { this.setState({ loading: false }) }); }, handleOk(e) { this.setState({ visible: false, }); this.props.closeDesc(false, true); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, getOrgCodeUrl(e) { this.setState({ orgCodeUrl: e }); }, componentWillMount(e){ const cityArrs=[]; cityArr.map(function (item) { cityArrs.push( <Select.Option key={item.value}>{item.key}</Select.Option> ) }); this.state.cityOption=cityArrs; }, componentWillReceiveProps(nextProps) { if(nextProps.userDetaile&&nextProps.datauser.id){ this.loaduser(nextProps.datauser) this.setState({ rolek:nextProps.role }) }else{ this.state.name=''; this.state.role=[]; this.state.departmentId=undefined; this.state.mobile=''; this.state.duty=undefined; this.state.position=undefined; this.state.station=undefined; this.state.email=''; this.state.superiorId=''; this.state.superior=''; this.state.district=[]; this.state.orgCodeUrl=[]; this.state.id=''; this.state.rolek=[]; } this.state.visible = nextProps.showDesc; }, 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> ) const departmentArr=this.props.departmentArr || []; const roleArrS=this.props.roleArr || []; const rolst=this.state.rolek || []; return ( <div> <Modal maskClosable={false} visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width='800px' title={this.props.userDetaile?'用户详情':'新建用户'} footer='' className="admin-desc-content"> <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form"> <Spin spinning={this.state.loading}> <div className="clearfix"> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="用户名" > <Input placeholder="输入登录用户名" value={this.state.mobile} onChange={(e)=>{this.setState({mobile:e.target.value})}} required="required" style={{width:'200px'}}/> <span className="mandatory">*</span> </FormItem> {this.props.userDetaile? <Popconfirm title={"用户 [ " + this.props.datauser.name + " ] 的密码将会重置为123456,确认操作?"} onConfirm={this.resetPwd} okText="确认" cancelText="取消" placement="topLeft"> <Button>重置密码</Button> </Popconfirm>:''} </div> <FormItem className="half-item" {...formItemLayout} label="用户角色" > <Select placeholder="选择用户角色" value={this.state.role} style={{width:'200px'}} onChange={(e)=>{this.setState({role:e})}} > { roleArrS.map(function (item) { return <Select.Option key={item.id} >{item.roleName}</Select.Option> }) } </Select> <span className="mandatory">*</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="" > <span style={{display:rolst.length>1?'block':'none',color:'red'}}>存在多个角色</span> </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.name} onChange={(e)=>{this.setState({name:e.target.value})}} required="required"/> <span className="mandatory">*</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="组织部门" > <Select placeholder="选择组织部门" style={{ width: 200 }} value={this.state.departmentId} onChange={(e) => { this.setState({ departmentId: e }) }}> { 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 pictureSign="customer_sys_file" fileList={this.getOrgCodeUrl} pictureUrl={this.state.orgCodeUrl} /> <p>图片建议:要清晰。</p> </FormItem> </div> </div> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> <Button className="set-submit" type="ghost" onClick={this.handleCancel}>取消</Button> </FormItem> </Spin> </Form > </Modal> </div> ) } })); export default Newuser;