import React from 'react'; import { Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import './userList.less'; import OrgDesc from './orgDesc.jsx'; import UserDesc from './userDesc.jsx'; import { auditStatusList } from '../../dataDic.js'; import { getAuditState, getSearchUrl } from '../../tools.js'; const OrgAdd = React.createClass({ getInitialState() { return { visible: false, loading: false }; }, showModal() { this.state.mobile = undefined; this.state.unitName = undefined; this.setState({ visible: true, }); }, handleCancel(e) { this.setState({ visible: false, }); }, handleOk() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/addNewUser", data: { mobile: this.state.mobile, unitName: this.state.unitName, type: 1 } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('新增成功!'); this.setState({ visible: false, }); this.props.closeDesc(false, true); } else { message.warning(data.error[0].message); }; }.bind(this)); }, render() { return ( <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}> <Button type="primary" onClick={this.showModal}>添加团体用户</Button> <Modal maskClosable={false} title="新增团体用户" visible={this.state.visible} onCancel={this.handleCancel} width='350px' footer={[ <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>, <Button key="back" onClick={this.handleCancel}>返回</Button> ]} className="admin-desc-content"> <div className='orgAdd-input'> <span>用户手机号码:</span> <Input value={this.state.mobile} onChange={(e) => { this.setState({ mobile: e.target.value }); }} /> </div> <div className='orgAdd-input'> <span>公司名称:</span> <Input value={this.state.unitName} onChange={(e) => { this.setState({ unitName: e.target.value }); }} /> </div> </Modal> </div> ); } }); const UserAdd = React.createClass({ getInitialState() { return { visible: false, loading: false }; }, showModal() { this.state.mobile = undefined; this.state.username = undefined; this.setState({ visible: true, }); }, handleCancel(e) { this.setState({ visible: false, }); }, handleOk() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/addNewUser", data: { mobile: this.state.mobile, username: this.state.username, type: 0 } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('新增成功!'); this.setState({ visible: false, }); this.props.closeDesc(false, true); } else { message.warning(data.error[0].message); }; }.bind(this)); }, render() { return ( <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}> <Button type="primary" onClick={this.showModal}>添加个人用户</Button> <Modal maskClosable={false} title="新增个人用户" visible={this.state.visible} onCancel={this.handleCancel} width='350px' footer={[ <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>, <Button key="back" onClick={this.handleCancel}>返回</Button> ]} className="admin-desc-content"> <div className='orgAdd-input'> <span>用户手机号码:</span> <Input value={this.state.mobile} onChange={(e) => { this.setState({ mobile: e.target.value }); }} /> </div> <div className='orgAdd-input'> <span>用户名称:</span> <Input value={this.state.username} onChange={(e) => { this.setState({ username: e.target.value }); }} /> </div> </Modal> </div> ); } }); const CustomerList = React.createClass({ loadData(pageNo) { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, type: this.state.type, mobile: this.state.searchLoginId, //登录名 email: this.state.searchEmail, startCreateTime: this.state.searchTime[0], endCreateTime: this.state.searchTime[1], number: this.state.searchAftId, //阿凡提号 auditName: this.state.searchName, auditStatus: this.state.searchAuditStatus }, success: function (data) { if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; this.state.data.push({ key: i, id: thisdata.id, type: thisdata.type, mobile: thisdata.mobile, email: thisdata.email, createTime: thisdata.createTime, aftUsername: thisdata.aftUsername, managerName: thisdata.managerName, number: thisdata.number, auditStatus: thisdata.type == 0 ? thisdata.userAuditStatus : thisdata.orgAuditStatus, createTimeFormattedDate: thisdata.createTimeFormattedDate, adminName: thisdata.adminName, theName: thisdata.type == 0 ? thisdata.username : thisdata.unitName }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; this.setState({ dataSource: this.state.data, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { searchMore: true, data: [], loading: false, type: "1", searchTime: [], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, columns: [ { title: '阿凡提号', dataIndex: 'number', key: 'number', }, { title: '登录名', dataIndex: 'mobile', key: 'mobile', }, { title: '用户名称', dataIndex: 'aftUsername', key: 'aftUsername', }, { title: '认证状态', dataIndex: 'auditStatus', key: 'auditStatus', render: text => { return getAuditState(text); } }, { title: '注册时间', dataIndex: 'createTimeFormattedDate', key: 'createTimeFormattedDate', }, { title: '认证名称', dataIndex: 'theName', key: 'theName', }, { title: '联系方式', dataIndex: 'email', key: 'email', }, { title: '业务员', dataIndex: 'adminName', key: 'adminName', } ], dataSource: [] }; }, componentWillMount() { this.loadData(); if (window.location.search) { let theArr = getSearchUrl(window.location.search); if (theArr.length > 1) { let theObj = {}; theObj.id = theArr[0]; theObj.type = theArr[1]; if (theObj.id != 'null' && theObj.type != 'null') { this.tableRowClick(theObj); }; }; }; }, tableRowClick(record, index) { this.state.RowData = record; switch (record.type) { case '0': this.setState({ userShowDesc: true }); break; case '1': this.setState({ orgShowDesc: true }); break; }; }, closeDesc(e, s) { this.state.userShowDesc = e; this.state.orgShowDesc = e; if (s) { this.loadData(); }; }, search() { this.loadData(); }, reset() { this.state.searchAftId = undefined; this.state.searchLoginId = undefined; this.state.searchAuditStatus = undefined; this.state.searchName = undefined; this.state.searchEmail = undefined; this.state.searchTime = []; this.loadData(); }, searchSwitch() { this.setState({ searchMore: !this.state.searchMore }); }, searchcreateTime(date, dateString) { this.state.createTime = dateString; }, render() { const { RangePicker } = DatePicker; return ( <div className="user-content" > <div className="content-title"> <span>我的客户管理</span> <OrgAdd closeDesc={this.closeDesc} /> <UserAdd closeDesc={this.closeDesc} /> </div> <div className="user-search"> <Select placeholder="选择用户类型" style={{ width: 100 }} value={this.state.type} onChange={(e) => { this.setState({ type: e }) }}> <Select.Option value="1" >组织用户</Select.Option> <Select.Option value="0" >个人用户</Select.Option> </Select> <Input placeholder="阿凡提号" value={this.state.searchAftId} onChange={(e) => { this.setState({ searchAftId: e.target.value }); }} /> <Input placeholder="登录号" value={this.state.searchLoginId} onChange={(e) => { this.setState({ searchLoginId: e.target.value }); }} /> <Select placeholder="选择认证状态" style={{ width: 140 }} value={this.state.searchAuditStatus} onChange={(e) => { this.setState({ searchAuditStatus: e }) }}> { auditStatusList.map(function (item, i) { return <Select.Option key={i} value={item.value} >{item.key}</Select.Option> }) } </Select> <Input placeholder="客户认证名称" value={this.state.searchName} onChange={(e) => { this.setState({ searchName: e.target.value }); }} /> <Input placeholder="联系方式" value={this.state.searchEmail} onChange={(e) => { this.setState({ searchEmail: e.target.value }); }} /> <Button type="primary" onClick={this.search}>搜索</Button> <Button onClick={this.reset}>重置</Button> <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span> <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}> <p> <span>注册时间:</span> <RangePicker allowClear={false} value={[this.state.searchTime[0] ? moment(this.state.searchTime[0]) : null, this.state.searchTime[1] ? moment(this.state.searchTime[1]) : null]} onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} /> </p> </div> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} pagination={this.state.pagination} onRowClick={this.tableRowClick} size="small" bordered /> </Spin> </div> <UserDesc data={this.state.RowData} showDesc={this.state.userShowDesc} closeDesc={this.closeDesc} /> <OrgDesc data={this.state.RowData} showDesc={this.state.orgShowDesc} closeDesc={this.closeDesc} /> </div > ); } }); export default CustomerList;