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="">根品类/</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;
React后台管理系统-品类的增加、修改和查看的更多相关文章
- React后台管理系统-品类选择器二级联动组件
1.页面大致是这个样子 2.页面结构 <div className="col-md-10"> <select name="&quo ...
- 《React后台管理系统实战 :四》产品分类管理页:添加产品分类、修改(更新)产品分类
一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...
- 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 《React后台管理系统实战 零》:基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- React后台管理系统-添加商品组件
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...
随机推荐
- kafka与zookeeper读写分析
kafka的读写都通过leader完成,而zookeeper只有写要通过leader而读可以通过任意follower,我觉得造成这种差异的原因还是在于使用场景. kafka的设计目标是实现一个高吞吐的 ...
- 【Java】Java中的Collections类——Java中升级版的数据结构【转】
一般来说课本上的数据结构包括数组.单链表.堆栈.树.图.我这里所指的数据结构,是一个怎么表示一个对象的问题,有时候,单单一个变量声明不堪大用,比如int,String,double甚至一维数组.二维数 ...
- 深入学习webpack(二)
深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...
- entity framework discriminator error
前几天使用code first碰到错误:列名 'Discriminator' 无效.这是一个很少见的错误,搜索了很久才发现是code first的poco实体对象的继承问题. 比如,我定义了一个实体类 ...
- Kudu compaction design
不多说,直接上干货! http://blog.csdn.net/lookqlp/article/details/51438109
- Kudu-Master的设计
不多说,直接上干货! http://blog.csdn.net/lookqlp/article/details/70858466
- stm32中断优先级快速入门
1.基本概念 STM32(Cortex-M3架构)中有两个优先级的概念--抢占式优先级和响应优先级.有人把响应优先级称作'亚优先级'或'副优先级',每个中断源都需要被指定这两种优先级. 具有高抢占式优 ...
- Missing artifact jdk.tools:jdk.tools:jar:1.6
今天从svn上面下载了一个mavan项目,出现Missing artifact jdk.tools:jdk.tools:jar:1.6 这个错误. 怎么解决了,在我的根pom.xml 下加入这个依赖就 ...
- Unicode汉字编码表以及参考源码分享
1 Unicode编码表 Unicode只有一个字符集,中.日.韩的三种文字占用了Unicode中0x3000到0x9FFF的部分 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个 ...
- C# 将外部exe程序 嵌入到自己的窗体界面
将别人开发的exe程序,放到自己的窗体里面来运行. 1.基本功能实现 首先,在自己的窗体后面加上代码: [DllImport("User32.dll", EntryPoint = ...