import React from 'react'; import { Icon, Modal, message, Spin, Input, Select, DatePicker, Button, Radio, Form, Cascader } from 'antd'; import moment from 'moment'; import './userList.less'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { areaSelect, getProvince } from '../../NewDicProvinceList.js'; import { getAuditState } from '../../tools.js'; import { auditStatusList, certifyStepList } from '../../dataDic.js'; const UserShow = Form.create()(React.createClass({ getInitialState() { return { visible: false, loading: false }; }, loadData(uid) { this.props.spinState(true); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/userCertify/userDetail", data: { uid: uid }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; this.setState({ username: thisData.username, sex: thisData.sex, id: thisData.id, birth: thisData.dateOfBirthYear + '-' + thisData.dateOfBirthMonth, idNumber: thisData.idNumber, province: thisData.province, city: thisData.city, area: thisData.area, positiveIdUrl: thisData.positiveIdUrl, oppositeIdUrl: thisData.oppositeIdUrl, aftUsername: thisData.aftUsername, contactMobile: thisData.contactMobile, bankName: thisData.bankName, bankAccount: thisData.bankAccount, bankCardNumber: thisData.bankCardNumber, amountMoney: thisData.amountMoney, auditStatus: thisData.auditStatus, process: thisData.process ? String(thisData.process) : undefined, paymentDateFormattedDate: thisData.paymentDateFormattedDate, paymentDate: thisData.paymentDate, expert: thisData.expert, celebrity: thisData.celebrity, level: thisData.lvl, aid: thisData.aid, //业务员ID mid: thisData.mid //客户经理ID }); this.props.form.resetFields(); }.bind(this), }).always(function () { this.props.spinState(false); }.bind(this)); }, getAccountManagerList() { this.props.spinState(true); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/userCertify/accountManager", success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; return; }; for (var item in data.data) { theArr.push( <Select.Option value={item} key={item}>{data.data[item]}</Select.Option> ) }; this.setState({ accountManagerOption: theArr, accountManagerList: data.data }); }.bind(this), }).always(function () { this.props.spinState(false); }.bind(this)); }, getTechnicianList() { this.props.spinState(true); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/userCertify/technician", success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; return; }; for (var item in data.data) { theArr.push( <Select.Option value={item} key={item}>{data.data[item]}</Select.Option> ) }; this.setState({ technicianOption: theArr, technicianList: data.data }); }.bind(this), }).always(function () { this.props.spinState(false); }.bind(this)); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { this.props.spinState(true); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/userCertify/updateUserDetail", data: { uid: this.props.uid, id: this.state.id, auditStatus: values.auditStatus, level: this.state.level, aid: values.aid, //指派业务员ID mid: values.mid, //指派客户经理ID } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.props.spinState(false); this.props.handleOk(); }.bind(this)); } }); }, componentWillMount() { this.loadData(this.props.uid); this.getAccountManagerList(); this.getTechnicianList(); }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { this.loadData(nextProps.uid); }; }, render() { const { getFieldDecorator } = this.props.form; const FormItem = Form.Item const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; return ( <Form horizontal onSubmit={this.handleSubmit} className="person-form"> <FormItem {...formItemLayout} label="用户名" > {getFieldDecorator('username')( <span>{this.state.username}</span> )} </FormItem> <FormItem {...formItemLayout} label="性别" > {getFieldDecorator('sex')( <span>{this.state.sex}</span> )} </FormItem> <FormItem {...formItemLayout} label="出生日期" > {getFieldDecorator('birth')( <span>{this.state.birth}</span> )} </FormItem> <FormItem {...formItemLayout} label="身份证号" > {getFieldDecorator('idNumber')( <span>{this.state.idNumber}</span> )} </FormItem> <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="身份证图片" > <div className="idcard-img clearfix"> {this.state.positiveIdUrl ? <div> <div className="idcard-imgbox"> <img src={globalConfig.context + '/open/writeImage?path=' + this.state.positiveIdUrl} alt="点击查看大图" onClick={(e) => { window.open(e.target.src) }} /> </div> </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>} {this.state.oppositeIdUrl ? <div> <div className="idcard-imgbox"> <img src={globalConfig.context + '/open/writeImage?path=' + this.state.oppositeIdUrl} alt="点击查看大图" onClick={(e) => { window.open(e.target.src) }} /> </div> </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>} </div> </FormItem> <FormItem {...formItemLayout} label="认证姓名" > {getFieldDecorator('aftUsername')( <span>{this.state.aftUsername}</span> )} </FormItem> <FormItem {...formItemLayout} label="联系电话" > {getFieldDecorator('contactMobile')( <span>{this.state.contactMobile}</span> )} </FormItem> <FormItem {...formItemLayout} label="所在地" > {getFieldDecorator('address')( <span>{getProvince(this.state.province, this.state.city, this.state.area)}</span> )} </FormItem> <FormItem {...formItemLayout} label="开户银行" > {getFieldDecorator('bankAccount')( <span>{this.state.bankAccount}</span> )} </FormItem> <FormItem {...formItemLayout} label="银行卡号" > {getFieldDecorator('bankCardNumber')( <span>{this.state.bankCardNumber}</span> )} </FormItem> <FormItem {...formItemLayout} label="用户等级" > {getFieldDecorator('level')( <span>{"Lv." + (this.state.level || 0)}</span> )} </FormItem> <FormItem {...formItemLayout} label="是否专家" > {getFieldDecorator('expert')( <span>{this.state.expert == 1 ? "是" : "否"}</span> )} </FormItem> <FormItem {...formItemLayout} label="是否明星" > {getFieldDecorator('celebrity')( <span>{this.state.celebrity == 1 ? "是" : "否"}</span> )} </FormItem> <FormItem {...formItemLayout} label="认证状态" > {getFieldDecorator('auditStatus', { initialValue: this.state.auditStatus })( <Select placeholder="选择要修改的认证状态" style={{ width: 200 }} onChange={(e) => { this.state.auditStatus = e }}> { auditStatusList.map(function (item, i) { return <Select.Option key={i} value={item.value} >{item.key}</Select.Option> }) } </Select> )} </FormItem> <FormItem {...formItemLayout} label="业务员" > {getFieldDecorator('aid', { initialValue: this.state.aid })( <Select placeholder="选择一个业务员" style={{ width: 200 }}> {this.state.technicianOption} </Select> )} </FormItem> <FormItem {...formItemLayout} label="客户经理" > {getFieldDecorator('mid', { initialValue: this.state.mid })( <Select placeholder="选择一个客户经理" style={{ width: 200 }}> {this.state.accountManagerOption} </Select> )} </FormItem> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> <Button className="set-submit" type="ghost" onClick={this.props.closeDesc}>取消</Button> </FormItem> </Form > ) } })); const UserForm = Form.create()(React.createClass({ getInitialState() { return { visible: false, loading: false, saveSign: "save" }; }, loadData(uid) { this.props.spinState(true); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/userDetail", data: { uid: uid }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; let d = new Date() if (thisData && thisData.dateOfBirthMonth && thisData.dateOfBirthYear) { d.setMonth(thisData.dateOfBirthMonth - 1); d.setYear(parseInt(thisData.dateOfBirthYear)); }; this.setState({ username: thisData.username, sex: thisData.sex, id: thisData.id, birth: d, idNumber: thisData.idNumber, address: [thisData.province, thisData.city, thisData.area], positiveIdUrl: thisData.positiveIdUrl, oppositeIdUrl: thisData.oppositeIdUrl, aftUsername: thisData.aftUsername, contactMobile: thisData.contactMobile, bankName: thisData.bankName, bankAccount: thisData.bankAccount, bankCardNumber: thisData.bankCardNumber, amountMoney: thisData.amountMoney, auditStatus: thisData.auditStatus, process: thisData.process ? String(thisData.process) : undefined, paymentDateFormattedDate: thisData.paymentDateFormattedDate, paymentDate: thisData.paymentDate, level: thisData.level, expert: thisData.expert, celebrity: thisData.celebrity, aid: thisData.aid, //业务员ID mid: thisData.mid //客户经理ID }); this.props.form.resetFields(); }.bind(this), }).always(function () { this.props.spinState(false); }.bind(this)); }, handleSubmit(e) { if (e) { e.preventDefault(); }; this.props.form.validateFields((err, values) => { // //金额判断 // if (values.amountMoney && values.amountMoney < 0 && values.amountMoney > 100 && /^\d+(\.\d{2})?$/.test(values.amountMoney)) { // message.warning('请输入0-100以内的金额'); // return; // }; if ((this.state.auditStatus == "5" && values.level == "0") || (this.state.auditStatus != "5" && values.level != "0")) { message.warning('认证状态和用户等级不匹配!'); return; }; if (!err) { this.props.spinState(true); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/updateUserDetail", data: { uid: this.props.uid, id: this.state.id, username: values.username, sex: values.sex, dateOfBirthYear: values.birth ? values.birth._d.getFullYear() : undefined, dateOfBirthMonth: values.birth ? values.birth._d.getMonth() + 1 : undefined, idNumber: values.idNumber, aftUsername: values.aftUsername, province: values.address[0], city: values.address[1], area: values.address[2], contactMobile: values.contactMobile, bankName: values.bankName, bankAccount: values.bankAccount, bankCardNumber: values.bankCardNumber, amountMoney: values.amountMoney, //auditStatus: values.auditStatus, paymentDateFormattedDate: values.paymentDateFormattedDate ? values.paymentDateFormattedDate.format("YYYY-MM-DD") : undefined, level: values.level, expert: values.expert, celebrity: values.celebrity, //aid: values.aid, //指派业务员ID //mid: values.mid, //指派客户经理ID saveSign: this.state.saveSign } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.setState({ saveSign: "save" }); this.props.spinState(false); this.props.handleOk(); }.bind(this)); } }); }, componentWillMount() { this.loadData(this.props.uid); }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { this.loadData(nextProps.uid); }; }, render() { const { getFieldDecorator } = this.props.form; const { MonthPicker } = DatePicker; const FormItem = Form.Item const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; return ( <Form horizontal onSubmit={this.handleSubmit} className="person-form"> <FormItem {...formItemLayout} label="用户名" > {getFieldDecorator('username', { initialValue: this.state.username })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="性别" > {getFieldDecorator('sex', { initialValue: this.state.sex })( <Radio.Group> <Radio value="男">男</Radio> <Radio value="女">女</Radio> </Radio.Group> )} </FormItem> <FormItem {...formItemLayout} label="出生日期" > {getFieldDecorator('birth', { initialValue: !this.state.birth ? null : moment(this.state.birth, 'YYYY/MM') })( <MonthPicker /> )} </FormItem> <FormItem {...formItemLayout} label="身份证号" > {getFieldDecorator('idNumber', { initialValue: this.state.idNumber })( <Input /> )} </FormItem> <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="身份证图片" > <div className="idcard-img clearfix"> {this.state.positiveIdUrl ? <div> <div className="idcard-imgbox"> <img src={globalConfig.context + '/open/writeImage?path=' + this.state.positiveIdUrl} alt="点击查看大图" onClick={(e) => { window.open(e.target.src) }} /> </div> </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>} {this.state.oppositeIdUrl ? <div> <div className="idcard-imgbox"> <img src={globalConfig.context + '/open/writeImage?path=' + this.state.oppositeIdUrl} alt="点击查看大图" onClick={(e) => { window.open(e.target.src) }} /> </div> </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>} </div> </FormItem> <FormItem {...formItemLayout} label="认证姓名" > {getFieldDecorator('aftUsername', { initialValue: this.state.aftUsername })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="联系电话" > {getFieldDecorator('contactMobile', { initialValue: this.state.contactMobile })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="所在地" > {getFieldDecorator('address', { initialValue: this.state.address })( <Cascader options={areaSelect()} placeholder="请选择地址" /> )} </FormItem> <FormItem {...formItemLayout} label="开户银行" > {getFieldDecorator('bankAccount', { initialValue: this.state.bankAccount })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="银行卡号" > {getFieldDecorator('bankCardNumber', { initialValue: this.state.bankCardNumber })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="用户等级" > {getFieldDecorator('level', { initialValue: this.state.level })( <Select placeholder="选择要修改的用户等级" style={{ width: 200 }} > <Select.Option value="0" >Lv.0</Select.Option> <Select.Option value="1" >Lv.1</Select.Option> <Select.Option value="2" >Lv.2</Select.Option> <Select.Option value="3" >Lv.3</Select.Option> <Select.Option value="4" >Lv.4</Select.Option> <Select.Option value="5" >Lv.5</Select.Option> </Select> )} </FormItem> <FormItem {...formItemLayout} label="专家" > {getFieldDecorator('expert', { initialValue: this.state.expert })( <Radio.Group> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> )} </FormItem> <FormItem {...formItemLayout} label="明星" > {getFieldDecorator('celebrity', { initialValue: this.state.celebrity })( <Radio.Group> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> )} </FormItem> <FormItem {...formItemLayout} label="认证状态" > {getFieldDecorator('auditStatus')( <span>{getAuditState(this.state.auditStatus)}</span> )} </FormItem> <FormItem {...formItemLayout} label="业务员" > {getFieldDecorator('aid', )( <span>{this.props.data.adminName}</span> )} </FormItem> <FormItem {...formItemLayout} label="客户经理" > {getFieldDecorator('mid')( <span>{this.props.data.managerName}</span> )} </FormItem> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> <Button className="set-submit" type="ghost" onClick={() => { this.state.saveSign = "submit"; this.handleSubmit(); }}>提交审核</Button> </FormItem> </Form > ) } })); const PatentDesc = React.createClass({ getInitialState() { return { visible: false, loading: false }; }, showModal() { this.setState({ visible: true, }); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, handleOk(e) { this.setState({ visible: false, }); this.props.closeDesc(false, true); }, componentWillReceiveProps(nextProps) { this.state.visible = nextProps.showDesc; }, spinChange(e) { this.setState({ loading: e }); }, render() { if (this.props.data) { return ( <div className="patent-desc"> <Spin spinning={this.state.loading} className='spin-box'> <Modal maskClosable={false} title="用户详情" visible={this.state.visible} onOk={this.checkPatentProcess} onCancel={this.handleCancel} width='600px' footer='' className="admin-desc-content"> {window.showAuditStatus ? <UserShow uid={this.props.data.id} data={this.props.data} closeDesc={this.handleCancel} visible={this.state.visible} spinState={this.spinChange} handleOk={this.handleOk} /> : <UserForm uid={this.props.data.id} data={this.props.data} closeDesc={this.handleCancel} visible={this.state.visible} spinState={this.spinChange} handleOk={this.handleOk} />} </Modal> </Spin> </div> ); } else { return <div></div> } }, }); export default PatentDesc; // <FormItem // {...formItemLayout} // label="打款金额" // > // {getFieldDecorator('amountMoney', { // initialValue: this.state.amountMoney // })( // <Input /> // )} // </FormItem> // <FormItem // {...formItemLayout} // label="打款日期" // > // {getFieldDecorator('paymentDateFormattedDate', { // initialValue: this.state.paymentDate ? moment(this.state.paymentDate) : null // })( // <DatePicker /> // )} // </FormItem>