12 点击跳转权益卡（重难点）
编程式跳转
当有父组件 子组件 孙子组件时，从子组件跳转到孙子组件 不能获取到数据
需要在父组件定义点击事件 传给子组件 在点击跳转到孙子组件
this.props没有东西 为空
父组件绑定事件 子组件使用
this.props.onSkip()才有东西
<!--在父组件 -->
skipToCardCreate(){
console.log('2222',this.props)
<!-- 从此处获得数据，路由跳转到create页面-->
this.props.history.push('/card/create')
}
<TabCardList onSkip={this.skipToCardCreate.bind(this)}></TabCardList>
<!-- 子组件-->
skipToCardCreate(){
<!-- -->
console.log('11111',this.props)
<!-- 从父组件继承事件-->
this.props.onSkip()
}
<Button type="primary" onClick={this.skipToCardCreate.bind(this)}>
此时路由也需要改变
{
<!-- 一级路由 没有跳转 父组件 -->
id: 1,
path: null,
text: '客户管理',
component: null,
icon:'apple',
sub:[
{
id: 101,
path:'/home',
text: '客户首页',
component:Home
},
<!-- 二级路由 子组件-->
{
id:102,
path:'/card',
text:'权益卡',
component:Card,
<!-- 三极路由 孙子组件-->
children:[
{
id:10201,
path:'/card/create',
text:'新建权益卡',
component:CardCreate,
}
]
}
]
}
生成route容器如下文所示
// 生成Route容器
createRoute(arr) {
let routeArr = []
// 爷爷
arr.map((ele, idx) => {
if (ele.sub && ele.sub.length > 0) {
// 爸爸
ele.sub.map((ele2, idx2)=>{
routeArr.push(
<Route key={ele2.id} path={ele2.path} exact component={ele2.component}></Route>
)
if(ele2.children&&ele2.children.length>0){
// 孙子
ele2.children.map((ele3,idx3)=>{
routeArr.push(
<Route key={ele3.id} path={ele3.path} exact component={ele3.component}></Route>
)
})
}
})
}
})
return routeArr
}
13调接口遇到的问题
创建store文件，其中可以把文件集成到一个大的store文件当中
import CardStore from './card'
<!-- 需要哪个组件 导入哪个组件 集成之后抛出 -->
class Store{
constructor(){
this.CardStore=new CardStore()
}
}
const store=new Store()
export default store
在每个独立的store当中做操作
新建页面card.js
import {observable,action} from 'mobx'
import { getCardList } from '../utils/api';
class CardStore{
@observable list=[] //放置所有数据
@action getCardList(){
getCardList({page:1,size:2},res=>{
this.list=[...this.list3,...res.data.data]
// console.log(this.list)
this.list1=[...this.list3,...res.data.data]
// 初始化
this.updateList2(1)
})
}
}
export default CardStore
在通过 @inject('store') @observer注入到tabcardlist里面
1.调接口进行页面渲染时
componentDidMount(){
this.props.store.CardStore.getCardList()
}
没有出来页面报错解决办法：
1.看看list有没有赋值
2.数据格式有没有问题 进行打印可以看到
14. 数据字典
table表格里面的render渲染函数（数据字典）当数据显示为数字没有变成字符串时 要使用数据字典渲染
{
// width:80,
title: '领取条件',
dataIndex: 'condition',
key: 'condition',
<!-- 函数 -->
render:(text,row,index)=>{
let zh=''
switch(row.condition){
case 1:
zh='可直接领取'
break;
case 2:
zh='需付费购买'
break;
case 3:
zh='满足指控条件'
break;
default:
}
return (
<span>{zh}</span>
)
}
15.分页
pagesize total page三个数据缺一不可
在相关页面中定义一个事件
let {list1,list2} =this.props.store.CardStore
<!-- 从里面取出list -->
pageChange(e){
console.log(e.current)
this.props.store.CardStore.getCardOfPage(e.current) //current把页码穿过去
}
<!-- 在表格当中-->
{/* 表格 */}
<div>
<Table
onChange={this.pageChange.bind(this)}
rowKey='id'
columns={columns}
<!-- 页面数局需list2来渲染-->
<!-- pagesize可调 total字段是表格自带属性 需要用到list1-->
dataSource={list2}
scroll={{ x: 1000 }}
pagination={{pageSize:2,total:list1.length}}
/>
</div>
在store当中
import {observable,action} from 'mobx'
import { getCardList } from '../utils/api';
class CardStore{
@observable list=[] //放置所有数据
@observable list1=[] //用于各种增删改查的逻辑
@observable list2=[] //用于页面显示
@observable list3=[] //用于缓存新增的权益卡
<!-- 调接口-->
@action getCardList(){
getCardList({page:1,size:2},res=>{
this.list=res
// console.log(this.list)
this.list1=res
// 初始化 调接口成功时默认调取第一页的接口
this.updateList2(1)
})
}
// 分页 用于对数组进行切割
@action updateList2(page){
this.list2=this.list1.slice((page-1)*2,page*2)
}
// 分页查询 当通过某一项进行查询时 也要进行分割
@action getCardOfPage(payload){
<!-- payload相当于page -->
this.updateList2(payload)
}
}
export default CardStore
15.表单筛选
受控表单要加一个value
在input事件里面用onChange事件
<!-- store里面 -->
@action getCardOfStatus(payload){
const status=payload //数据类型是字符串
// 过滤方法 通过对list过滤 选出符合条件的返回去
const res=this.list.filter(ele=>{
return ele.status===status
})
this.list1=res
// 筛选完后的页面进行分页
this.updateList2(1)
}
在相关表单中
activeKey
statusChange(e){
console.log(e)
this.props.store.CardStore.getCardOfStatus(e)
this.setState(
{
tabKey:e
}
)
}
<!-- activeKey={this.state.tabKey} 是表单的方法 页面点击筛选时 有时候不能返回到最开始的页面 使用activeKey -->
<Tabs type="card" activeKey={this.state.tabKey} onChange={this.statusChange.bind(this)}>
<TabPane tab="使用中" key="1">
</TabPane>
<TabPane tab="已禁用" key="2">
</TabPane>
<TabPane tab="已过期" key="3">
</TabPane>
</Tabs>
16 关键字筛选
store当中的写法
// 根据关键字进行筛选
@action getCardListOfSearch(payload){
const searchText=payload.trim()
let res=this.list.filter(ele=>{
return ele.name.indexOf(searchText)!==-1
})
this.list1=res
this.updateList2(1)
}
17.创建权益卡
<!-- 在cardCreat中 -->
// 获取卡名字
nameChange(e){
// console.log(e.target.value)
this.setState({
name:e.target.value
})
}
在提交时间当中使用name
18.对时间区域的获取方法（RangePicker）
禁用时间属性：eg:disabled={period!==3}
安装moment
默认时间属性：defaultValue={[moment('2019-11-20'),moment('2010-12-19')]}
// 获取时间区域
timeChange(e){
// console.log(e[0].format('YYYY-MM-DD')) 2019-11-11
// console.log(e[1].format('YYYY-MM-DD')) 2019-11-12
if(e&&e.length===2){当选中的状态是时间区域的时候
this.setState({
用~拼接两个数据 format方法
periodTime:e[0].format('YYYY-MM-DD')+'~'+e[1].format('YYYY-MM-DD')
})
}
}
19.多选框的获取方法
// 获取权益
rightChange(e){
// console.log(e.target.value,e.target.checked)
let arr=this.state.right
if(e.target.checked){
arr.push(e.target.value)
}else{
let idx=arr.findIndex(ele=>ele===e.target.value)
arr.splice(idx,1)
}
// new set 是对象 通过点变成数组
this.setState({right:[...new Set(arr)]})
}
选取到默认的checked
const options1 = [
{ label: '包邮', value: '1' },
{ label: '消费折扣', value: '2' },
{ label: '积分回馈倍率', value: '3' },
{ label: '获得好友体验卡', value: '4' }
];
options1.map((ele,idx)=>{
let idx2=right.findIndex(ele2=>ele2===ele.value)
if(idx2!==-1){
options1[idx].checked=true
}else{
options1[idx].checked=false
}
return false
})
定义到事件
<Checkbox
value={ele.value}
onChange={this.rightChange.bind(this)}
checked={ele.checked}>{ele.label}</Checkbox>
20.数据改变成中文显示
// 处理权益数据的中文显示
list2.map((ele,idx)=>{
let str=''
ele.right.map((ele2,idx2)=>{
switch(ele2){
case 1:
str+='包邮'
break;
case 2:
str+='消费折扣'
break;
case 3:
str+='积分回馈率'
break;
case 4:
str+='获取好友体验卡'
break;
default:
}
return false
})
list2[idx].right_zh=str
return false
})
数组里面：
{
title: '权益',
dataIndex: 'right_zh',
key: 'right_zh',
}
21.数据提交方法
提交方法到store中
submit(){
// 获取提交的值
// 获取改变后的值
const period=this.state.period
const data={
name:this.state.name,
period:period===3?this.state.periodTime:period,
condition:this.state.condition,
right:this.state.right
}
console.log('------',data)
// 数据类型校验
// 数据提交
this.props.store.CardStore.add(data)
console.log('入参',data)
// 提交成功 跳转首页
this.props.history.replace('/card')
}
<!-- store中的方法-->
// 提交
@action add(payload){
const card=payload
插入到数据中需要一个独立的id
card.id=Date.now()
card.status=1
console.log('===============',card)
<!-- 放在第一条-->
this.list3.unshift(card)
console.log(this.list3)
}
21.数据提交方法
提交方法到store中
submit(){
// 获取提交的值
// 获取改变后的值
const period=this.state.period
const data={
name:this.state.name,
period:period===3?this.state.periodTime:period,
condition:this.state.condition,
right:this.state.right
}
console.log('------',data)
// 数据类型校验
// 数据提交
this.props.store.CardStore.add(data)
console.log('入参',data)
// 提交成功 跳转首页
this.props.history.replace('/card')
}
<!-- store中的方法-->
// 提交
@action add(payload){
const card=payload
插入到数据中需要一个独立的id
card.id=Date.now()
card.status=1
console.log('===============',card)
<!-- 放在第一条-->
this.list3.unshift(card)
console.log(this.list3)
}
