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><Modaltitle="编辑用户"visible={this.state.visible}onOk={this.handleOk}onCancel={this.handleCancel}>             {/* 编辑弹窗内表单 */}<Formname="basic"initialValues={{remember: true ,email: this.state.putUsersParams.email,mobile: this.state.putUsersParams.mobile,}}// onFinish={this.onFinish}// onFinishFailed={this.onFinishFailed}><Form.Itemlabel="Email"name="email"           ><Input label="Email"name="email"value={this.state.putUsersParams.email}onChange={this.changeEditModalFn.bind(this)}  placeholder='Email'/></Form.Item><Form.Itemlabel="Mobile"name="mobile"                ><Inputlabel="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.usersdata = [{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.stategetUser.pagenum = pagethis.setState({getUser}, () => {this.props.get(this.state.getUser)})}// 更新编辑弹框数据changeEditModalFn(e) {// 1. 获取name属性值// 2. 获取表单数据console.log(e.target.value)let value = e.target.valuelet 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;}
`

三、效果

React模拟后台项目（八）user页面文件配置相关推荐

项目中统一日志文件配置
1.统一日志处理的目的: 将日志记录在文件中,方便运维和开发做错误排查文件日志需要做滚动输出(输出到更多的日志文件中),避免单日志体积过大,拖垮服务器可以方便的在开发环境和生产环境等环境中切换输出 ...
创建springboot项目关于applica.properties文件配置
这里写自定义目录标题 springboot项目application.properties配置 src->main->resources->application.propertie ...
使用react实现后台管理系统项目
一.开发React必须依赖三个库 1.react:包含react所必须的核心代码 2.react-dom:react渲染在不同平台所需要的核心代码 3.babel:将jsx转换成React代码的工具 ...
Struts项目中前端页面向后台页面传参中文出现乱码（Get请求）
问题描述:Struts项目中前端页面向后台页面传递中文参数值,中文值传递到后台后出现乱码并且以???形式出现解决方法: 1.前端页面js文件中使用encodeURI()方法将所传递的中文值加密起来( ...
【react实战小项目：笔记】用React 16写了个订单页面
视频地址 React 16 实现订单列表及评价功能简介:React 以其组件化的思想在前端领域大放异彩,但其革命化的前端开发理念对很多 React 初学者来说, 却很难真正理解和应用到真实项目中.本 ...
Nuxt - 自定义页面布局，＜Nuxt /＞个性化多套模板（一个项目内既要有用户正常浏览的普通页面，又要存在后台管理系统布局的页面）
前言使用 Nuxt.js 开发项目时,遇到了带 "后台管理" 的功能,即一个正常供用户浏览的页面,点击控制台或个人中心进入后台管理界面,里面为菜单和主体内容的左右布局,点击菜单跳 ...
【甄选靶场】Vulnhub百个项目渗透——项目八：IMF-1（文件上传，缓冲区溢出）
Vulnhub百个项目渗透靶场环境提取码:rong Vulnhub百个项目渗透--项目八:IMF-1(文件上传,缓冲区溢出)
vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备
前端开发完成的项目,不管是使用vue.react.或者是别的web项目,最终都是要部署到外网上,让用户可以通过域名来访问.这篇文章以一个 react 移动端的项目为例,讲怎样将自己本地的项目部署到阿里 ...
Dva + React + Mock 搭建项目（主要讲解DvaJs）
一.初始化dva 1.安装 dva-cli $ npm install dva-cli -g $ dva -v dva-cli version 0.9.1 2.创建新应用安装完 dva-cli 之后 ...

React模拟后台项目（八）user页面文件配置

React模拟后台项目（八）user页面文件配置相关推荐

最新文章

热门文章