Smart系列软件全部由React架构完成,React大致流程为:
service:<处理异步请求、调用异步处理>;
export async function query(params) {
return request(`/api/CT/XXXX?${stringify(params)}`);
}
export async function getAllCTOptions(params) {
return request('/api/CT/XXXX', {
method: 'GET',
});
}
export async function submit(params) {
return request(`/api/CT/XXXX/`, {
method: 'POST',
body: {
...params,
},
});
}
effects:call、put、select<获取全局state>;
effects大致写法如下:
effects: {
* fetch({payload}, {call, put}) {
payload = Object.assign({}, payload, {UserID: getUserID()});
let response = yield call(query, payload);
yield put({
type: 'save',
payload: {
list: response.Content,
pagination: {
current:response.Page.PageCurr,
pageSize:response.Page.PageSize,
total:response.Page.ItemTotal,
},
deleteFlag: false
},
});
},
}
effects中实现页面的跳转:
effects: {
* Edit({payload}, {call, put}) {
yield put(routerRedux.push(`/settlement/form/${payload.CTID}`));
},
}
reducers:聚合产生当前model的state对象,<纯函数,只返回新的数据>,唯一可以改变state的地方,通过action传入的值与reducers中的值进行对比,产生一个新的state;
reducers大致写法如下:
reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
},
action:<js对象>改变state的唯一办法,由dispatch函数调用一个action,改变对应的数据;
const {dispatch} = this.props;
dispatch({
type: 'exchange/fetch',
payload: {Key:e}, //需要传给后台的数据
})
dispatch触发action,reduces描述如何改变state。
components:纯组件,可以复用,import引入所需页面中。
routes:页面一般的业务逻辑可以在这里处理,里面有多个components。
state:表示model的状态数据,通常表现为一个js对象。
1.如何根据后台的数据动态生成不同列的表格?
models中:
if (response.Result) {
//对汇率后台传来的数据进行特殊处理。
let newData = [];
let names = []; //动态列名
response.Content.map((item,index) => {
//获取列名
if(index == 0){
item.RateList.map(n=>names.push(n.Currency));
}
//根据数据,解析成页面所需要的数据格式<nd为固定出现的列数据>
let nd = {
key:index,
TotalMonthlyAccount: item.TotalMonthlyAccount,
MonthMark: `${item.YearMark}-${item.MonthMark.toString().padStart(2, '0')}`,
}
//根据列名生成对应的对象。
names.map(ns=>{
nd[ns] = item.RateList.filter(x => x.Currency == ns)[0].RateValue;
});
newData.push(nd);
});
yield put({
type: 'save',
payload: {
list: newData,
ColumnNames:names,
},
});
} else {
message.error(response.Content);
}
routes中:
CurrencyOpt(){
let {exchange:{ColumnNames}} = this.props;
let CurOption = [];
if(ColumnNames){
CurOption= ColumnNames.map(CurOpt=>{
return(
{
title: CurOpt,
dataIndex: CurOpt,
key: CurOpt,
className: "editable",
render: (text, record) => {
return (
<Input
value={text}
onChange={e => this.handleFieldChange(e, CurOpt, record.key)}
placeholder={CurOpt}
/>
);
}
}
)
})
}
return CurOption;
}
再在columns中添加如下代码:
...this.CurrencyOpt(),
2.如何根据后台的数据动态生成添加一行时的行数据?
index = 0;
// 添加一行<动态数据>
handleAdd = () => {
const newData = this.state.dataSource.map(item => ({...item}));
//动态给定添加行的数据项
const {exchange:{ColumnNames}} = this.props;
let nd = {
key: `NEW_TEMP_ID_${this.index}`, //动态给定key
TotalMonthlyAccount: false,
MonthMark: nowDate,
}
ColumnNames.map(Names=>{
nd[Names] = ``;
})
newData.push(nd);
this.index += 1;
this.setState({dataSource: newData});
};
如何删除掉数组中多余的子数据?
delete newData.key;
componentDidMount方法:
//componentDidMount方法是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载
componentDidMount() {
const {dispatch} = this.props;
dispatch({
type: 'project/Edit',
})
}
componentWillReceiveProps方法:<尽量不要在componentWillReceiveProps方法中 dispatch ,否则会死循环!>
componentWillReceiveProps(nextProps) {
const {city: {cityVO}} = nextProps;
if (cityVO) {
this.setState({ID: cityVO.ID});
}
}
//每次监控props,如果是删除之后则需要重新获取数据。
componentWillReceiveProps(nextProps){
const {city} = nextProps;
if(city.deleteFlag){
const {dispatch} = this.props;
dispatch({
type: 'city/fetch',
});
}
}