kede-HN-officialWeb-client/js/component/administration/business/memberList.jsx

import React from 'react';
import $ from 'jquery/src/ajax';
import 'react-quill/dist/quill.bubble.css';
import {Form,Icon,Button,Input,Select,Spin,Table,message,DatePicker,Modal,Upload,Popconfirm,Cascader,InputNumber,Radio} from 'antd';
import {areaSelect, getProvince} from '@/NewDicProvinceList';//省市区
import { getGameState, splitUrl, getprovince, getStatuslist, getLvl} from '@/tools.js';

//主体
const MemberList = Form.create()(
	React.createClass({
		loadData(pageNo) {
			this.state.data = [];
			this.setState({
				loading: true,
				page: pageNo
			});
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/admin/user/info',
				data: {
					pageNo: pageNo || 1,
					pageSize: this.state.pagination.pageSize,
					lvl: this.state.lvlSearch,
					mobile: this.state.mobileSearch,
					nickname: this.state.nicknameSearch,
				},
				success: function(data) {
					let theArr = [];
					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];
							theArr.push({
								key: i,
								id: thisdata.id,
								mobile: thisdata.mobile,
								nickname: thisdata.nickname,
								lvl: thisdata.lvl,
								status: thisdata.status,
								createTimes: thisdata.createTimes,
								workUnit: thisdata.workUnit,
							});
						}
						this.state.pagination.current = data.data.pageNo;
						this.state.pagination.total = data.data.totalCount;
					}
					this.setState({
						dataSource: theArr,
						pagination: this.state.pagination
					});
				}.bind(this)
			}).always(
				function() {
					this.setState({
						loading: false
					});
				}.bind(this)
			);
		},
		getInitialState() {
			return {
				loading: false,
				flag: true,
				totalData:{
					mark: false,
				},
				powerList:[],
				pagination: {
					defaultCurrent: 1,
					defaultPageSize: 10,
					showQuickJumper: true,
					pageSize: 10,
					onChange: function(page) {
						this.loadData(page);
						this.setState({
							selectedRowKeys: []
						});
					}.bind(this),
					showTotal: function(total) {
						return '共' + total + '条数据';
					}
				},
				columns: [
					{
						title: '序号',
						dataIndex: 'key',
						key: 'key'
					},
					{
						title: '会员',
						dataIndex: 'mobile',
						key: 'mobile'
					},
					{
						title: '公司',
						dataIndex: 'workUnit',
						key: 'workUnit',
					},
					{
						title: '姓名',
						dataIndex: 'nickname',
						key: 'nickname',
					},
					{
						title: '会员级别',
						dataIndex: 'lvl',
						key: 'lvl',
						render:(text,record)=>{
							if (text !== undefined) {
								let value = '';
								this.state.powerList.map((obj)=>{
									if (obj.lvlNumber === text) {
										value = obj.typeName;
									}
								})
								return value;
							}
						}
					},
					{
						title: '注册时间',
						dataIndex: 'createTimes',
						key: 'createTimes'
					},
					{
						title: '状态',
						dataIndex: 'status',
						key: 'status',
						render:(text)=>{
							return getStatuslist(text.toString())
						}
					},
					{
						title: '排序',
						dataIndex: 'memberPrice',
						key: 'memberPrice'
					},
					{
						title: '操作',
						dataIndex: ' ',
						key: ' ',
						render:(text,index,record)=>{
							return <Button type="primary" onClick={()=>{
								this.tableRowClick(record)
							}}>修改</Button>
						}
					},
				],
				dataSource: []
			};
		},
		
		powerList(pageNo) {
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/admin/listLvltype',
				data: {
					pageNo: 1,
					pageSize: 99,
				},
				success: function(data) {
					let theArr = [];
					if (!data.data || !data.data) {
						if (data.error && data.error.length) {
							message.warning(data.error[0].message);
						}
					} else {
						for (let i = 0; i < data.data.length; i++) {
							let thisdata = data.data[i];
							theArr.push({
								key: i,
								id: thisdata.id,
								typeName: thisdata.typeName,
								lvlNumber: thisdata.lvlNumber,
							});
						}
						this.state.pagination.current = data.data.pageNo;
						this.state.pagination.total = data.data.totalCount;
					}
					this.setState({
						powerList: theArr,
					});
				}.bind(this)
			}).always(
				function() {
					this.setState({
						loading: false
					});
				}.bind(this)
			);
		},
		
		
		componentWillMount() {
			this.loadData()
			this.powerList()
		},
		detailes(record) {
			this.setState({
				loading:true
			});
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/admin/user/details',
				data: {
					id: record.id,
				},
				success: function(data) {
					let theArr = [];
					let thisdata = data.data;
					let ProvinceCityArr = [],
						ProvinceS = thisdata.province, //getprovince
						citys = thisdata.city,
						Areas = thisdata.area;
					ProvinceCityArr.push(ProvinceS, citys, Areas);
					if (!data.data || !data.data.list) {
						if (data.error && data.error.length) {
							message.warning(data.error[0].message);
						}
					}
					Object.assign(this.state.totalData,{
						postalAddress: thisdata.postalAddress,
						contacts: thisdata.contacts,
						contactMobile: thisdata.contactMobile,
						ProvinceCity: ProvinceCityArr[0] === null?undefined:ProvinceCityArr,
						pwds:thisdata.pwds,
					},this.state.RowData)
				}.bind(this)
			}).always(
				function() {
					this.setState({
						loading: false
					});
				}.bind(this)
			);
		},
		//项目列表整行点击
		tableRowClick(record, index) {
			this.state.RowData = record;
			this.setState({
				editvisible: true,
			});
			this.detailes(record);
		},
		edithandleCancel(e) {
			this.setState({
				editvisible: false
			},()=>{
				this.addReset()
			});
		},
		
		search() {
			this.loadData();
		},
		
		add(){
			this.setState({
				editvisible: true,
				flag: false,
			});
		},
		addNew(){
			this.setState({
				loading:true
			});
			["ProvinceCity"].forEach((key)=>{
				this.change(key,undefined)
			})
			$.ajax({
				method: 'post',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + (this.state.flag?'/api/admin/user/update':'/api/admin/user/add'),
				data: this.state.totalData,
			}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('保存成功！');
				this.cancelAdd()
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
		},
		cancelAdd(){
			this.setState({
				editvisible: false,
			},()=>{
				this.setState({
					flag:true
				})
				this.addReset()
			});
			this.loadData()
		},
		
		//新增框的清零
		addReset(){
			this.setState({
				totalData:{},
			})
		},
		//搜索部分的清零
		reset() {
			this.state.mobileSearch = undefined; 
			this.state.lvlSearch = undefined; 
			this.state.nicknameSearch = undefined; 
			this.loadData();
		},
		
		change(key, e, f){
			if(f === undefined ){
				this.state.totalData[key] = e
				this.setState({
					totalData:this.state.totalData
				})
			}else if(typeof(f) === "function"){
				this.state.totalData[key] = e
				this.setState({
					totalData:this.state.totalData
				},f)
			}
		},

		render() {
			const FormItem = Form.Item;
			const rowSelection = {
				selectedRowKeys: this.state.selectedRowKeys,
				onChange: (selectedRowKeys, selectedRows) => {
					this.setState({
						selectedRows: selectedRows.slice(-1),
						selectedRowKeys: selectedRowKeys.slice(-1)
					});
				}
			};
			const empty = [];
			let data = this.state.totalData;
			return (
				<div className="user-content">
					<div className="content-title">
						<span>会员列表</span>
						<div className="user-search">
							<Input
								placeholder="会员手机号"
								style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
								value={this.state.mobileSearch}
								onChange={(e) => {
									this.setState({ mobileSearch: e.target.value });
								}}
							/>
							 <Select value={this.state.lvlSearch} style={{ width: 120 }}
										placeholder='请选择级别' onChange={(e)=>{
											this.setState({
												lvlSearch:e
											})
										}}>
								<Option value={0}>普通会员</Option>
								<Option value={1}>A会员</Option>
								<Option value={2}>AA会员</Option>
								<Option value={3}>AAA会员</Option>
							</Select>
							<Input
								placeholder="姓名"
								style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
								value={this.state.nicknameSearch}
								onChange={(e) => {
									this.setState({ nicknameSearch: e.target.value });
								}}
							/>
							<Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}>
								搜索
							</Button>
							<Button onClick={this.reset} style={{ marginRight: '10px' }}>
								重置
							</Button>
							<Button type="primary" onClick={this.add} style={{ marginLeft: '100px'}}>
								新增会员
							</Button>
						</div>
						<div className="patent-table">
							<Spin spinning={this.state.loading}>
								<Table
									columns={this.state.columns}
									dataSource={this.state.dataSource}
									rowSelection={rowSelection}
									pagination={this.state.pagination}
									onRowClick={this.tableRowClick}
								/>
							</Spin>
						</div>
					</div>
					<div className="patent-desc">
						<Modal
							className="customeDetails"
							title={this.state.flag?'会员详情':'新增会员'}
							width="1000px"
							visible={this.state.editvisible}
							onOk={this.edithandleCancel}
							onCancel={this.state.flag?this.edithandleCancel:this.cancelAdd}
							footer=""
						>
							<Form layout="horizontal" onSubmit={this.edithandleSubmit} id="demand-form">
								<Spin spinning={this.state.loading}>
									<div className="clearfix">
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="会员"
										>
											<Input placeholder="请输入会员手机号" value={data.mobile}
											    	onChange={(e)=>{
														this.change('mobile',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="密码"
										>
											<Input placeholder="请输入密码" value={data.pwds}
											    	onChange={(e)=>{
														this.change('pwds',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="姓名"
										>
											<Input placeholder="请输入姓名" value={data.nickname}
											    	onChange={(e)=>{
														this.change('nickname',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="公司名称"
										>
											<Input placeholder="请输入公司名称" value={data.workUnit}
											    	onChange={(e)=>{
														this.change('workUnit',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="公司地址"
										>
											<Cascader options={areaSelect()}  value={data.ProvinceCity} placeholder="选择城市" style={{width:'95%'}}
												onChange={(e)=>{
														this.change('ProvinceCity',e)
														this.change('province', e[0])
														this.change('city', e[1])
														this.change('area', e[2])
													}}  />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="详细地址"
										>
											<Input placeholder="请输入详细地址" value={data.postalAddress}
											    	onChange={(e)=>{
														this.change('postalAddress',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="联系人"
										>
											<Input placeholder="请输入联系人" value={data.contacts}
											    	onChange={(e)=>{
														this.change('contacts',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="联系人电话"
										>
											<Input placeholder="请输入联系人电话" value={data.contactMobile}
											    	onChange={(e)=>{
														this.change('contactMobile',e.target.value)
													}} style={{width:'240px'}} />
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="级别"
										>
											 <Select value={data.lvl} style={{ width: 120 }}
														placeholder='请选择级别' onChange={(e)=>{
														this.change('lvl',e)
													}}>
												{this.state.powerList.map((obj)=>{
													return <Option value={obj.lvlNumber}>{obj.typeName}</Option>
												})}
											</Select>
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="注册时间"
										>
											<span>{this.state.flag?data.createTimes:new Date().toLocaleDateString()}</span>
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="账户状态"
										>
											<Radio.Group onChange={(e)=>{
														this.change('status',e.target.value)
													}} value={data.status}>
												<Radio value={0}>正常</Radio>
												<Radio value={1}>注销</Radio>
												<Radio value={2}>锁定</Radio>
											</Radio.Group>
										</FormItem>
										<Button type="primary" size="large" onClick={this.addNew} style={{float:'right',marginRight:'80px',marginTop:'20px'}}>保存</Button>
									</div>
								</Spin>
							</Form>
						</Modal>
					</div>
				</div>
			);
		}
	})
);

export default MemberList;