背景:PC端的CRM系统第一阶段已经开发完毕.使用技术为:JS + AntDesignPro.现在开始开发企业微信.需要使用的技术为:TS + AntDesignMobile.因为公司之前有人开发过企业微信版,所以直接拉的别人搭好的架子.
开发之前,反复浏览TS的官网,AntDesignMobile的官网.
1:项目目录:
与AntDesignPro目录是差不多的.简单说下.开发代码还是在src下面的pages里面.assets里面放的一般都是图标.components里面都是自己封装的组件.layouts里面是鉴权.interceptors.ts文件里面是获取token的地方.umirc.ts里面是连接后端服务器地址的.开发服务器,测试服务器,生产服务器等.
2:开发首页页面:
上代码:
services层:
import axios from 'axios';
/**
* 首页列表
*/
export async function listHome(data : any) {
return axios.post(`/${process.env.APIPREFIX}/ticket/listHome`, data);
}
model层:
import * as services from './service';
export default {
namespace: 'home',
effects: {
// 首页列表
*listHome({ data, callback} : any, { put, call }: any) {
const datas = yield call(services.listHome, data);
yield put({
type: 'save',
payload:{listHome : datas.data} ,
});
if (datas.code === '0000') {
callback && callback(datas.data);
}
},
},
reducers: {
save(state : any, { payload } : any) {
return {
...state,
...payload,
};
},
}
}
index.tsx:
/**
* title: '昆药CRM'
*/
import React from 'react';
import { List } from 'antd-mobile';
import router from 'umi/router';
import styles from './index.less';
import { connect } from 'dva';
import IconBlock from './components/IconBlock';
import { Flex } from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
const namespace = 'home';
const mapStateToProps = (state: any) => {
const states = state[namespace];
return {
...states,
};
};
const mapDispatchToProps = (dispatch: any) => ({
// 首页列表
listHome(data: any, callback: any) {
dispatch({
type: `${namespace}/listHome`,
data,
callback,
});
},
});
class Home extends React.Component {
constructor(props: any) {
super(props);
this.state = {
menu: [],
order: {
groupTitle: '订单相关查询',
menuList: [],
}, // 订单类
invoiceFinancial: {
groupTitle: '回款相关查询',
menuList: [],
}, // 发票财务类
masterData: {
groupTitle: '主数据查询',
menuList: [],
}, // 主数据类
};
}
componentDidMount() {
this.getList();
}
// 获取首页图标
getList = () => {
const { listHome }: any = this.props;
listHome({}, (res: any) => {
res.menus &&
res.menus.map((val: any) => {
val.children.map((value: any) => {
if (value.menuName === '订单类') {
const { order }: any = this.state;
this.setState(
{
order: {
...order,
menuList: value.children,
},
},
() => {
const { order }: any = this.state;
this.setState({ menu: [order] });
},
);
}
if (value.menuName === '发票财务类') {
const { invoiceFinancial }: any = this.state;
this.setState(
{
invoiceFinancial: {
...invoiceFinancial,
menuList: value.children,
},
},
() => {
const { menu, invoiceFinancial }: any = this.state;
this.setState({ menu: [invoiceFinancial, ...menu] });
},
);
}
if (value.menuName === '主数据类') {
const { masterData }: any = this.state;
this.setState(
{
masterData: {
...masterData,
menuList: value.children,
},
},
() => {
const { menu, masterData }: any = this.state;
this.setState({ menu: [masterData, ...menu] });
},
);
}
});
});
});
};
// 跳转
jump = (path: any) => {
const { menuList, dispatch }: any = this.props;
let key: any = '';
let menuList1 = menuList.menuData.menuList;
let query = (arr: any, index: number) => {
if (arr.path === path) {
key = index && index;
} else if (arr.children.length > 0) {
arr.children.map((i: any) => {
query(i, index);
});
}
};
menuList1.map((item: any, index: number) => {
query(item, index);
});
dispatch &&
dispatch({
type: 'global/changeLayoutCollapsed',
payload: false,
});
localStorage.setItem('menuNav', key.toString());
router.push({
pathname: path,
});
};
render() {
const { menu }: any = this.state;
return (
{menu &&
menu.map((value: any) => (
{value.groupTitle}
{value.menuList.map((item: any, index: number) => (
this.jump(item.url)}
/>
))}
))}
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
components-IconBlock.tsx:
import React from 'react';
import styles from './style.less';
interface IconBlockProps {
titleName: string,
iconPath: string,
method: (e: React.MouseEvent) => void;
}
const IconBlock: React.FC = ({ titleName, iconPath, method }) => {
return (
{titleName}
)
}
export default IconBlock;
3:实现效果:
4:说下遇到的BUG:
1:注入model层的时候,一直报错:.
写代码几个小时后就容易疲劳.然后列表循环展示图标的时候.把Flex标签放循环里面了.样式就可想而知.一塌糊涂.. 这么浅显的BUG我竟然还是创造出来了... 写出来.警告自己.以后不可再犯.