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

import React from 'react'
import { salaryDetailColumns, dataSource } from './columns'
import { WeaHelpfulTip, WeaSlideModal, WeaTable } from 'ecCom'
import { Table } from 'antd'
import WarningModal from './warningModal'
import "./index.less"
import EditSalaryDetail from './editSalaryDetail' 
import SlideModalTitle from "../../components/slideModalTitle"
import ImportModal from '../../components/importModal'
import { columns } from '../salaryItem/columns'
import { getQueryString } from '../../util/url'
import { inject, observer } from 'mobx-react';
import CustomTable from '../../components/customTable'

@inject('calculateStore')
@observer
export default class SalaryDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state ={
            visible: false,
            slideVisiable: false,
            columns: salaryDetailColumns.map(item => {
                if(item.dataIndex == "cz") {
                    item.render = () => {
                        return (
                            <a onClick={() => {this.setState({slideVisiable: true})}}>编辑</a>
                        )
                    }
                }
            })
        }
        this.recordId = ""
        this.id = ""
    }

    componentWillMount() {
        let id = getQueryString("id")
        this.id = id;
        const { calculateStore: { acctResultList, getSalarySobCycle } } = this.props;
        acctResultList(id)
        getSalarySobCycle(id)
    }

    headerSetCompoent() {
        return (
            <div style={{display: "inline-block"}}>
                <WeaCheckbox id="test" content="导出现有数据" />
                <WeaHelpfulTip
                    width={200}
                    title="提示：建议先导出现有最新数据，修改后再导入；\n
                    若只需要导出部分数据，请先筛选列表"
                    placement="topLeft"
                />
            </div>
        )
    }

    // 获取列表的列
    getColumns() {
        const { calculateStore: {acctResultListColumns }} = this.props;
        let columns = acctResultListColumns ? [...acctResultListColumns] : [] 
        columns = columns.filter(item => item.hide == "FALSE").map(item => {
            let result = {...item}
            result.title = item.text;
            result.dataIndex = item.column
            result.oldWidth = result.width;
            result.width = null;
            if(result.children) {
                result.children.map(child => {
                    child.title = child.text
                    child.dataIndex = child.column
                })
            }
            return result;
        })
        columns.push({
            title: '操作',
            key: "cz",
            render: (text, record) => {
                return <a onClick={() => {this.handleEdit(record)}}>编辑</a>
            }
        })
        console.log("columns: " , columns)
        return columns;
    }

    // 编辑时间回调
    handleEdit(record) {
        this.recordId = record.id;
        this.setState({
            slideVisiable: true
        })
    }

    // 侧边栏保存
    handleEditSlideSave() {
        const {calculateStore } = this.props;
        const { saveAcctResult, acctResultList, acctresultDetail } = calculateStore;
        this.setState({
            slideVisiable: false
        })
        saveAcctResult(this.recordId).then(() => {
            acctResultList(this.id)
        })
    }

    // 分页
    handleDataPageChange(value) {
        const { calculateStore: {acctResultList}} = this.props;
        acctResultList(this.id, this.props.employeeName, value)
    }

    render() {
        const { slideVisiable } = this.state;
        const { calculateStore } = this.props;
        const { acctResultListDateSource, acctResultListColumns, baseSalarySobCycle, acctResultListPageInfo, loading } = calculateStore
        return (
            <div className="salaryDetail">
                <div className="salaryBarWrapper">
                    <span>薪资所属月：{baseSalarySobCycle.salaryMonth}</span>
                    <WeaHelpfulTip
                        style={{marginLeft: "10px"}}
                        width={200}
                        title={`薪资周期\n
                        ${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.fromDate}至${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.endDate}\n
                        税款所属期\n
                        ${baseSalarySobCycle.taxCycle}\n
                        考勤取值周期\n
                        ${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.fromDate}至${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.endDate}\n
                        福利台账月份\n
                        引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
                        placement="topLeft"
                    />
                    {/* <span className="warningspan" onClick={() => {this.setState({visible: true})}}>校验异常：0</span> */}
                </div>
                <div className="tableWrapper">
                    <CustomTable 
                        loading={loading}
                        dataSource={acctResultListDateSource} columns={this.getColumns()} 
                        pagination={{
                            onChange: (value) => {this.handleDataPageChange(value)},
                            total: acctResultListPageInfo.total,
                            current: acctResultListPageInfo.pageNum
                          }}
                        />
                </div>
                <WarningModal visible={this.state.visible} onCancel={() => {this.setState({visible: false})}}/>
                {
                slideVisiable && <WeaSlideModal visible={slideVisiable}
                    top={0}
                    width={40}
                    height={100}
                    direction={'right'}
                    measure={'%'}
                    title={
                        <SlideModalTitle 
                        subtitle={"编辑薪资"}
                        editable={true}
                        onSave={() => this.handleEditSlideSave()}
                        />
                    }
                    content={<EditSalaryDetail id={this.recordId}/>}
                    onClose={() => this.setState({slideVisiable: false})}
                    showMask={true}
                    closeMaskOnClick={() => this.setState({slideVisiable: false})} />
                }

            </div>
        )
    }
}