学习AntDesignPro从⼊门到放弃第⼆节：做⼀个简单的增删改查学习Ant Design Pro 从⼊门到放弃第⼆节：做⼀个简单的增删改查 PS：我是⼀个前端啥都不懂的⼩⽩，如果写的不好，⼤佬们不要笑话我
做⼀个⽤户管理的增删改查
PS：后台代码省略了这⾥主要讲怎么和后端交互和路由 后端接⼝⽤SpringBoot，使⽤Swagger展⽰接⼝，后端接⼝省略实现，接⼝列表如下：
Antd调⽤
import React from'react';
import{
Modal,
Table,
TreeSelect,
Divider,
InputNumber,
DatePicker,
Dropdown,
Menu,
Row,
Col,
Tag,
Popconfirm,
Badge,
Button,
Card,
Form,
Input,
Select,
Icon,
Checkbox,
message
}from'antd';
import{ connect }from'dva';
import moment from'moment';
import Iaxios from'@/axios/index';
import PaginationUtils from'@/utils/PaginationUtils';
import PageHeaderWrapper from'@/components/PageHeaderWrapper';
import styles from'./SysUser.less';
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout ={
labelCol:{ span:6},
labelCol:{ span:6},
wrapperCol:{ span:16},
};
const TreeNode = TreeSelect.TreeNode;
class SysUser extends React.Component {
//初始化⽅法
componentDidMount(){
const{ dispatch }=this.props;
this.setState({
dataSource:[],
});
this.findRequest();
this.findAllRoles();
}
//变量
state ={
dataSource:[],
visiable:false,
record:{},
type:'add',
title:'',
expandForm:false,
treeValue:null,
rolesDataSource:[],
checkRolesDataSource:[]
};
params ={
page:1,
size:10,
fieldsValue:{
userName:'',
status:'',
orgName:'',
phone:'',
},
};
//查询⾓⾊列表
findAllRoles=()=>{
let _this =this;
url:'role/all-list',
data:{
},
}).then(res =>{
this.setState({
rolesDataSource: res.data,
});
}).catch(error =>{
console.log('error'+ error);
});
}
//查询⽤户信息
findRequest=()=>{
let _this =this;
url:'user/',
data:{
page: _this.params.page,
size: _this.params.size,
userName: _this.params.fieldsValue.userName, status: _this.params.fieldsValue.status,
orgName: _this.Name, phone: _this.params.fieldsValue.phone,
phone: _this.params.fieldsValue.phone,
},
})
.then(res =>{
t.map((item, index)=>{
item.key = index;
});
this.setState({
dataSource: t,
pagination: PaginationUtils.pageInation(res,(current, size)=>{ _this.params.page = current;
_this.params.size = size;
_this.findRequest();
}),
});
})
.catch(error =>{
console.log('error'+ error);
});
};
//保存⽤户信息
postRequest= data =>{
data.preventDefault();
const{ dispatch, form }=this.props;
form.validateFields((err, values)=>{
if(pe ==='save'){
Iaxios.postRequest({
url:'user/',
data:{
userName: values.userName,
loginName: values.loginName,
status: values.status,
roles: les,
phone: values.phone,
},
})
.then(res =>{
this.setState({
visible:false,
});
this.findRequest();
})
.catch(error =>{
console.log('error'+ error);
});
}else{
Iaxios.putRequest({
url:'user/',
data:{
id:this.state.id,
userName: values.userName,
loginName: values.loginName,
status: values.status,
email: ail,
phone: values.phone,
roles: les,
},
})
.then(res =>{
this.setState({
visible:false,
});
this.findRequest();
})
.catch(error =>{
console.log('error'+ error);
});
}
});
};
handleSave=()=>{
this.setState({
visible:true,
title:'新增⽤户',
type:'save',
record:{},
});
};
handleUpdate= record =>{
this.setState({
visible:true,
title:'编辑⽤户',
type:'update',
id: record.id,
record
});
};
handleSearch= e =>{
e.preventDefault();
const{ dispatch, form }=this.props;
form.validateFields((err, fieldsValue)=>{ this.params.fieldsValue = fieldsValue;
this.findRequest();
});
};
handleFormReset=()=>{
const{ form, dispatch }=this.props;
this.setState({
dataSource:[],
});
this.findRequest();
};
// 点击取消、
handleCancel=()=>{
this.setState({
visible:false,
});
this.setFields();
};
//收起
toggleForm=()=>{
const{ expandForm }=this.state; this.setState({
expandForm:!expandForm,
});
};
onChange= treeValue =>{
this.setState({ treeValue });
};
onCheckboxChange(checkedValues){
}
//删除⽤户
handleDelete=(record)=>{
title:'删除⽤户',
content:'确定删除该⽤户吗？',
okText:'确认',
cancelText:'取消',
onOk:()=>{
Iaxios.deleteRequest({
url:'user/',
data:{
id: record.id
},
}).then(res =>{
de =='0000'){
message.success(res.msg);
this.findRequest();
}else{
<(res.msg);
}
})
.catch(error =>{
console.log('error'+ error);
});
}
});
};
render(){
const{
form:{ getFieldDecorator },
}=this.props;
const{ visible, title, type, record, rolesDataSource, checkRolesDataSource }=this.state; const close =true;
const columns =[
{
jumper2
title:'⽤户名',
dataIndex:'userName',
key:'userName',
},
{
title:'登录名',
dataIndex:'loginName',
key:'loginName',
},
{
title:'电话',
dataIndex:'phone',
key:'phone',
},
{
title:'所属单位',
key:'orgName',
dataIndex:'orgName',
},{
title:'⾓⾊',
key:'roles',
dataIndex:'roles',
render(roles){
var doms =[];
roles.map(item =>(
doms.push(<Tag color="#87d068" disabled={true}>{item}</Tag>)
)
);
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议