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

import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";

import { Button, Table, DatePicker } from "antd";

import {
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaRangePicker,
  WeaTable,
  WeaDatePicker,
} from "ecCom";

import { renderNoright, getSearchs } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import ContentWrapper from "../../components/contentWrapper";
import CustomTable from "../../components/customTable";
import CustomPaginationTable from "../../components/customPaginationTable";

import { columns, dataSource } from "./columns";
import GenerateModal from "./generateModal";
import moment from "moment";

const { RangePicker } = 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())
        .subtract(3, "months")
        .startOf("month")
        .format("YYYY-MM"),
      endDate: moment(new Date())
        .subtract(-3, "months")
        .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: { fetchTaxAgentOption },
      declareStore: { getDeclareList },
    } = this.props;
    this.searchParams = {
      fromSalaryMonthStr: this.state.startDate,
      endSalaryMonthStr: this.state.endDate,
      current: 1,
    };
    getDeclareList(this.searchParams);
    fetchTaxAgentOption();
  }

  // 日期区间改变事件
  handleRangePickerChange(value) {
    let range = value.map((item) => moment(item).format("YYYY-MM"));
    const {
      declareStore: { getDeclareList },
    } = this.props;
    this.setState({
      startDate: range[0],
      endDate: range[1],
    });
    this.pageInfo.current = 1;
    getDeclareList({
      fromSalaryMonthStr: range[0],
      endSalaryMonthStr: range[1],
      ...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 } = 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 adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>
        重置
      </Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>
        取消
      </Button>,
    ];

    const topTab = [];

    const renderRightOperation = () => {
      return (
        <div style={{ display: "inline-block" }}>
          <RangePicker
            picker="month"
            format="yyyy-MM"
            defaultValue={[this.state.startDate, this.state.endDate]}
            onChange={(value) => this.handleRangePickerChange(value)}
          />

          <Button
            type="primary"
            style={{ marginLeft: "10px" }}
            onClick={() => {
              this.setState({ declarationModalVisible: true });
            }}>
            生成申报单
          </Button>
        </div>
      );
    };

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
          <WeaTop
            title="个税申报表" // 文字
            icon={<i className="icon-coms-meeting" />} // 左侧图标
            iconBgcolor="#F14A2D" // 左侧图标背景色
            showDropIcon={true} // 是否显示下拉按钮
            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>
        </WeaRightMenu>
        {this.state.declarationModalVisible && (
          <GenerateModal
            onGenerate={() => {
              this.handleSearch();
            }}
            visible={this.state.declarationModalVisible}
            onCancel={() => {
              this.setState({ declarationModalVisible: false });
            }}
          />
        )}
      </div>
    );
  }
}