liang.cheng
/
org-chart-frant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复日期国际化

This commit is contained in:
Chengliang 2022-09-06 13:46:56 +08:00
parent 77632d87c6
commit 7af2107493
1 changed files with 152 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
src/components/topBar/index.jsx
View File

@ -1,118 +1,169 @@
import React from 'react'
import style from './index.less'
import { DatePicker, Select, Button, Checkbox, Row, Col, Dropdown, Menu, } from 'antd'
import React from 'react';
import style from './index.less';
import {
DatePicker,
Select,
Button,
Checkbox,
Row,
Col,
Dropdown,
Menu,
} from 'antd';
const { Option } = Select;
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 {
constructor(props) {
super(props);
this.state = {
fclasslist: [],
companylist: [],
requestData: {
date: moment(new Date()).format('YYYY-MM-DD'),
fclass: '0',
root: '0',
level: '3',
fisvitual: '0',
},
};
}
constructor(props) {
super(props)
this.state = {
fclasslist: [],
companylist: [],
requestData: {
date: moment(new Date()).format("YYYY-MM-DD"),
fclass: "0",
root: "0",
level: "3",
fisvitual: "0"
}
}
}
handleFormChange(payload) {
let requestData = { ...this.state.requestData, ...payload };
this.setState({ requestData });
}
handleFormChange(payload) {
let requestData = {...this.state.requestData, ...payload}
this.setState({requestData})
}
handleExportMenuClick(e) {
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
}
handleExportMenuClick(e) {
this.props.onExport(e.key == '1' ? "png" : "pdf")
}
handleExportButtonClick() {
this.props.onExport('png');
}
handleExportButtonClick() {
this.props.onExport("png")
}
componentDidMount() {
fetch(this.props.url)
.then((res) => res.json())
.then((data) => {
this.setState({
fclasslist: data.fclasslist,
companylist: data.companylist,
});
});
}
componentDidMount() {
fetch(this.props.url).then(res => res.json()).then(data => {
this.setState({
fclasslist: data.fclasslist,
companylist: data.companylist
})
})
}
menu = (
<Menu
onClick={this.handleExportMenuClick.bind(this)}
items={[
{
label: '导出图片',
key: '1',
},
{
label: '导出PDF',
key: '2',
},
]}
/>
);
menu = (
<Menu
onClick={this.handleExportMenuClick.bind(this)}
items={[
{
label: '导出图片',
key: '1',
},
{
label: '导出PDF',
key: '2',
},
]}
/>
);
render() {
return (
<div className={style.topbarWrapper}>
<Row>
<Col span={5}>
数据日期：
<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>
render() {
return (
<div className={style.topbarWrapper}>
<Row>
<Col span={5}>
维度：
<Select
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>
</Col>
<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") : ""})} />
</Col>
<Col span={5}>
根节点：
<Select
showSearch
filterOption={(input, option) =>
(option?.children).includes(input)
}
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>
</Col>
<Col span={5}>
显示层级：
<Select
defaultValue="3"
style={{ width: 120 }}
value={this.state.requestData.level}
onChange={(value) => this.handleFormChange({ level: value })}
>
<Option value="1">一级</Option>
<Option value="2">二级</Option>
<Option value="3">三级</Option>
</Select>
</Col>
<Col span={5}>
维度：<Select 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>
</Col>
<Col span={5}>
根节点：<Select
showSearch
filterOption={(input, option) => (option?.children ).includes(input)}
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>
</Col>
<Col span={5}>
显示层级：<Select defaultValue="3" style={{ width: 120 }} value={this.state.requestData.level} onChange={(value) => this.handleFormChange({level: value})}>
<Option value="1">一级</Option>
<Option value="2">二级</Option>
<Option value="3">三级</Option>
</Select>
</Col>
{/* <Col span={4}>
{/* <Col span={4}>
<Checkbox style={{ marginTop: "5px" }} onChange={(e) => this.handleFormChange({fisvitual: e.target.checked ? "1": "0"})}>显示虚拟组织</Checkbox>
</Col> */}
<Col span={4}>
<Button type="primary" style={{ marginRight: "10px" }} onClick={() => {this.props.onSearch(this.state.requestData)}}>查询</Button>
<Dropdown overlay={this.menu}>
<Button onClick={this.handleExportButtonClick.bind(this)}>
导出
</Button>
</Dropdown>
</Col>
</Row>
</div>
)
}
<Col span={4}>
<Button
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
this.props.onSearch(this.state.requestData);
}}
>
查询
</Button>
<Dropdown overlay={this.menu}>
<Button onClick={this.handleExportButtonClick.bind(this)}>
导出
</Button>
</Dropdown>
</Col>
</Row>
</div>
);
}
}