react树结构-类别管理系统的增删改

Notecategory.js文件

import React, { Component } from 'react'
import { withRouter } from 'react-router';
import {NavBar,Toast} from "antd-mobile";
import {convertData} from "./CategoryTreeDataUtils";
import {Modal} from "antd";
import axios from "../../../../http";
import Qs from 'qs'
import TreesMenu from "./treeMenu.jsx";
import { Button,Input,Form} from 'antd-mobile';
class NoteCategory extends Component {
    constructor(props) {
        super(props);
        this.state={data:[],modalVisible:false,modalEditVisible:false,name:'',parentId:0}; 
    }
    add=() =>{
        let entity={'name':this.state.name,'parentId':this.state.parentId};
        axios.post('api/oa/note/category/add', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.setState({modalVisible:false})
                    this.loadData();
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }
    update=() =>{
        let entity={'name':this.state.name,'parentId':this.state.parentId,id:this.state.id};
        axios.post('api/oa/note/category/update', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.setState({modalEditVisible:false})
                    this.loadData();
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }
    loadData=() =>{
        axios.post('api/oa/note/category/findMyAll', Qs.stringify({
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data

                let list=data.data

                list=convertData(list,0);
                console.log(list)

                this.setState({data:list});
            })
            .catch(function (error) {
                console.log(error);
            });

    }
    showAddModal=(parentId)=>{
        this.setState({modalVisible:true,name:'',parentId:parentId})
    };
    handleCancel = () => {
        this.setState({modalVisible:false,parentId:0})
    };

    showEditModal=(treeNodeData)=>{
        let state={modalEditVisible:true, id:treeNodeData.id, name:treeNodeData.originTitle,parentId:treeNodeData.parentId};
        this.setState(state)
    };

    handleEditCancel = () => {
        this.setState({modalEditVisible:false,parentId:0})
    };
    onRecordChange = (event, key) => {
        console.log('event')
        console.log(event)
        let state={};
        state[key]=event;
        this.setState(state)
    };
    showSuccessMessage (systemMessage){
        // message.success(
        //     <MessageContent>
        //         {systemMessage}
        //     </MessageContent>,
        //     5
        // );
        Toast.show({
            content:  systemMessage,
            afterClose: () => {
                console.log('after')
              },
            
          })
    };
    showErrorMessage (systemMessage){
        // message.error(
        //     <MessageContent>
        //         {systemMessage}
        //     </MessageContent>,
        //     5
        // );
        Toast.show({
            content:  systemMessage,
            afterClose: () => {
                console.log('after')
              },
            
          })
    };

    deleteById(id) {

        axios.post('api/oa/note/category/deleteById', Qs.stringify({
            id:id
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.loadData();
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }

   componentDidMount() {
        this.loadData()
   }

    goBack=()=>{
        
        this.props.history.push({pathname:"/note"})
    }
    render() {
        return (
            <div>
                <Modal
                visible={this.state.modalVisible}
                title="添加"
                onCancel={this.handleCancel}
                footer={[
                    <Button key="back" size="small" onClick={this.handleCancel}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        size="small"
                        onClick={this.add}
                    >
                        确定
                    </Button>,
                ]}
            >
                <Form>
                       
                            <div>名称:</div>
                            <Input
                                label="名称"
                                placeholder="名称"
                                value={this.state.name}
                                onChange={e => this.onRecordChange(e, 'name')}
                            />
                       

                </Form>

            </Modal>
            <Modal
                visible={this.state.modalEditVisible}
                title="编辑"
                onCancel={this.handleEditCancel}
                footer={[
                    <Button key="back" size="small" onClick={this.handleEditCancel}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        size="small"
                        onClick={this.update}
                    >
                        确定
                    </Button>,
                ]}
            >
                <Form >
                   
                        <div>名称:</div>
                        <Input
                            label="名称"
                            placeholder="名称"
                            value={this.state.name}
                            onChange={e => this.onRecordChange(e, 'name')}
                        />
                   

                </Form>

            </Modal>

                <NavBar onBack={this.goBack}>笔记类别管理</NavBar>
                {/* <Tree
                            switcherIcon={<DownOutlined />}
                            onSelect={this.categoryOnSelect}
                            selectedKeys={this.state.categorySelectedKeys}
                            treeData={this.state.data}
                /> */}
                <TreesMenu
                    datas={this.state.data}
                    // onselected={item => {
                    //     console.log("选择了树形目录的数据：", item);
                    // }}
                    clickOnAdd={(data)=>{this.showAddModal(data)}}
                    clickOnEdit={(data)=>{this.showEditModal(data)}}
                    clickOnDelete={(data)=>{this.deleteById(data)}}
                ></TreesMenu>
                <Button block shape='rounded' color='primary' onClick={()=>{this.showAddModal(0)}}>
                    添加根类别
                </Button>
            </div>
        )
    }
}
export default withRouter(NoteCategory) 

树文件 treeMenu

import React from "react";
import { Collapse, List ,SwipeAction, Toast,Modal} from "antd-mobile";
import { Icon } from 'antd';
const genExtra = () => (
  <Icon
    type="setting"
    onClick={event => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    }}
  />
);

class TreesMenu extends React.Component {
  render() {
    let datas = this.props.datas;
    console.log(this.props)
    return (
      <div>
        {datas instanceof Array ? (
          <div>
            {datas.map((d, index) => {
              return <TreeNode datas={d} key={d.id} 
              
              clickOnAdd={(data)=>{this.props.clickOnAdd(data)}}
              clickOnEdit={(data)=>{this.props.clickOnEdit(data)}}
              clickOnDelete={(data)=>{this.props.clickOnDelete(data)}}
              onselected={(item) => this.props.onselected(item)}></TreeNode>;
            })}
          </div>
        ) : (
          <div>请传入正确格式</div>
        )}
      </div>
    );
  }
}

export default TreesMenu;

class TreeNode extends React.Component {
  
  render() {
    let data = this.props.datas;
    return data && (!data.children || data.children.length === 0) ? (
      <div>
        <List className="my-list" onClick={() => {
            this.props.onselected(data)
        }}>
           <SwipeAction
                        key={data.id}
                        rightActions={[
                            {
                                key: 'edit',
                                text: '编辑',
                                color: 'primary',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnEdit(data)
                              },
                              {
                                key: 'add',
                                text: '添加',
                                color: 'warning',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnAdd(data.id)
                              },
                           
                            {
                              key: 'delete',
                              text: '删除',
                              color: 'danger',
                              onClick:()=> {Modal.confirm({
                                content: '是否删除笔记类别',
                                onConfirm: async () => {
                                  await this.props.clickOnDelete(data.id)
                                  Toast.show({
                                    icon: 'success',
                                    content: '提交成功',
                                    position: 'bottom',
                                  })
                                },
                            })}
                            }
                            ,                       
                          ]}
                        >
          <List.Item>{data.title}</List.Item>
          </SwipeAction>
        </List>
      </div>
    ) : (
      <div>
        <SwipeAction
                        key={data.id}
                        leftActions={[
                            {
                                key: 'edit',
                                text: '编辑',
                                color: 'primary',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnEdit(data)
                              },
                              {
                                key: 'add',
                                text: '添加',
                                color: 'warning',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnAdd(data.id)
                              },
                           
                            {
                              key: 'delete',
                              text: '删除',
                              color: 'danger',
                              onClick:()=> {Modal.confirm({
                                content: '是否删除笔记类别',
                                onConfirm: async () => {
                                  await this.props.clickOnDelete(data.id)
                                  Toast.show({
                                    icon: 'success',
                                    content: '提交成功',
                                    position: 'bottom',
                                  })
                                },
                            })}
                            }
                            ,                       
                          ]}
                        >
        <Collapse  >
        
          <Collapse.Panel title={data.title} key={data.id} forceRender='true'  className="tree-accordion-panel"  >
            {data && data.children && data.children.map(item=> {
            return <TreeNode datas={item}  key={item.id}
            clickOnAdd={(data)=>{this.props.clickOnAdd(data)}}
              clickOnEdit={(data)=>{this.props.clickOnEdit(data)}}
              clickOnDelete={(data)=>{this.props.clickOnDelete(data)}}
              ></TreeNode>;
            })}
         
          </Collapse.Panel>
          
        </Collapse>
        </SwipeAction>
      </div>
    );
  }
}