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

import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import CustomTable from "../../components/customTable";
import { columns } from "./columns";
import GenerateModal from "./generateModal";
import moment from "moment";

const { MonthPicker } = DatePicker;

@inject("declareStore", "taxAgentStore")
@observer
export default class Declare extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      declarationModalVisible: false,
      startDate: moment(new Date()).startOf("year").format("YYYY-MM"),
      endDate: moment(new Date())
        .startOf("month")
        .format("YYYY-MM")
    };
    this.searchParams = { current: 1 };
    this.pageInfo = { current: 1, pageSize: 10 };
    columns.map((item) => {
      if (item.dataIndex == "cz") {
        item.render = (text, record) => {
          return (
            <a
              onClick={() => {
                window.open(
                  "/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=" +
                  record.id
                );
              }}>
              查看
            </a>
          );
        };
      }
    });
  }

  componentWillMount() {
    const {
      taxAgentStore: { getTaxAgentSelectListAsAdmin },
      declareStore: { getDeclareList }
    } = this.props;
    this.searchParams = {
      fromSalaryMonthStr: this.state.startDate,
      endSalaryMonthStr: this.state.endDate,
      current: 1
    };
    getDeclareList(this.searchParams);
    getTaxAgentSelectListAsAdmin();
  }

  // 日期区间改变事件
  handleRangePickerChange(type, value) {
    const {
      declareStore: { getDeclareList }
    } = this.props;
    this.setState({
      [type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM")
    }, () => {
      this.pageInfo.current = 1;
      const { startDate: fromSalaryMonthStr, endDate: endSalaryMonthStr } = this.state;
      getDeclareList({
        fromSalaryMonthStr,
        endSalaryMonthStr,
        ...this.pageInfo
      });
    });
  }

  // 查询列表
  handleSearch() {
    this.setState({ declarationModalVisible: false }, () => {
      const { declareStore } = this.props;
      const { getDeclareList } = declareStore;
      this.searchParams = {
        fromSalaryMonthStr: this.state.startDate,
        endSalaryMonthStr: this.state.endDate,
        current: 1
      };
      getDeclareList(this.searchParams);
    });
  }

  getColumns() {
    const {
      declareStore: { listColumns }
    } = this.props;
    let columns = [...listColumns];
    columns.push({
      title: "操作",
      dataIndex: "operate",
      render: (text, record) => {
        return (
          <a
            onClick={() => {
              window.open(
                "/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=" +
                record.id
              );
            }}>
            查看
          </a>
        );
      }
    });
    return columns;
  }

  handleDataPageChange(value) {
    const {
      declareStore: { getDeclareList }
    } = this.props;
    this.searchParams = {
      fromSalaryMonthStr: this.state.startDate,
      endSalaryMonthStr: this.state.endDate,
      current: value
    };
    getDeclareList(this.searchParams);
  }

  handleShowSizeChange(pageInfo) {
    const {
      declareStore: { getDeclareList }
    } = this.props;
    this.searchParams = {
      fromSalaryMonthStr: this.state.startDate,
      endSalaryMonthStr: this.state.endDate,
      ...pageInfo
    };
    getDeclareList(this.searchParams);
  }

  render() {
    const { declareStore, taxAgentStore: { showOperateBtn } } = this.props;
    const {
      loading,
      hasRight,
      form,
      condition,
      tableStore,
      showSearchAd,
      getTableDatas,
      doSearch,
      setShowSearchAd,
      listDataSource,
      listColumns,
      pageInfo
    } = declareStore;

    if (!hasRight && !loading) {
      // 无权限处理
      return renderNoright();
    }

    const rightMenu = [
      // 右键菜单
      // {
      //   key: "BTN_COLUMN",
      //   icon: <i className="icon-coms-Custom"/>,
      //   content: "显示列定制",
      //   onClick: this.showColumn
      // }
    ];
    const collectParams = {
      // 收藏功能配置
      favname: "个税申报表",
      favouritetype: 1,
      objid: 0,
      link: "wui/index.html#/ns_demo03/index",
      importantlevel: 1
    };

    const renderRightOperation = () => {
      const { startDate, endDate } = this.state;
      return (
        <div style={{ display: "inline-block" }}>
          <MonthPicker
            value={startDate}
            disabledDate={(current) => {
              return current && endDate && current.getTime() > new Date(endDate).getTime();
            }}
            format="YYYY-MM"
            onChange={(val) => this.handleRangePickerChange("startDate", val)}
          />
          <span className="to" style={{ margin: "0 10px" }}>至</span>
          <MonthPicker
            value={endDate}
            disabledDate={(current) => {
              return current && startDate && current.getTime() < new Date(startDate).getTime();
            }}
            format="YYYY-MM"
            onChange={(val) => this.handleRangePickerChange("endDate", val)}
          />
          {
            showOperateBtn &&
            <Button
              type="primary"
              style={{ marginLeft: "10px", position: "relative", top: "-2px" }}
              onClick={() => {
                this.setState({ declarationModalVisible: true });
              }}>
              生成申报单
            </Button>
          }
        </div>
      );
    };

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaTop
          title="个税申报表" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
          dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
          dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
          <CustomTab searchOperationItem={renderRightOperation()}/>
          <CustomTable
            loading={loading}
            columns={this.getColumns()}
            dataSource={listDataSource}
            pagination={{
              onChange: (value) => {
                this.handleDataPageChange(value);
              },
              total: pageInfo.total,
              showTotal: (total) => `共 ${total} 条`,
              current: pageInfo.pageNum
            }}
          />
        </WeaTop>
        {this.state.declarationModalVisible && (
          <GenerateModal
            onGenerate={() => {
              this.handleSearch();
            }}
            visible={this.state.declarationModalVisible}
            onCancel={() => {
              this.setState({ declarationModalVisible: false });
            }}
          />
        )}
      </div>
    );
  }
}