| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391 | 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 } = Tabsconst FormItem = Form.Itemclass 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;
 |