React后台管理系统-品类的增加、修改和查看

1.页面

2.品类列表展示

let listBody = this.state.list.map((category, index) => {
return (
<tr key={index}>
<td>{category.id}</td>
<td>{category.name}</td>
<td>
<a className="opear"
onClick={(e) => this.onUpdateName(category.id, category.name)}>修改名称</a>
{
category.parentId === 0
? <Link to={`/product-category/index/${category.id}`}>查看子品类</Link>
: null
}
</td>
</tr>
);
});
return (
<div id="page-wrapper">
<PageTitle title="品类列表">
<div className="page-header-right">
<Link to="/product-category/add" className="btn btn-primary">
<i className="fa fa-plus"></i>
<span>添加品类</span>
</Link>
</div>
</PageTitle>
<div className="row">
<div className="col-md-12">
<p>父品类ID: {this.state.parentCategoryId}</p>
</div>
</div>
<TableList tableHeads={['品类ID', '品类名称', '操作']}>
{listBody}
</TableList>
</div>
);
}

3.加载品类列表

// 加载品类列表
loadCategoryList(){
_product.getCategoryList(this.state.parentCategoryId).then(res => {
this.setState({
list : res
});
}, errMsg => {
this.setState({
list : []
});
_mm.errorTips(errMsg);
});
}

4.修改品类名称

// 更新品类的名字
onUpdateName(categoryId, categoryName){
let newName = window.prompt('请输入新的品类名称', categoryName);
if(newName){
_product.updateCategoryName({
categoryId: categoryId,
categoryName : newName
}).then(res => {
_mm.successTips(res);
this.loadCategoryList();
}, errMsg => {
_mm.errorTips(errMsg);
});
}
}

5.添加品类

import React from 'react';
import MUtil from 'util/mm.jsx'
import Product from 'service/product-service.jsx'
import PageTitle from 'component/page-title/index.jsx';
const _mm = new MUtil();
const _product = new Product();
class CategoryAdd extends React.Component{
constructor(props){
super(props);
this.state = {
categoryList : [],
parentId : 0,
categoryName : ''
};
}
componentDidMount(){
this.loadCategoryList();
}
// 加载品类列表,显示父品类列表
loadCategoryList(){
_product.getCategoryList().then(res => {
this.setState({
categoryList : res
});
}, errMsg => {
_mm.errorTips(errMsg);
});
}
// 表单的值发生变化
onValueChange(e){
let name = e.target.name,
value = e.target.value;
this.setState({
[name] : value
});
}
// 提交
onSubmit(e){
let categoryName = this.state.categoryName.trim();
// 品类名称不为空，提交数据
if(categoryName){
_product.saveCategory({
parentId : this.state.parentId,
categoryName : categoryName
}).then((res) => {
_mm.successTips(res);
this.props.history.push('/product-category/index');
}, (errMsg) => {
_mm.errorTips(errMsg);
});
}
// 否则，提示错误
else{
_mm.errorTips('请输入品类名称');
}
}
render(){
return (
<div id="page-wrapper">
<PageTitle title="品类列表"/>
<div className="row">
<div className="col-md-12">
<div className="form-horizontal">
<div className="form-group">
<label className="col-md-2 control-label">所属品类</label>
<div className="col-md-5">
<select name="parentId"
className="form-control"
onChange={(e) => this.onValueChange(e)}>
<option value="0">根品类/</option>
{
this.state.categoryList.map((category, index) => {
return <option value={category.id} key={index}>根品类/{category.name}</option>
})
}
</select>
</div>
</div>
<div className="form-group">
<label className="col-md-2 control-label">品类名称</label>
<div className="col-md-5">
<input type="text" className="form-control"
placeholder="请输入品类名称"
name="categoryName"
value={this.state.name}
onChange={(e) => this.onValueChange(e)}/>
</div>
</div>
<div className="form-group">
<div className="col-md-offset-2 col-md-10">
<button type="submit" className="btn btn-primary"
onClick={(e) => {this.onSubmit(e)}}>提交</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default CategoryAdd;

更多专业前端知识，请上【猿2048】www.mk2048.com

React后台管理系统-品类的增加、修改和查看相关推荐

React后台管理系统-品类选择器二级联动组件
React后台管理系统-品类选择器二级联动组件品类选择器二级联动 posted on 2018-06-26 22:21 gisery 阅读( ...) 评论( ...) 编辑收藏
【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的随便扯扯我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
react后台管理系统项目总结
React后台管理项目 1.创建一个项目 2.配置一个ui插件库开始实现跳转快速获取路由地址将路由和组件映射 axios请求实现登录模块隐藏二级路由按照价格排序或者按照销量等排序管理员 ...
《React后台管理系统实战：十一》可视图表及首页图表
一.简介及环境安装 les135- 1.常用数据可视化图表库 1) echarts a. https://echarts.baidu.com/ b. 百度开源, 如果要在 react 项目中使用, 需 ...
《React后台管理系统实战：五》产品管理（一）
一.概述 1.1目录结构及功能 src/pages/admin/product/add-update.jsx //添加及更新产品detail.jsx //产品详情home.jsx //产品默认页ind ...
《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页点击:onClick={() => this.props.history.push('/product/add-upda ...
react 拖拽连接插件_一款精美的 react 后台管理系统
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.这么好的react开源项目,值得珍藏了! 项目依赖模块项目是用create-react-app创建的,依赖包如下: react(是一个用于构建用户界面 ...
【共享单车】—— React后台管理系统开发手记：权限设置和菜单调整（未完）...
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

React后台管理系统-品类的增加、修改和查看

React后台管理系统-品类的增加、修改和查看相关推荐

最新文章

热门文章