import React from 'react'; import { Icon, Modal, message, AutoComplete,Spin, Input, Select, Button, Form,Popconfirm} from 'antd'; import $ from 'jquery/src/ajax'; import './userMangagement.less'; import {cityArr,station,post} from '../../../dataDic.js'; import {splitUrl} from '../../../tools.js'; import moment from 'moment'; import ImgList from "../../../common/imgList"; import StaffSearch from '../../../../component/common/staffSearch'; //图片组件 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"}}> <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} /> </div> ); } }); const Newuser = Form.create()(React.createClass({ getInitialState() { return { orgCodeUrl:[], loading: false, loaduser: {}, datauser:[], role:[] }; }, getDefaultProps(){ return{ userDetaile:false } }, handleSubmit(e) { e.preventDefault(); 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.reviewer){ 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.addId, mobile:this.state.mobile, status:this.state.status, contactMobile:this.state.contactMobile, name:this.state.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, reviewer:this.state.reviewer, district:this.state.district, headPortraitUrl:theorgCodeUrl.length?theorgCodeUrl:'', entryTime:this.state.selTime }) } }).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){ let theType=''; let contactLists=this.state.customerArr||[]; if (value) { contactLists.map(function (item) { if (item.name === value.toString()) { theType = item.id; } }); } this.setState({ theTypes:theType, superior:value }) if(!this.state.reviewerName || !this.state.reviewer){ this.setState({ reviewerName:value, reviewer: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 = {}; }; 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 reviewerName:thisdata.reviewerName, reviewer:thisdata.reviewer, theTypes:'', 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') : [], role:this.props.role, 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.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.props.closeDesc(false, true); }, handleCancel(e) { this.props.closeDesc(false); }, //入职时间选择 selTime(e,index){ this.setState({ entryTime:e, selTime:index }) }, 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; }, componentDidMount() { if(this.props.datauser.id){ this.loaduser(this.props.datauser) this.setState({ rolek:this.props.role }) } }, 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.props.showDesc} 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="用户角色" > {roleArrS.length > 0 ? <Select mode="multiple" optionFilterProp={'title'} tokenSeparators={[',']} placeholder="选择用户角色" value={this.state.role} style={{width:'200px'}} onChange={(e)=>{ this.setState({ role:e }) }}> { roleArrS.map(function (item,_) { return <Select.Option title={item.roleName} value={item.id}>{item.roleName}</Select.Option> }) } </Select> : null } <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="联系方式" > <Input placeholder="请输入手机号" style={{width:'200px'}} value={this.state.contactMobile} onChange={(e)=>{this.setState({contactMobile:e.target.value})}} /> </FormItem> {/*<FormItem className="half-item" {...formItemLayout} label="入职时间" > <DatePicker style={{marginTop:'0',width:'200px',height:'32px'}} showTime format="YYYY-MM-DD" placeholder="选择入职时间" value={this.state.entryTime} onChange={(e,time)=>{this.selTime(e,time)}} /> </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 }) }}> { 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} size="large" style={{ width: '200px' }} dataSource={options} placeholder="输入名称" value={this.state.superior} onChange={this.httpChange} filterOption={true} onSelect={this.selectAuto} > <Input/> </AutoComplete> <span className="mandatory">*</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="公出审核" > <StaffSearch valueName={this.state.reviewerName} placeholder="输入名称" onBlurChange={(obj)=>{ this.setState({ reviewer:obj.value }) }} /> <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 }}> <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;