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

import React from 'react'
import { Button, Table } from "antd"
import { WeaInputSearch, WeaCheckbox, WeaTable } from 'ecCom'
import { mergeDetailColumns, dataSource } from './columns'
import { getQueryString } from '../../util/url'
import CustomTab from '../../components/customTab'
import { inject, observer } from 'mobx-react';
import CompareDetailImportModal from './compareDetailImportModal'
import CustomTable from '../../components/customTable'
import CustomPaginationTable from '../../components/customPaginationTable'

@inject('calculateStore')
@observer
export default class CompareDetail extends React.Component {
    constructor(props) {
        super(props)
        this.id = ""
        this.state = {
            onlyDiffEmployee: true,
            onlyDiffSalaryItem: true,
            importModalVisible: false,
            searchValue: ""
        }
        this.pageInfo = {current: 1, pageSize: 10}
    }

    componentWillMount() {
        let id = getQueryString("id");
        this.id = id;

        const { calculateStore: {fetchComparisonResultList}} = this.props;
        const { onlyDiffEmployee, onlyDiffSalaryItem} = this.state;
        let params = {
            onlyDiffEmployee, 
            onlyDiffSalaryItem, 
            salaryAcctRecordId: this.id, 
            current: 1
        }
        fetchComparisonResultList(params)
    }

    // 计算差值
    calculateCompares(systemValue, excelValue) {
        if(systemValue == null || excelValue == null) {
            return ""
        }
        let systemNum = Number(systemValue)
        let excelNum = Number(excelValue)
        if (!isNaN(systemNum) || !isNaN(excelNum)) {  // 数字
            return systemNum - excelNum
        } 
        return ""
    }

    getColumns(columns) {
        let newColumns = [...columns]
        newColumns.map(item => {
            let n = Number(item.dataIndex)
            if (!isNaN(n)) {  // 数字
               item.render = (text, record) => {
                   return (
                       <div>
                            <div>系统值：{record[item.dataIndex].acctResultValue}</div>
                            <div>线下值：{record[item.dataIndex].excelResultValue}</div>
                            <div style={{color: 'red'}}>差值：{this.calculateCompares(record[item.dataIndex].acctResultValue, record[item.dataIndex].excelResultValue)}</div>
                       </div>
                   )
               }
           }
        })
        return newColumns
    }

    // 导入
    handleImportClick() {
        this.setState({
            importModalVisible: true
        })
    }
    
    // 分页变化
    handleDataPageChange(value) {
        const { calculateStore: {fetchComparisonResultList}} = this.props;
        const { onlyDiffEmployee, onlyDiffSalaryItem} = this.state;
        
        let params = {
            onlyDiffEmployee, 
            onlyDiffSalaryItem, 
            salaryAcctRecordId: this.id, 
            current: value,
            ...this.pageInfo
        }
        fetchComparisonResultList(params)
    }

    handleShowSizeChange(pageInfo) {
        const { calculateStore: {fetchComparisonResultList}} = this.props;
        const { onlyDiffEmployee, onlyDiffSalaryItem} = this.state;
        let params = {
            onlyDiffEmployee, 
            onlyDiffSalaryItem, 
            salaryAcctRecordId: this.id, 
            ...pageInfo
        }
        fetchComparisonResultList(params)
    }

    // 只显示有差异的人员 变化
    onlyDiffEmployeeChange(value) {
        let onlyDiffEmployee = value == 1 ? true : false
        this.setState({onlyDiffEmployee})
        
        const { calculateStore: {fetchComparisonResultList}} = this.props;
        const { onlyDiffSalaryItem} = this.state;

        let params = {
            onlyDiffEmployee, 
            onlyDiffSalaryItem, 
            salaryAcctRecordId: this.id, 
            employeeName: this.state.searchValue,
            current: 1
        }

        fetchComparisonResultList(params)
    }

    // 只显示有差异的薪资项目 变化
    onlyDiffSalaryItemChange(value) {
        let onlyDiffSalaryItem = value == 1 ? true : false
        this.setState({onlyDiffSalaryItem})
        const { calculateStore: {fetchComparisonResultList}} = this.props;
        const { onlyDiffEmployee} = this.state;
        let params = {
            onlyDiffEmployee, 
            onlyDiffSalaryItem, 
            salaryAcctRecordId: this.id, 
            employeeName: this.state.searchValue,
            current: 1
        }
        fetchComparisonResultList(params)
    }

    // 搜索
    handleSearch(value) {
        const { calculateStore: {fetchComparisonResultList}} = this.props;
        const { onlyDiffEmployee, onlyDiffSalaryItem } = this.state
        let params = {
            onlyDiffEmployee, 
            onlyDiffSalaryItem, 
            salaryAcctRecordId: this.id, 
            employeeName: value,
            current: 1
        }
        fetchComparisonResultList(params)
    }

    // 导出
    handleExportClick() {
        const { calculateStore: {exportComparisonResult}} = this.props;
        exportComparisonResult(this.id)
    }

    // 线下对比导入
    handleComparisonFinish() {
        this.pageInfo.current = 1
        this.pageInfo.pageSize = 10
        this.handleSearch(this.state.searchValue)
    }

    render() {
        const { calculateStore: {comparisonResultPageInfo, comparisonResultTableStore, loading, comparisonResultColumns}} = this.props;
        const { importModalVisible, searchValue } = this.state;
        const renderRightOperation = () => {
            return (
                <div style={{display: "inline-block"}}>
                    <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.handleImportClick()} >导入</Button>
                    <Button type="default" style={{marginRight: "10px"}} onClick={() => this.handleExportClick()}>导出</Button>
                    <WeaInputSearch value={searchValue} onChange={(value) => {this.setState({
                        searchValue: value
                    })}} onSearch={(value) => {this.handleSearch(value)}}/>
                </div>
            )
        }

        const renderLeftOperation = () => {
            return (
                <div>
                    <WeaCheckbox content="只显示有差异的人员" value={this.state.onlyDiffEmployee ? 1 : 0} 
                        onChange={(value) => {
                            this.onlyDiffEmployeeChange(value)
                        }}
                    />
                    <WeaCheckbox content="只显示有差异的薪资项目" value={this.state.onlyDiffSalaryItem ? 1 : 0} 
                        onChange={(value) => {
                            this.onlyDiffSalaryItemChange(value)
                        }}
                    />
                </div>
            )
        }
        return (
            <div className="compareDetail">
                <CustomTab 
                    searchOperationItem={
                        renderRightOperation()
                    }
                    leftOperation={
                        renderLeftOperation()
                    }
                />
                <div className="titleBarWrapper">
                    <div className="titleBar">
                        <span className="leftTitle">公式=</span>
                        <span className="rightTitle">系统值；线下值；<span style={{color: "red"}}>差值</span></span>
                    </div>
                </div>

                <div className="tableWrapper">
                    <CustomPaginationTable 
                        loading={loading}
                        dataSource={comparisonResultPageInfo.list ? comparisonResultPageInfo.list : []} 
                        columns={this.getColumns(comparisonResultColumns ? comparisonResultColumns : [])}
                        scroll={{x: this.getColumns(comparisonResultColumns ? comparisonResultColumns : []).length * 150}}
                        total={comparisonResultPageInfo.total}
                        current={comparisonResultPageInfo.pageNum}
                        pageSize={this.pageInfo.pageSize}
                        onPageChange={(value) => {
                            this.pageInfo.current = value
                            this.handleDataPageChange(value)
                        }}
                        onShowSizeChange={(current, pageSize) => {
                            this.pageInfo = {current, pageSize}
                            this.handleShowSizeChange(this.pageInfo)
                        }}
                        />    
                </div>

                {
                    importModalVisible && <CompareDetailImportModal 
                        visiable={importModalVisible}
                        id={this.id}
                        onFinish={() => {
                            this.handleComparisonFinish()
                        }}
                        onCancel={() => {
                            this.setState({
                                importModalVisible: false
                            })
                        }}
                    />
                }
                

                
            </div>
        )
    }
}