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

import React from 'react'
import CustomTab from '../../components/customTab'
import { Dropdown, Menu, Button, Table } from 'antd'
import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal, WeaTable } from 'ecCom'
import { placeOnFileColumns, dataSource } from './columns'
import SlideModalTitle from "../../components/slideModalTitle"
import FileMergeDetail from './fileMergeDetail'
import { getQueryString } from "../../util/url";
import { inject, observer } from 'mobx-react';
import CustomPaginationTable from '../../components/customPaginationTable'

@inject('calculateStore')
@observer
export default class PlaceOnFileDetail extends React.Component {
    constructor(props)  {
        super(props);
        placeOnFileColumns.map(item => {
            if(item.dataIndex == "username") {
                item.render = (text, record) => (
                    <a onClick={() => {this.onDetail()}}>{text}</a>
                )
            }
        })
        this.state = {
            slideVisiable: false,
            selectedRowKeys: [],
            searchValue: ""
        }
        this.id = "";
        this.length = 0
        this.pageInfo = {
            current: 1,
            pageSize: 10
        }
    }

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


    // 获取列表的列
    getColumns() {
        const { calculateStore: {acctResultListTableStore, 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;
            this.length = 0
            if(result.children) {
                result.children.map(child => {
                    child.width = 150
                    child.title = child.text
                    child.dataIndex = child.column
                    this.length ++
                })
            } else {
                this.length ++
                result.width = 150
            }
            return result;
        })
        columns.push({
            title: '操作',
            key: "cz",
            render: (text, record) => {
                return <a onClick={() => {this.handleEdit(record)}}>编辑</a>
            }
        })
        return columns;
    }

    onDetail() {
        this.setState({slideVisiable: true})
    }

    handleSearch(value){
        const { calculateStore: {acctResultList}} = this.props;
        acctResultList(this.id, value, this.pageInfo.current, this.pageInfo)
    }
    
    // 分页
    handleDataPageChange(value) {
        const { calculateStore: {acctResultList}} = this.props;
        acctResultList(this.id, this.state.searchValue, value, this.pageInfo)
    }

    handleShowSizeChange(pageInfo) {
        const { calculateStore: {acctResultList}} = this.props;
        acctResultList(this.id, this.state.searchValue, pageInfo.current, pageInfo )
    }

    handleMenuClick() {
        const {calculateStore: {exportAll}} = this.props;
        const { selectedRowKeys } = this.state;
        if(selectedRowKeys.length == 0) {
            message.warning("未选择条目")
            return
        }
        exportAll(this.id, selectedRowKeys.join(","))
    }

    handleExportAll() {
        const {calculateStore: {exportAll}} = this.props;
        exportAll(this.id)
    }

    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    }



    render() {

        const { calculateStore } = this.props;
        const { baseSalarySobCycle, acctResultListDateSource, acctResultListColumns, acctResultListPageInfo } = calculateStore
        const { selectedRowKeys } = this.state;

        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const menu = (
            <Menu onClick={(e) => this.handleMenuClick(e)}>
              <Menu.Item key="3">导出所选</Menu.Item>
            </Menu>
        );

        const renderRightOperation = () => {
            return (
                <div style={{display: "inline-block"}}>
                    <Dropdown.Button type="primary" style={{marginRight: "10px"}} onClick={() => {this.handleExportAll()}} overlay={menu}>导出全部</Dropdown.Button>
                    <WeaInputSearch onChange={(value) => {this.setState({searchValue: value})}} value={this.state.searchValue} onSearch={(value) => {this.handleSearch(value)}}/>
                </div>
            )
        }

        const { slideVisiable } = this.state
        
        return (
            
            <div className="placeOnFileDetail">
                <CustomTab 
                    searchOperationItem={
                        renderRightOperation()
                    }
                />
                <div className="tabWrapper">
                    <span>薪资所属月：{baseSalarySobCycle.salaryMonth}</span>
                    <WeaHelpfulTip
                        width={100}
                        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"
                    />
                </div>
                <div className="tableWrapper">
                    <CustomPaginationTable 
                        columns={this.getColumns()} 
                        scroll={{x: this.length * 150}} 
                        dataSource={acctResultListDateSource} 
                        rowSelection={rowSelection}
                        total={acctResultListPageInfo.total}
                        current={acctResultListPageInfo.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>

                {
                    slideVisiable && <WeaSlideModal visible={slideVisiable}
                    top={0}
                    width={40}
                    height={100}
                    direction={'right'}
                    measure={'%'}
                    title={
                        <SlideModalTitle 
                        subtitle={"合并计税详情"}
                        editable={true}
                        />
                    }
                    content={(<FileMergeDetail />)}
                    onClose={() => this.setState({slideVisiable: false})}
                    showMask={true}
                    closeMaskOnClick={() => this.setState({slideVisiable: false})} />
                }
            </div>
        )
    }
}