import React from 'react'; import { Icon, Modal, message, AutoComplete, Spin, Input, Select, Button, Form, Popconfirm, TreeSelect } from 'antd'; import $ from 'jquery/src/ajax'; import './userMangagement.less'; import { cityArr, station, post } from '../../../dataDic.js'; import { splitUrl, getNewArray } 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: [], Business: [{ reviewerName: "", reviewerId: "" }], // 公出审核 Coorder: [{ reviewerName: "", reviewerId: "" }], // 协单审核 }; }, 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 (!getNewArray(this.state.Business, "value").toString()) { 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; } } // if (this.state.ambId == null || this.state.ambId == undefined) { // 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 }); $.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, seniorStaff: this.state.seniorStaff, publicPurview: this.state.publicPurview, 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, ambId: !!this.state.ambId ? this.state.ambId : null, managerId: this.state.managerId, expenseSuperExamine: this.state.expenseSuperExamine, // 报销是否需要上级审核 publicCarbonCopy: this.state.publicCarbonCopy,// 公出抄送 }), publicReviewerIds: getNewArray(this.state.Business, "reviewerId").toString(),// 公出审核 assistReviewerIds: getNewArray(this.state.Coorder, "reviewerId").toString(),// 协单审核 } }).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, // 公出审核人 managerName: thisdata.managerName, managerId: thisdata.managerId, // 经理审核 theTypes: '', duty: thisdata.duty ? thisdata.duty : undefined,//职务 publicPurview: thisdata.publicPurview, seniorStaff: thisdata.seniorStaff, status: Number(thisdata.status), 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, ambId: !!thisdata.ambId && Number(thisdata.ambId), // 分巴id expenseSuperExamine: thisdata.expenseSuperExamine, // 报销是否需要上级主管审核 publicCarbonCopy: thisdata.publicCarbonCopy, // 公出抄送 publicCarbonCopyName: thisdata.publicCarbonCopyName, }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } }, getReviewer(record) { if (record) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/superviser/publicReviewer', 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({ Business: thisdata.publicReviewer.length > 0 ? thisdata.publicReviewer : [{ reviewerName: "", reviewerId: "" }], Coorder: thisdata.assistReviewer.length > 0 ? thisdata.assistReviewer : [{ reviewerName: "", reviewerId: "" }], }); }.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.getReviewer(this.props.datauser) this.setState({ rolek: this.props.role }) } }, add() { const { Coorder } = this.state; let arr = Coorder let obj = { title: "", value: "" } arr.push(obj) this.setState({ Coorder: arr }) }, remove(i) { const { Coorder } = this.state; let arr = Coorder arr.splice(i, 1) this.setState({ Coorder: arr }) }, add1() { const { Business } = this.state; let arr = Business let obj = { title: "", value: "" } arr.push(obj) this.setState({ Business: arr }) }, remove1(i) { const { Business } = this.state; let arr = Business arr.splice(i, 1) this.setState({ Business: arr }) }, render() { const { Coorder, Business } = this.state 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='1000px' 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', minHeight: '59px' }} 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> <FormItem className="half-item" {...formItemLayout} label="员工" > <Select placeholder="请选择" value={this.state.seniorStaff} style={{ width: '200px' }} onChange={(e) => { this.setState({ seniorStaff: e }) }} > <Select.Option value={0} >新员工</Select.Option> <Select.Option value={1} >老员工</Select.Option> </Select> <span className="mandatory">*</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={0} >正常</Select.Option> <Select.Option value={1} >锁定</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:'27px'}} 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="报销是否需上级主管审核" > <Select placeholder="请选择" value={this.state.expenseSuperExamine} style={{ width: '200px' }} onChange={(e) => { this.setState({ expenseSuperExamine: e }) }} > <Select.Option value={0} >否</Select.Option> <Select.Option value={1} >是</Select.Option> </Select> </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='公出审核' > { Business.map((k, index) => <div key={index}> <StaffSearch valueName={k.reviewerName} placeholder="输入名称" width={200} onBlurText={e => { let newBusiness = Business for (var i = 0; i < newBusiness.length; i++) { if (index == i) { newBusiness[i].reviewerName = e.title } } this.setState({ Business: newBusiness }) }} onBlurChange={(e) => { let newBusiness = Business for (var i = 0; i < newBusiness.length; i++) { if (index == i) { newBusiness[i].reviewerId = e.value } } this.setState({ Business: newBusiness }) }} /> <div style={{ width: 25, display: "inline-block" }}> {Business.length > 1 ? ( <Icon className="dynamic-delete-button" type="minus-circle-o" disabled={Business.length === 1} onClick={() => this.remove1(index)} /> ) : null} </div> {index === 0 && <Button style={{ marginLeft: 10 }} size="small" type="primary" onClick={this.add1}>新增</Button>} </div> ) } </FormItem> <FormItem className="half-item" {...formItemLayout} label="经理审核" > <StaffSearch valueName={this.state.managerName} placeholder="输入名称" onBlurText={e => { this.setState({ managerName: e.title }) }} onBlurChange={(obj) => { this.setState({ managerId: obj.value, }) }} /> </FormItem> </div> <div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label='协单审核' > { Coorder.map((k, index) => <div key={index}> <StaffSearch valueName={k.reviewerName} placeholder="输入名称" width={200} onBlurText={e => { let newCoorder = Coorder for (var i = 0; i < newCoorder.length; i++) { if (index == i) { newCoorder[i].reviewerName = e.title } } this.setState({ Coorder: newCoorder }) }} onBlurChange={(e) => { let newCoorder = Coorder for (var i = 0; i < newCoorder.length; i++) { if (index == i) { newCoorder[i].reviewerId = e.value } } this.setState({ Coorder: newCoorder }) }} /> <div style={{ width: 25, display: "inline-block" }} > {Coorder.length > 1 ? ( <Icon className="dynamic-delete-button" type="minus-circle-o" disabled={Coorder.length === 1} onClick={() => this.remove(index)} /> ) : null} </div> {index === 0 && <Button style={{ marginLeft: 10 }} size="small" type="primary" onClick={this.add}>新增</Button>} </div> ) } </FormItem> <FormItem className="half-item" {...formItemLayout} label="公出抄送" > <StaffSearch valueName={this.state.publicCarbonCopyName} placeholder="输入名称" onBlurText={e => { this.setState({ publicCarbonCopyName: e.title }) }} onBlurChange={(obj) => { this.setState({ publicCarbonCopy: obj.value, }) }} /> </FormItem> </div> {/* <FormItem className="half-item" {...formItemLayout} label="协单审核" > <StaffSearch valueName={this.state.publicCarbonCopyName} placeholder="输入名称" onBlurText={e => { this.setState({ publicCarbonCopyName: e.title }) }} onBlurChange={(obj) => { this.setState({ publicCarbonCopy: obj.value, }) }} /> </FormItem> */} <FormItem className="half-item" {...formItemLayout} label="业务员" > <Select placeholder="请选择" value={this.state.publicPurview} style={{ width: '200px' }} onChange={(e) => { this.setState({ publicPurview: e }) }} > <Select.Option value={0} >否</Select.Option> <Select.Option value={1} >是</Select.Option> </Select> </FormItem> <div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="地区" > <Select multiple style={{ width: '580px' }} 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"> <FormItem className="half-item" {...formItemLayout} label="用户头像" > <PicturesWall domId={'newUser1'} pictureSign="customer_sys_file" fileList={this.getOrgCodeUrl} pictureUrl={this.state.orgCodeUrl} /> <p>图片建议:要清晰。</p> </FormItem> <FormItem className="half-item" {...formItemLayout} label="分巴" > <TreeSelect style={{ width: 200 }} value={this.state.ambId} dropdownStyle={{ maxHeight: 300, overflow: 'auto' }} treeData={this.props.level1Data} placeholder="请选择" showSearch treeNodeFilterProp="title" onChange={(e) => { this.setState({ ambId: e, }); }} /> </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;