kede-client/js/component/manageCenter/set/workeTimes/index.jsx

import React, { Component } from "react";
import $ from "jquery/src/ajax";
import { Button, Form, Icon, Input, message, Modal, Spin, Table, Tabs, TimePicker, InputNumber, Popconfirm } from "antd";

import moment from 'moment';
import { getCondition } from "../../../tools";
import { data } from "jquery";

const { TabPane } = Tabs
const FormItem = Form.Item

class WorkeTimes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      loading: false,
      timeTypeId: '',
      start: '08:30',
      restStart: '12:00',
      restEnd: '13:30',
      end: '17:30',
      typeNum: '',
      minHours: '4',
      columns: [
        {
          title: '类型名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '类型代号',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '上班时间',
          dataIndex: 'start',
          key: 'start',
        },
        {
          title: '下班时间',
          dataIndex: 'end',
          key: 'end',
        },
        {
          title: '午休开始时间',
          dataIndex: 'restStart',
          key: 'restStart',
        },
        {
          title: '午休结束时间',
          dataIndex: 'restEnd',
          key: 'restEnd',
        },
        {
          title: '最小公出时长（小时）',
          dataIndex: 'minHours',
          key: 'minHours',
        },
        {
          title: '操作',
          dataIndex: 'id',
          key: 'id',
          render: (text, record) => {
            return (
              <div>
                <Popconfirm
                  title="是否删除?"
                  onConfirm={_ => {
                    this.remove(text);
                  }}
                  okText="删除"
                  cancelText="不删除"
                >
                  <Button loading={this.state.removeLoading} type='dashed' onClick={(e) => { e.stopPropagation() }}>删除</Button>
                </Popconfirm>
                <Button style={{ marginLeft: 20 }} type='primary' onClick={(e) => { e.stopPropagation(), this.edit(record) }}>修改</Button>
              </div>
            )
          }
        }
      ]
    }
    this.loadData = this.loadData.bind(this);
    this.submit = this.submit.bind(this);
    this.remove = this.remove.bind(this);
    this.onCancel = this.onCancel.bind(this);
  }

  loadData() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/department/workingHours/list',
      data: {},
      success: function (data) {
        if (data.error.length === 0) {
          this.setState({
            list: data.data
          })
        } else {
          message.warning(data.error[0].message)
        }
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  }

  submit() {
    if (!this.state.typeName) {
      message.warning('请填写类型名称')
      return;
    }
    if (!this.state.typeNum && this.state.typeNum != 0) {
      message.warning('请填写类型代号')
      return;
    }
    if (!this.state.start) {
      message.warning('请选择上班时间')
      return;
    }
    if (!this.state.restStart) {
      message.warning('请选择午休开始时间')
      return;
    }
    if (!this.state.restEnd) {
      message.warning('请选择午休结束时间')
      return;
    }
    if (!this.state.end) {
      message.warning('请选择下班时间')
      return;
    }
    if (!this.state.minHours && this.state.minHours != 0) {
      message.warning('请填写最小公出时长')
      return;
    }
    this.setState({
      addLoading: true
    })
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context +
        (!this.state.timeTypeId
          ? '/api/admin/department/workingHours/add'
          : '/api/admin/department/workingHours/update'),
      data: {
        id: !this.state.timeTypeId ? undefined : this.state.timeTypeId,
        name: this.state.typeName,
        start: this.state.start,
        restStart: this.state.restStart,
        restEnd: this.state.restEnd,
        end: this.state.end,
        type: this.state.typeNum,
        minHours: this.state.minHours,
      },
    }).done(function (data) {
      this.setState({
        addLoading: false
      });
      if (data.error.length === 0) {
        message.success('操作成功！');
        this.onCancel();
        this.loadData();
      } else {
        message.warning(data.error[0].message);
      }
    }.bind(this));
  }

  remove(id) {
    this.setState({
      removeLoading: true
    })
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/department/workingHours/delete',
      data: {
        id
      }
    }).done(function (data) {
      this.setState({
        removeLoading: false
      });
      if (data.error.length === 0) {
        message.success('删除成功！');
        this.loadData();
      } else {
        message.warning(data.error[0].message);
      }
    }.bind(this));
  }

  edit(obj) {
    this.setState({
      visible: true,
      timeTypeId: obj.id,
      typeName: obj.name,
      typeNum: obj.type,
      start: obj.start,
      end: obj.end,
      restStart: obj.restStart,
      restEnd: obj.restEnd,
      minHours: obj.minHours,
    })
  }

  onCancel() {
    this.setState({
      visible: false,
      typeName: '',
      timeTypeId: '',
      start: '08:30',
      restStart: '12:00',
      restEnd: '13:30',
      end: '17:30',
      typeNum: '',
      minHours: '4',
    })
  }

  componentDidMount() {
    this.loadData();
  }

  render() {
    return (
      <div className="user-content" >
        <div className="content-title">
          <Tabs
            defaultActiveKey="1"
            className="test">
            <TabPane tab="操作" key="1">
              <div className="user-search">
                <Button
                  type="primary"
                  className="addButton"
                  onClick={() => {
                    this.setState({
                      visible: true,
                      timeTypeId: '',
                    })
                  }}
                  style={{ marginBottom: '10px', float: 'left' }}>
                  新增
                  <Icon type="plus" />
                </Button>
              </div>
            </TabPane>
          </Tabs>
        </div>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table size="middle" columns={this.state.columns}
              dataSource={this.state.list}
              style={{
                cursor: 'pointer',
              }}
              pagination={null}
              onRowClick={() => {

              }} />
          </Spin>
        </div>
        <Modal
          maskClosable={false}
          visible={this.state.visible}
          onOk={this.onCancel}
          onCancel={this.onCancel}
          width='600px'
          title={this.state.timeTypeId ? '编辑作息时间' : '增加作息时间'}
          footer=''
          className="admin-desc-content">
          <div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="类型名称" >
                <Input placeholder="请填写组织名称" value={this.state.typeName}
                  onChange={(e) => { this.setState({ typeName: e.target.value }) }} />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="类型代号" >
                <InputNumber
                  style={{ width: '100px' }}
                  min={0}
                  placeholder="请填写类型代号"
                  value={this.state.typeNum}
                  onChange={(e) => {
                    this.setState({ typeNum: e })
                  }} />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="上班时间" >
                <TimePicker defaultValue={moment('8:30', 'HH:mm')} value={moment(this.state.start, 'HH:mm')} format='HH:mm' onChange={(time, timeString) => {
                  this.setState({
                    start: timeString
                  })
                }} />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="下班时间" >
                <TimePicker defaultValue={moment('17:30', 'HH:mm')} value={moment(this.state.end, 'HH:mm')} format='HH:mm' onChange={(time, timeString) => {
                  this.setState({
                    end: timeString
                  })
                }} />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="午休开始时间" >
                <TimePicker defaultValue={moment('12:00', 'HH:mm')} value={moment(this.state.restStart, 'HH:mm')} format='HH:mm' onChange={(time, timeString) => {
                  this.setState({
                    restStart: timeString
                  })
                }} />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="午休结束时间" >
                <TimePicker
                  format='HH:mm'
                  defaultValue={moment('13:30', 'HH:mm')}
                  value={moment(this.state.restEnd, 'HH:mm')}
                  onChange={(time, timeString) => {
                    this.setState({
                      restEnd: timeString
                    })
                  }} />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
                label="最小公出时长" >
                <InputNumber
                  style={{ width: '100px' }}
                  min={0}
                  placeholder="请填写最小公出时长（小时）"
                  value={this.state.minHours}
                  onChange={(e) => {
                    this.setState({ minHours: e })
                  }} />
              </FormItem>
            </div>
            <div className="clearfix" style={{ display: 'flex', justifyContent: 'center' }}>
              <Button type="primary" onClick={this.submit} loading={this.state.addLoading}>
                确定添加
              </Button>
            </div>
          </div>
        </Modal>
      </div>
    )
  }
}

export default WorkeTimes;