提交 44360ed4 authored 作者: 钟是志's avatar 钟是志

27737 增加功能菜单--士官生请假申请

上级 2320d4e7
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
* 2019年10月23日 * 2019年10月23日
* 移动端日期选择封装 * 移动端日期选择封装
*/ */
import React, {Component} from 'react'; import React, { Component } from 'react';
import {DatePicker, List, Button, InputItem, Toast} from 'antd-mobile'; import { DatePicker, List, Toast } from 'antd-mobile';
import moment from 'moment'; import moment from 'moment';
export default class MobileDate extends Component { export default class MobileDate extends Component {
...@@ -16,12 +16,12 @@ export default class MobileDate extends Component { ...@@ -16,12 +16,12 @@ export default class MobileDate extends Component {
}; };
} }
triggerChange = (changedValue) => { triggerChange = changedValue => {
// Should provide an event to pass value to Form. // Should provide an event to pass value to Form.
const onChange = this.props.onChange; const onChange = this.props.onChange;
// console.log(changedValue);
if (onChange) { if (onChange) {
onChange(changedValue); onChange([...changedValue]);
} }
}; };
...@@ -29,17 +29,17 @@ export default class MobileDate extends Component { ...@@ -29,17 +29,17 @@ export default class MobileDate extends Component {
// Should be a controlled component. // Should be a controlled component.
if ('value' in nextProps) { if ('value' in nextProps) {
const value = nextProps.value; const value = nextProps.value;
this.setState({dates: value}); this.setState({ dates: value });
} }
} }
handelStartChange = (date) => { handelStartChange = date => {
const {dates} = this.state; const { dates } = this.state;
if (dates.length === 0) { if (dates.length === 0) {
dates.push(moment(date.valueOf())); dates.push(moment(date.valueOf()));
} else { } else {
if(dates.length === 2){ if (dates.length === 2) {
if (moment(date.valueOf()).isAfter(dates[1], 'second')) { if (moment(date.valueOf()).isAfter(dates[1], 'second')) {
Toast.fail('结束时间必须在开始时间之后', 1); Toast.fail('结束时间必须在开始时间之后', 1);
return false; return false;
...@@ -49,17 +49,16 @@ export default class MobileDate extends Component { ...@@ -49,17 +49,16 @@ export default class MobileDate extends Component {
} }
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({dates}); this.setState({ dates });
} }
this.triggerChange(dates); this.triggerChange(dates);
}; };
handelEndChange = (date) => { handelEndChange = date => {
const {dates} = this.state; const { dates } = this.state;
if (dates.length === 0) { if (dates.length === 0) {
dates.push(null); dates.push(null);
dates.push(moment(date.valueOf())); dates.push(moment(date.valueOf()));
} else if (dates.length === 1) { } else if (dates.length === 1) {
if (dates[0].isAfter(moment(date.valueOf()), 'second')) { if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
Toast.fail('结束时间必须在开始时间之后', 1); Toast.fail('结束时间必须在开始时间之后', 1);
...@@ -76,25 +75,25 @@ export default class MobileDate extends Component { ...@@ -76,25 +75,25 @@ export default class MobileDate extends Component {
dates[1] = moment(date.valueOf()); dates[1] = moment(date.valueOf());
} }
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({dates}); this.setState({ dates });
} }
this.triggerChange(dates); this.triggerChange(dates);
}; };
MustSpan = () => { MustSpan = () => {
const { required } = this.props; const { required } = this.props;
if(required){ if (required) {
return <span style={{color: 'red'}}>* </span>; return <span style={{ color: 'red' }}>* </span>;
}else{ } else {
return null; return null;
} }
}; };
render() { render() {
let {dates} = this.state; let { dates } = this.state;
const { format, showTime } = this.props; const { format, showTime } = this.props;
let mode = 'datetime'; let mode = 'datetime';
if(!showTime){ if (!showTime) {
mode = 'date'; mode = 'date';
} }
const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null; const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null;
...@@ -108,33 +107,41 @@ export default class MobileDate extends Component { ...@@ -108,33 +107,41 @@ export default class MobileDate extends Component {
<DatePicker <DatePicker
// value={this.state.date} // value={this.state.date}
extra={ extra={
<span style={{fontSize: 14}}> <span style={{ fontSize: 14 }}>
{!!startTime {!!startTime
? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss') ? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
: '请选择时间'} : '请选择时间'}
</span> </span>
} }
locale={{okText: '确定', dismissText: '取消'}} locale={{
okText: '确定',
dismissText: '取消',
}}
value={!!startTime ? new Date(startTime) : null} value={!!startTime ? new Date(startTime) : null}
format={format ? format : 'YYYY-MM-DD HH:mm:ss'} format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
mode={mode} mode={mode}
onChange={(date) => this.handelStartChange(date)}> onChange={date => this.handelStartChange(date)}
>
<List.Item arrow="horizontal">{MustSpan}开始时间</List.Item> <List.Item arrow="horizontal">{MustSpan}开始时间</List.Item>
</DatePicker> </DatePicker>
<DatePicker <DatePicker
// value={this.state.date} // value={this.state.date}
extra={ extra={
<span style={{fontSize: 14}}> <span style={{ fontSize: 14 }}>
{!!endTime {!!endTime
? moment(endTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss') ? moment(endTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
: '请选择时间'} : '请选择时间'}
</span> </span>
} }
value={!!endTime ? new Date(endTime) : null} value={!!endTime ? new Date(endTime) : null}
locale={{okText: '确定', dismissText: '取消'}} locale={{
okText: '确定',
dismissText: '取消',
}}
mode={mode} mode={mode}
format={format ? format : 'YYYY-MM-DD HH:mm:ss'} format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
onChange={(date) => this.handelEndChange(date)}> onChange={date => this.handelEndChange(date)}
>
<List.Item arrow="horizontal">{MustSpan}结束时间</List.Item> <List.Item arrow="horizontal">{MustSpan}结束时间</List.Item>
</DatePicker> </DatePicker>
</div> </div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论