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";

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:'',
            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: 'id',
                    key: 'id',
                    render: text => { return (
                        <Popconfirm
                            title="是否删除?"
                            onConfirm={_ => {
                                this.remove(text);
                            }}
                            okText="删除"
                            cancelText="不删除"
                        >
                            <Button loading={this.state.removeLoading} type='dashed' onClick={(e)=>{e.stopPropagation()}}>删除</Button>
                        </Popconfirm>
                    )}
                }
            ]
        }
        this.loadData = this.loadData.bind(this);
        this.add = this.add.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));
    }

    add(){
        if(!this.state.typeName){
            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.typeNum){
            message.warning('请输入类型代号')
            return ;
        }
        this.setState({
            addLoading:true
        })
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url:globalConfig.context + '/api/admin/department/workingHours/add',
            data:{
                name:this.state.typeName,
                start: this.state.start,
                restStart: this.state.restStart,
                restEnd: this.state.restEnd,
                end: this.state.end,
                type:this.state.typeNum
            }
        }).done(function (data) {
            this.setState({
                addLoading: false
            });
            if (data.error.length === 0) {
                message.success('添加成功！');
                this.loadData();
                this.onCancel();
            } 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));
    }

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

    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:'',
                                            timeTypeInfor:{},
                                        })
                                    }}
                                    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={1}
                                    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" style={{display:'flex',justifyContent:'center'}}>
                            <Button type="primary" onClick={this.add} loading={this.state.addLoading}>
                                确定添加
                            </Button>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}

export default WorkeTimes;