salary-management-front/pc4mobx/hrmSalary/pages/calculateDetail/index.js

import React from 'react';
import UserSure from './userSure'
import { inject, observer } from 'mobx-react';
import CustomTab from '../../components/customTab'
import SalaryDetail from './salaryDetail'
import { Button, Menu, Dropdown, Modal, message } from 'antd'
import { WeaInputSearch } from "ecCom"
import { getQueryString } from '../../util/url'
import AcctResultImportModal from './acctResult/importModal/acctResultImportModal';
import ProgressModal from '../../components/progressModal'

@inject('calculateStore')
@observer
export default class CalculateDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedKey: "0",
            fieldData: {},
            acctResultImportVisiable: false,
            progressVisible: false,
            progress: 0
        }
        this.id = ""
        this.timer 
    }

    componentWillMount() {
        let id = getQueryString("id");
        this.id = id;
        const { calculateStore:  {checkTaxAgent}} = this.props; 
        checkTaxAgent(this.id)
        let modalParam = {...this.state.modalParam , salaryAcctRecordId: id}
        this.setState({modalParam})
    }
   
    // 核算点击事件
    handleAccount() {
        const { calculateStore } = this.props;
        const { acctresultAccounting, acctResultList, getCalculateProgress } = calculateStore;
        Modal.confirm({
            title: "信息确认",
            content: "点击核算，公式项将按照公式逻辑核算，核算结果将覆盖原数据",
            onOk: () =>  {
                this.setState({progress: 0})
               acctresultAccounting(this.id).then(() => {
                   this.setState({
                        progressVisible: true
                   })
                   if(this.timer) {
                       clearInterval(this.timer)
                   }
                    this.timer = setInterval(() => {
                        getCalculateProgress(this.id).then(data => {
                            let progress = data.progress
                            if(progress == 1 && this.timer) {
                                clearInterval(this.timer)
                                this.timer = null
                                this.setState({
                                    progressVisible: false
                                })
                                message.success("核算完成")
                                acctResultList(this.id)
                            } else if(!data.status) {
                                clearInterval(this.timer)
                                this.timer = null
                                this.setState({
                                    progressVisible: false
                                })
                                message.success(data.message)
                            }
                            this.setState({progress: Number(progress) * 100})
                        })
                    }, 1000)
                    
               })
            },
            onCancel() {}
          });
    }


    // 更多选项点击
    handleMenuClick = (e) => {
        if(e.key == "1") { // 导入
            this.setState({
                acctResultImportVisiable: true
            })
        } else if(e.key == "2") {
            window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/compareDetail?id=" + this.id)
        } else if(e.key == "3") {
            const {calculateStore: {exportAll}} = this.props;
            exportAll(this.id)
        }
    }

    // 导入表单添加表头回调
    handleAcctModalAdd(fieldData) {
        this.setState({
            fieldData
        })
    }

    // 核算结果搜索
    handleSearch(value) {
        const { calculateStore:  { acctResultList }} = this.props;
        acctResultList(this.id, value)
    }

    componentWillUnmount() {
        // 清除轮询
        if(this.timer) {
            clearInterval(this.timer)
        }
    }

    render() {
        const { selectedKey, modalParam, acctResultImportVisiable } = this.state;
        const {  calculateStore } = this.props;
        const { calculateProgress } = calculateStore

        const menu = (
            <Menu onClick={this.handleMenuClick.bind(this)}>
              <Menu.Item key="1">导入</Menu.Item>
              <Menu.Item key="2">线下对比</Menu.Item>
              <Menu.Item key="3">导出全部</Menu.Item>
            </Menu>
          );

        const renderRightOperation = () => {
            if(selectedKey == "1") {
                return (
                    <div style={{display: "inline-block"}}>
                        <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.handleAccount()}>核算</Button>
                        {/* <Button type="default" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>校验</Button> */}
                        <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>更多</Dropdown.Button>
                        <WeaInputSearch value={this.state.searchValue} onChange={(value) => {
                            this.setState({searchValue: value})
                        }}
                        onSearch={(value) => {this.handleSearch(value)}}
                        />
                    </div>
                )
            }
        }

        const topTab =  [{
            title: "人员确认",
            viewcondition: "0"
        },
        {
            title: "薪资核算",
            viewcondition: "1"
        }];

        return (
            <div style={{overflowY: "scroll", height: "100%"}}>
                <CustomTab 
                    topTab={topTab}
                    searchOperationItem={
                        renderRightOperation()
                    }
                    onChange={(v) => {
                        this.setState({selectedKey: v})
                    }}
                />
                {
                    selectedKey == 0 && <UserSure />
                }
                {
                    selectedKey == 1 && <SalaryDetail employeeName={this.state.searchValue}/>
                }
                {
                    acctResultImportVisiable && <AcctResultImportModal 
                    visiable={acctResultImportVisiable}
                    fieldData={this.state.fieldData}
                    onAdd={(fieldData) => {
                        this.handleAcctModalAdd(fieldData)
                    }}
                    onCancel={() => this.setState({
                        acctResultImportVisiable: false,
                    fieldData: {}
                    })}
                    id={this.id}
                    />
                }
                {
                    this.state.progressVisible && <ProgressModal 
                        visible={this.state.progressVisible}
                        onCancel={() => {
                            this.setState({progressVisible: false, progress: 0})
                        }}
                        progress={this.state.progress}
                    />
                }
            </div>
        )
    }
}