salary-management-front/pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js

import React from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
import { getQueryString } from "../../util/url";
import * as API from "../../apis/declare";
import { Button } from "antd";
import "./index.less";

const { getLabel } = WeaLocaleProvider;
@inject("taxAgentStore")
@observer
export default class GenerateDeclarationDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, dataSource: [], columns: [], declareInfo: {},
      pageInfo: { current: 1, pageSize: 10, total: 0 }
    };
  }

  componentDidMount() {
    this.getDetailList();
    this.getDeclareInfo();
  }

  getDetailList = () => {
    const { pageInfo } = this.state;
    const payload = {
      ...pageInfo, taxDeclarationIdStr: getQueryString("id")
    };
    this.setState({ loading: true });
    API.getDetailList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
          columns: _.map(_.filter(columns, it => it.dataIndex !== "jobNum"), item => {
            if (item.dataIndex === "username") {
              return {
                ...item, width: 180,
                render: (text, record) => (<a className="ellipsis" href={`javaScript:openhrm(${record.employeeId});`}
                                              onClick={e => window.pointerXY(e)}
                                              title={text}>{text}</a>)
              };
            }
            return {
              ...item, width: (item.dataIndex === "cardType" || item.dataIndex === "cardNum") ? 180 : 100,
              render: (text) => (<span className="ellipsis" title={text}>{text}</span>)
            };
          })
        });
      }
    });
  };
  getDeclareInfo = () => {
    API.getDeclareInfo({ taxDeclarationId: getQueryString("id") }).then(({ status, data: declareInfo }) => {
      if (status) this.setState({ declareInfo });
    });
  };
  // 导出
  handleExport = () => {
    const url = `${window.location.origin}/api/bs/hrmsalary/taxdeclaration/export?taxDeclarationId=${getQueryString("id")}`;
    window.open(url, "_self");
  };
  renderTitle = () => {
    const { declareInfo } = this.state;
    return (<React.Fragment>
      <span>{getLabel(111, "薪资所属月")}：{declareInfo.salaryMonth}</span>
      <span style={{ marginLeft: "10px" }}>{getLabel(111, "个税扣缴义务人")}：{declareInfo.taxAgentName}</span>
    </React.Fragment>);
  };

  render() {
    const { loading, pageInfo, columns, dataSource } = this.state;
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const buttons = showOperateBtn ? [<Button type="primary"
                                              onClick={this.handleExport}>{getLabel(111, "导出全部")}</Button>] : [];
    const pagination = {
      ...pageInfo,
      showTotal: (total) => `共 ${total} 条`,
      pageSizeOptions: ["10", "20", "50", "100"],
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.getDetailList());
      },
      onChange: (current) => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getDetailList());
      }
    };
    return (<WeaTop title={this.renderTitle()} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
                    buttons={buttons}>
      <div className="declare-detail-table-container">
        <WeaTable columns={columns} dataSource={dataSource} pagination={pagination} loading={loading}
                  scroll={{ x: 1200, y: `calc(100vh - 186px)` }}/>
      </div>
    </WeaTop>);
  }
}