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')
@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 { declareStore : {getDeclareList} } = this.props;
    this.searchParams = {
      fromSalaryMonthStr: this.state.startDate,
      endSalaryMonthStr: this.state.endDate,
      current: 1
    }
    getDeclareList(this.searchParams)
  }

  // 日期区间改变事件
  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() {
    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()
                }
            />

            <CustomPaginationTable 
              loading={loading}
              columns={this.getColumns()}
              dataSource={listDataSource}
              total={pageInfo.total}
              current={pageInfo.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)
              }}
            />

          </WeaTop>
        </WeaRightMenu>
        {
          this.state.declarationModalVisible && <GenerateModal 
          onGenerate={() => {this.handleSearch()}}
          visible={this.state.declarationModalVisible}
          onCancel={() => {this.setState({declarationModalVisible: false})}}
          />
        }
      </div>
    )
  }
}