这下的3个接口的调用，前面的步骤跟获取数据一样的，只在当前页做改变
一、删除数据
第一种写法
写在函数里面，哪里需要调用
del=(id)=>{
const {dispatch} = this.props;
const later = dispatch({
type:'smartRestaurant/delClassificationFood',
payload:{ //payload里面写成对象的形式
id,
},
});
later.then(()=>{// 删除之后页面要刷新，还得重新获取数据
this.componentDidMount()
})
}
第二种写法
isInteger = obj => {
return obj % 1 === 0;
};
del = id => {
const { dispatch } = this.props;
const later = dispatch({
type: 'cityInformation/delAnnouncement',
payload: {
id,
},
});
later.then(pdata => {
const { page, pageNum, data } = this.state;
if (this.isInteger([data.pagination.total - 1] / pageNum)) {
this.setState({
page: page - 1,
});
}
if (JSON.parse(pdata).code === 1) {
this.componentDidMount();
}
});
};
// Popconfirm 在头部要记得引用，只有确认是否删除菜调用删除接口
{
title: '操作',
dataIndex: 'operation',
render: (text,record) => (
<div>
<Button onClick={()=>this.showModal(2,record)} icon='edit' size='small' />
<Divider type="vertical" />
<Popconfirm title="确认是否删除?" onConfirm={()=>this.del(record.id)} >
<Button icon='delete' size='small' />
</Popconfirm>,
</div>
),
},
二、添加数据
均是对表单进行操作
这是图片上传的时候要写的函数
normFile = (e) => {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
handleImgChange = (info) => { // info是开始就有的一个对象，如果有问题控制台打印一下
if (info.file.status === 'uploading') { // 如果选择的图片还在加载中，执行这里
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') { // 如果已经加载完成了，执行这里
const { response:{ data } }=info.file; //返回的data里面包含了生成的图片地址url
this.setState({
url:data[0], // data是一个数组，我门的图片地址是data[0]
loading: false, //图片显示了，loading自然要关闭
});
}
};
这里有图片上传
newHashslinger (){
const put=(e)=>{ //把put写在里面的作用是，在当前函数里面调用可以不写成{this.put}
const { form:{validateFields}, dispatch } =this.props; // validateFields保存当前页面所有表单的value值
e.preventDefault();
validateFields((err, value) => {
// err表示modal里面没输入完成的，value是modal完成的，err如果为空，证明value里面是全部完成了
const esvalue=value; // value就是getFieldDecorator里面的第一个参数
if (!err) { // 只有err为空，说明新增表单数据完成了，那么modal点击确认时调接口
const {url}=this.state;// 切记url在state里面要赋初始值，
esvalue.img=url; // 这里的url是地址，是在本地选择图片时就会自动调的接口，根据图片信息生成的图片地址
const later=dispatch({
type: 'smartRestaurant/addMenuClassification',
payload: esvalue,
});
later.then(()=>{
this.setState({
newVisible:false, // 只有新增成功之后modal关闭
})
this.componentDidMount(); // 同样数据会重新获取
})
}
});
};
const FormItem = Form.Item; //只要是表单，这个就得写
const RadioGroup = Radio.Group;
const { getFieldDecorator } = this.props.form; //getFieldDecorator这个算装饰器，起双向绑定的作用
const formItemLayout = { // 这是对modal样式控制，一行总共24个span
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
},
};
// accessToken是请求头，在state里面也要赋初始值accessToken: localStorage.getItem('accessToken'),
// accessToken是当登录调用login接口时，就会自动保存下来的
const {url,loading,accessToken}=this.state;
上传图片
const uploadButton = (
<div>
<Icon type={loading ? 'loading' : 'plus'} /> // 如果选择了图片，图片还在加载就显示loading图标，否则显示plus加号图标
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<Modal
destroyOnClose // modal关闭，子元素自动销毁
title="新增"
visible={this.state.newVisible}
onOk={put} // put写在newHashslinger的好处就是现在调用不要加this
onCancel={this.handleCancel}
>
<Form onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout} // 样式控制
label="分类名称"
>
{getFieldDecorator('name', {
rules: [{
required: true, message: '请输入正确名称',
}], // rules 就是输入框的限制条件，没达到要求就会显示message的内容
})(
<Input />,// 就是当前的组件
)}
</FormItem>
<FormItem
{...formItemLayout}
label="图片"
>
{getFieldDecorator('img', {
valuePropName: 'fileList',
rules: [{
required: true, message: '菜品图片',
}],
getValueFromEvent:this.normFile, // 这里是固定写的，图片上传就得这样写
})(
<Upload
action="/api/user_agency/system/file/upload/upload_image" //只要选择了图片，就会自动调这个接口，生成一个图片地址，url
listType="picture-card"
showUploadList={false}
onChange={this.handleImgChange} // 选择图片调用的函数
name='image'
headers={
{
Authorization: accessToken, // 固定写法，请求头
}
}
>
{url ? <img src={url} alt='图片路径' width={130} /> : uploadButton } // 图片如果选择好了，就是url存在，执行后面的，佛诺泽执行后面的uploadButton
</Upload>
)}
</FormItem>
</Form>
</Modal>
);
};
三、修改数据
修改一个特殊的地方，那就是修改的时候原始数据是出现在输入框的，这是与添加不同的地方
// 因为这里用一个showModal函数控制两个modal的显示与否
showModal = (index,data) => {
if(index===1){
this.setState({
newVisible: true,
});
}else{
this.setState({
editData: data,
url:data.img, // 因为修改的时候推按比较特殊，得这样写
editVisible: true,
});
}
};
handleCancel = () => {
this.setState({
url:'',// 取消modal的同时,图片也要清空
newVisible: false,
editVisible: false,
});
};
// 在新增的地方同样这样绑定一个事件
{
title: '操作',
dataIndex: 'operation',
render: (text,record) => (
<div>
<Button onClick={()=>this.showModal(2,record)} icon='edit' size='small' />// 此处调用showModal
<Divider type="vertical" />
<Popconfirm title="确认是否删除?" onConfirm={()=>this.del(record.id)} >
<Button icon='delete' size='small' />
</Popconfirm>,
</div>
),
},
// editData: {},在state 里面赋初始值
editTable = () =>{
const { editData } = this.state; // editData 选中的某条数据的全部，代表单条数据的全部信息
const put=(e)=>{
const {form:{validateFields},dispatch}=this.props;
e.preventDefault();
validateFields((err, values) => {
const esvalue = values;
if (!err) {
esvalue.id = editData.id; // 因为要获得 id
const later = dispatch({
type: 'smartRestaurant/upTableManagement',
payload:esvalue,
});
later.then(()=>{
this.setState({
editVisible: false,
});
this.componentDidMount()
})
}
});
};
// modal层的不同之处，存在初始数据initialValue
<Form onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout} // 样式控制
label="分类名称"
>
{getFieldDecorator('name', {
rules: [{
required: true, message: '请输入正确名称',
}], // rules 就是输入框的限制条件，没达到要求就会显示message的内容
initialValue: editData.name,
})(
<Input />,// 就是当前的组件
)}
</FormItem>
<FormItem
{...formItemLayout}
label="图片"
>
{getFieldDecorator('img', {
valuePropName: 'fileList',
rules: [{
required: true, message: '菜品图片',
}],
getValueFromEvent:this.normFile, // 这里是固定写的，图片上传就得这样写
initialValue:[{}],
})(
<Upload
action="/api/user_agency/system/file/upload/upload_image" //只要选择了图片，就会自动调这个接口，生成一个图片地址，url
listType="picture-card"
showUploadList={false}
onChange={this.handleImgChange} // 选择图片调用的函数
name='image'
headers={
{
Authorization: accessToken, // 固定写法，请求头
}
}
>
{url ? <img src={url} alt='图片路径' width={130} /> : uploadButton } // 图片如果选择好了，就是url存在，执行后面的，佛诺泽执行后面的uploadButton
</Upload>
)}
</FormItem>
最后一定要将两个modal渲染到页面上
{this.newHashslinger()}
{this.editHashslinger()}
在此，基于ant-Design调接口篇已经完成啦。
