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 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) {
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) { handleFormChange(payload) {
super(props) let requestData = { ...this.state.requestData, ...payload };
this.state = { this.setState({ requestData });
fclasslist: [], }
companylist: [],
requestData: {
date: moment(new Date()).format("YYYY-MM-DD"),
fclass: "0",
root: "0",
level: "3",
fisvitual: "0"
}
}
}
handleFormChange(payload) { handleExportMenuClick(e) {
let requestData = {...this.state.requestData, ...payload} this.props.onExport(e.key == '1' ? 'png' : 'pdf');
this.setState({requestData}) }
}
handleExportMenuClick(e) { handleExportButtonClick() {
this.props.onExport(e.key == '1' ? "png" : "pdf") this.props.onExport('png');
} }
handleExportButtonClick() { componentDidMount() {
this.props.onExport("png") fetch(this.props.url)
} .then((res) => res.json())
.then((data) => {
this.setState({
fclasslist: data.fclasslist,
companylist: data.companylist,
});
});
}
componentDidMount() { menu = (
fetch(this.props.url).then(res => res.json()).then(data => { <Menu
this.setState({ onClick={this.handleExportMenuClick.bind(this)}
fclasslist: data.fclasslist, items={[
companylist: data.companylist {
}) label: '导出图片',
}) key: '1',
} },
{
label: '导出PDF',
key: '2',
},
]}
/>
);
menu = ( render() {
<Menu return (
onClick={this.handleExportMenuClick.bind(this)} <div className={style.topbarWrapper}>
items={[ <Row>
{ <Col span={5}>
label: '导出图片', 数据日期：
key: '1', <DatePicker
}, placeholder="请选择日期"
{ style={{ width: 120 }}
label: '导出PDF', locale={locale}
key: '2', 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() { <Col span={5}>
return ( 维度：
<div className={style.topbarWrapper}> <Select
<Row> 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}> <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> <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}> {/* <Col span={4}>
维度：<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}>
<Checkbox style={{ marginTop: "5px" }} onChange={(e) => this.handleFormChange({fisvitual: e.target.checked ? "1": "0"})}>显示虚拟组织</Checkbox> <Checkbox style={{ marginTop: "5px" }} onChange={(e) => this.handleFormChange({fisvitual: e.target.checked ? "1": "0"})}>显示虚拟组织</Checkbox>
</Col> */} </Col> */}
<Col span={4}> <Col span={4}>
<Button type="primary" style={{ marginRight: "10px" }} onClick={() => {this.props.onSearch(this.state.requestData)}}>查询</Button> <Button
<Dropdown overlay={this.menu}> type="primary"
<Button onClick={this.handleExportButtonClick.bind(this)}> style={{ marginRight: '10px' }}
导出 onClick={() => {
</Button> this.props.onSearch(this.state.requestData);
</Dropdown> }}
</Col> >
查询
</Row> </Button>
<Dropdown overlay={this.menu}>
</div> <Button onClick={this.handleExportButtonClick.bind(this)}>
) 导出
} </Button>
</Dropdown>
</Col>
</Row>
</div>
);
}
} }