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 ...
随机推荐
- Mybatis学习笔记9 - 鉴别器discriminator
鉴别器:mybatis可以使用discriminator判断某列的值,然后根据某列的值改变封装行为. 示例如下: DeptmentMapper接口定义: package com.mybatis.dao ...
- SQL事务的四种隔离级别
1未提交读(Read uncommitted):完全不锁表,所以会出现脏数据.2提交读(Read committed):1.事务1中update才锁表,可以select到最新数据. 事务2select ...
- leetcode 196. Delete Duplicate Emails 配合查询的delete
https://leetcode.com/problems/delete-duplicate-emails/description/ 题意要对原来的数据表进行删除,不删除不行,它每次只输出原来那个表. ...
- 第8章 IO类
8.1 IO类 iostream istream, wistream从流中读取数据 ostream, wostream iostream, wiostream读写 ...
- Neutron命令测试5
jolin@jolin:/$ route -nKernel IP routing tableDestination Gateway Genmask Flags Metric Ref Use Iface ...
- #define\const\inline的区别与联系
总结: const用于代替#define一个固定的值,inline用于代替#define一个函数.是#define的升级版,为了消除#define的缺陷. 参考内容:http://www.cnblog ...
- javaSE练习2——流程控制_2.2
一.假设某员工今年的年薪是30000元,年薪的年增长率6%.编写一个Java应用程序计算该员工10年后的年薪,并统计未来10年(从今年算起)总收入. package com.test; public ...
- intellijidea课程 intellijidea神器使用技巧 4-1 重构
1 重构变量 shift + F6 将选中的变量以及用到该变量的部分全部修改 2 重构方法 Ctrl + F6 重构变量
- Mybatis通用Mapper(转)
转自:http://blog.csdn.net/isea533/article/details/41457529 极其方便的使用Mybatis单表的增删改查 项目地址:http://git.oschi ...
- mint-ui popup自动关闭
<template> <div class="hello"> <input type="text" v-model="n ...