123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- import React, { Component } from 'react'
- import PayrollContract from '../build/contracts/Payroll.json'
- import getWeb3 from './utils/getWeb3'
- import { Layout, Menu, Spin, Alert } from 'antd';
- //import Common from "./components/Common";
- //import Accounts from "./components/Accounts";
- import Employer from "./components/Employer";
- import Employee from "./components/Employee";
- // import './css/oswald.css'
- // import './css/open-sans.css'
- // import './css/pure-min.css'
- import 'antd/dist/antd.css';
- import './App.css'
- const { Header, Content, Footer } = Layout;
- class App extends Component {
- constructor(props) {
- super(props)
- this.state = {
- web3: null,
- mode: 'employer'
- }
- }
- componentWillMount() {
- // Get network provider and web3 instance.
- // See utils/getWeb3 for more info.
- getWeb3.then(results => {
- this.setState({
- web3: results.web3
- })
- // Instantiate contract once web3 provided.
- this.instantiateContract()
- })
- .catch(() => {
- console.log('Error finding web3.')
- })
- }
- instantiateContract() {
- const contract = require('truffle-contract')
- const payroll = contract(PayrollContract)
- payroll.setProvider(this.state.web3.currentProvider)
- // Get accounts.
- this.state.web3.eth.getAccounts((error, accounts) => {
- console.log(accounts);
- this.setState({
- account:accounts && accounts[0]
- });
- payroll.deployed().then((instance) => {
- this.setState({
- payroll:instance
- });
- });
- })
- }
- // onSelectAccount=(employee)=>{
- //
- // this.setState({
- // selectedAccount:employee.target.text
- // });
- //
- // }
- onSelectTab = ({key}) => {
- this.setState({
- mode: key
- });
- }
- renderContent = () => {
- const {account, payroll, web3, mode } = this.state;
- if(!payroll) {
- return <Spin tip="Loading..." />
- }
- switch (mode) {
- case 'employee':
- return <Employee employee={account} payroll={payroll} web3={web3} />
- case 'employer':
- return <Employer account={account} payroll={payroll} web3={web3} />
- case 'about':
- return <Alert message="欢迎使用Ted开发的以太坊薪酬管理系统" type="info"/>
- default:
- return <Alert message="请选择一个模式" type="info" showIcon />
- }
- }
- render() {
- //console.log('call render');
- //console.log(this.state);
- // const {selectedAccount,accounts,payroll,web3}=this.state;
- //
- // if(!accounts){
- // return <div>Loading</div>;
- // }
- return (
- <Layout>
- <Header className='header'>
- <div className='logo'>Ted区块链开发</div>
- <Menu
- theme="dark"
- mode="horizontal"
- defaultSelectedKeys={['employer']}
- style={{lineHeight:'64px'}}
- onSelect={this.onSelectTab}
- >
- <Menu.Item key="employer">雇主</Menu.Item>
- <Menu.Item key="employee">雇员</Menu.Item>
- <Menu.Item key="about">关于</Menu.Item>
- </Menu>
- </Header>
- <Content style={{padding:'0 50px'}}>
- <Layout style={{ padding:'24px 0', background:'#fff', minHeight: '600px'}}>
- {this.renderContent()}
- </Layout>
- </Content>
- <Footer style={{ textAlign: 'center' }}>
- Payroll ©2018 TedXiong xiong-wei@hotmail.com
- </Footer>
- </Layout>
- );
- }
- }
- export default App
|