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

import React from "react";
import CustomTab from "../../components/customTab";
import { Dropdown, Menu, message } from "antd";
import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal } from "ecCom";
import { placeOnFileColumns } 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";
import { renderLoading } from "../../util";

@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({ salaryAcctRecordId: 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(employeeName) {
    const { calculateStore: { acctResultList } } = this.props;
    acctResultList({ salaryAcctRecordId: this.id, employeeName, ...this.pageInfo, current: 1 });
  }

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

  handleShowSizeChange(pageInfo) {
    const { calculateStore: { acctResultList } } = this.props;
    acctResultList({
      salaryAcctRecordId: this.id,
      employeeName: this.state.searchValue, ...this.pageInfo, ...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,
      acctResultListPageInfo
    } = calculateStore;
    const { selectedRowKeys, slideVisiable } = 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 placeholder="请输入姓名" onChange={(value) => {
            this.setState({ searchValue: value });
          }} value={this.state.searchValue} onSearch={(value) => {
            this.handleSearch(value);
          }}/>
        </div>
      );
    };

    if (this.getColumns().length === 1) { // 无权限处理
      return renderLoading();
    }
    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>
    );
  }
}