本教程详细介绍使用React全家桶结合Ant Design开发单车后台管理系统的全过程，包括城市管理和订单管理模块的实现，以及项目工程化开发、员工管理菜单、车辆地图、图表模块、权限设置等内容。
React全家桶+AntD 单车后台管理系统开发（完整版）
(第8章 单车业务之城市管理模块&)
第8章 单车业务之城市管理模块&
src/router.js，通用路由
import React from 'react'
import { HashRouter, Route, Switch, Redirect} from 'react-router-dom'
import App from './App'
import Login from './pages/login'
import Admin from './admin'
import Home from './pages/home';
import Buttons from './pages/ui/buttons'
import Modals from './pages/ui/modals'
import NoMatch from './pages/nomatch'
import Loadings from './pages/ui/loadings'
import Notice from './pages/ui/notice'
import Messages from './pages/ui/messages'
import Tabs from './pages/ui/tabs'
import Gallery from './pages/ui/gallery'
import Carousel from './pages/ui/carousel'
import FormLogin from './pages/form/login'
import FormRegister from './pages/form/register'
import BasicTable from './pages/table/basicTable'
import HighTable from './pages/table/highTable'
import Rich from './pages/rich'
import City from './pages/city/index'
import Order from './pages/order/index'
import Common from './common'
import OrderDetail from './pages/order/detail'
import BikeMap from './pages/map/bikeMap'
import User from './pages/user/index'
import Bar from './pages/echarts/bar/index'
import Pie from './pages/echarts/pie/index'
import Line from './pages/echarts/line/index'
import Permission from './pages/permission'
export default class ERouter extends React.Component{
render(){
return (
<HashRouter>
<App>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/common" render={() =>
<Common>
<Route path="/common/order/detail/:orderId" component={OrderDetail} />
</Common>
}
/>
<Route path="/" render={()=>
<Admin>
<Switch>
<Route path='/home' component={Home} />
<Route path="/ui/buttons" component={Buttons} />
<Route path="/ui/modals" component={Modals} />
<Route path="/ui/loadings" component={Loadings} />
<Route path="/ui/notification" component={Notice} />
<Route path="/ui/messages" component={Messages} />
<Route path="/ui/tabs" component={Tabs} />
<Route path="/ui/gallery" component={Gallery} />
<Route path="/ui/carousel" component={Carousel} />
<Route path="/form/login" component={FormLogin} />
<Route path="/form/reg" component={FormRegister} />
<Route path="/table/basic" component={BasicTable} />
<Route path="/table/high" component={HighTable} />
<Route path='/rich' component={Rich} />
<Route path="/city" component={City} />
<Route path="/order" component={Order} />
<Route path='/bikeMap' component={BikeMap} />
<Route path='/user' component={User} />
<Route path="/charts/bar" component={Bar} />
<Route path="/charts/pie" component={Pie} />
<Route path="/charts/line" component={Line} />
<Route path="/permission" component={Permission} />
<Redirect to="/home" />
{/* <Route component={NoMatch} /> */}
</Switch>
</Admin>
} />
</Switch>
</App>
</HashRouter>
);
}
}
src\pages\city\index.js
axios动态获取数据，table数组数据字典，card布局，FormItem的栅格布局，Modal弹出框
import React from 'react';
import { Card, Button, Table, Form, Select, Modal, message } from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';
const FormItem = Form.Item;
const Option = Select.Option;
export default class City extends React.Component{
state = {
list:[],
isShowOpenCity:false
}
params = {
page:1
}
componentDidMount(){
this.requestList();
}
// 默认请求我们的接口数据
requestList = ()=>{
let _this = this;
axios.ajax({
url: '/open_city',
data:{
params:{
page:this.params.page
}
}
}).then((res)=>{
let list = res.result.item_list.map((item, index) => {
item.key = index;
return item;
});
this.setState({
list:list,
pagination:Utils.pagination(res,(current)=>{
_this.params.page = current;
_this.requestList();
})
})
})
}
// 开通城市
handleOpenCity = ()=>{
this.setState({
isShowOpenCity:true
})
}
// 城市开通提交
handleSubmit = ()=>{
let cityInfo = this.cityForm.props.form.getFieldsValue();
console.log(cityInfo);
axios.ajax({
url:'/city/open',
data:{
params:cityInfo
}
}).then((res)=>{
if(res.code == '0'){
message.success('开通成功');
this.setState({
isShowOpenCity:false
})
this.requestList();
}
})
}
render(){
const columns = [
{
title:'城市ID',
dataIndex:'id'
}, {
title: '城市名称',
dataIndex: 'name'
}, {
title: '用车模式',
dataIndex: 'mode',
render(mode){
return mode ==1 ?'停车点':'禁停区';
}
}, {
title: '营运模式',
dataIndex: 'op_mode',
render(op_mode) {
return op_mode == 1 ? '自营' : '加盟';
}
}, {
title: '授权加盟商',
dataIndex: 'franchisee_name'
}, {
title: '城市管理员',
dataIndex: 'city_admins',
render(arr){
return arr.map((item)=>{
return item.user_name;
}).join(',');
}
}, {
title: '城市开通时间',
dataIndex: 'open_time'
}, {
title: '操作时间',
dataIndex: 'update_time',
render: Utils.formateDate
}, {
title: '操作人',
dataIndex: 'sys_user_name'
}
]
return (
<div>
<Card>
<FilterForm />
</Card>
<Card style={{marginTop:10}}>
<Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
</Card>
<div className="content-wrap">
<Table
bordered
columns={columns}
dataSource={this.state.list}
pagination={this.state.pagination}
/>
</div>
<Modal
title="开通城市"
visible={this.state.isShowOpenCity}
onCancel={()=>{
this.setState({
isShowOpenCity:false
})
}}
onOk={this.handleSubmit}
>
<OpenCityForm wrappedComponentRef={(inst)=>{this.cityForm = inst;}}/>
</Modal>
</div>
);
}
}
class FilterForm extends React.Component{
render(){
const { getFieldDecorator } = this.props.form;
return (
<Form layout="inline">
<FormItem label="城市">
{
getFieldDecorator('city_id')(
<Select
style={{width:100}}
placeholder="全部"
>
<Option value="">全部</Option>
<Option value="1">北京市</Option>
<Option value="2">天津市</Option>
<Option value="3">深圳市</Option>
</Select>
)
}
</FormItem>
<FormItem label="用车模式">
{
getFieldDecorator('mode')(
<Select
style={{ width: 120 }}
placeholder="全部"
>
<Option value="">全部</Option>
<Option value="1">指定停车点模式</Option>
<Option value="2">禁停区模式</Option>
</Select>
)
}
</FormItem>
<FormItem label="营运模式">
{
getFieldDecorator('op_mode')(
<Select
style={{ width: 80 }}
placeholder="全部"
>
<Option value="">全部</Option>
<Option value="1">自营</Option>
<Option value="2">加盟</Option>
</Select>
)
}
</FormItem>
<FormItem label="加盟商授权状态">
{
getFieldDecorator('auth_status')(
<Select
style={{ width: 100 }}
placeholder="全部"
>
<Option value="">全部</Option>
<Option value="1">已授权</Option>
<Option value="2">未授权</Option>
</Select>
)
}
</FormItem>
<FormItem>
<Button type="primary" style={{margin:'0 20px'}}>查询</Button>
<Button>重置</Button>
</FormItem>
</Form>
);
}
}
FilterForm = Form.create({})(FilterForm);
class OpenCityForm extends React.Component{
render(){
const formItemLayout = {
labelCol:{
span:5
},
wrapperCol:{
span:19
}
}
const { getFieldDecorator } =this.props.form;
return (
<Form layout="horizontal">
<FormItem label="选择城市" {...formItemLayout}>
{
getFieldDecorator('city_id',{
initialValue:'1'
})(
<Select style={{ width: 100 }}>
<Option value="">全部</Option>
<Option value="1">北京市</Option>
<Option value="2">天津市</Option>
</Select>
)
}
</FormItem>
<FormItem label="营运模式" {...formItemLayout}>
{
getFieldDecorator('op_mode', {
initialValue: '1'
})(
<Select style={{ width: 100 }}>
<Option value="1">自营</Option>
<Option value="2">加盟</Option>
</Select>
)
}
</FormItem>
<FormItem label="用车模式" {...formItemLayout}>
{
getFieldDecorator('use_mode', {
initialValue: '1'
})(
<Select style={{ width: 100 }}>
<Option value="1">指定停车点</Option>
<Option value="2">禁停区</Option>
</Select>
)
}
</FormItem>
</Form>
);
}
}
OpenCityForm = Form.create({})(OpenCityForm);
common.less
@import './default.less';
@import './loading.less';
ul,li{
list-style: none;
}
.clearfix{
&::after{
content:' ';
clear:both;
display: block;
visibility: hidden;
}
}
.container{
.nav-left{
background-color:#001529;
color: #ffffff;
height: calc(100vh);
}
.main{
height: calc(100vh);
background-color: @colorL;
overflow: auto;
}
.content{
position: relative;
padding: 20px;
}
}
.content-wrap{
background: #ffffff;
border: 1px solid #e8e8e8;
margin-top: -3px;
.ant-table-wrapper{
margin-left: -1px;
margin-right: -2px;
}
}
.ant-card{
button{
margin-right: 10px;
}
}
utils.js
格式化日期
import React from 'react';
import { Select } from 'antd'
const Option = Select.Option;
export default {
formateDate(time){
if(!time)return '';
let date = new Date(time);
return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
},
pagination(data,callback){
return {
onChange:(current)=>{
callback(current)
},
current:data.result.page,
pageSize:data.result.page_size,
total: data.result.total_count,
showTotal:()=>{
return `共${data.result.total_count}条`
},
showQuickJumper:true
}
},
// 格式化金额,单位:分(eg:430分=4.30元)
formatFee(fee, suffix = '') {
if (!fee) {
return 0;
}
return Number(fee).toFixed(2) + suffix;
},
// 格式化公里（eg:3000 = 3公里）
formatMileage(mileage, text) {
if (!mileage) {
return 0;
}
if (mileage >= 1000) {
text = text || " km";
return Math.floor(mileage / 100) / 10 + text;
} else {
text = text || " m";
return mileage + text;
}
},
// 隐藏手机号中间4位
formatPhone(phone) {
phone += '';
return phone.replace(/(\d{3})\d*(\d{4})/g, '$1***$2')
},
// 隐藏身份证号中11位
formatIdentity(number) {
number += '';
return number.replace(/(\d{3})\d*(\d{4})/g, '$1***********$2')
},
getOptionList(data){
if(!data){
return [];
}
let options = [] //[<Option value="0" key="all_key">全部</Option>];
data.map((item)=>{
options.push(<Option value={item.id} key={item.id}>{item.name}</Option>)
})
return options;
},
/**
* ETable 行点击通用函数
* @param {*选中行的索引} selectedRowKeys
* @param {*选中行对象} selectedItem
*/
updateSelectedItem(selectedRowKeys, selectedRows, selectedIds) {
if (selectedIds) {
this.setState({
selectedRowKeys,
selectedIds: selectedIds,
selectedItem: selectedRows
})
} else {
this.setState({
selectedRowKeys,
selectedItem: selectedRows
})
}
},
}
(第9章 单车业务之订单管理模块&)
第9章 单车业务之订单管理模块&
src\pages\order\index.js
打开一个新窗口window.open
import React from 'react';
import { Card, Button, Table, Form, Select, Modal, DatePicker, message} from 'antd'
import axios from '../../axios'
import Utils from '../../utils/utils'
import BaseForm from '../../components/BaseForm'
const FormItem = Form.Item;
const Option = Select.Option;
export default class Order extends React.Component{
state = {
orderInfo:{},
orderConfirmVisble:false
}
params = {
page: 1
}
formList = [
{
type:'SELECT',
label:'城市',
field:'city',
placeholder:'全部',
initialValue:'1',
width:80,
list: [{ id: '0', name: '全部' }, { id: '1', name: '北京' }, { id: '2', name: '天津' }, { id: '3', name: '上海' }]
},
{
type: '时间查询'
},
{
type: 'SELECT',
label: '订单状态',
field:'order_status',
placeholder: '全部',
initialValue: '1',
width: 80,
list: [{ id: '0', name: '全部' }, { id: '1', name: '进行中' }, { id: '2', name: '结束行程' }]
}
]
componentDidMount(){
this.requestList()
}
handleFilter = (params)=>{
this.params = params;
this.requestList();
}
requestList = ()=>{
let _this = this;
axios.ajax({
url:'/order/list',
data:{
params: this.params
}
}).then((res)=>{
let list = res.result.item_list.map((item, index) => {
item.key = index;
return item;
});
this.setState({
list,
pagination: Utils.pagination(res, (current) => {
_this.params.page = current;
_this.requestList();
})
})
})
}
// 订单结束确认
handleConfirm = ()=>{
let item = this.state.selectedItem;
if (!item) {
Modal.info({
title: '信息',
content: '请选择一条订单进行结束'
})
return;
}
axios.ajax({
url:'/order/ebike_info',
data:{
params:{
orderId: item.id
}
}
}).then((res)=>{
if(res.code ==0 ){
this.setState({
orderInfo:res.result,
orderConfirmVisble: true
})
}
})
}
// 结束订单
handleFinishOrder = ()=>{
let item = this.state.selectedItem;
axios.ajax({
url: '/order/finish_order',
data: {
params: {
orderId: item.id
}
}
}).then((res) => {
if (res.code == 0) {
message.success('订单结束成功')
this.setState({
orderConfirmVisble: false
})
this.requestList();
}
})
}
onRowClick = (record, index) => {
let selectKey = [index];
this.setState({
selectedRowKeys: selectKey,
selectedItem: record
})
}
openOrderDetail = ()=>{
let item = this.state.selectedItem;
if (!item) {
Modal.info({
title: '信息',
content: '请先选择一条订单'
})
return;
}
window.open(`/#/common/order/detail/${item.id}`,'_blank')
}
render(){
const columns = [
{
title:'订单编号',
dataIndex:'order_sn'
},
{
title: '车辆编号',
dataIndex: 'bike_sn'
},
{
title: '用户名',
dataIndex: 'user_name'
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '里程',
dataIndex: 'distance',
render(distance){
return distance/1000 + 'Km';
}
},
{
title: '行驶时长',
dataIndex: 'total_time'
},
{
title: '状态',
dataIndex: 'status'
},
{
title: '开始时间',
dataIndex: 'start_time'
},
{
title: '结束时间',
dataIndex: 'end_time'
},
{
title: '订单金额',
dataIndex: 'total_fee'
},
{
title: '实付金额',
dataIndex: 'user_pay'
}
]
const formItemLayout = {
labelCol:{span:5},
wrapperCol:{span:19}
}
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
type: 'radio',
selectedRowKeys
}
return (
<div>
<Card>
<BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
</Card>
<Card style={{marginTop:10}}>
<Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
<Button type="primary" style={{marginLeft:10}} onClick={this.handleConfirm}>结束订单</Button>
</Card>
<div className="content-wrap">
<Table
bordered
columns={columns}
dataSource={this.state.list}
pagination={this.state.pagination}
rowSelection={rowSelection}
onRow={(record, index) => {
return {
onClick: () => {
this.onRowClick(record, index);
}
};
}}
/>
</div>
<Modal
title="结束订单"
visible={this.state.orderConfirmVisble}
onCancel={()=>{
this.setState({
orderConfirmVisble:false
})
}}
onOk={this.handleFinishOrder}
width={600}
>
<Form layout="horizontal">
<FormItem label="车辆编号" {...formItemLayout}>
{this.state.orderInfo.bike_sn}
</FormItem>
<FormItem label="剩余电量" {...formItemLayout}>
{this.state.orderInfo.battery + '%'}
</FormItem>
<FormItem label="行程开始时间" {...formItemLayout}>
{this.state.orderInfo.start_time}
</FormItem>
<FormItem label="当前位置" {...formItemLayout}>
{this.state.orderInfo.location}
</FormItem>
</Form>
</Modal>
</div>
);
}
}
通用页面设计，入口文件
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default App;
App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
admin.js
import React from 'react'
import { Row,Col } from 'antd';
import Header from './components/Header'
import Footer from './components/Footer'
import { connect } from 'react-redux'
import NavLeft from './components/NavLeft'
import './style/common.less'
import Home from './pages/home'
class Admin extends React.Component{
render(){
return (
<Row className="container">
<Col span="4" className="nav-left">
<NavLeft/>
</Col>
<Col span="20" className="main">
<Header/>
<Row className="content">
{/* <Home/> */}
{this.props.children}
</Row>
<Footer/>
</Col>
</Row>
);
}
}
export default connect()(Admin)
common.js
import React from 'react'
import { Row, Col } from 'antd';
import Header from './components/Header'
import './style/common.less'
export default class Common extends React.Component {
render() {
return (
<div>
<Row className="simple-page">
<Header menuType="second" />
</Row>
<Row className="content">
{this.props.children}
</Row>
</div>
);
}
}
src\components\Header\index.js
面包屑，Row，Col
import React from 'react'
import { Row,Col } from "antd"
import './index.less'
import Util from '../../utils/utils'
import axios from '../../axios'
import { connect } from 'react-redux'
class Header extends React.Component{
state={}
componentWillMount(){
this.setState({
userName:'河畔一角'
})
setInterval(()=>{
let sysTime = Util.formateDate(new Date().getTime());
this.setState({
sysTime
})
},1000)
this.getWeatherAPIData();
}
getWeatherAPIData(){
let city = '北京';
axios.jsonp({
url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
}).then((res)=>{
if(res.status == 'success'){
let data = res.results[0].weather_data[0];
this.setState({
dayPictureUrl:data.dayPictureUrl,
weather:data.weather
})
}
})
}
render(){
const { menuName, menuType } = this.props;
return (
<div className="header">
<Row className="header-top">
{
menuType?
<Col span="6" className="logo">
<img src="/assets/logo-ant.svg" alt=""/>
<span>IMooc 通用管理系统</span>
</Col>:''
}
<Col span={menuType?18:24}>
<span>欢迎，{this.state.userName}</span>
<a href="#">退出</a>
</Col>
</Row>
{
menuType?'':
<Row className="breadcrumb">
<Col span="4" className="breadcrumb-title">
{menuName || '首页'}
</Col>
<Col span="20" className="weather">
<span className="date">{this.state.sysTime}</span>
<span className="weather-img">
<img src={this.state.dayPictureUrl} alt="" />
</span>
<span className="weather-detail">
{this.state.weather}
</span>
</Col>
</Row>
}
</div>
);
}
}
const mapStateToProps = state => {
return {
menuName: state.menuName
}
};
export default connect(mapStateToProps)(Header)
src\components\Header\index.less
@import './../../style/default.less';
.header{
background-color: @colorM;
.header-top{
height: 60px;
line-height: 60px;
padding: 0 20px;
text-align: right;
.logo{
line-height: 60px;
text-align: left;
font-size: 18px;
img{
height: 40px;
vertical-align: middle;
}
span{
margin-left: 5px;
}
}
a{
margin-left: 40px;
}
}
.breadcrumb{
height: 40px;
line-height: 40px;
padding: 0 20px;
border-top: 1px solid #f9c700;
.breadcrumb-title{
text-align: center;
font-size: @fontC;
&:after{
position: absolute;
content: '';
left:73px;
top:39px;
border-top: 9px solid @colorM;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
}
.weather{
text-align: right;
font-size: 14px;
.date{
margin-right: 10px;
vertical-align: middle;
}
.weather-img{
img{
height: 15px;
}
}
.weather-detail{
margin-left: 5px;
vertical-align: middle;
}
}
}
}
.simple-page{
.header-top{
background:#1890ff;
color:@colorM;
}
}
detail.js
接收动态变量，初始化地图组件，绘制地图
import React from 'react';
import { Card } from 'antd'
import axios from '../../axios'
import './detail.less'
export default class Order extends React.Component {
state = {}
componentDidMount(){
let orderId = this.props.match.params.orderId;
if(orderId){
this.getDetailInfo(orderId);
}
}
getDetailInfo = (orderId)=>{
axios.ajax({
url:'/order/detail',
data:{
params:{
orderId: orderId
}
}
}).then((res)=>{
if(res.code ==0){
this.setState({
orderInfo:res.result
})
this.renderMap(res.result);
}
})
}
renderMap = (result)=>{
this.map = new window.BMap.Map('orderDetailMap');
// this.map.centerAndZoom('北京',11);
// 添加地图控件
this.addMapControl();
// 调用路线图绘制方法
this.drawBikeRoute(result.position_list);
// 调用服务区绘制方法
this.drwaServiceArea(result.area);
}
// 添加地图控件
addMapControl = ()=>{
let map = this.map;
map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT}));
map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
}
// 绘制用户的行驶路线
drawBikeRoute = (positionList)=>{
let map = this.map;
let startPoint = '';
let endPoint = '';
if (positionList.length>0){
let first = positionList[0];
let last = positionList[positionList.length-1];
startPoint = new window.BMap.Point(first.lon,first.lat);
let startIcon = new window.BMap.Icon('/assets/start_point.png',new window.BMap.Size(36,42),{
imageSize:new window.BMap.Size(36,42),
anchor: new window.BMap.Size(18, 42)
})
let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon});
this.map.addOverlay(startMarker);
endPoint = new window.BMap.Point(last.lon, last.lat);
let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
imageSize: new window.BMap.Size(36, 42),
anchor: new window.BMap.Size(18, 42)
})
let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });
this.map.addOverlay(endMarker);
// 连接路线图
let trackPoint = [];
for(let i=0;i<positionList.length;i++){
let point = positionList[i];
trackPoint.push(new window.BMap.Point(point.lon, point.lat));
}
let polyline = new window.BMap.Polyline(trackPoint,{
strokeColor:'#1869AD',
strokeWeight:3,
strokeOpacity:1
})
this.map.addOverlay(polyline);
this.map.centerAndZoom(endPoint, 11);
}
}
// 绘制服务区
drwaServiceArea = (positionList)=>{
// 连接路线图
let trackPoint = [];
for (let i = 0; i < positionList.length; i++) {
let point = positionList[i];
trackPoint.push(new window.BMap.Point(point.lon, point.lat));
}
// 绘制服务区
let polygon = new window.BMap.Polygon(trackPoint, {
strokeColor: '#CE0000',
strokeWeight: 4,
strokeOpacity: 1,
fillColor: '#ff8605',
fillOpacity:0.4
})
this.map.addOverlay(polygon);
}
render(){
const info = this.state.orderInfo || {};
return (
<div>
<Card>
<div id="orderDetailMap" className="order-map"></div>
<div className="detail-items">
<div className="item-title">基础信息</div>
<ul className="detail-form">
<li>
<div className="detail-form-left">用车模式</div>
<div className="detail-form-content">{info.mode == 1 ?'服务区':'停车点'}</div>
</li>
<li>
<div className="detail-form-left">订单编号</div>
<div className="detail-form-content">{info.order_sn}</div>
</li>
<li>
<div className="detail-form-left">车辆编号</div>
<div className="detail-form-content">{info.bike_sn}</div>
</li>
<li>
<div className="detail-form-left">用户姓名</div>
<div className="detail-form-content">{info.user_name}</div>
</li>
<li>
<div className="detail-form-left">手机号码</div>
<div className="detail-form-content">{info.mobile}</div>
</li>
</ul>
</div>
<div className="detail-items">
<div className="item-title">行驶轨迹</div>
<ul className="detail-form">
<li>
<div className="detail-form-left">行程起点</div>
<div className="detail-form-content">{info.start_location}</div>
</li>
<li>
<div className="detail-form-left">行程终点</div>
<div className="detail-form-content">{info.end_location}</div>
</li>
<li>
<div className="detail-form-left">行驶里程</div>
<div className="detail-form-content">{info.distance/1000}公里</div>
</li>
</ul>
</div>
</Card>
</div>
);
}
}
detail.less
@import '../../style/default';
@import '../../style/common';
.detail-items{
margin-left:90px;
padding:25px 50px 25px 0;
border-bottom:1px solid @colorN;
&:last-child{
border-bottom:none;
}
.item-title{
margin:20px 0;
font-size:@fontG;
color:@colorU;
}
.detail-form{
li{
.clearfix;
margin:20px 0;
line-height:20px;
font-size:15px;
color:@colorC;
}
}
.detail-form-left{
float:left;
width:164px;
text-align:right;
color:@colorH;
}
.detail-form-content{
padding-left:194px;
}
}
.order-map{
height: 450px;
margin: 25px -31px 0;
}
引入百度地图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Z6VLb33wYXOcBcWtpVMjPvbU0DpUdQup"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div class="ajax-loading" id="ajaxLoading" style="display: none;">
<div class="overlay"></div>
<div class="loading">
<img src="https://media.number-7.cn/ebike-h5/static/images/common/loading.gif" alt="">
<span>加载中，请稍后...</span>
</div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
(第10章 项目工程化开发&)
第10章 项目工程化开发&
src\components\BaseForm\index.js
通过create()(FilterForm)可以实现数据双向绑定有getFieldsValue()方法
this.props.filterSubmit(fieldsValue)调用父级定义的方法，把获取的字段传递回去。
封装下拉框选项，封装表单元素公共BaseForm，时间范围查询
import React from 'react'
import { Input, Select, Form, Button, Checkbox, Radio, DatePicker} from 'antd'
import Utils from '../../utils/utils';
const FormItem = Form.Item;
const Option = Select.Option;
class FilterForm extends React.Component{
handleFilterSubmit = ()=>{
let fieldsValue = this.props.form.getFieldsValue();
this.props.filterSubmit(fieldsValue);
}
reset = ()=>{
this.props.form.resetFields();
}
initFormList = ()=>{
const { getFieldDecorator } = this.props.form;
const formList = this.props.formList;
const formItemList = [];
if (formList && formList.length>0){
formList.forEach((item,i)=>{
let label = item.label;
let field = item.field;
let initialValue = item.initialValue || '';
let placeholder = item.placeholder;
let width = item.width;
if (item.type == '时间查询'){
const begin_time = <FormItem label="订单时间" key={field}>
{
getFieldDecorator('begin_time')(
<DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/>
)
}
</FormItem>;
formItemList.push(begin_time)
const end_time = <FormItem label="~" colon={false} key={field}>
{
getFieldDecorator('end_time')(
<DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss" />
)
}
</FormItem>;
formItemList.push(end_time)
}else if(item.type == 'INPUT'){
const INPUT = <FormItem label={label} key={field}>
{
getFieldDecorator([field],{
initialValue: initialValue
})(
<Input type="text" placeholder={placeholder} />
)
}
</FormItem>;
formItemList.push(INPUT)
} else if (item.type == 'SELECT') {
const SELECT = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
initialValue: initialValue
})(
<Select
style={{ width: width }}
placeholder={placeholder}
>
{Utils.getOptionList(item.list)}
</Select>
)
}
</FormItem>;
formItemList.push(SELECT)
} else if (item.type == 'CHECKBOX') {
const CHECKBOX = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
valuePropName: 'checked',
initialValue: initialValue //true | false
})(
<Checkbox>
{label}
</Checkbox>
)
}
</FormItem>;
formItemList.push(CHECKBOX)
}
})
}
return formItemList;
}
render(){
return (
<Form layout="inline">
{ this.initFormList() }
<FormItem>
<Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleFilterSubmit}>查询</Button>
<Button onClick={this.reset}>重置</Button>
</FormItem>
</Form>
);
}
}
export default Form.create({})(FilterForm);
src\pages\order\index.js
import React from 'react';
import { Card, Button, Table, Form, Select, Modal, DatePicker, message} from 'antd'
import axios from '../../axios'
import Utils from '../../utils/utils'
import BaseForm from '../../components/BaseForm'
const FormItem = Form.Item;
const Option = Select.Option;
export default class Order extends React.Component{
state = {
orderInfo:{},
orderConfirmVisble:false
}
params = {
page: 1
}
formList = [
{
type:'SELECT',
label:'城市',
field:'city',
placeholder:'全部',
initialValue:'1',
width:80,
list: [{ id: '0', name: '全部' }, { id: '1', name: '北京' }, { id: '2', name: '天津' }, { id: '3', name: '上海' }]
},
{
type: '时间查询'
},
{
type: 'SELECT',
label: '订单状态',
field:'order_status',
placeholder: '全部',
initialValue: '1',
width: 80,
list: [{ id: '0', name: '全部' }, { id: '1', name: '进行中' }, { id: '2', name: '结束行程' }]
}
]
componentDidMount(){
this.requestList()
}
handleFilter = (params)=>{
this.params = params;
this.requestList();
}
requestList = ()=>{
let _this = this;
axios.ajax({
url:'/order/list',
data:{
params: this.params
}
}).then((res)=>{
let list = res.result.item_list.map((item, index) => {
item.key = index;
return item;
});
this.setState({
list,
pagination: Utils.pagination(res, (current) => {
_this.params.page = current;
_this.requestList();
})
})
})
}
// 订单结束确认
handleConfirm = ()=>{
let item = this.state.selectedItem;
if (!item) {
Modal.info({
title: '信息',
content: '请选择一条订单进行结束'
})
return;
}
axios.ajax({
url:'/order/ebike_info',
data:{
params:{
orderId: item.id
}
}
}).then((res)=>{
if(res.code ==0 ){
this.setState({
orderInfo:res.result,
orderConfirmVisble: true
})
}
})
}
// 结束订单
handleFinishOrder = ()=>{
let item = this.state.selectedItem;
axios.ajax({
url: '/order/finish_order',
data: {
params: {
orderId: item.id
}
}
}).then((res) => {
if (res.code == 0) {
message.success('订单结束成功')
this.setState({
orderConfirmVisble: false
})
this.requestList();
}
})
}
onRowClick = (record, index) => {
let selectKey = [index];
this.setState({
selectedRowKeys: selectKey,
selectedItem: record
})
}
openOrderDetail = ()=>{
let item = this.state.selectedItem;
if (!item) {
Modal.info({
title: '信息',
content: '请先选择一条订单'
})
return;
}
window.open(`/#/common/order/detail/${item.id}`,'_blank')
}
render(){
const columns = [
{
title:'订单编号',
dataIndex:'order_sn'
},
{
title: '车辆编号',
dataIndex: 'bike_sn'
},
{
title: '用户名',
dataIndex: 'user_name'
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '里程',
dataIndex: 'distance',
render(distance){
return distance/1000 + 'Km';
}
},
{
title: '行驶时长',
dataIndex: 'total_time'
},
{
title: '状态',
dataIndex: 'status'
},
{
title: '开始时间',
dataIndex: 'start_time'
},
{
title: '结束时间',
dataIndex: 'end_time'
},
{
title: '订单金额',
dataIndex: 'total_fee'
},
{
title: '实付金额',
dataIndex: 'user_pay'
}
]
const formItemLayout = {
labelCol:{span:5},
wrapperCol:{span:19}
}
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
type: 'radio',
selectedRowKeys
}
return (
<div>
<Card>
<BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
</Card>
<Card style={{marginTop:10}}>
<Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
<Button type="primary" style={{marginLeft:10}} onClick={this.handleConfirm}>结束订单</Button>
</Card>
<div className="content-wrap">
<Table
bordered
columns={columns}
dataSource={this.state.list}
pagination={this.state.pagination}
rowSelection={rowSelection}
onRow={(record, index) => {
return {
onClick: () => {
this.onRowClick(record, index);
}
};
}}
/>
</div>
<Modal
title="结束订单"
visible={this.state.orderConfirmVisble}
onCancel={()=>{
this.setState({
orderConfirmVisble:false
})
}}
onOk={this.handleFinishOrder}
width={600}
>
<Form layout="horizontal">
<FormItem label="车辆编号" {...formItemLayout}>
{this.state.orderInfo.bike_sn}
</FormItem>
<FormItem label="剩余电量" {...formItemLayout}>
{this.state.orderInfo.battery + '%'}
</FormItem>
<FormItem label="行程开始时间" {...formItemLayout}>
{this.state.orderInfo.start_time}
</FormItem>
<FormItem label="当前位置" {...formItemLayout}>
{this.state.orderInfo.location}
</FormItem>
</Form>
</Modal>
</div>
);
}
}
src\axios\index.js
axios请求封装
import JsonP from 'jsonp'
import axios from 'axios'
import { Modal } from 'antd'
export default class Axios {
static jsonp(options) {
return new Promise((resolve, reject) => {
JsonP(options.url, {
param: 'callback'
}, function (err, response) {
if (response.status == 'success') {
resolve(response);
} else {
reject(response.messsage);
}
})
})
}
static ajax(options){
let loading;
if (options.data && options.data.isShowLoading !== false){
loading = document.getElementById('ajaxLoading');
loading.style.display = 'block';
}
let baseApi = 'https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api';
return new Promise((resolve,reject)=>{
axios({
url:options.url,
method:'get',
baseURL:baseApi,
timeout:5000,
params: (options.data && options.data.params) || ''
}).then((response)=>{
if (options.data && options.data.isShowLoading !== false) {
loading = document.getElementById('ajaxLoading');
loading.style.display = 'none';
}
if (response.status == '200'){
let res = response.data;
if (res.code == '0'){
resolve(res);
}else{
Modal.info({
title:"提示",
content:res.msg
})
}
}else{
reject(response.data);
}
})
});
}
}
(第11章 员工管理菜单模块开发&)
第11章 员工管理菜单模块开发&
src\components\ETable\index.js
import React from 'react'
import Utils from '../../utils/utils'
import {Table} from 'antd'
import "./index.less"
export default class ETable extends React.Component {
state = {}
//处理行点击事件
onRowClick = (record, index) => {
let rowSelection = this.props.rowSelection;
if(rowSelection == 'checkbox'){
let selectedRowKeys = this.props.selectedRowKeys;
let selectedIds = this.props.selectedIds;
let selectedItem = this.props.selectedItem || [];
if (selectedIds) {
const i = selectedIds.indexOf(record.id);
if (i == -1) {//避免重复添加
selectedIds.push(record.id)
selectedRowKeys.push(index);
selectedItem.push(record);
}else{
selectedIds.splice(i,1);
selectedRowKeys.splice(i,1);
selectedItem.splice(i,1);
}
} else {
selectedIds = [record.id];
selectedRowKeys = [index]
selectedItem = [record];
}
this.props.updateSelectedItem(selectedRowKeys,selectedItem || {},selectedIds);
}else{
let selectKey = [index];
const selectedRowKeys = this.props.selectedRowKeys;
if (selectedRowKeys && selectedRowKeys[0] == index){
return;
}
this.props.updateSelectedItem(selectKey,record || {});
}
};
// 选择框变更
onSelectChange = (selectedRowKeys, selectedRows) => {
let rowSelection = this.props.rowSelection;
const selectedIds = [];
if(rowSelection == 'checkbox'){
selectedRows.map((item)=>{
selectedIds.push(item.id);
});
this.setState({
selectedRowKeys,
selectedIds:selectedIds,
selectedItem: selectedRows[0]
});
}
this.props.updateSelectedItem(selectedRowKeys,selectedRows[0],selectedIds);
};
onSelectAll = (selected, selectedRows, changeRows) => {
let selectedIds = [];
let selectKey = [];
selectedRows.forEach((item,i)=> {
selectedIds.push(item.id);
selectKey.push(i);
});
this.props.updateSelectedItem(selectKey,selectedRows[0] || {},selectedIds);
}
getOptions = () => {
let p = this.props;
const name_list = {
"订单编号":170,
"车辆编号":80,
"手机号码":96,
"用户姓名":70,
"密码":70,
"运维区域":300,
"车型":42,
"故障编号":76,
"代理商编码":97,
"角色ID":64
};
if (p.columns && p.columns.length > 0) {
p.columns.forEach((item)=> {
//开始/结束 时间
if(!item.title){
return
}
if(!item.width){
if(item.title.indexOf("时间") > -1 && item.title.indexOf("持续时间") < 0){
item.width = 132
}else if(item.title.indexOf("图片") > -1){
item.width = 86
}else if(item.title.indexOf("权限") > -1 || item.title.indexOf("负责城市") > -1){
item.width = '40%';
item.className = "text-left";
}else{
if(name_list[item.title]){
item.width = name_list[item.title];
}
}
}
item.bordered = true;
});
}
const { selectedRowKeys } = this.props;
const rowSelection = {
type: 'radio',
selectedRowKeys,
onChange: this.onSelectChange,
onSelect:(record, selected, selectedRows)=>{
console.log('...')
},
onSelectAll:this.onSelectAll
};
let row_selection = this.props.rowSelection;
// 当属性未false或者null时，说明没有单选或者复选列
if(row_selection===false || row_selection === null){
row_selection = false;
}else if(row_selection == 'checkbox'){
//设置类型未复选框
rowSelection.type = 'checkbox';
}else{
//默认未单选
row_selection = 'radio';
}
return <Table
className="card-wrap page-table"
bordered
{...this.props}
rowSelection={row_selection?rowSelection:null}
onRow={(record,index) => ({
onClick: ()=>{
if(!row_selection){
return;
}
this.onRowClick(record,index)
}
})}
/>
};
render = () => {
return (
<div>
{this.getOptions()}
</div>
)
}
}
src\components\BaseForm\index.js
封装公共BaseForm table查询栏目，form.getFieldsValue获取表单数据
import React from 'react'
import { Input, Select, Form, Button, Checkbox, Radio, DatePicker} from 'antd'
import Utils from '../../utils/utils';
const FormItem = Form.Item;
const Option = Select.Option;
class FilterForm extends React.Component{
handleFilterSubmit = ()=>{
let fieldsValue = this.props.form.getFieldsValue();
this.props.filterSubmit(fieldsValue);
}
reset = ()=>{
this.props.form.resetFields();
}
initFormList = ()=>{
const { getFieldDecorator } = this.props.form;
const formList = this.props.formList;
const formItemList = [];
if (formList && formList.length>0){
formList.forEach((item,i)=>{
let label = item.label;
let field = item.field;
let initialValue = item.initialValue || '';
let placeholder = item.placeholder;
let width = item.width;
if (item.type == '时间查询'){
const begin_time = <FormItem label="订单时间" key={field}>
{
getFieldDecorator('begin_time')(
<DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/>
)
}
</FormItem>;
formItemList.push(begin_time)
const end_time = <FormItem label="~" colon={false} key={field}>
{
getFieldDecorator('end_time')(
<DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss" />
)
}
</FormItem>;
formItemList.push(end_time)
}else if(item.type == 'INPUT'){
const INPUT = <FormItem label={label} key={field}>
{
getFieldDecorator([field],{
initialValue: initialValue
})(
<Input type="text" placeholder={placeholder} />
)
}
</FormItem>;
formItemList.push(INPUT)
} else if (item.type == 'SELECT') {
const SELECT = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
initialValue: initialValue
})(
<Select
style={{ width: width }}
placeholder={placeholder}
>
{Utils.getOptionList(item.list)}
</Select>
)
}
</FormItem>;
formItemList.push(SELECT)
} else if (item.type == 'CHECKBOX') {
const CHECKBOX = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
valuePropName: 'checked',
initialValue: initialValue //true | false
})(
<Checkbox>
{label}
</Checkbox>
)
}
</FormItem>;
formItemList.push(CHECKBOX)
}
})
}
return formItemList;
}
render(){
return (
<Form layout="inline">
{ this.initFormList() }
<FormItem>
<Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleFilterSubmit}>查询</Button>
<Button onClick={this.reset}>重置</Button>
</FormItem>
</Form>
);
}
}
export default Form.create({})(FilterForm);
utils.js
import React from 'react';
import { Select } from 'antd'
const Option = Select.Option;
export default {
formateDate(time){
if(!time)return '';
let date = new Date(time);
return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
},
pagination(data,callback){
return {
onChange:(current)=>{
callback(current)
},
current:data.result.page,
pageSize:data.result.page_size,
total: data.result.total_count,
showTotal:()=>{
return `共${data.result.total_count}条`
},
showQuickJumper:true
}
},
// 格式化金额,单位:分(eg:430分=4.30元)
formatFee(fee, suffix = '') {
if (!fee) {
return 0;
}
return Number(fee).toFixed(2) + suffix;
},
// 格式化公里（eg:3000 = 3公里）
formatMileage(mileage, text) {
if (!mileage) {
return 0;
}
if (mileage >= 1000) {
text = text || " km";
return Math.floor(mileage / 100) / 10 + text;
} else {
text = text || " m";
return mileage + text;
}
},
// 隐藏手机号中间4位
formatPhone(phone) {
phone += '';
return phone.replace(/(\d{3})\d*(\d{4})/g, '$1***$2')
},
// 隐藏身份证号中11位
formatIdentity(number) {
number += '';
return number.replace(/(\d{3})\d*(\d{4})/g, '$1***********$2')
},
getOptionList(data){
if(!data){
return [];
}
let options = [] //[<Option value="0" key="all_key">全部</Option>];
data.map((item)=>{
options.push(<Option value={item.id} key={item.id}>{item.name}</Option>)
})
return options;
},
/**
* ETable 行点击通用函数
* @param {*选中行的索引} selectedRowKeys
* @param {*选中行对象} selectedItem
*/
updateSelectedItem(selectedRowKeys, selectedRows, selectedIds) {
if (selectedIds) {
this.setState({
selectedRowKeys,
selectedIds: selectedIds,
selectedItem: selectedRows
})
} else {
this.setState({
selectedRowKeys,
selectedItem: selectedRows
})
}
},
}
code\src\pages\order\index.js
import React from 'react';
import { Card, Button, Table, Form, Select, Modal, DatePicker, message} from 'antd'
import axios from '../../axios'
import Utils from '../../utils/utils'
import BaseForm from '../../components/BaseForm'
const FormItem = Form.Item;
const Option = Select.Option;
export default class Order extends React.Component{
state = {
orderInfo:{},
orderConfirmVisble:false
}
params = {
page: 1
}
formList = [
{
type:'SELECT',
label:'城市',
field:'city',
placeholder:'全部',
initialValue:'1',
width:80,
list: [{ id: '0', name: '全部' }, { id: '1', name: '北京' }, { id: '2', name: '天津' }, { id: '3', name: '上海' }]
},
{
type: '时间查询'
},
{
type: 'SELECT',
label: '订单状态',
field:'order_status',
placeholder: '全部',
initialValue: '1',
width: 80,
list: [{ id: '0', name: '全部' }, { id: '1', name: '进行中' }, { id: '2', name: '结束行程' }]
}
]
componentDidMount(){
this.requestList()
}
handleFilter = (params)=>{
this.params = params;
this.requestList();
}
requestList = ()=>{
let _this = this;
axios.ajax({
url:'/order/list',
data:{
params: this.params
}
}).then((res)=>{
let list = res.result.item_list.map((item, index) => {
item.key = index;
return item;
});
this.setState({
list,
pagination: Utils.pagination(res, (current) => {
_this.params.page = current;
_this.requestList();
})
})
})
}
// 订单结束确认
handleConfirm = ()=>{
let item = this.state.selectedItem;
if (!item) {
Modal.info({
title: '信息',
content: '请选择一条订单进行结束'
})
return;
}
axios.ajax({
url:'/order/ebike_info',
data:{
params:{
orderId: item.id
}
}
}).then((res)=>{
if(res.code ==0 ){
this.setState({
orderInfo:res.result,
orderConfirmVisble: true
})
}
})
}
// 结束订单
handleFinishOrder = ()=>{
let item = this.state.selectedItem;
axios.ajax({
url: '/order/finish_order',
data: {
params: {
orderId: item.id
}
}
}).then((res) => {
if (res.code == 0) {
message.success('订单结束成功')
this.setState({
orderConfirmVisble: false
})
this.requestList();
}
})
}
onRowClick = (record, index) => {
let selectKey = [index];
this.setState({
selectedRowKeys: selectKey,
selectedItem: record
})
}
openOrderDetail = ()=>{
let item = this.state.selectedItem;
if (!item) {
Modal.info({
title: '信息',
content: '请先选择一条订单'
})
return;
}
window.open(`/#/common/order/detail/${item.id}`,'_blank')
}
render(){
const columns = [
{
title:'订单编号',
dataIndex:'order_sn'
},
{
title: '车辆编号',
dataIndex: 'bike_sn'
},
{
title: '用户名',
dataIndex: 'user_name'
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '里程',
dataIndex: 'distance',
render(distance){
return distance/1000 + 'Km';
}
},
{
title: '行驶时长',
dataIndex: 'total_time'
},
{
title: '状态',
dataIndex: 'status'
},
{
title: '开始时间',
dataIndex: 'start_time'
},
{
title: '结束时间',
dataIndex: 'end_time'
},
{
title: '订单金额',
dataIndex: 'total_fee'
},
{
title: '实付金额',
dataIndex: 'user_pay'
}
]
const formItemLayout = {
labelCol:{span:5},
wrapperCol:{span:19}
}
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
type: 'radio',
selectedRowKeys
}
return (
<div>
<Card>
<BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
</Card>
<Card style={{marginTop:10}}>
<Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
<Button type="primary" style={{marginLeft:10}} onClick={this.handleConfirm}>结束订单</Button>
</Card>
<div className="content-wrap">
<Table
bordered
columns={columns}
dataSource={this.state.list}
pagination={this.state.pagination}
rowSelection={rowSelection}
onRow={(record, index) => {
return {
onClick: () => {
this.onRowClick(record, index);
}
};
}}
/>
</div>
<Modal
title="结束订单"
visible={this.state.orderConfirmVisble}
onCancel={()=>{
this.setState({
orderConfirmVisble:false
})
}}
onOk={this.handleFinishOrder}
width={600}
>
<Form layout="horizontal">
<FormItem label="车辆编号" {...formItemLayout}>
{this.state.orderInfo.bike_sn}
</FormItem>
<FormItem label="剩余电量" {...formItemLayout}>
{this.state.orderInfo.battery + '%'}
</FormItem>
<FormItem label="行程开始时间" {...formItemLayout}>
{this.state.orderInfo.start_time}
</FormItem>
<FormItem label="当前位置" {...formItemLayout}>
{this.state.orderInfo.location}
</FormItem>
</Form>
</Modal>
</div>
);
}
}
src\pages\user\users
Card增删改按钮列表样式
Table字典转换，对象object索引获取值，getFieldDecorator双向数据绑定，wrappedComponentRef绑定form内容到本地作用域
重置表单内容，selectItem绑定选择的行数据，moment日期，查看详情字典转换
ETable表格封装，增删改查功能实现，this作用域
import React from 'react'
import { Card, Button, Table, Form, Input, Checkbox,Select,Radio, Icon, message, Modal, DatePicker } from 'antd'
import axios from '../../axios/index'
import Utils from '../../utils/utils'
import ETable from '../../components/ETable/index'
import Moment from 'moment'
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
export default class User extends React.Component{
state = {
list:[]
}
params = {
page:1
}
requestList = ()=>{
axios.ajax({
url:'/table/list1',
data:{
params:{
page:this.params.page
}
}
}).then((res)=>{
let _this = this;
this.setState({
list:res.result.list.map((item,index)=>{
item.key=index
return item;
}),
pagination:Utils.pagination(res,(current)=>{
_this.params.page = current;
_this.requestList();
})
})
})
}
componentDidMount(){
this.requestList();
}
// 操作员工
handleOperator = (type)=>{
let item = this.state.selectedItem;
if(type =='create'){
this.setState({
title:'创建员工',
isVisible:true,
type
})
}else if(type=="edit" || type=='detail'){
if(!item){
Modal.info({
title: '信息',
content: '请选择一个用户'
})
return;
}
this.setState({
title:type=='edit'?'编辑用户':'查看详情',
isVisible:true,
userInfo:item,
type
})
}else if(type=="delete"){
if(!item){
Modal.info({
title: '信息',
content: '请选择一个用户'
})
return;
}
Utils.ui.confirm({
text:'确定要删除此用户吗？',
onOk:()=>{
axios.ajax({
url:'/user/delete',
data:{
params:{
id:item.id
}
}
}).then((res)=>{
if(res.code ==0){
this.setState({
isVisible:false
})
this.requestList();
}
})
}
})
}
}
handleSubmit = ()=>{
let type = this.state.type;
let data = this.userForm.props.form.getFieldsValue();
axios.ajax({
url:type == 'create'?'/user/add':'/user/edit',
data:{
params:{
...data
}
}
}).then((res)=>{
if(res.code ==0){
this.setState({
isVisible:false
})
this.requestList();
}
})
}
render(){
const columns = [{
title: 'id',
dataIndex: 'id'
}, {
title: '用户名',
dataIndex: 'username'
}, {
title: '性别',
dataIndex: 'sex',
render(sex){
return sex ==1 ?'男':'女'
}
}, {
title: '状态',
dataIndex: 'state',
render(state){
let config = {
'1':'咸鱼一条',
'2':'风华浪子',
'3':'北大才子一枚',
'4':'百度FE',
'5':'创业者'
}
return config[state];
}
},{
title: '爱好',
dataIndex: 'interest',
render(interest){
let config = {
'1':'游泳',
'2':'打篮球',
'3':'踢足球',
'4':'跑步',
'5':'爬山',
'6':'骑行',
'7':'桌球',
'8':'麦霸'
}
return config[interest];
}
},{
title: '爱好',
dataIndex: 'isMarried',
render(isMarried){
return isMarried?'已婚':'未婚'
}
},{
title: '生日',
dataIndex: 'birthday'
},{
title: '联系地址',
dataIndex: 'address'
},{
title: '早起时间',
dataIndex: 'time'
}
];
return (
<div>
<Card>
<Form layout="inline">
<FormItem>
<Input placeholder="请输入用户名"/>
</FormItem>
<FormItem>
<Input type="password" placeholder="请输入密码"/>
</FormItem>
<FormItem>
<Button type="primary">登 录</Button>
</FormItem>
</Form>
</Card>
<Card style={{marginTop:10}}>
<Button type="primary" icon="plus" onClick={()=>this.handleOperator('create')}>创建员工</Button>
<Button icon="edit" onClick={()=>this.handleOperator('edit')}>编辑员工</Button>
<Button onClick={()=>this.handleOperator('detail')}>员工详情</Button>
<Button type="danger" icon="delete" onClick={()=>this.handleOperator('delete')}>删除员工</Button>
</Card>
<div className="content-wrap">
<ETable
columns={columns}
updateSelectedItem={Utils.updateSelectedItem.bind(this)}
selectedRowKeys={this.state.selectedRowKeys}
dataSource={this.state.list}
pagination={this.state.pagination}
/>
</div>
<Modal
title={this.state.title}
visible={this.state.isVisible}
onOk={this.handleSubmit}
width={800}
onCancel={()=>{
this.userForm.props.form.resetFields();
this.setState({
isVisible:false,
userInfo:''
})
}}
>
<UserForm userInfo={this.state.userInfo} type={this.state.type} wrappedComponentRef={(inst) => this.userForm = inst }/>
</Modal>
</div>
);
}
}
class UserForm extends React.Component{
getState = (state)=>{
return {
'1':'咸鱼一条',
'2':'风华浪子',
'3':'北大才子一枚',
'4':'百度FE',
'5':'创业者'
}[state]
}
render(){
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {span: 5},
wrapperCol: {span: 16}
};
const userInfo = this.props.userInfo || {};
const type = this.props.type;
return (
<Form layout="horizontal">
<FormItem label="姓名" {...formItemLayout}>
{
userInfo && type=='detail'?userInfo.username:
getFieldDecorator('user_name',{
initialValue:userInfo.username
})(
<Input type="text" placeholder="请输入姓名"/>
)
}
</FormItem>
<FormItem label="性别" {...formItemLayout}>
{
userInfo && type=='detail'?userInfo.sex==1?'男':'女':
getFieldDecorator('sex',{
initialValue:userInfo.sex
})(
<RadioGroup>
<Radio value={1}>男</Radio>
<Radio value={2}>女</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem label="状态" {...formItemLayout}>
{
userInfo && type=='detail'?this.getState(userInfo.state):
getFieldDecorator('state',{
initialValue:userInfo.state
})(
<Select>
<Option value={1}>咸鱼一条</Option>
<Option value={2}>风华浪子</Option>
<Option value={3}>北大才子一枚</Option>
<Option value={4}>百度FE</Option>
<Option value={5}>创业者</Option>
</Select>
)}
</FormItem>
<FormItem label="生日" {...formItemLayout}>
{
userInfo && type=='detail'?userInfo.birthday:
getFieldDecorator('birthday',{
initialValue:Moment(userInfo.birthday)
})(
<DatePicker />
)}
</FormItem>
<FormItem label="联系地址" {...formItemLayout}>
{
userInfo && type=='detail'?userInfo.address:
getFieldDecorator('address',{
initialValue:userInfo.address
})(
<Input.TextArea rows={3} placeholder="请输入联系地址"/>
)}
</FormItem>
</Form>
);
}
}
UserForm = Form.create({})(UserForm);
Card增删改按钮列表样式
common.less
@import './default.less';
@import './loading.less';
ul,li{
list-style: none;
}
.clearfix{
&::after{
content:' ';
clear:both;
display: block;
visibility: hidden;
}
}
.container{
.nav-left{
background-color:#001529;
color: #ffffff;
height: calc(100vh);
}
.main{
height: calc(100vh);
background-color: @colorL;
overflow: auto;
}
.content{
position: relative;
padding: 20px;
}
}
.content-wrap{
background: #ffffff;
border: 1px solid #e8e8e8;
margin-top: -3px;
.ant-table-wrapper{
margin-left: -1px;
margin-right: -2px;
}
}
.ant-card{
button{
margin-right: 10px;
}
}
src\axios\index.js
import JsonP from 'jsonp'
import axios from 'axios'
import { Modal } from 'antd'
export default class Axios {
static jsonp(options) {
return new Promise((resolve, reject) => {
JsonP(options.url, {
param: 'callback'
}, function (err, response) {
if (response.status == 'success') {
resolve(response);
} else {
reject(response.messsage);
}
})
})
}
static ajax(options){
let loading;
if (options.data && options.data.isShowLoading !== false){
loading = document.getElementById('ajaxLoading');
loading.style.display = 'block';
}
let baseApi = 'https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api';
return new Promise((resolve,reject)=>{
axios({
url:options.url,
method:'get',
baseURL:baseApi,
timeout:5000,
params: (options.data && options.data.params) || ''
}).then((response)=>{
if (options.data && options.data.isShowLoading !== false) {
loading = document.getElementById('ajaxLoading');
loading.style.display = 'none';
}
if (response.status == '200'){
let res = response.data;
if (res.code == '0'){
resolve(res);
}else{
Modal.info({
title:"提示",
content:res.msg
})
}
}else{
reject(response.data);
}
})
});
}
}
(第12章 车辆地图模块开发&)
第12章 车辆地图模块开发&
(第13章 图表模块开发&)
第13章 图表模块开发&
(第14章 权限设置模块开发&)
第14章 权限设置模块开发&
(第15章 Redux集成开发&)
第15章 Redux集成开发&
扫一扫
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
