零、界面基础模版
import * as React from "react";
import {
AutoComplete,
DatePicker,
Space,
Cascader, //分级选择
Select, //单选/多选
Input,
Button,
Row,
Col,
Form,
message,
} from "antd";
import { FormInstance } from "antd/lib/form";
const { Option } = Select;
import "./index.scss";
//网络请求
import axios from "axios";
import storeAttriService from "../../../services/storeAttri";
//数据保存
import { updateStoreInfo } from "../../../actions/storeActions";//更新缓存
import store from "../../../store";//读取缓存
//在主要html中调用的属性：需要配置
interface testState {
test1: Array;
test2: string;
test3: number;
}
//主要html
class StoreAttribute extends React.Component {
constructor(props: {}) {
super(props);
}
state: testState = {
test1:[],
test2:'',
test3:0
};
////////////方法
testMethod = (value: string) => {
this.setState({
test2: value,
});
};
//生命周期
componentDidMount = () => {
};
////////////所有接口
//1、接口(参数：currentCompanyOID)
ReqBindCompanyJudge = async (value: string) => {
return await storeAttriService
.ReqBindCompanyJudge(value)
.then((res) => {
console.log('1、绑定接口：', res)
if (res.status) {
return '1';
}
else {
return res.message;
}
})
.finally(() => {
});
}
//挂载
render() {
return (
//外框
);
}
}
export default StoreAttribute;
一、react组件调用
ant design组件库：
详见https://ant.design/components/overview-cn/
需要注意很多组件用的是defalutValue,defalut类的属性，只有首次才会生效。
二、赋值方式
0、参数初始化：class内部使用的都需要interface
//在主要html中调用的属性：需要配置
interface testState {
test1: Array;
test2: string;
test3: number;
}
//class中
state: testState = {
test1:[],
test2:'',
test3:0
};
1、基本赋值：界面的值需要及时更新需要用到this.setState
//遍历的是map的赋值
this.setState({
storeInfo: storeData.map((item: { fullName: string }) => {
return {
...item,
label: item.fullName,
value: item.fullName,
};
}),
});
//遍历的是数组的赋值
this.setState({
companyInfo: companyData.map((item: any[]) => {
return {
...item,
label: item[1],
value: item[1],
};
}),
});
2、form表单赋值
//1、div写法
<Form ref={this.formRef} onFinish={this.onFinish}>
<Form.Item label="诊断门店:" name="form__storeChoice" rules={[{ required: true, message: '请输入正确的门店地址' }]}>
</Form.Item>
</Form>
2、在class方法里初始化
//form表单
formRef = React.createRef();
//3、表单重置所有值（form-item要设置不同的name）
this.formRef.current?.resetFields();
//4、表单赋值
this.formRef.current?.setFieldsValue({
form__storeChoice: values.compName,
form__storeDate: '',
form__areacName: values.address,
form__marketLv: String(values.marketLv),
form__busNatureType: String(values.busNature),
form__consumeLv: String(values.consumeLv),
form__companyChoice: values.compGroupName,
})
三、接口和方法调用
//0、网络请求
import axios from "axios";
import storeAttriService from "../../../services/storeAttri";
//1、延迟接口传值方法
ReqBindCompanyJudge = async (value: string) => {
console.log('查看企业码', value)
return await storeAttriService
.ReqBindCompanyJudge(value)
.then((res) => {
console.log('1、绑定接口：', res)
if (res.status) {
return '1';
}
else {
console.log('return')
return res.message;
}
})
.finally(() => {
});
}
//1、调用
var bindMsg = await this.ReqBindCompanyJudge(storeDic.oid)
//2、生命周期
componentDidMount = async () => {
};
shouldComponentUpdate = () => {
};
四、本地存储
0、基础封装（暂未关注）
1、调用本地存储文件
1、reducers-storeInfo
//引入头文件
import { Reducer } from 'redux';
import { StoreAction, STOREINFO, DEL_STOREINFO, STORE_QINGXI_STATUS, STORE_SELECTED } from '../actions/storeActions';
import { getCache, putCache, delCache } from '../utils/cache';
//定义StoreState,然后把storeInfo这些也interface一个
export interface StoreState {
storeInfo: StoreInfo;
isSave: boolean;
storeStatus: Array,
currentStore: CurrentStore
}
//设置初始值
const defaultState: StoreState = {
storeInfo: getCache(STOREINFO) || null,
isSave: getCache('isSave') || false,
storeStatus: [0, 0, 0, 0],
currentStore: {
message: '',
selected: false
}
};
//输出值
export const storeInfoReducer: Reducer | any = (
state = defaultState,
action: StoreAction
) => {
switch (action.type) {
case STOREINFO:
// console.log(action.userInfo)
//jxs这里要改
putCache({ key: 'storeInfo', value: action.storeInfo })
return {
...state,
isSave: putCache({ key: 'isSave', value: true }),
storeInfo: putCache({ key: STOREINFO, value: action.storeInfo })
}
case DEL_STOREINFO:
return {
...state,
isSave: delCache('isSave', false),
storeInfo: delCache(STOREINFO, null)
}
case STORE_QINGXI_STATUS:
return {
...state,
storeStatus: action.data
}
case STORE_SELECTED:
return {
...state,
currentStore: action.data
}
default:
return state;
}
};
import { Action, ActionCreator } from 'redux';
import { StoreInfo, CurrentStore } from '../reducers/storeInfo';
//更新
export const STOREINFO = 'STOREINFO';
//删除
export const DEL_STOREINFO = 'DEL_STOREINFO';
// 清洗状态
export const STORE_QINGXI_STATUS = 'STORE_QINGXI_STATUS';
//
export const STORE_SELECTED = 'STORE_SELECTED';
export interface StoreQingXiStatusAction extends Action {
type: 'STORE_QINGXI_STATUS';
data: Array
}
export interface StoreSelectedAction extends Action {
type: 'STORE_SELECTED',
data: CurrentStore
}
export interface StoreInfoAction extends Action {
type: 'STOREINFO' | 'DEL_STOREINFO';
storeInfo?: StoreInfo
}
export const setStoreSelected: ActionCreator = (val: CurrentStore) => ({
type: STORE_SELECTED,
data: val
})
export const setStoreQingXiStatus: ActionCreator = (val: Array) => ({
type: STORE_QINGXI_STATUS,
data: val
})
export const updateStoreInfo: ActionCreator = (storeInfo: StoreInfo) => ({
type: STOREINFO,
storeInfo: storeInfo
});
export const delStoreInfo: ActionCreator = () => ({
type: DEL_STOREINFO
});
export type StoreAction = StoreInfoAction | StoreQingXiStatusAction | StoreSelectedAction;
2、具体使用
//0、引入头文件
//数据保存
import { updateStoreInfo } from "../../../actions/storeActions";//更新门店缓存
import store from "../../../store";//读取所有缓存
//1、保存信息
store.dispatch(
updateStoreInfo({
})
);
//2、读取信息
var userData = store.getState()?.user.userInfo