后台表格管理

Posted 2021-01-01 bokeyuan1231

import React, { Component } from ‘react‘;
import ‘../assets/css/App.css‘;
import ‘../assets/css/Myone.css‘;
import ‘element-theme-default‘;

import { Button,Table } from ‘element-react‘;


class Myone extends Component {

    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    type: ‘selection‘
                },
                {
                    label: "ID",
                    prop: "uid",
                    width: 160
                },
                {
                    label: "姓名",
                    prop: "nickname",
                    width: 160
                },
                {
                    label: "手机号码",
                    prop: "cellphone",
                    width: 160
                },
                {
                    label: "日期",
                    prop: "times",
                    width: 160
                },
                {
                    label: "手机号码",
                    prop: "cellphone",
                    width: 160
                },
                {
                    label: "操作",
                    fixed: ‘right‘,
                    render: (row, column, index) => {
                        return <span><Button type="text" size="small" onClick={this.deleteRow.bind(this, index)}>移除</Button></span>
                    }
                },
                {
                    label: "操作",
                    fixed: ‘right‘,
                    render: (row, column, index) => {
                        return <span><Button type="text" size="small" onClick={this.selectRow.bind(this, row.uid)}>查看</Button></span>
                    }
                },
                {
                    label: "操作",
                    fixed: ‘right‘,
                    render: (row, column, index) => {
                        return <span><Button type="text" size="small" onClick={this.updateRow.bind(this, row.uid)}>修改</Button></span>
                    }
                }
            ],
            data: [],
            list:[],
            username:[],
            password:[],
            phone:[]
        }
    }
    deleteRow(index) {
        const { data } = this.state;
        data.splice(index, 1);
        this.setState({
            data: [...data]
        })
    }

    createRow(){
        fetch(‘ http://fxc.glbuys.com/api/admin/users/add?token=79cee06eb8a4e0b489‘,{
            method: ‘post‘,
            mode:‘cors‘,
            headers: {
                ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
            },
            body:"cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then(res=>{
            return res.json();
        }).then(json=>{
            console.log(json);
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    selectRow(uid){
        fetch(‘http://fxc.glbuys.com/api/admin/users/details?uid=‘+uid+‘&token=79cee06eb8a4e0b489‘,{
            method:‘get‘
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setState({list:json.data},()=>{
                    console.log(this.state.list.nickname)
                })
            }
        })
    }

    updateRow(uid){
        fetch(‘http://fxc.glbuys.com/api/admin/users/details?uid=‘+uid+‘&token=79cee06eb8a4e0b489‘,{
            method:‘get‘
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setState({
                    name:json.data.nickname,
                    phone:json.data.cellphone,
                    uid:json.data.uid
                })

            }
        })
    }
    updatealt(uid){
        fetch(‘http://fxc.glbuys.com/api/admin/users/mod?token=79cee06eb8a4e0b489‘,{
            method:‘post‘,
            mode:‘cors‘,
            headers:{
                ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
            },
            body:"uid="+uid+"&cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    componentDidMount() {
        fetch(‘http://fxc.glbuys.com/api/admin/users/lists?page=1&token=79cee06eb8a4e0b489‘, {
            method: ‘get‘
        }).then((res) => {
            return res.json();
        }).then((json) => {
            if(json.code==200){
                this.setState({data:json.data},()=>{
                    // console.log(this.state.data)
                })
            }
        })

    }



  render() {
    return (
      <div className="Myone">


          <Table

              columns={this.state.columns}
              data={this.state.data}
              border={true}
              height={250}
              onSelectChange={(selection) => { console.log(selection) }}
              onSelectAll={(selection) => { console.log(selection) }}
          />
            <from>
                昵称：<input type="text" defaultValue={this.state.name} onChange={e=>{this.setState({username:e.target.value})}}/><br/>
                密码：<input type="password" onChange={e=>{this.setState({password:e.target.value})}}/><br/>
                手机号：<input type="text" defaultValue={this.state.phone} onChange={e=>{this.setState({phone:e.target.value})}}/><br/>
                <button type="button" onClick={this.createRow.bind(this)}>注册</button>
                <button type="button" onClick={this.updatealt.bind(this,this.state.uid)}>修改</button>
            </from>




      </div>
    );
  }
}
export default Myone;