React模拟后台项目(八)user页面文件配置

一、用户页面 src/pages/user/index.js

// 导入库
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
  getUsersData,
  deleteUsersData,
  putUsersData,
} from './store/actionCreators'
import { withRouter } from  'react-router-dom'

// 导入样式
import {
    UsersDiv,
    UsersSearch,
    UsersTable,
} from './style.js'

// 导入UI框架
// 卡片,按钮,搜索,日期,表格,分页,编辑弹框,编辑输入框
import {
    Card, 
    Button,
    Input,
    DatePicker,
    Table, 
    // Tag,
    Pagination,
    Modal,
    // 弹窗Form表单
    Form,
    // 开关
    Switch,
} from 'antd';
// 删除 字体图标
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

// 输入框 搜索
const { Search } = Input;
// 日期
const { RangePicker } = DatePicker;
//导入弹框


// 分页
// function onShowSizeChange(current, pageSize) {
//     console.log(current, pageSize);
// }



class Orders extends Component {
    constructor(props){
      super(props)
      this.state = {
        // 获取用户数据
        getUser:{
            query:'',
            pagenum:1,
            pagesize:3
        },
        // 存放修改弹框默认数据
        putUsersParams: {
          email: '',
          mobile: ''
        }
      }
    }
    // 状态开关
    onChange = checked => {
      console.log(`switch to ${checked}`);
    }
    // 删除
    showDeleteConfirm = (id) => {
      confirm({
        title: 'Are you sure delete this task?',
        icon: <ExclamationCircleOutlined />,
        content: 'Some descriptions',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk: () => {
          // console.log('OK');
          this.props.deleteUsersData(id, () => {
            this.props.get(this.state.getUser)
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      })
    }
    state = {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
    // 弹框
    state = { visible: false };
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
    
    handleOk = () => {
      console.log('handleOk')
      let {
          putUsersParams
      } = this.state
      // 编辑请求接口
      this.props.putUsersFn(putUsersParams.id, putUsersParams, () => {
          // 隐藏弹框
          this.setState({
            visible: false,
          });

          // 重新获取数据
          this.props.get(this.state.putUsersParams)
      })
      // this.setState({
      //   ModalText: 'The modal will be closed after two seconds',
      //   confirmLoading: true,
      // });
      // setTimeout(() => {
      //   this.setState({
      //     visible: false,
      //     confirmLoading: false,
      //   });
      // }, 1000);
    };
    
    handleCancel = () => {
      console.log('Clicked cancel button');
      this.setState({
        visible: false,
      });
    };
    // 编辑弹窗  Form表单
    layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };
    
    onFinish = values => {
      console.log('Success:', values);
    };
    
    onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    // 日期
    onDataChange = (value, dateString) => {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    };
    // 表格
  columns = [
    {
      title: 'ID',
      dataIndex:'id',
      key: 'id',
    },
    {
      title: '名字',
      dataIndex:'username',
      key: 'username',
    },
    {
      title: '角色名字',
      dataIndex: 'role_name',
      key: 'role_name',
      render: text => <a href='/#'>{text}</a>,
    },
    {
      title: 'Mobile',
      dataIndex: 'mobile',
      key: 'mobile',
    },
    {
      title: 'email',
      dataIndex: 'email',
      key: 'email',     
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      key: 'is_active',
      render:((val, record) => {
        return <Switch defaultChecked={val} onChange={this.onChange} />
      })
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        
        <span>
          <div style={{width: 70, float: "left"}}>
            <Button type="primary" onClick={()=>
              {
                this.setState({putUsersParams: record, visible:true}, ()=>{console.log(this.state)}) 
              }
            }>
              编辑
            </Button>
            <Modal
              title="编辑用户"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >             
              {/* 编辑弹窗内表单 */}
              <Form
                name="basic"
                initialValues={{
                  remember: true ,
                  email: this.state.putUsersParams.email,
                  mobile: this.state.putUsersParams.mobile,
                }}
                // onFinish={this.onFinish}
                // onFinishFailed={this.onFinishFailed}
              >
                <Form.Item
                  label="Email"
                  name="email"           
                >
                  <Input 
                    label="Email"
                    name="email"
                    value={this.state.putUsersParams.email}
                    onChange={this.changeEditModalFn.bind(this)}  
                    placeholder='Email'
                  />
                </Form.Item>

                <Form.Item
                  label="Mobile"
                  name="mobile"                
                >
                  <Input
                    label="Mobile"
                    name="mobile" 
                    value={this.state.putUsersParams.mobile}
                    onChange={this.changeEditModalFn.bind(this)}
                    placeholder='Mobile'
                  />
                </Form.Item>
              </Form>
            </Modal>
          </div>
          <div style={{width: 70, float: 'left'}}>
            {/* 删除按钮 */}
            <Button onClick={this.showDeleteConfirm.bind(this, record.id)} type="dange">
              删除
            </Button>
          </div>
        </span>
      ),
    },
  ];
    // table数据
    // data = this.props.usersState.users
    data = [
      {id: 1, username: 'John Brown'},
      {id: 2, username: 'John Brown'},
      {id: 3, username: 'John Brown'},
      {id: 4, username: 'John Brown'},
      {id: 5, username: 'John Brown'},
      {id: 6, username: 'John Brown'}
    ];
    render() {
        return (
            <UsersDiv>
                <Card title="用户列表" extra={<Button type="dashed">导出表格</Button>}>
                <UsersSearch>
                    {/* 搜索框 */}
                    <div className="inputSearch" style={{width: 300, float: "left"}}>
                        <Search placeholder="input search text" onSearch={value => console.log(value)} enterButton/>                                                    
                    </div>
                    {/* 添加用户 */}
                    <Button 
                    type="primary" 
                    className="buttonAdd"
                    onClick={()=>{
                      this.props.history.push('/admin/users/create')
                    }}>添加用户</Button>
                    {/* 打印表格 */}
                    <Button type="primary" className="buttonInput">打印表格</Button>
                    {/* 日期 */}
                    <RangePicker showTime className="date" onChange={this.onDataChange}/>
                </UsersSearch>

                {/* 表格部分 */}
                <UsersTable>
                    {/* 表格 */}
                    <Table 
                    columns={this.columns} 
                    // dataSource={this.props.usersState.users} 
                    dataSource={this.data} 
                    pagination={false}
                    rowKey={ record => record.id }
                    />
                    {/* 分页 */}
                    <div className="page">
                        <Pagination
                        // showSizeChanger
                        // onShowSizeChange={onShowSizeChange}

                        defaultCurrent={this.state.getUser.pagenum}
                        pageSize={this.state.getUser.pagesize}
                        // total={this.props.usersStateTotal}
                        total={6}
                        onChange={this.pageChangeFn.bind(this)}
                        />
                    </div>
                </UsersTable>
                </Card>
            </UsersDiv>
        )
    }
    // 页面加载完成 
    componentDidMount(){
        this.props.get(this.state.getUser)
    }
    // 分页
    pageChangeFn(page, pageSize){
      console.log(page, pageSize)
      let {getUser} = this.state
      getUser.pagenum = page
      this.setState({
        getUser
      }, () => {
        this.props.get(this.state.getUser)
      })
    }
    // 更新编辑弹框数据
    changeEditModalFn(e) {
      // 1. 获取name属性值
      // 2. 获取表单数据
      console.log(e.target.value)
      let value = e.target.value
      let name = e.target.name

      // 3. 导出
      let {putUsersParams} = this.state
      // putUsersParams.email = value
      // putUsersParams.mobile = value
      // putUsersParams.name = value 
      // 留心:不能直接  对象.变量名 = 值
      // 解决:         对象[变量名] = 值
      putUsersParams[name] = value
      // 4. 更新
      this.setState({
          putUsersParams
      })
  }
}
// 高阶组件
const mapStateToProps = state => {    //state为仓库数据
  return {
    usersState: state.toJS().users.data,
    // 数据总条数
    usersStateTotal: state.toJS().users.data.total
  }
}

const mapDispatchToProps = dispatch => {
  return {
    get:params => dispatch(getUsersData(params)),  //用于获取更新仓库数据
    deleteUsersData:(id, callback) => dispatch(deleteUsersData(id, callback)), 
    putUsersFn: (id, params, callback) => dispatch(putUsersData(id, params, callback))
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Orders))


二、 样式文件 src/pages/user/style.js

import styled from 'styled-components';

// 整体
export const UsersDiv = styled.div`
    width: 100%;
    margin: 0 auto;
    height: 100%;
`
// 搜索一行
export const UsersSearch = styled.div`
    width: 98%;
    margin: 0 auto;
    .buttonAdd{
        float: left;
        margin: 0 10px;
    }
    .date{
        float: right;
    }
`
// Table表格
export const UsersTable = styled.div`
    width: 98%;
    margin: 0 auto;
    margin-top: 20px;
    // 分页
    .page{
        float: right;
        margin-top: 20px;
    }
`

三、 效果
在这里插入图片描述

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页