（记录笔记10）——10.1 员工管理

最新推荐文章于 2024-06-18 21:18:04 发布
最新推荐文章于 2024-06-18 21:18:04 发布
阅读量420 收藏
点赞数
分类专栏： S.AntD后台项目 文章标签： react.js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/87159234
版权

文章目录

一 基础页面部分

Github地址

1.1 easy-mock: user/list 用户列表

{
  "code": 0,
  "msg": "",
  "result": {
    "item_list|100": [{
      "id|+1": 1,
      "username": "@cname",
      "sex|1-2": 1,
      "state|1-5": 1,
      "interest|1-8": 1,
      "isMarried|0-1": 1,
      "birthday": "2000-01-01",
      "address": "北京市海淀区",
      "time": "09:00:00"
    }],
    page: 1,
    page_size: 10,
    total: 30
  }
}

1.2 实例代码

import React from 'react';
import {Card, Button} from "antd";
import axios from './../../axios';
import Utils from './../../utils/utils';
import ETable from './../../components/ETable';
import BaseForm from './../../components/BaseForm';

export default class User extends React.Component {

  params = {
    page: 1
  };

  state = {

  }

  formList = [
    {
      type: 'INPUT',
      label: '用户名',
      field: 'user_name',
      placeholder: '请输入用户名称',
      width: 130,
    }, {
      type: 'INPUT',
      label: '用户手机号',
      field: 'user_mobile',
      placeholder: '请输入用户手机号',
      width: 140,
    }, {
      type: 'DATE',
      label: '请选择入职日期',
      field: 'user_date',
      placeholder: '请输入日期',
    }
  ];

  componentDidMount() {
    this.requestList();
  }

  // 处理表单查询
  handleFilter = (params) => {
    this.params = params; // 从子组件传来的值赋值给 params
    this.requestList();
  };

  requestList = () => {
    axios.requestList(this, '/user/list', this.params, true);
  };


  render() {
    const columns = [
      {
        title: 'id',
        dataIndex: 'id'
      }, {
        title: '用户名',
        dataIndex: 'username'
      }, {
        title: '性别',
        dataIndex: 'sex',
        render(sex) {
          return sex === 1 ? '男' : '女';
        }
      }, {
        title: '状态',
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': "咸?一条",
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      }, {
        title: '爱好',
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      }, {
        title: '生日',
        dataIndex: 'birthday'
      }, {
        title: '联系地址',
        dataIndex: 'address'
      }, {
        title: '早起时间',
        dataIndex: 'time'
      },
    ];
    return (
      <div>
        <Card>
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
        </Card>

        <Card style={{marginTop: 10}}>
          <Button type="primary">创建员工</Button>
          <Button type="primary" style={{marginLeft: 20}}>编辑员工</Button>
          <Button type="primary" style={{marginLeft: 20}}>员工详情</Button>
          <Button type="danger" style={{marginLeft: 20}}>删除员工</Button>
        </Card>

        <div className="content-wrap">
          <ETable
            columns={columns}
            updateSelectedItem={Utils.updateSelectedItem.bind(this)}
            selectedRowKeys={this.state.selectedRowKeys}
            selectedItem={this.state.selectedItem}
            dataSource={this.state.list}
            pagination={this.state.pagination}
          />
        </div>
      </div>
    );
  }
}

二 增加弹框功能

Github

关闭footer footer={null}

使用时,要看接口返回的是什么类型

value = ‘1’ 字符串类型1

value = {1} 数字类型1

2.1 数据接口

easy-mock :user/add 添加员工

{
  "code": 0,
  "result": "Ok"
}

user/edit:用户编辑

{
  "code": 0,
  "result": 'Ok'
}

user/delete:用户删除

{
  "code": 0
}

点击提交清除表单数据:

this.userForm.props.form.resetFields();

2.2 实例代码

import React from 'react';
import {Card, Button, Modal, Form, Input, Radio, Select, DatePicker} from "antd";
import axios from './../../axios';
import Utils from './../../utils/utils';
import ETable from './../../components/ETable';
import BaseForm from './../../components/BaseForm';
import moment from "moment";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const {TextArea} = Input;

export default class User extends React.Component {

  params = {
    page: 1
  };

  state = {
    isVisible: false
  };

  formList = [
    {
      type: 'INPUT',
      label: '用户名',
      field: 'user_name',
      placeholder: '请输入用户名称',
      width: 130,
    }, {
      type: 'INPUT',
      label: '用户手机号',
      field: 'user_mobile',
      placeholder: '请输入用户手机号',
      width: 140,
    }, {
      type: 'DATE',
      label: '请选择入职日期',
      field: 'user_date',
      placeholder: '请输入日期',
    }
  ];

  componentDidMount() {
    this.requestList();
  }

  // 处理表单查询
  handleFilter = (params) => {
    this.params = params; // 从子组件传来的值赋值给 params
    this.requestList();
  };

  requestList = () => {
    axios.requestList(this, '/user/list', this.params, true);
  };

  // 功能区操作
  handleOperate = (type) => {
    let item = this.state.selectedItem;
    if (type == 'create') {
      this.setState({
        type,
        isVisible: true,
        title: '创建员工'
      });
    } else if (type == 'edit') {
      if (!item) {
        Modal.info({
          title: '提示',
          content: '请选择一个用户'
        });
        return;
      }
      this.setState({
        type,
        isVisible: true,
        title: '编辑员工',
        userInfo: item
      });
    } else if (type == 'detail') {
      if (!item) {
        Modal.info({
          title: '提示',
          content: '请选择一个用户'
        });
        return;
      }

      this.setState({
        type,
        isVisible: true,
        title: '员工详情',
        userInfo: item
      });
    } else {
      if (!item) {
        Modal.info({
          title: '提示',
          content: '请选择一个用户'
        });
        return;
      }
      let _this = this;
      Modal.confirm({
        title: '确认删除',
        content: '是否要删除当前选中的员工' + item.id,
        onOk() {
          axios.ajax({
            url: '/user/delete',
            data: {
              params: {
                id: item.id
              }
            }
          }).then((res) => {
            if (res.code == 0) {
              _this.setState({
                isVisible: false,
                // selectedRowKeys:'' // 点击删除,单选框失去焦点:  空: null ''   参考网址https://blog.csdn.net/oscar999/article/details/9353713
              });
              _this.requestList();
            }
          });
        }
      });
    }
  };

  // 创建员工提交
  handleSubmit = () => {
    let type = this.state.type;
    let data = this.userForm.props.form.getFieldsValue();
    axios.ajax({
      url: type == 'create' ? '/user/add' : '/user/edit',
      data: {
        params: data
      }
    }).then((res) => {
      if (res.code == 0) {
        this.userForm.props.form.resetFields();
        this.setState({
          isVisible: false,
          // selectedRowKeys:'' // 查询完后,单选框失去焦点
        });
        this.requestList();
      }
    });
  };

  render() {
    const columns = [
      {
        title: 'id',
        dataIndex: 'id'
      }, {
        title: '用户名',
        dataIndex: 'username'
      }, {
        title: '性别',
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女';
        }
      }, {
        title: '状态',
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': "咸?一条",
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      }, {
        title: '爱好',
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      }, {
        title: '生日',
        dataIndex: 'birthday'
      }, {
        title: '联系地址',
        dataIndex: 'address'
      }, {
        title: '早起时间',
        dataIndex: 'time'
      },
    ];

    let footer = {};

    if (this.state.type == 'detail') {
      footer = {
        footer: null
      };
    }

    return (
      <div>
        <Card>
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
        </Card>

        <Card style={{marginTop: 10}} className="operate-wrap">
          <Button type="primary" icon="plus" onClick={() => this.handleOperate('create')}>创建员工</Button>
          <Button type="primary" icon="edit" onClick={() => this.handleOperate('edit')}>编辑员工</Button>
          <Button type="primary" onClick={() => this.handleOperate('detail')}>员工详情</Button>
          <Button type="danger" icon="delete" onClick={() => this.handleOperate('delete')}>删除员工</Button>
        </Card>

        <div className="content-wrap">
          <ETable
            columns={columns}
            updateSelectedItem={Utils.updateSelectedItem.bind(this)}
            selectedRowKeys={this.state.selectedRowKeys}
            selectedItem={this.state.selectedItem}
            dataSource={this.state.list}
            pagination={this.state.pagination}
          />
        </div>
        <Modal
          title={this.state.title}
          visible={this.state.isVisible}
          onOk={this.handleSubmit}
          onCancel={() => {
            this.userForm.props.form.resetFields();
            this.setState({
              isVisible: false,
              userInfo: ''
            });
          }}
          width={600}
          {...footer}
        >
          <UserForm type={this.state.type} userInfo={this.state.userInfo}
                    wrappedComponentRef={(inst) => this.userForm = inst}/>
        </Modal>
      </div>
    );
  }
}

class UserForm extends React.Component {

  getState = (state) => {
    let config = {
      '1': "咸?一条",
      '2': '风华浪子',
      '3': '北大才子一枚',
      '4': '百度FE',
      '5': '创业者',
    };
    return config[state];
  };

  render() {
    let type = this.props.type;
    let userInfo = this.props.userInfo || {};
    const formItemLayout = {
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 19
      }
    };

    const {getFieldDecorator} = this.props.form;
    return (
      <Form layout="horizontal">
        <FormItem label="用户名" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.username :
              getFieldDecorator('user_name', {
                initialValue: userInfo.username
              })(
                <Input type="text" placeholder="请输入用户名"/>
              )
          }
        </FormItem>
        <FormItem label="性别" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.sex == 1 ? '男' : '女' :
              getFieldDecorator('sex', {
                initialValue: userInfo.sex
              })(
                <RadioGroup>
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </RadioGroup>
              )
          }
        </FormItem>
        <FormItem label="状态" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? this.getState(userInfo.state) :
              getFieldDecorator('state', {
                initialValue: userInfo.state
              })(
                <Select>
                  <Option value={1}>咸?一条</Option>
                  <Option value={2}>风华浪子</Option>
                  <Option value={3}>北大才子一枚</Option>
                  <Option value={4}>百度FE</Option>
                  <Option value={5}>创业者</Option>
                </Select>
              )
          }
        </FormItem>

        <FormItem label="生日" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.birthday :
              getFieldDecorator('birthday', {
                initialValue: moment(userInfo.birthday)
              })(
                <DatePicker format="YYYY-MM-DD"/>
              )}
        </FormItem>

        <FormItem label="联系地址" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.address :
              getFieldDecorator('address', {
                initialValue: userInfo.address
              })(
                <TextArea rows={3} placeholder="请输入联系地址"/>
              )}
        </FormItem>
      </Form>
    );
  }
}

UserForm = Form.create({})(UserForm);
小李科技
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端react框架员工管理系统
09-30
使用前端框架react，以及javascript实现的员工管理系统。
员工管理系统
06-30
技术要点： 1 此系统采用了目前最流行的ssm框架,其中的spingMVC框架相对于struts2框架更灵活，更安全。 2 本项目springMVC框架采用了注解映射器，使用了RESTful风格的url对系统发起http请求,开发更灵活。 3 同时使用了了hibernate提供的校验框架，对客户端数据进行校验！ 4 Mybati数据库DAO层采用的是Mapper代理开发方法，输入映射采用的是POJO包装类型实现,输出映射采用了resultMap类型，实现了数据库多对一映射。 5 spring容器内部使用拦截器，以Spring AOP的方式实现事务控制管理。 系统实体对象： 部门: 部门编号,部门名称 职位: 职位id,所属部门,职位名称,基本工资,销售提成 员工: 员工编号,职位,姓名,性别,员工照片,出生日期,学历,员工介绍
课题分享：共享单车管理系统，基于java+SSM+mysql
最新发布
zhongshu_luo的博客
06-18 898
在当今数字化时代，系统管理已经全面转向智能化操作，特别是通过计算机技术实现的。对于共享单车管理系统而言，它所涉及的管理和数据保存任务是相当繁重和复杂的。这种转变给管理者带来了前所未有的挑战。面对海量的信息，传统的管理系统往往依赖于手工笔记来记录详细的信息。随着时间的推移，电脑技术的引入，使得信息统计方式发生了革命性的变化。通过电脑上的专业输入软件，纸质记录的信息可以被转录到电脑中。尽管这种方式相比传统笔记有所进步，但在统计数据信息时仍然显得繁琐，并且受到时间和空间的限制。
react实例-增删改查 人员管理系统
01-09
react实例-增删改查 人员管理系统 有编译后的可直接运行的html文件，也有react组件后的js文件
软件建模与分析--共享单车管理系统
热门推荐
一顿吃不饱的博客
06-28 1万+
共享单车是一种自行车使用权租赁服务，是一种分时租赁方式，一种新型绿色环保共享经济。共享单车车身小巧，方便快捷，为群众的出行带来了很大的便利，解决了公共交通最后一公里的问题。不仅如此，共享单车费用低廉且功能齐全，又低碳环保，减少空气污染，极大的改善了交通拥堵问题。因此，为了人们更加方便的使用和管理共享单车，我开发了一个共享单车管理系统，本文将对该系统进行详细的建模与分析。首先，在进入共享单车管理系统后，系统会提示用户进行登录，若是第一次使用该系统，需要进行注册。在登录之后，系统会根据用户的位置显示附近可用的共
共享电动单车管理系统的设计与实现 计算机毕设源码08401
VX_ZYKJ985的博客
06-14 2831
共享电动单车管理系统主要功能模块包括站点信息、车辆信息、使用信息、订单信息等信息维护，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的主要存储单元，采用java技术、Ajax技术进行业务系统的编码及其开发，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。针对共享电动单车管理系统的各项需求以及技术问题进行分析，证明了系统的必要性和技术可行性，然后对设计系统....
罗宾斯——管理学笔记.doc
02-27
斯蒂芬·P·罗宾斯的《管理学》是这门学科的经典教材，其笔记涵盖了管理学的基本概念和核心要素。以下是根据文档内容提炼的关键知识点： 1. **管理者定义与分类**： - 管理者是组织中负责指挥他人活动的人，包括...
论文笔记模板——自用xmind模板
03-08
本资源提供了一份“论文笔记模板——自用xmind模板”，旨在帮助用户以更有序的方式整理和记录论文阅读心得。 Xmind是一款强大的思维导图软件，它以其直观的界面和丰富的功能深受用户喜爱，尤其适用于整理复杂信息和...
RRT学习笔记——记录
04-12
RRT学习笔记——记录
dubbo笔记——项目实战
02-24
存在2个系统，A系统和B系统，A系统调用B系统的接口获取数据，用于查询用户列表。安装zookeeper，解压（zookeeper-3.4.8.tar.gz）得到如下：然后进入conf将zoo_sample.cfg改名成zoo.cfg。并相关如下内容：该目录为...
共享单车管理系统
laojin1234的博客
06-21 637
（网页端）1、单车信息管理：管理员可以浏览所有单车的信息，并按照编号查询单车的借还情况（模糊查询），并可以增加新的单车。2、用户信息管理：管理员可以对用户信息进行删除、模糊查询。3、租金管理：可以查询用户缴纳的租金，统计租金总和。5、信息统计：可以对租金流水、拥有的押金、车辆统计、用车学生人数、借车人次进行统计。（安卓端app）普通用户可以实现以下功能：1、用户信息管理：实现用户的注册登录以及退出登录。2、单车租赁管理：进行借车、还车（此单车归还前不可借出），可以通过模糊查询单车编号进行租车。
springBoot制作web后台对接共享单车小程序
04-21
使用springBoot开发一个web后台程序，用于对接共享单车微信小程序，收集微信小程序产生的用户数据，以及单车的信息。
共享单车管理系统 c++
06-14
目前大家比较熟悉共享单车的使用。请编制一个共享单车的管理程序，实现如下基本功能。假设有5种品牌的共享单车（品牌内容自定）。 针对该5种品牌的共享单车，自行设计一套包含每种单车的品牌名称、投放量、投放点、某一时间点的在用数量、每辆车的每天骑行次数及单次里程和总里程、开锁过程中发现的损坏次数等信息(所有相关数据均自行设计)的数据结构； 随着骑行活动的开展，待使用单车的数量将发生变化。要求能对每种单车的使用数量及待使用的数量进行查询统计并输出； 对于某一投放点的某一品牌的单车，如果无备用车（待使用的车均为备用车），或备用车均为损坏的车，系统应能给出信息提示； 对于损坏报修的车辆，系统能够进行及时的统计，并能在投放数量中削减损坏车辆的数量，形成真实的有效投放量； 能够对客户信息进行处理，包括注册的用户名、电话号码、骑行里程、骑行习惯（比如70%以上的出行时间集中在某个时间段，时间段按时钟整点划分）、每天平均的骑行时间等； 该系统能进行当日使用状况的统计，请用链表排序（排序算法不限）提示交易使用次数排在前三名的单车品牌； 假设每种单车的使用是收费的，如第一个小时是免费的，第二个小时开始每小时收费0.5元，各品牌可各自推出优惠收费条件（优惠条件请自定义），然后根据假设的使用情况，统计出各种品牌的日营业额，并对各品牌的受欢迎程度进行排序。
vuejs入门实战--共享单车后台管理
06-29
技术要点:【vue-router+axios-api+element-ui+BaiduMap+echart+escript6】
共享单车后台管理web
04-08
基于react框架，引用蚂蚁金服组件，写的共享单车后台管理web端。
毕业设计 SpringBoot的共享单车管理系统
loop_yang123的博客
09-27 183
随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势；对于共享单车管理系统当然也不能排除在外，随着网络技术的不断成熟，带动了共享单车管理系统，它彻底改变了过去传统的管理方式，不仅使服务管理难度变低了，还提升了管理的灵活性。这种个性化的平台特别注重交互协调与管理的相互配合，激发了管理人员的创造性与主动性，对共享单车管理系统而言非常有利。
Java后台共享单车小程序
毕业设计大牛哥
05-22 128
系统登录：用户访问本系统时，通过获取用户微信权限，并以此来识别不同的用户信息。车辆管理：实现管理员对车辆信息的查看、添加、编辑或删除操作。系统首页：用户通过首页可进行搜索、浏览查看车辆详情信息等。查看车辆信息：实现用户通过程序首页停车点地图查看空闲车辆。区域管理：实现管理员对停车点的查看、添加、编辑或删除操作。订单管理：实现管理员对车辆信息的查看车辆使用情况的操作。扫码恢复运营：实现管理员对损坏车辆维修后的继续运营。换电记录：：实现管理员记录对于车辆换电池情况。维修记录：实现管理员对车辆维修的实时记录。
基于SSM的共享单车管理系统
10年大厂开发经验，项目资料、毕设指导和技术答疑，欢迎咨询交流！
12-11 1012
硬件不够完善，且存在部分安全隐患。近年来，国内共享单车火爆了起来，大量的小黄车以及其它样式的共享单车进入人们视野，各大网络新闻，地铁广告中随处可见，大家都对共享经济产生了浓厚的兴趣，今年又有共享充电宝，共享雨伞出现，共享概念已经成为市场的新宠儿。而一旦此系统投入使用，不仅可以减少单车管理人员的工作强度，提高工作效率，而且方便了企业对车辆的管理，极大限度的方便了共享单车管理人员，而且，目标系统不是很复杂，开发的周期较短，人员经济支出不大，所节省的大量人力、财力产生的效益将远远大于本管理系统的开发成本。
Oracle 10g开发与管理学习笔记
"Oracle 10g 开发与管理" Oracle 10g 是一款企业级的关系型数据库管理系统，本文档是一份由作者Mars在2012年学习Oracle数据库时编写的个人学习札记，适合初学者了解和掌握Oracle的基础知识。内容涵盖了Oracle的安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值