修复日期国际化
This commit is contained in:
parent
77632d87c6
commit
7af2107493
|
|
@ -1,47 +1,59 @@
|
||||||
import React from 'react'
|
import React from 'react';
|
||||||
import style from './index.less'
|
import style from './index.less';
|
||||||
import { DatePicker, Select, Button, Checkbox, Row, Col, Dropdown, Menu, } from 'antd'
|
import {
|
||||||
|
DatePicker,
|
||||||
|
Select,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Dropdown,
|
||||||
|
Menu,
|
||||||
|
} from 'antd';
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import 'moment/locale/zh-cn';
|
||||||
|
import locale from 'antd/lib/date-picker/locale/zh_CN';
|
||||||
|
moment.locale('zh-cn');
|
||||||
|
|
||||||
export class TopBar extends React.Component {
|
export class TopBar extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
fclasslist: [],
|
fclasslist: [],
|
||||||
companylist: [],
|
companylist: [],
|
||||||
requestData: {
|
requestData: {
|
||||||
date: moment(new Date()).format("YYYY-MM-DD"),
|
date: moment(new Date()).format('YYYY-MM-DD'),
|
||||||
fclass: "0",
|
fclass: '0',
|
||||||
root: "0",
|
root: '0',
|
||||||
level: "3",
|
level: '3',
|
||||||
fisvitual: "0"
|
fisvitual: '0',
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
handleFormChange(payload) {
|
handleFormChange(payload) {
|
||||||
let requestData = {...this.state.requestData, ...payload}
|
let requestData = { ...this.state.requestData, ...payload };
|
||||||
this.setState({requestData})
|
this.setState({ requestData });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleExportMenuClick(e) {
|
handleExportMenuClick(e) {
|
||||||
this.props.onExport(e.key == '1' ? "png" : "pdf")
|
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
|
||||||
}
|
}
|
||||||
|
|
||||||
handleExportButtonClick() {
|
handleExportButtonClick() {
|
||||||
this.props.onExport("png")
|
this.props.onExport('png');
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
fetch(this.props.url).then(res => res.json()).then(data => {
|
fetch(this.props.url)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
fclasslist: data.fclasslist,
|
fclasslist: data.fclasslist,
|
||||||
companylist: data.companylist
|
companylist: data.companylist,
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
menu = (
|
menu = (
|
||||||
|
|
@ -64,33 +76,66 @@ export class TopBar extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className={style.topbarWrapper}>
|
<div className={style.topbarWrapper}>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
||||||
<Col span={5}>
|
<Col span={5}>
|
||||||
数据日期:<DatePicker placeholder="请选择日期" style={{ width: 120 }} defaultValue={moment(new Date())} value={this.state.requestData.date && this.state.requestData.data != "" ? moment(this.state.requestData.date) : ""} onChange={(value) => this.handleFormChange({date: value && value != "" ? value.format("YYYY-MM-DD") : ""})} />
|
数据日期:
|
||||||
|
<DatePicker
|
||||||
|
placeholder="请选择日期"
|
||||||
|
style={{ width: 120 }}
|
||||||
|
locale={locale}
|
||||||
|
defaultValue={moment(new Date())}
|
||||||
|
value={
|
||||||
|
this.state.requestData.date && this.state.requestData.date != ''
|
||||||
|
? moment(this.state.requestData.date)
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
onChange={(value) =>
|
||||||
|
this.handleFormChange({
|
||||||
|
date: value && value != '' ? value.format('YYYY-MM-DD') : '',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
|
|
||||||
<Col span={5}>
|
<Col span={5}>
|
||||||
维度:<Select defaultValue="0" style={{ width: 120 }} value={this.state.requestData.fclass} onChange={(value) => this.handleFormChange({fclass: value})}>
|
维度:
|
||||||
{
|
<Select
|
||||||
this.state.fclasslist.map(item => (<Option value={item.id}>{item.companyname}</Option>))
|
defaultValue="0"
|
||||||
}
|
style={{ width: 120 }}
|
||||||
|
value={this.state.requestData.fclass}
|
||||||
|
onChange={(value) => this.handleFormChange({ fclass: value })}
|
||||||
|
>
|
||||||
|
{this.state.fclasslist.map((item) => (
|
||||||
|
<Option value={item.id}>{item.companyname}</Option>
|
||||||
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
<Col span={5}>
|
<Col span={5}>
|
||||||
根节点:<Select
|
根节点:
|
||||||
|
<Select
|
||||||
showSearch
|
showSearch
|
||||||
filterOption={(input, option) => (option?.children ).includes(input)}
|
filterOption={(input, option) =>
|
||||||
defaultValue="0" style={{ width: 120 }} value={this.state.requestData.root} onChange={(value) => this.handleFormChange({root: value})}>
|
(option?.children).includes(input)
|
||||||
{
|
|
||||||
this.state.companylist.map(item => (<Option value={item.id}>{item.fname}</Option>))
|
|
||||||
}
|
}
|
||||||
|
defaultValue="0"
|
||||||
|
style={{ width: 120 }}
|
||||||
|
value={this.state.requestData.root}
|
||||||
|
onChange={(value) => this.handleFormChange({ root: value })}
|
||||||
|
>
|
||||||
|
{this.state.companylist.map((item) => (
|
||||||
|
<Option value={item.id}>{item.fname}</Option>
|
||||||
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
<Col span={5}>
|
<Col span={5}>
|
||||||
显示层级:<Select defaultValue="3" style={{ width: 120 }} value={this.state.requestData.level} onChange={(value) => this.handleFormChange({level: value})}>
|
显示层级:
|
||||||
|
<Select
|
||||||
|
defaultValue="3"
|
||||||
|
style={{ width: 120 }}
|
||||||
|
value={this.state.requestData.level}
|
||||||
|
onChange={(value) => this.handleFormChange({ level: value })}
|
||||||
|
>
|
||||||
<Option value="1">一级</Option>
|
<Option value="1">一级</Option>
|
||||||
<Option value="2">二级</Option>
|
<Option value="2">二级</Option>
|
||||||
<Option value="3">三级</Option>
|
<Option value="3">三级</Option>
|
||||||
|
|
@ -102,17 +147,23 @@ export class TopBar extends React.Component {
|
||||||
</Col> */}
|
</Col> */}
|
||||||
|
|
||||||
<Col span={4}>
|
<Col span={4}>
|
||||||
<Button type="primary" style={{ marginRight: "10px" }} onClick={() => {this.props.onSearch(this.state.requestData)}}>查询</Button>
|
<Button
|
||||||
|
type="primary"
|
||||||
|
style={{ marginRight: '10px' }}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onSearch(this.state.requestData);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
<Dropdown overlay={this.menu}>
|
<Dropdown overlay={this.menu}>
|
||||||
<Button onClick={this.handleExportButtonClick.bind(this)}>
|
<Button onClick={this.handleExportButtonClick.bind(this)}>
|
||||||
导出
|
导出
|
||||||
</Button>
|
</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue