umi(1)
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
403: '用户得到授权，但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维护。',
504: '网关超时。',
};
/** 异常处理程序 */
export const errorHandler = (error: { response: Response }): Response => {
const { response } = error;
console.log(response)
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
message.error(errorText);
} else if (!response) {
message.error('您的网络发生异常，无法连接服务器');
}
return response;
};
/**
request 拦截器, 改变 url 或 options.
@returns
*/
export const requestOpt = (url: string, options: RequestOptionsInit): object => {
if (process.env.NODE_ENV === 'development'){
console.log("url==>", url)
if (options.data) {
console.log("options.data==>", JSON.stringify(options.data))
} else if (options.params && Object.keys(options.params).length > 0) {
console.log("options.params==>", options.params)
}
}
if (process.env.NODE_ENV === 'development' && !options.prefix) {
url = '/api' + url
}
const headers = {
'token': getToken(),
};
return {
url: url,
options: { ...options, headers },
};
}
export const reLogin = () => {
const { redirect } = getPageQuery();
// Note: There may be security issues, please note
if (window.location.pathname !== '/user/login' && !redirect) {
removeToken()
history.replace({
pathname: '/user/login',
search: stringify({
redirect: window.location.href,
}),
});
}
}
网络请求接口（service.ts 中）
import request from '@/utils/request';
import type { ListParamsType } from '@/services/data'
import type { AccountInfoType } from './data'
/**
列表数据
@param params
@returns
*/
export async function getUserList(params: ListParamsType): Promise<any> {
return request('/Admin/UserList', {
method: 'POST',
data: { ...params },
requestType: 'form'
});
}
/**
獲取账户信息
@param params
@returns
*/
export async function getUserInfo(params: { id: string }): Promise<any> {
return request('/Admin/UserAdd', {
method: 'GET',
params: { ...params },
requestType: 'form'
});
}
/**
用户添加
@param params
@returns
*/
export async function userAdd(params: AccountInfoType): Promise<any> {
return request('/Admin/UserAdd', {
method: 'POST',
data: { ...params },
requestType: 'form'
});
}
/**
冻结
@param params
@returns
*/
export async function userFrozen(params: { id: string }): Promise<any> {
return request('/Admin/UserFroze', {
method: 'POST',
data: { ...params },
requestType: 'form'
});
}
取公用数据类型（data.d.ts 中）
/**
封装后台返回的数据
*/
export type SingleUserListType = {
id: number,
level?: number,
account?: string,
password?: string,
contact_name?: string,
contact_mobile?: string,
remark?: string,
role_id?: number,
is_enable?: number,
ctime?: string,
uptime?: string,
role_name?: string,
ctime_str: string,
}
/**
添加编辑账户
*/
export type UserAddType = {
user_id?: number,
account?: string,
account_password?: string,
contact_name?: string,
contact_mobile?: number,
role_id?: number,
};
/**
獲取账户信息
*/
export type AccountInfoType = {
user_id?: number,
account?: string,
password?: string,
contact_name?: string,
contact_mobile?: number,
role_id?: number,
id?: number
};
/**
獲取账户信息列表
*/
export type AccountRoleListType = {
ctime?: number,
ctime_str?: string,
id?: number,
is_enable?: number,
menu_ids?: string,
role_name?: string,
uptime?: number,
value?:number,
label?:string,
disabled?:boolean
};
model.ts 中 dva 数据获取
import { Effect, Reducer } from 'umi';
//导入 service 远端数据请求
import { getUserList, getUserInfo, userAdd, userFrozen } from './service'
import { SingleUserListType, AccountInfoType, AccountRoleListType } from './data'
import { message } from 'antd';
expo
rt type AccountListState = {
rows: SingleUserListType[];
total: number;
info: AccountInfoType;
role_list: AccountRoleListType[]
}
interface AccountListModelType {
namespace: string
state: AccountListState;//封装后台返回的数据
effects: {
getRemoteUserList: Effect;
getRemoteUserInfoData: Effect;
postRemoteUserAdd: Effect;
postRemoteUserFrozen: Effect;
};
reducers: {
getUserList: Reducer<AccountListState>,
getUserInfoData: Reducer<AccountListState>,
};
}
const AccountListModel: AccountListModelType = {
namespace: 'accountListData',
state: {
rows: [],
total: 0,
info: {},
role_list: []
},
effects: {
*getRemoteUserList({ payload }, { call, put }) {
//从 service 中获取数据（service 主要用于接口请求）
const response = yield call(getUserList, { ...payload })
if (response && response instanceof Object) {
yield put({
type: 'getUserList',//这个是将数据给 reducers 中哪个方法
payload: response.data //注意这里传递一个数组会出问题，原因待定
})
}
},
//獲取账户信息
*getRemoteUserInfoData({ payload }, { call, put }) {
const response = yield call(getUserInfo, { ...payload })
if (response && response instanceof Object) {
let { role_list } = response.data
role_list.forEach((element: AccountRoleListType) => {
element.value = element.id,
element.label = element.role_name,
element.disabled = element.is_enable == 0
})
response.data.role_list = role_list
response.data.info = { ...response.data.info, role_id: (response.data.info.role_id == 0 ? '' : response.data.info.role_id) }
yield put({
type: 'getUserInfoData',
payload: response.data
})
}
},
//用户添加
*postRemoteUserAdd({ payload }, { call, put }) {
const response = yield call(userAdd, { ...payload })
if (response && response instanceof Object) {
message.success(response.message)
}
},
//冻结
*postRemoteUserFrozen({ payload }, { call, put }) {
const response = yield call(userFrozen, { ...payload })
if (response && response instanceof Object) {
message.success(response.message)
}
}
},
//同步
reducers: {
getUserList(state, action) {
return {
...state,
...action.payload,
};
},
getUserInfoData(state, action) {
return {
...state,
...action.payload,
};
}
},
}
export default AccountListModel;
首页 index.tsx 展示数据
import React, { useRef, FC } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { PageContainer, WaterMark } from '@ant-design/pro-layout';
import { Card, Space } from 'antd';
import { connect, Dispatch, AccountListState } from 'umi';
import type { ListParamsType } from '@/services/data'
import { SingleUserListType, UserAddType } from './data'
import ProTable from '@ant-design/pro-table'
import './index.less'
import AddAccountModal from './components/addaccountmodal'
/**
声明下方 props 类型
*/
type accountListPageProps = {
listData: AccountListState,
dispatch: Dispatch
}
const AccountListPage: FC<accountListPageProps> = (props) => {
//获取从 model 中来的数据
const { listData, dispatch } = props
//配置 ProTable
const ref = useRef<ActionType>();
/**
ProTable 的网络请求 request
*/
const requestHandler = async (params: ListParamsType) => {
await dispatch({
type: 'accountListData/getRemoteUserList',
payload: params = { ...params }
})
return {}
}
//提交数据
const onCreateFinish = async (values: UserAddType) => {
await dispatch({
type: 'accountListData/postRemoteUserAdd',
payload: { ...values }
})
ref.current?.reload();
return true
}
/**
启用或停用
@param id
*/
const onAccountTypeClick = async (id: number) => {
await dispatch({
type: 'accountListData/postRemoteUserFrozen',
payload: { id: id }
})
ref.current?.reload();
}
const columns: ProColumns<SingleUserListType>[] = [
{
title: 'ID',
dataIndex: 'id',
width: 128,
search: false,
align: 'left'
},
{
title: '账号名称',
dataIndex: 'account',
align: 'left',
},
{
title: '状态',
dataIndex: 'is_enable',
search: false,
align: 'left',
render: (text) => <span>{text == 1 ? 启用 : 停用}</span>,
},
{
title: '联系人姓名',
dataIndex: 'contact_name',
hideInTable: true,
},
{
title: '创建时间',
dataIndex: 'ctime_str',
search: false,
align: 'left'
},
{
title: '操作',
align: 'center',
render: (text, record) => (
<Space size="middle">
<AddAccountModal
userId={record.id}
itemInfo={listData.info}
roleList={listData.role_list}
dispatch={dispatch}
showType={1}
onCreateFinish={onCreateFinish} />
{
record.is_enable == 0 ? <a className="start-using" onClick={() => onAccountTypeClick(record.id)}>启用</a> :
<a className="stop-using" onClick={() => onAccountTypeClick(record.id)}>停用</a>
}
</Space>
),
},
];
return (
<PageContainer title="账号列表">
<Card>
<WaterMark content="地环院内部管理系统">
<ProTable
actionRef={ref}
request={requestHandler}
columns={columns}
dataSource={listData.rows}
rowKey="id"
search={{
labelWidth: 'auto',
}}
pagination={{
showQuickJumper: true,
pageSize: 10,
total: listData.total
}}
form={{
span: 6
}}
toolBarRender={() => [
<AddAccountModal
userId={0}
itemInfo={listData.info}
roleList={listData.role_list}
dispatch={dispatch}
showType={0}
onCreateFinish={onCreateFinish} />
]}
/>
</WaterMark>
</Card>
</PageContainer>
)
}
const mapStateToProps = ({ accountListData }: { accountListData: AccountListState }) => {
return {
listData: accountListData,//这里的 usersData 就是 model 中的 namespace
}
}
export default connect(mapStateToProps)(AccountListPage)
弹框 addaccountmodal.tsx
import React, { useEffect, FC } from 'react'
import { Button, Form } from 'antd';
import {
ModalForm,
ProFormText,
ProFormSelect,
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import type { UserAddType } from '../data'
import { Dispatch } from 'umi';
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论