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

修复日期国际化

Browse Source
feature/fj
Chengliang 3 years ago
parent 77632d87c6
commit 7af2107493
1 changed files with 162 additions and 111 deletions
Show Stats Download Patch File Download Diff File

271
src/components/topBar/index.jsx
Unescape Escape 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) {
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)
fetch(this.props.url).then(res => res.json()).then(data => { .then((res) => res.json())
this.setState({ .then((data) => {
fclasslist: data.fclasslist, this.setState({
companylist: data.companylist fclasslist: data.fclasslist,
}) companylist: data.companylist,
}) });
} });
}
menu = (
<Menu menu = (
onClick={this.handleExportMenuClick.bind(this)} <Menu
items={[ onClick={this.handleExportMenuClick.bind(this)}
{ items={[
label: '导出图片', {
key: '1', label: '导出图片',
}, key: '1',
{ },
label: '导出PDF', {
key: '2', label: '导出PDF',
}, key: '2',
]} },
/> ]}
); />
);
render() {
return ( render() {
<div className={style.topbarWrapper}> return (
<Row> <div className={style.topbarWrapper}>
<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") : ""})} /> 数据日期：
</Col> <DatePicker
placeholder="请选择日期"
style={{ width: 120 }}
<Col span={5}> locale={locale}
维度：<Select defaultValue="0" style={{ width: 120 }} value={this.state.requestData.fclass} onChange={(value) => this.handleFormChange({fclass: value})}> defaultValue={moment(new Date())}
{ value={
this.state.fclasslist.map(item => (<Option value={item.id}>{item.companyname}</Option>)) this.state.requestData.date && this.state.requestData.date != ''
} ? moment(this.state.requestData.date)
</Select> : ''
</Col> }
onChange={(value) =>
<Col span={5}> this.handleFormChange({
根节点：<Select date: value && value != '' ? value.format('YYYY-MM-DD') : '',
showSearch })
filterOption={(input, option) => (option?.children ).includes(input)} }
defaultValue="0" style={{ width: 120 }} value={this.state.requestData.root} onChange={(value) => this.handleFormChange({root: value})}> />
{ </Col>
this.state.companylist.map(item => (<Option value={item.id}>{item.fname}</Option>))
} <Col span={5}>
</Select> 维度：
</Col> <Select
defaultValue="0"
<Col span={5}> style={{ width: 120 }}
显示层级：<Select defaultValue="3" style={{ width: 120 }} value={this.state.requestData.level} onChange={(value) => this.handleFormChange({level: value})}> value={this.state.requestData.fclass}
<Option value="1">一级</Option> onChange={(value) => this.handleFormChange({ fclass: value })}
<Option value="2">二级</Option> >
<Option value="3">三级</Option> {this.state.fclasslist.map((item) => (
</Select> <Option value={item.id}>{item.companyname}</Option>
</Col> ))}
</Select>
{/* <Col span={4}> </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>
);
}
} }
Write Preview
Loading…
Cancel
Save